Inspector でバインディングを作成する

Version: 2021.3+

この例では、カスタム Inspector、カスタムエディター、およびシリアル化されたオブジェクトの間のバインディングを作成する方法を紹介します。

例の概要

この例では、以下を作成します。

• ゲームオブジェクトの名前と USS トランスフォームのスケールに紐づけられた 2 つのフィールドを持つカスタム Inspector UI コンポーネント
• InspectorElement 内に同じバインディングを作成するカスタムエディターウィンドウ

この例で作成するファイルの完成版が GitHub リポジトリにあります。

必要な要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下の点を理解しておいてください。

• ビジュアルツリー
• UXML
• USS
• CreateInspectorGUI
• InspectorElement

カスタム Inspector コンポーネントを定義する

TankScript という名前のカスタム Inspector UI クラスを定義し、USS でスタイルを設定して、UXML でビジュアル要素とバインディングパスを設定します。

1. Project ウィンドウで create-a-binding-inspector という名前のフォルダーを作成し、ファイルを保存します。

2. TankScript.cs という名前の C# スクリプトを作成し、そのコンテンツを以下のように置き換えます。

   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);
       }
   }
   

3. create-a-binding-inspector フォルダーに、Editor という名前のフォルダーを作成します。

4. Editor フォルダー内に tank_inspector_styles.uss という名前の 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);
   }
   

5. tank_inspector_uxml.uxml という名前の UXML ファイルを作成し、そのコンテンツを以下のように置き換えます。

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

バインディングを使って Inspector UI を作成する

TankScript 用のカスタム Inspector を登録する C# スクリプトを作成します。Inspector ウィンドウでのバインディングは暗示的であるため、Bind() メソッドを呼び出す必要はありません。

1. TankEditor.cs という名前の C# スクリプトを作成し、そのコンテンツを以下のように置き換えます。

   using UnityEditor;
   using UnityEngine;
   using UnityEngine.UIElements;
   
   [CustomEditor(typeof(TankScript))]
   public class TankEditor : Editor
   {
       [SerializeField]
       VisualTreeAsset visualTree;
   
       public override VisualElement CreateInspectorGUI()
       {
           var uxmlVE = visualTree.CloneTree();
           return uxmlVE;
       }
   }
   

2. Project ウィンドウで TankEditor.cs を選択します。

3. Inspector で tank_inspector_uxml.uxml をビジュアルツリーにドラッグします。

4. Inspector で tank_inspector_styles.uss をスタイルシートにドラッグします。

最初のバインディングをテストする

1. Unity で、空のゲームオブジェクトをシーンに追加します。
2. ゲームオブジェクトを選択し、TankScript.cs を Inspector の Add Component にドラッグすると、Inspector に Tank Script コンポーネントが生成されます。
3. Tank Script では、Tank Name フィールドで Tank の名前を変更し、Tank Size ボックスで Transform のスケール値を変更することができます。

InspectorElement とのバインド

TankScript オブジェクトにバインドされた 2 つのフィールドがあるカスタムエディターウィンドウを作成します。InspectorElement コンストラクターを呼び出す C# スクリプトを作成します。InspectorElement によって UI が作成され、その UI はオブジェクトに自動的にバインドされます。

1. SimpleBindingExampleInspectorElement.cs という名前の C# ファイルを作成し、そのコンテンツを以下のように置き換えます。

   using UnityEditor;
   using UnityEngine;
   using UnityEditor.UIElements;
       
   namespace UIToolkitExamples
   {
       public class SimpleBindingExampleInspectorElement : EditorWindow
       {
           [MenuItem("Window/UIToolkitExamples/Simple Binding Example Inspector Element")]
           public static void ShowDefaultWindow()
           {
               var wnd = GetWindow<SimpleBindingExampleInspectorElement>();
               wnd.titleContent = new GUIContent("Simple Binding with Inspector Element");
           }
       
           TankScript m_Tank;
           public void OnEnable()
           {
               m_Tank = FindObjectOfType<TankScript>();
               if (m_Tank == null)
                   return;
       
               var inspector = new InspectorElement(m_Tank);
               rootVisualElement.Add(inspector);
           }
       }
   }
   

2 つ目のバインディングをテストする

1. Unity で Window > UIToolkitExamples > Simple Binding Example Inspector Element を選択します。
2. エディターウィンドウでフィールドの値を変更すると、Inspector の値が変わります。また、逆もまた同様です。

追加リソース

• SerializedObject のデータバインディング
• バインド可能な要素
• バインドするデータ型の変換
• 実装に関する詳細
• バインディングの例