🫥

UI Toolkit インスペクター拡張スクリプトとUXMLの紐付け

2023/09/13に公開

Unity

uitoolkit

tech

1. UI Toolkitとは

UI Toolkitは、ユーザーインターフェース（UI）を開発するための機能、リソース、ツールのコレクションです。UI
Toolkitを使用して、Unity Editor用のカスタムUIや拡張機能、ランタイムデバッグツール、ゲームやアプリケーションのランタイムUIを開発できます。

UI Toolkitは、標準的なWeb技術に触発されています。Webページやアプリケーションを開発した経験があれば、知識は移行可能であり、コアコンセプトはなじみがあります。

Unity - Manual: UI Toolkit より

2. できるもの

空のインスペクター

空のインスペクターを作成するために、インスペクター拡張のスクリプトとUXMLを紐付ける必要があります。
この紐付け方を2種類紹介します。

ハードコーディング
ファイルへの参照

主に利用するのは ファイルへの参照 がよいです。

3. 環境

Unity 2022.3.5f1

4. インスペクター拡張を作成するMonoBehaviour

Script

using UnityEngine;

public class Car : MonoBehaviour
{
    public string m_Make = "Toyota";
    public int m_YearBuilt = 1980;
    public Color m_Color = Color.black;
}

インスペクター

5. インスペクター拡張とUXMLの作成

Create > Folder から Editor フォルダを作成
Editor フォルダで Create > C# Script から CarInspector を作成

CarInspector を下記のコードにする

using UnityEditor;
using UnityEngine.UIElements;

[CustomEditor(typeof(Car))]
public class CarInspector : Editor
{
    public override VisualElement CreateInspectorGUI()
    {
        var rootElement = new VisualElement();

        return rootElement;
    }
}

Create > UI Toolkit > UI Document から CarInspectorUXML を作成

6. インスペクター拡張のスクリプトとUXMLを紐付け

上記で作成したインスペクター拡張のスクリプトとUXMLを紐付ける必要があります。
この紐付け方法として下記の2種類あります。

ハードコーディング
ファイルへの参照

この2種類について紹介します。
主に利用するのは ファイルへの参照 がよいです。

ハードコーディング

using UnityEditor;
using UnityEngine.UIElements;

[CustomEditor(typeof(Car))]
public class CarInspector : Editor
{
    public override VisualElement CreateInspectorGUI()
    {
        var rootElement = new VisualElement();
	
	var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/CarInspector.uxml");    // ハードコーディング
        visualTree.CloneTree(rootElement);

        return rootElement;
    }
}

UXMLをハードコーディングした方法です。
AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/CarInspector.uxml") でスクリプトの中にUXMLのパスをハードコーディングします。
この場合、UXMLのパスの変更や、ファイル名の変更があった場合に動かなくなるので気を付けてください。

ファイルへの参照

using UnityEditor;
using UnityEngine.UIElements;

[CustomEditor(typeof(Car))]
public class CarInspector : Editor
{
    public VisualTreeAsset _InspectorXML;    // ファイルへの参照

    public override VisualElement CreateInspectorGUI()
    {
        var rootElement = new VisualElement();

        _InspectorXML.CloneTree(rootElement);

        return rootElement;
    }
}

ファイルへの参照した方法です。
public VisualTreeAsset _InspectorXML; でUXMLファイルを外部から指定します。
外部から指定するので、追加で下記の紐付けの操作が必要です。
この場合、GUIDを用いてファイルの参照が設定されます。このためUXMLのパスの変更や、ファイル名の変更があった場合でも参照が外れることはありません。