Создать привязку с Inspector

Версия: 2021.3+

В примере показано, как создать привязки между пользовательским Inspector, пользовательским Редактором и серийными объектами.

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

В этом примере создается следующее:

• Настраиваемый компонент Inspector UI с двумя полями, связанными с именем GameObject и масштабом преобразования USS.
• Настраиваемое окно Редактора, которое создает те же привязки внутри InspectorElement.

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

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

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

• Визуальное дерево
• UXML
• USS
• CreateInspectorGUI
• InspectorElement

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

Определите пользовательский класс интерфейса Inspector с именем TankScript, стилизуйте его с помощью USS, и установите визуальные элементы и путь привязки в UXML.

1. В окне Project создайте папку create-a-binding-inspector для хранения всех ваших файлов.

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

   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);
       }
   }
   

3. В папке create-a-binding-inspector создайте папку Editor.

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

5. Создайте файл UXML с именем tank_inspector_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# для регистрации пользовательского метода Inspector для TankScript. Вызов метода Bind() не нужен, так как привязка в окне Inspector неявная.

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

   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;
       }
   }
   

2. В окне Project выберите TankEditor.cs.

3. Перетащите tank_inspector_uxml.uxml в Визуальное Дерево в Inspector.

4. Перетаскивание tank_inspector_styles.uss до Таблица стилей в 2000 году Inspector.

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

1. В Unity добавьте пустой GameObject в сцену.
2. Выберите GameObject и перетащите TankScript.cs в Добавить компонент в Inspector. Это создаст компонент Tank Script в Inspector.
3. В Tank Scriptвы можете изменить имя Танка в поле Tank Name и изменить значение масштаба Transform в поле Tank Size.

Связь с InspectorElement

Создайте пользовательское окно Editor с двумя полями, привязанными к объекту TankScript. Создайте скрипт C#, вызывающий InspectorElement конструктор. Объект InspectorElement создаёт UI и автоматически привязывает UI к объектам.

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

   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);
           }
       }
   }
   

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

1. В Unity выберите Окно > UIToolkitExamples > Простой пример привязки Inspector Элемент.
2. В окне Редактора, если вы измените значения в полях, значения в Inspector изменятся, и наоборот.

Дополнительные ресурсы

• SerializedObject привязка данных
• Связываемые элементы
• Привязка преобразования типа данных
• Детали осуществления
• Примеры связки