Version: 2021.3
言語: 日本語
Inspector でバインディングを作成する
UXML テンプレートへバインドする

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

バージョン: 2021.3 以降

この例は UXML の BindableElement の binding-path 属性を使用して、フィールドをSerializedObject のネスト上のプロパティにバインドする方法を紹介します。

例の概要

この例では、以下のようなカスタム Inspector UI を作成します。

  • ゲームオブジェクトの名前と USS トランスフォームのスケールにバインドする 2 つのフィールド
  • SerializedObject のネスト状のプロパティにバインドする 2 つのフィールド

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

要件

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. You are recommended to have a basic understanding of the following:

破壊可能なタンクオブジェクトを作成する

C# スクリプトを作成し、health (ヘルス) 値を持つ戦車のクラスを定義し、戦車を破壊可能にします。

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

  2. Project ウィンドウに bind-nested-properties という名前のフォルダーを作成し、すべてのファイルを保存します。

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

    using System;
    using UnityEngine;
    using UnityEngine.Serialization;
    
    [Serializable]
    public struct Health
    {
        public int armor;
        public int life;
    }
    
    [ExecuteInEditMode]
    public class DestructibleTankScript : MonoBehaviour
    {
        public string tankName = "Tank";
        public float tankSize = 1;
    
        public Health health;
    
        private void Update()
        {
            gameObject.name = tankName;
            gameObject.transform.localScale = new Vector3(tankSize, tankSize, tankSize);
        }
    
        public void Reset()
        {
            health.armor = 100;
            health.life = 10;
        }
    }
    

UXML と Inspector の UI を作成する

BindableElement を含む UXML ファイルを作成します。BindableElement の binding-pathhealth プロパティに設定し、BindableElement の各子要素の binding-pathhealtharmor プロパティと life プロパティに設定してください。

  1. bind-nested-properties フォルダーに、Editor という名前のフォルダーを作成します。

  2. 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);
    }
    
  3. destructible_tank_editor.uxml という名の UI ドキュメントを作成し、そのコンテンツを以下に置き換えます。

    <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" />
            <BindableElement binding-path="health">
                <ue:PropertyField binding-path="armor"/>
                <ue:PropertyField binding-path="life"/>
            </BindableElement>
        </VisualElement>
    </UXML>
    

カスタムエディターの作成

DestructibleTankScript のカスタムエディターを登録する C# スクリプトを作成します。

  1. DestructibleTankEditor.cs という名の C# スクリプトを作成し、そのコンテンツを以下のものに置き換えます。

    using UnityEditor;
    using UnityEngine;
    using UnityEngine.UIElements;
    
    [CustomEditor(typeof(DestructibleTankScript))]
    public class DestructibleTankEditor : Editor
    {
        [SerializeField]
        VisualTreeAsset visualTreeAsset;
    
        public override VisualElement CreateInspectorGUI()
        {
            return visualTreeAsset.CloneTree();
        }
    }
    
  2. Project ウィンドウで DestructibleTankEditor.cs を選択します。

  3. Inspector で destructible_tank_editor.uxmlビジュアルツリーアセット にドラッグします。

バインディングのテスト

  1. Unity で、空のゲームオブジェクトをシーンに加えます。
  2. ゲームオブジェクトを選択します
  3. Inspector に Destructible Tank Script コンポーネントを加えます。ArmorLife フィールドは、 health.armorhealth.life プロパティにバインドされます。Inspector でその値を変更すると、元となるプロパティの値も変更されます。

その他の参考資料

Inspector でバインディングを作成する
UXML テンプレートへバインドする