【Unity】【UI Toolkit】バインディング機能を使ってカスタムInspectorを作る方法

UnityのUI Toolkitで、バインディング機能を使ってカスタムInspectorを作る方法についてまとめました。

はじめに
UI（UXMLファイル）を作る
CustomEditorを作る
スクリプトにUXMLをアサイン
動作確認
参考

Unity 2021.3.16

はじめに

UI Toolkitでは、UIをシリアライズされた値とバインドする仕組みを使って手軽にInspectorを作ることができます。
本記事ではこの方法についてまとめます。

まず準備として、適当なコンポーネントを一つ作っておきます。
これのInspectorをUI Toolkitを使って作ることを本記事の目標とします。

using UnityEngine;

public sealed class Example : MonoBehaviour
{
    [SerializeField] private int frameCount;
    [SerializeField] private float deltaTime;

    public void Update()
    {
        frameCount++;
        deltaTime = Time.deltaTime;
    }
}

UI（UXMLファイル）を作る

まずframeCountとdeltaTimeを表示するためのUI（UXMLファイル）を作成します。
またその際、それぞれのUIのBinding Pathに表示する要素の変数名（frameCountとdeltaTime）を入力しておきます。
今回はUI Builderでこんな感じに作成しました。

CustomEditorを作る

つぎに、Editorを継承したクラスでCreateInspectorGUIをオーバーライドし、その中でVisualTreeAssetからVisualElementを生成します。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(Example))]
public sealed class ExampleEditor : Editor
{
    [SerializeField] private VisualTreeAsset layout;

    public override VisualElement CreateInspectorGUI()
    {
        var container = layout.CloneTree();
        return container;
    }
}