Начните с UI Toolkit

Хотите создать свой первый UI с UI Toolkit? Используйте этот базовый пример рабочего процесса UI Toolkit, чтобы начать.

Примечание: Для демонстрационных целей в этом руководстве описывается, как добавить UI элементы управления для Редактора UI. Однако инструкции по добавлению UI элементов управления в UI Документ также применимы к времени выполнения UI. Дополнительную информацию см. в Начало работы с временем выполнения UI.

Если вы часто выполняете определенную задачу, вы можете использовать UI Toolkit для создания выделенного UI для нее. Например, вы можете создать пользовательское окно Редактора. В примере показано, как создать пользовательское окно Редактора и добавить UI элементы управления в ваше пользовательское окно Редактора с помощью скриптов UI Builder, UXMLи C#.

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

Создание настраиваемого окна редактора

Создайте окно редактора с двумя метками.

1. Создайте проект в Unity Editor с любым шаблоном.
2. В окне Project щелкните правой кнопкой мыши папку Assets и выберите Создать > UI Toolkit > Окно редактора.
3. В UI Toolkit Editor Window Creatorвведите SimpleCustomEditor в поле C#.
4. Сохраните флажок UXML установленным и снимите флажок USS.
5. Выберите Подтвердите.
6. Чтобы открыть окно Редактора, выберите Окно > UI Toolkit > SimpleCustomEditor.

Вы можете найти исходные файлы для него в папке Assets/Editor.

Добавить UI элементы управления в окно

Вы можете добавить UI элементы управления в окно следующими способами:

• Используйте UI Builder для визуального добавления UI контроллеров
• Используйте XML-как текстовый файл (UXML) добавить следующий текст: UI контроля
• Используйте скрипт C# для добавления элементов управления UI

Любой из этих методов можно использовать по отдельности или в сочетании. В следующих примерах создаются три набора меток, кнопок и переключателей с помощью комбинации этих методов.

Используйте UI Builder для добавления UI контроллеров

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

1. В папке Editor дважды щелкните SimpleCustomEditor.uxml, чтобы открыть UI Builder.
2. В UI Builder перетащите Кнопку и Переключатель из Библиотеки > Контроллеры в Hierarchy или в предварительный просмотр окна в Видовой проем.
3. В окне Hierarchy выберите Этикетка.
4. В окне Inspector измените текст по умолчанию на These controls were created in UI Builder в поле Текст.
5. В окне Hierarchy выберите Кнопка.
6. В окне Inspector введите This is button1 в поле Текст.
7. Введите button1 в поле Имя.
8. В окне Hierarchy выберите Переключить.
9. В окне Inspector введите Number? в поле Этикетка.
10. Введите toggle1 в поле Имя.
11. Сохранить и закрыть окно UI Builder.
12. Закройте окно пользовательского редактора, если вы еще не сделали этого.
13. В течение Project окно, выбрать SimpleCustomEditor.cs и убедитесь, что Визуальное дерево активов установлен на SimpleCustomEditor (Visual Tree Asset) в 2000 году Inspector окно.
14. Выбрать Окно > UI Toolkit > SimpleCustomEditor чтобы вновь открыть окно пользовательского редактора и увидеть кнопку и переключатель, которые вы только что добавили.

Используйте UXML для добавления UI контроллеров

Если вы предпочитаете определить свой UI в текстовом файле, вы можете отредактировать UXML, чтобы добавить UI элементы управления. Следующие действия добавят в окно еще один набор метки, кнопки и переключателя.

1. В папке Editor выберите Ассеты > Создать > UI Toolkit > UI Документ для создания файла UXML с названием SimpleCustomEditor_UXML.uxml.
2. Выберите стрелку на SimpleCustomEditor_UXML.uxml в окне Project.
3. Дважды щелкните inlineStyle, чтобы открыть SimpleCustomEditor_UXML.uxml в текстовом редакторе.
4. Заменить содержимое SimpleCustomEditor_uxml.uxml следующим текстом:

   <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
       <ui:Label text="These controls were created with UXML." />
       <ui:Button text="This is button2" name="button2"/>
       <ui:Toggle label="Number?" name="toggle2"/>
   </ui:UXML>

1. Откройте SimpleCustomEditor.cs.

2. Импортируйте созданный вручную файл UXML, добавив в метод CreateGUI следующее:

   // Import UXML created manually.
   var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/SimpleCustomEditor_uxml.uxml");
   VisualElement labelFromUXML = visualTree.Instantiate();
   root.Add(labelFromUXML);
   

3. Сохраните изменения.

4. Выберите Окно > UI Toolkit > SimpleCustomEditor. Это откроет окно вашего пользовательского Редактора с тремя метками, двумя кнопками и двумя переключателями.

Используйте скрипт C# для добавления контроллеров UI

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

1. Откройте SimpleCustomEditor.cs.

2. Unity использует UnityEngine.UIElements для основных элементов управления UI, таких как метка, кнопка и переключатель. Чтобы работать с элементами управления UI, необходимо добавить следующее заявление, если оно еще не присутствует.

   using UnityEngine.UIElements;
   

3. Измените текст существующей метки с "Hello World! From C#" на "These controls were created using C# code.".

4. EditorWindow классе есть свойство rootVisualElement. Чтобы добавить элементы управления в окно, сначала создайте экземпляр класса элемента с нужными атрибутами, а затем используйте Add методы работы rootVisualElement.

   Ваш законченный метод CreateGUI() выглядит следующим образом:

   public void CreateGUI()
   {
       // Each editor window contains a root VisualElement object
       VisualElement root = rootVisualElement;
   
       // VisualElements objects can contain other VisualElements following a tree hierarchy.
       Label label = new Label("These controls were created using C# code.");
       root.Add(label);
   
       Button button = new Button();
       button.name = "button3";
       button.text = "This is button3.";
       root.Add(button);
   
       Toggle toggle = new Toggle();
       toggle.name = "toggle3";
       toggle.label = "Number?";
       root.Add(toggle);
   
       // Instantiate UXML created automatically which is set as the default VisualTreeAsset.
       root.Add(m_VisualTreeAsset.Instantiate());
   
       // Import UXML created manually.
       var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/SimpleCustomEditor_uxml.uxml");
       VisualElement labelFromUXML = visualTree.Instantiate();
       root.Add(labelFromUXML);
   }
   

5. Выбрать Окно > UI Toolkit > SimpleCustomEditor чтобы открыть окно настраиваемого редактора и увидеть три метки, три кнопки и три переключателя.

Определение поведения ваших UI элементов управления

Вы можете настроить обработчики событий для ваших UI контроллеров так, чтобы при нажатии кнопки и установке или снятии переключателя ваши UI контроллеры выполняли некоторые задачи.

В этом примере настроены обработчики событий, которые:

• При нажатии кнопки в Консоли Редактора отображается сообщение.
• Когда выбран переключатель, Консоль показывает, сколько раз кнопки были нажаты.

Ваш готовый SimpleCustomEditor.cs выглядит следующим образом:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class SimpleCustomEditor : EditorWindow
{
    [SerializeField]
    private VisualTreeAsset m_VisualTreeAsset = default;

    [MenuItem("Window/UI Toolkit/SimpleCustomEditor")]
    public static void ShowExample()
    {
        SimpleCustomEditor wnd = GetWindow<SimpleCustomEditor>();
        wnd.titleContent = new GUIContent("SimpleCustomEditor");
    }

    private int m_ClickCount = 0;

    private const string m_ButtonPrefix = "button";

    public void CreateGUI()
    {
        // Each editor window contains a root VisualElement object
        VisualElement root = rootVisualElement;

        // VisualElements objects can contain other VisualElement following a tree hierarchy.
        Label label = new Label("These controls were created using C# code.");
        root.Add(label);

        Button button = new Button();
        button.name = "button3";
        button.text = "This is button3.";
        root.Add(button);

        Toggle toggle = new Toggle();
        toggle.name = "toggle3";
        toggle.label = "Number?";
        root.Add(toggle);

        // Instantiate UXML created automatically which is set as the default VisualTreeAsset.
        root.Add(m_VisualTreeAsset.Instantiate());

        // Import UXML created manually.
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/SimpleCustomEditor_uxml.uxml");
        VisualElement labelFromUXML = visualTree.Instantiate();
        root.Add(labelFromUXML);

        //Call the event handler
        SetupButtonHandler();
    }

    //Functions as the event handlers for your button click and number counts
    private void SetupButtonHandler()
    {
        VisualElement root = rootVisualElement;

        var buttons = root.Query<Button>();
        buttons.ForEach(RegisterHandler);
    }

    private void RegisterHandler(Button button)
    {
        button.RegisterCallback<ClickEvent>(PrintClickMessage);
    }

    private void PrintClickMessage(ClickEvent evt)
    {
        VisualElement root = rootVisualElement;

        ++m_ClickCount;

        //Because of the names we gave the buttons and toggles, we can use the
        //button name to find the toggle name.
        Button button = evt.currentTarget as Button;
        string buttonNumber = button.name.Substring(m_ButtonPrefix.Length);
        string toggleName = "toggle" + buttonNumber;
        Toggle toggle = root.Q<Toggle>(toggleName);

        Debug.Log("Button was clicked!" +
            (toggle.value ? " Count: " + m_ClickCount : ""));
    }
}

Проверка примера

• В меню выберите Окно > UI Toolkit > SimpleCustomEditor.

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

• UXML
• Визуальное дерево
• Этикетка
• Кнопка
• Переключить
• Создать пользовательское окно редактора