使用 Inspector 创建绑定

版本: 2021.3+

此示例演示了如何在自定义 Inspector一个 Unity 窗口，显示有关当前选定游戏对象、资源或项目设置的信息，允许您检查和编辑值。更多信息
参见术语表、自定义编辑器和序列化对象之间创建绑定。

示例概述

此示例创建以下内容

一个自定义 Inspector UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。更多信息
参见术语表组件，其中包含两个字段，这些字段绑定到 GameObjectUnity 场景中的基本对象，可以表示角色、道具、场景、摄像机、路点等等。游戏对象的功能由附加到它的组件定义。更多信息
参见术语表的名称和 USS 变换的缩放比例。
一个自定义编辑器窗口，在 InspectorElement 内创建相同的绑定。

您可以在此 GitHub 存储库中找到此示例创建的完整文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容

视觉树由轻量级节点组成的对象图，它保存窗口或面板中的所有元素。它定义了您使用 UI 工具包构建的每个 UI。
参见术语表
UXML
USS
CreateInspectorGUI
InspectorElement

定义自定义 Inspector 组件

定义一个名为 TankScript 的自定义 Inspector UI 类，使用 USS 为其设置样式，并在 UXML 中设置 视觉元素视觉树的节点，它实例化或派生自 C# VisualElement 类。您可以设置其外观，定义其行为，并将其作为 UI 的一部分显示在屏幕上。更多信息
参见术语表和绑定路径。

在您的 项目窗口一个显示 Assets 文件夹内容的窗口（项目选项卡）更多信息
参见术语表中，创建一个名为 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

创建一个 C# 脚本，为 TankScript 注册自定义 Inspector。您不需要调用 Bind() 方法，因为 Inspector 窗口中的绑定是隐式的。

创建一个名为 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;
    }
}

在项目窗口中，选择 TankEditor.cs。
将 tank_inspector_uxml.uxml 拖放到 Inspector 中的 视觉树。
将 tank_inspector_styles.uss 拖放到 Inspector 中的 样式表。

测试第一个绑定

在 Unity 中，将一个空的游戏对象添加到场景场景包含您的游戏的环境和菜单。将每个唯一的场景文件视为一个独特的关卡。在每个场景中，您放置您的环境、障碍物和装饰，本质上是分段设计和构建您的游戏。更多信息
参见术语表中。
选择游戏对象，并将 TankScript.cs 拖放到 Inspector 中的 添加组件。这将在 Inspector 中生成 坦克脚本 组件。
在 坦克脚本 中，您可以在 坦克名称 框中更改坦克的名称，并在 坦克大小 框中更改 Transform 的缩放比例值。

使用 `InspectorElement` 绑定

创建一个自定义编辑器窗口，其中包含两个字段，这些字段绑定到 TankScript 对象。创建一个调用 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);
        }
    }
}

测试第二个绑定

在 Unity 中，选择窗口 > UIToolkitExamples > 简单绑定示例 Inspector 元素。
在编辑器窗口中，如果您更改字段中的值，Inspector 中的值也会随之更改，反之亦然。

其他资源

使用 UXML 和 C# 脚本绑定

绑定到嵌套属性