バインディングの目的は、オブジェクト内のプロパティを表示可能な UI に同期することです。バインディングとは、プロパティとそれを変更するビジュアルコントロールの間のリンク (紐づけ) を指します。
バインディングは、オブジェクトと、BindableElement から派生した UIElement、または IBindable インターフェースを実装した UIElement の間で行われます。
UnityEditor.UIElements
名前空間から
基本クラス
コントロール
UnityEngine.UIElements
名前空間から
基本クラス
Controls
バインディングは、上記の名前空間の 1 つからコントロールを使用する際に、以下の手順で行います。
以下のコードスニペットは C# コードとのバインディングの方法を示しています。このスニペットを使用するには、プロジェクトのエディターフォルダーに C# ファイルとしてこのサンプルを保存します。C# ファイルを SimpleBindingExample.cs
と名づけます。
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)
{
// シリアライズしたオブジェクトを作成
SerializedObject so = new SerializedObject(selectedObject);
// 階層のルートにバインドします。それによりバインドする適切なオブジェクトが見つかります...
rootVisualElement.Bind(so);
// ... または、TextField 自体にバインドします
// m_ObjectNameBinding.Bind(so);
}
else
{
// 実際のビジュアル要素からオブジェクトのバインドを解除
rootVisualElement.Unbind();
// m_ObjectNameBinding.Unbind();
// バインディングの削除後に TextField を除去
m_ObjectNameBinding.value = "";
}
}
}
}
Unity で、Window > UIElementsExamples > Simple Binding Example を選択します。このウィンドウを使用してシーンのゲームオブジェクトを選択し、表示された TextField でその名前を変更できます。
このセクションでは、UXML 階層の設定を通してバインディングの使用法を説明します。
UXML では、属性 binding-path
は TextField コントロールで定義されます。binding-path
が、コントロールをオブジェクトの実効プロパティにバインドします。
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>
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)
{
// シリアライズされたオブジェクトを作成
SerializedObject so = new SerializedObject(selectedObject);
// 階層のルートにバインドします。それによりバインドする適切なオブジェクトが見つかります...
rootVisualElement.Bind(so);
}
else
{
// 実際のビジュアル要素からオブジェクトのバインドを解除
rootVisualElement.Unbind();
// バインディングの削除後に TextField を除去
// (Q() が null を返す場合は、このコードは安全ではありません)
rootVisualElement.Q<TextField>("GameObjectName").value = "";
}
}
}
}
InspectorElement
はインスペクターの UIElement です。つまり、特定のタイプの Unity オブジェクトです。InspectorElement
を使用してオブジェクトを確認すると、以下の利点があります。
別の簡単なバインディングの例は Assets/Editor/SimpleBindingExample.cs
にあり、使用例とプロセスの概要を紹介しています。
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);
}
}
}
このコードは TankScript
スクリプトを参照し、InspectorElement
を使用します。TankScript
スクリプトは、ゲームオブジェクトに割り当てられた MonoBehaviour の例です。
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);
}
}
InspectorElement は、特定の UI でカスタマイズされています。これは、TankEditor
スクリプトを使用して実行されます。TankEditor
スクリプトは、TankScript
型のカスタムエディターを定義します。TankEditor
スクリプトは、階層に UXML ファイルを使用し、USS ファイルを使用してインスペクターのスタイルを設定します。
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;
}
}
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>
UXMLファイル tank_inspector_uxml.uxml
はバインディングを指定します。具体的には、各 PropertyFields
タグの各 binding-path
属性が、バインドするプロパティに設定されます。UI に表示される要素は、バインドされた各プロパティのタイプに基づいています。
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);
}
USS ファイル tank_inspector_styles.uss
は、各要素のスタイルを定義します。
以下の表は、PropertyField でサポートされているフィールドの一覧です。各フィールドにはデータ型が含まれます。
フィールド | 型 |
---|---|
BoundsField | Bounds |
BoundsIntField | BoundsInt |
ColorField | Color |
CurveField | AnimationCurve |
FloatField | float |
GradientField | Gradient |
IntegerField | int |
IntegerField | int (ArraySize 用) |
LayerMaskField | unit |
ObjectField | UnityEngine.Object |
PopupField<string> | Enum |
RectField | Rect |
RectIntField | RecInt |
TextField | string |
TextField (maxLength=1) | char |
Toggle | bool |
Vector2Field | Vector2 |
Vector2IntField | Vector2Int |
Vector3Field | Vector3 |
Vector3IntField | Vector3Int |
Vector4Field | Vector4 |
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.