バインド可能なカスタムコントロールの作成

バージョン: 2021.3 以降

この例では、カスタムエディターウィンドウでバインド可能なカスタムコントロールを作成する方法を説明します。

例の概要

この例では、double データ型のプロパティにバインドされるカスタムコントロールを作成します。この例は、文字列や整数などの他のデータ型のプロパティにバインドするように変更することができます。

この例で作成するすべてのファイルは、GitHub リポジトリ にあります。

要件

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

• UI Builder
• ビジュアルツリー
• UXML
• SerializedObject のデータバインディング

カスタムコントロールクラスの作成

カスタムコントロールを定義する C# クラスを作成します。

1. 任意のテンプレートで Unity プロジェクトを作成します。

2. ファイルを保存するために ExampleField という名前のフォルダーを作成します。

3. ExampleField フォルダーに、ExampleField.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

   using UnityEngine.UIElements;
   
   namespace UIToolkitExamples
   {
       // ExampleField inherits from BaseField with the double type. Therefoe, the ExampleField's underlying value is a double.
       public class ExampleField : BaseField<double>
       {
           // We can provide the existing BaseFieldTraits class as a type parameter for UxmlFactory, and this means we
           // don't need to define our own traits class or override its Init() method. We do, however, need to provide it
           // However, you must provide the value type (double) and its attribute description type:
           // (UxmlDoubleAttributeDescription).
           public new class UxmlFactory :
               UxmlFactory<ExampleField, BaseFieldTraits<double, UxmlDoubleAttributeDescription>> { }
   
           Label m_Input;
   
           // Default constructor is required for compatibility with UXML factory
           public ExampleField() : this(null)
           {
   
           }
   
           // Main constructor accepts label parameter to mimic BaseField constructor.
           // Second argument to base constructor is the input element, the one that displays the value this field is
           // bound to.
           public ExampleField(string label) : base(label, new Label() { })
           {
               // This is the input element instantiated for the base constructor.
               m_Input = this.Q<Label>(className: inputUssClassName);
           }
   
           // SetValueWithoutNotify needs to be overridden by calling the base version and then making a change to the
           // underlying value be reflected in the input element.
           public override void SetValueWithoutNotify(double newValue)
           {
               base.SetValueWithoutNotify(newValue);
   
               m_Input.text = value.ToString("N");
           }
       }
   }
   

UXML ファイルでカスタムコントロールを使用する

1. ExampleField フォルダーに、ExampleField.uxml という名前の UI ドキュメントを作成します。

2. ExampleField.uxml をテキストエディターで開き、そのコンテンツを以下のように置き換えます。

   <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:example="UIToolkitExamples">
       <example:ExampleField label="Binding Target" binding-path="m_Value" />
   </ui:UXML>
   

3. Unity で、 ExampleField.uxml をダブルクリックして、UI Builder で開きます。ExampleField が Hierarchy ウィンドウに表示され、Viewport に可視化されます。Hierarchy ウィンドウで ExampleField を選択すると、Inspector ウィンドウに Binding Path と Label ボックスに割り当てられた値が表示されます。

バインディングターゲット用のクラスとカスタムエディターを作成する

1. ExampleField フォルダーに、ExampleFieldComponent.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

   using UnityEngine;
   
   namespace UIToolkitExamples
   {
       public class ExampleFieldComponent : MonoBehaviour
       {
           [SerializeField]
           double m_Value;
       }
   }
   

2. ExampleField フォルダーに、Editor という名前のフォルダーを作成します。

3. Editor フォルダーに、ExampleFieldCustomEditor.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

   using UnityEditor;
   using UnityEngine.UIElements;
   using UnityEngine;
   
   namespace UIToolkitExamples
   {
       [CustomEditor(typeof(ExampleFieldComponent))]
       public class ExampleFieldCustomEditor : Editor
       {
           [SerializeField]
           VisualTreeAsset m_Uxml;
   
           public override VisualElement CreateInspectorGUI()
           {
               var parent = new VisualElement();
   
               m_Uxml?.CloneTree(parent);
   
               return parent;
           }
       }
   }
   

4. Unity の Project ウィンドウで ExampleFieldCustomEditor.cs を選択します。

5. `ExampleField.uxml を Inspector ウィンドウの Uxml ボックスにドラッグします。

例のテスト

1. Unity で、空のゲームオブジェクトをシーンに加えます。
2. ゲームオブジェクトに ExampleFieldComponent コンポーネントを加えます。カスタムコントロールは、Binding Target (バインディングターゲット) のデフォルト値 0 で Inspector に表示されます。基礎となる double プロパティの値を変更すると、UI にその変更が反映されます。

その他の参考資料

• カスタムコントロール