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

バージョン: 2021.3 以降

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

例の概要

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

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

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

要件

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

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

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

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

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

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

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

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() メソッドを呼び出す必要はありません。

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

Project ウィンドウで TankEditor.cs を選択します。
Inspector で tank_inspector_uxml.uxml を ビジュアルツリー にドラッグします。
Inspector で tank_inspector_styles.uss を スタイルシート にドラッグします。

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

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

`InspectorElement` を使ってバインドする

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

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 つ目のバインディングをテストする

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

その他の参考資料

UXML と C# スクリプトを使ったバインディング

ネスト状のプロパティにバインドする