Привязка к вложенным свойствам

Версия: 2021.3+

В этом примере показано, как использовать атрибут binding-path BindableElement в UXML для привязки полей к вложенным свойствам SerializedObject.

Примерный обзор

В этом примере создается пользовательский Inspector UI со следующими параметрами:

Два поля, которые связываются с именем GameObject и масштабом преобразования USS
Два поля, которые связываются с вложенными свойствами SerializedObject

Пользовательское Inspector для скрипта, в котором есть поля, сопоставляемые GameObjects и SerializedObjects.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

Создание уничтожаемого объекта танка

Создайте скрипт C#, описывающий класс танка со значениями здоровья, чтобы его можно было уничтожить.

Создайте проект в Unity с любым шаблоном.
В окне Project создайте папку bind-nested-properties для хранения всех файлов.

Создайте скрипт C# с именем DestructibleTankScript.cs и замените его содержимое следующим:

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

Создать UXML файл с BindableElement. Установить BindableElement’s binding-path к Генеральной Ассамблее health свойство и установить каждого дочернего элемента binding-path 1998 года BindableElement к Генеральной Ассамблее armor и life свойства health.

В папке bind-nested-properties создайте папку Editor.

В папке Редактор создайте файл USS с именем tank_inspector_styles.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);
}

Создайте документ UI с именем destructible_tank_editor.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" />
        <BindableElement binding-path="health">
            <ue:PropertyField binding-path="armor"/>
            <ue:PropertyField binding-path="life"/>
        </BindableElement>
    </VisualElement>
</UXML>

Создание пользовательского редактора

Создайте скрипт C#, который регистрирует пользовательский Редактор для DestructibleTankScript.

Создайте скрипт C# с именем DestructibleTankEditor.cs и замените его содержимое следующим:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(DestructibleTankScript))]
public class DestructibleTankEditor : Editor
{
    [SerializeField]
    VisualTreeAsset visualTreeAsset;

    public override VisualElement CreateInspectorGUI()
    {
        return visualTreeAsset.CloneTree();
    }
}

Выберите DestructibleTankEditor.cs в окне Project.
Перетащите destructible_tank_editor.uxml в Визуальное дерево актива в Inspector.

Проверка привязки

В Unity добавьте пустой GameObject в сцену.
Выберите GameObject.
Добавьте компонент Destructible Tank Script в Inspector. Поля Armor и Life связаны со свойствами health.armor и health.life. Если вы измените значения в Inspector, изменятся значения базовых свойств.