Bindings

Tujuan mengikat adalah untuk menyinkronkan sifat dalam objek ke UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary yang terlihat. A binding mengacu pada tautan antara properti dan kontrol visual yang mengubahnya.

Mengikat dilakukan antara objek dan UIElement mana pun yang berasal dari BindableElement atau mengimplementasikan antarmuka IBindable.

Dari ruang nama UnityEditor.UIElements:

Base Class:

• Login Login
• BasePopupField
• CompoundFields
• TextValueField

Controls:

• InspectorElement
• Login Login
• BoundsField
• BoundsIntField
• ColorField
• CurveField
• DoubleField
• EnumField
• FloatField
• GradientField
• IntegerField
• LayerField
• LayerMaskField
• LongField
• MaskField
• ObjectField
• PopupField
• RectField
• RectIntField
• TagField
• Vektor2Field
• Vektor2IntField
• Vektor3Field
• Vektor3IntField
• Vektor4Field

Dari ruang nama UnityEngine.UIElements:

Base Class

• BaseField
• BaseSlider
• TextInputBaseField
• TemplateContainer

Controls

• Foldout
• MinMaxSlider
• Slider
• SliderInt
• TextField
• Toggle

Mengikat dilakukan dengan mengikuti langkah-langkah ini sambil menggunakan Kontrol dari salah satu ruang nama yang tercantum di atas.

1. Dalam Kontrol, tentukan tali pengikatan dari antarmuka IBindable sehingga UI tahu properti yang mengikat. Anda dapat melakukan ini di C# atau di UXML. Contoh masing-masing disediakan nanti dalam topik ini.
2. Buat Serialized Objek untuk objek yang terikat.
3. Bind objek ini untuk Kontrol atau salah satu orang tuanya.

Mengikat dengan C#

Potongan kode berikut menunjukkan cara membuat mengikat dengan kode C #. Untuk menggunakan cuplikan ini, simpan contoh ini sebagai file C# dalam folder editor, dalam proyek Anda. Nama file C# SimpleBindingExample.cs.

Kandungan SimpleBindingExample.cs:

using UnityEditor;
using UnityEngine;
using UnityEditor.UIElements;
using UnityEngine.UIElements;

namespace UIElementsExamples
{
   public class SimpleBindingExample : EditorWindow
   {
       TextField m_ObjectNameBinding;

       [MenuItem("Window/UIElementsExamples/Simple Binding Example")]
       public static void ShowDefaultWindow()
       {
           var wnd = GetWindow<SimpleBindingExample>();
           wnd.titleContent = new GUIContent("Simple Binding");
       }

       public void OnEnable()
       {
           var root = this.rootVisualElement;
           m_ObjectNameBinding = new TextField("Object Name Binding");
           m_ObjectNameBinding.bindingPath = "m_Name";
           root.Add(m_ObjectNameBinding);
           OnSelectionChange();
       }

       public void OnSelectionChange()
       {
           GameObject selectedObject = Selection.activeObject as GameObject;
           if (selectedObject != null)
           {
               // Create serialization object
               SerializedObject so = new SerializedObject(selectedObject);
               // Bind it to the root of the hierarchy. It will find the right object to bind to...
               rootVisualElement.Bind(so);

               // ... or alternatively you can also bind it to the TextField itself.
               // m_ObjectNameBinding.Bind(so);
           }
           else
           {
               // Unbind the object from the actual visual element
               rootVisualElement.Unbind();

               // m_ObjectNameBinding.Unbind();

               // Clear the TextField after the binding is removed
               m_ObjectNameBinding.value = "";
           }
       }
   }
}

Di Unity, pilih Window > UIElementsExamples > Simple Binding Example. Anda dapat menggunakan jendela ini untuk memilih GameObject di tempat kejadian Anda dan memodifikasi namanya dengan gambar yang ditampilkan.

Mengikat dengan UXML

Bagian ini menunjukkan cara menggunakan mengikat melalui set-up hierarki UXML.

Di UXML, atribut binding-path didefinisikan dalam TextField controlKontrol TextField menampilkan bagian teks non-interaktif ke pengguna, seperti pembatasan, label untuk kontrol GUI lainnya, atau instruksi. More info
Lihat di Glossary. Ini adalah apa yang mengikat kontrol terhadap sifat objek yang efektif.

Kandungan SimpleBindingExample.uxml:

<UXML xmlns:ui="UnityEngine.UIElements">
 <ui:VisualElement name="top-element">
   <ui:Label name="top-label" text="UXML-Defined Simple Binding"/>
   <ui:TextField name="GameObjectName" label="Name" text="" binding-path="m_Name"/>
 </ui:VisualElement>
</UXML>

Kandungan SimpleBindingExample.cs:

using UnityEditor;
using UnityEngine;
using UnityEditor.UIElements;
using UnityEngine.UIElements;


namespace UIElementsExamples
{
   public class SimpleBindingExampleUXML : EditorWindow
   {
       [MenuItem("Window/UIElementsExamples/Simple Binding Example UXML")]
       public static void ShowDefaultWindow()
       {
           var wnd = GetWindow<SimpleBindingExampleUXML>();
           wnd.titleContent = new GUIContent("Simple Binding UXML");
       }

       public void OnEnable()
       {
           var root = this.rootVisualElement;
           var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/SimpleBindingExample.uxml");
           visualTree.CloneTree(root);
           OnSelectionChange();
       }

       public void OnSelectionChange()
       {
           GameObject selectedObject = Selection.activeObject as GameObject;
           if (selectedObject != null)
           {
               // Create serialization object
               SerializedObject so = new SerializedObject(selectedObject);
               // Bind it to the root of the hierarchy. It will find the right object to bind to...
               rootVisualElement.Bind(so);
           }
           else
           {
               // Unbind the object from the actual visual element
               rootVisualElement.Unbind();

               // Clear the TextField after the binding is removed
               // (this code is not safe if the Q() returns null)
               rootVisualElement.Q<TextField>("GameObjectName").value = "";
           }
       }
   }
}

Menggunakan mengikat dalam Inspektur

Sebuah InspectorElement adalah mitra UIElement dari inspectorJendela Unity yang menampilkan informasi tentang Pengaturan GameObject yang dipilih saat ini, aset atau proyek, memungkinkan Anda untuk memeriksa dan mengedit nilai. More info
Lihat di Glossary yang berarti jenis objek Unity tertentu. Menggunakan objek InspectorElement untuk memeriksa memberikan keuntungan berikut:

• Buat UI.
• Secara otomatis mengikat benda dan UI.

Contoh mengikat sederhana lainnya, ditemukan di bawah Assets/Editor/SimpleBindingExample.cs, menyediakan contoh penggunaan dan ikhtisar proses.

Kandungan Assets/Editor/SimpleBindingExample.cs:

using UnityEditor;
using UnityEngine;
using UnityEditor.UIElements;

namespace UIElementsExamples
{
   public class SimpleBindingExampleUXML : EditorWindow
   {
       [MenuItem("Window/UIElementsExamples/Simple Binding Example UXML")]
       public static void ShowDefaultWindow()
       {
           var wnd = GetWindow<SimpleBindingExampleUXML>();
           wnd.titleContent = new GUIContent("Simple Binding UXML");
       }

       TankScript m_Tank;
       public void OnEnable()
       {
           m_Tank = GameObject.FindObjectOfType<TankScript>();
           if (m_Tank == null)
               return;

           var inspector = new InspectorElement(m_Tank);
           rootVisualElement.Add(inspector);
       }
   }
}

Kode ini merujuk script TankScript dan menggunakan InspectorElement. Skrip TankScript adalah contoh MonoBehaviour yang ditugaskan ke GameObjectObjek mendasar dalam adegan Unity, yang dapat mewakili karakter, props, pemandangan, kamera, waypoints, dan banyak lagi. Fungsi GameObject didefinisikan oleh Komponen yang melekat padanya. More info
Lihat di Glossary.

Kandungan Assets/TankScript.cs:

using UnityEngine;

[ExecuteInEditMode]
public class TankScript : MonoBehaviour
{
   public string tankName = "Tank";
   public float tankSize = 1;

   private void Update()
   {
       gameObject.name = tankName;
       gameObject.transform.localScale = new Vector3(tankSize, tankSize, tankSize);
   }
}

Inspektur disesuaikan dengan UI tertentu. Ini dilakukan dengan script TankEditor. TankEditorscript mendefinisikan editor kustom untuk tipe TankScript. TankEditorscript juga menggunakan file UXML untuk hirarki dan file USS untuk memaksa inspektur.

Kandungan Assets/Editor/TankEditor.cs:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(TankScript))]
public class TankEditor : Editor
{
   public override VisualElement CreateInspectorGUI()
   {
       var visualTree = Resources.Load("tank_inspector_uxml") as VisualTreeAsset;
       var uxmlVE = visualTree.CloneTree();
uxmlVE.styleSheets.Add(AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Resources/tank_inspector_styles.uss"));
      return uxmlVE;
   }
}

Ketika menulis inspektur kustom Anda tidak perlu mengikat objek serial ke pohon visual seperti di jendela editor contoh di atas. Langkah ini dilakukan secara implicit setelah selesai metode CreateInspectorGUI. Langkah mengikat otomatis ini hanya dilakukan pada saat itu. Jika Anda menambahkan bidang di luar callback ke metode CreateInspectorGUI, Anda harus mengikatnya secara manual. Jika tidak mungkin gagal untuk membuat atau menghasilkan hasil visual yang tidak ditentukan.

Kandungan Assets/Resources/tank_inspector_uxml.uxml:

<UXML xmlns:ui="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
   <ui:VisualElement name="row" class="container">
       <ui:Label text="Tank Script - Custom Inspector" />
       <ue:PropertyField binding-path="tankName" name="tank-name-field" />
       <ue:PropertyField binding-path="tankSize" name="tank-size-field" />
   </ui:VisualElement>
</UXML>

File UXML, tank_inspector_uxml.uxml menentukan mengikat. Secara khusus, setiap atribut binding-path, untuk setiap tag PropertyFields, ditetapkan ke properti untuk mengikat. Elemen apa yang ditunjukkan dalam UI didasarkan pada jenis masing-masing properti yang terikat.

Kandungan Assets/Resources/tank_inspector_styles.uss:

.container {
   background-color: rgb(80, 80, 80);
   flex-direction: column;
}
Label {
   background-color: rgb(80, 80, 80);
}
TextField:hover {
   background-color: rgb(255, 255, 0);
}
FloatField {
   background-color: rgb(0, 0, 255);
}

File ASS, tank_inspector_styles.uss, menentukan gaya setiap elemen.

Daftar tabel berikut bidang yang didukung oleh PropertyField. Setiap bidang termasuk jenis datanya.

Field	Type
BoundsField	Bounds
BoundsIntField	BoundsInt
ColorField	Color
CurveField	AnimationCurve
FloatField	float
GradientField	Gradient
IntegerField	int
IntegerField	int, untuk ArraySize
LayerMaskField	unit
ObjectField	Login Sitemap
PopupField <string>	Enum
RectField	Rect
RectIntField	RecInt
TextField	string
TeksField, dengan MaxLength=1	char
Toggle	bool
Vektor2Field	Vektor2
Vektor2IntField	Vektor2Int
Vektor3Field	Vektor3
Vektor3IntField	Vektor3Int
Vektor4Field	Vektor4