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

バージョン: 2021.3 以降

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

例の概要

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

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

要件

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

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

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

任意のテンプレートで Unity プロジェクトを作成します。
ファイルを保存するために ExampleField という名前のフォルダーを作成します。

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 ファイルでカスタムコントロールを使用する

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

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

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

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

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

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

using UnityEngine;

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

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

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

Unity の Project ウィンドウで ExampleFieldCustomEditor.cs を選択します。
`ExampleField.uxml を Inspector ウィンドウの Uxml ボックスにドラッグします。

例のテスト

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

その他の参考資料

カスタムコントロール

スライドトグルカスタムコントロールの作成

カスタムコントロールのカスタムスタイルを作成する