UI Toolkit во время выполнения: Получите разбивку

UI Toolkit — это коллекция функций, ресурсов и инструментов, созданных для разработки пользовательских интерфейсов и расширений редактора. Впервые представленный как UI Elements, UI Toolkit предлагает фреймворк пользовательского интерфейса с сохранением состояния для упрощения разработки пользовательского интерфейса для расширений редактора Unity.

Доступный в последней версии Unity, UI Toolkit поддерживает создание пользовательского интерфейса во время выполнения через знакомый и интуитивно понятный процесс авторинга, вдохновленный веб-технологиями. В этой статье рассматриваются особенности его возможностей и даются советы по началу работы с UI Toolkit во время выполнения в качестве альтернативы UGUI.

Посмотрите это руководство для подробного сравнения между системами пользовательского интерфейса.

Unity 2021 LTS теперь доступен для загрузки и использования. Этот релиз представляет собой более чем год целенаправленной разработки по всему редактору Unity, а также основных функций, в сочетании с функциями, включенными в наши релизы Unity 2021.1 и Unity 2021.2 Tech Stream (с дополнительными шестью месяцами полировки качества).

Чтобы начать, загрузите последнюю версию Unity из Unity Hub.

Давайте проясним, как UI Toolkit может обеспечить более плавные рабочие процессы при создании пользовательского интерфейса.

Создание пользовательского интерфейса в сотрудничестве с художниками может быть сложной задачей. Пока художник редактирует Canvas, добавляя цвета и материалы, разработчик добавляет скрипты, поведения и слушатели OnClick. После этого, когда происходит слияние, могут возникнуть конфликты слияния, которые требуют быстрого разрешения.

UI Toolkit предотвращает такие конфликты слияния, позволяя художнику работать с файлами UXML и USS, в то время как C# обрабатывает всю логику. Например, обработка кнопок выполняется только с помощью C#, который запрашивает кнопку по ее имени и добавляет логику без редактирования каких-либо файлов UXML или USS.

Этот процесс не только упрощает слияние, но и упрощает будущие изменения стиля. Например, если все шрифты проекта внезапно нужно было бы изменить, вам не пришлось бы проходить через каждый актив, один за другим, чтобы редактировать настройки текста. Это избегает утомительной работы, которая может привести к проблемам с упущениями – и чем больше игра, тем сложнее это становится.

В UI Toolkit настройки панели содержат все текстовые настройки. Таким образом, чтобы изменить шрифты в UI Document, вам нужно только отредактировать Panel Settings. Хотя скрипты редактора могут аналогично помочь с UGUI, фреймворк UI Toolkit автоматически обрабатывает этот процесс.

Visual Element является базовым классом каждого элемента UI Toolkit: кнопки, изображения, текст и т.д. Вы можете рассматривать это как GameObject UI Toolkit. Тем временем, UI Builder (Window > UI Toolkit > UI Builder) является визуальным инструментом, который помогает создавать и редактировать интерфейсы без написания кода. Это полезно как для художников, так и для дизайнеров, так как позволяет им визуализировать UI по мере его создания.

Как основной инструмент для людей, уже знакомых с веб-технологиями, UI Toolkit также улучшает сотрудничество между художниками и разработчиками, разделяя логику и стиль для улучшения организации и избежания конфликтов файлов. В то время как UI Builder заботится о позициях, стиле и дизайне элементов, код может обрабатываться в отдельном разделе проекта, чтобы запрашивать необходимые части UXML и связывать с ними логику.

Файлы UXML сопоставимы с HTML веб-файлами. Они представляют визуальные элементы и содержат иерархию UI. Создайте UXML document через Assets > Create > UI Toolkit > UI Document. Затем используйте UI Builder, чтобы визуализировать и работать с вновь созданным UXML.

Однако имейте в виду, что файл UXML не следует рассматривать как GameObject, а скорее как дерево визуальных элементов. Чтобы облегчить иерархию, используйте один UI Document и загружайте все элементы UXML на него. Вы можете визуализировать UI с помощью UI Toolkit Debugger в Windows > UI Toolkit > Debugger.

Чтобы помочь вам начать, посмотрите на некоторые UXML Element examples из Windows > UI Toolkit > Samples.

Благодаря UI Builder файлы UXML могут быть созданы, визуализированы и протестированы без запуска игры. Просто перетащите элементы управления UI (стандартные или созданные пользователем) в иерархию из Библиотеки UI Builder панели и объедините несколько файлов UXML, чтобы создать финальный UI.

Предположим, у нас есть UI, состоящий из трех элементов:

• Здоровье
• Очки
• Всплывающее окно "Вы выиграли"

Всплывающее окно "Вы выиграли" будет отображать Здоровье, Очки, а также кнопку Перезапуска.

Каждый элемент используется в отдельной панели UI игры, так как они являются частью отдельных файлов UXML с popup.uxml – комбинация health.uxml и score.uxml плюс кнопка Перезапуска. Таким образом, логика кода, управляющая очками и здоровьем (score.cs и health.cs), независима от иерархии. Это означает, что health.cs всегда будет обновлять значения health.uxml, независимо от того, отображается ли UI отдельно на экране или внутри другого всплывающего окна.

Объединение UXML также может облегчить визуализацию отредактированных объектов. Включив Список классов опцию в иерархии UI Builder, вы можете сразу увидеть, что влияет на объект, и использовать селекторы, чтобы поддерживать стиль в порядке:

Еще одно преимущество касается Иерархии сцены. Вместо того, чтобы иметь один Canvas с десятками GameObjects, UI Toolkit требует только один файл UXML, связанный с UI Document.

против

Этот рабочий процесс особенно выгоден для больших команд. Вместо того, чтобы работать над одной и той же сценой, с возможным риском проблем с объединением, каждый член команды может работать над своими собственными файлами UXML, которые затем добавляются в один UI Document в сцене.

Активы настроек панели (Активы > Создать > UI Toolkit > Активы настроек панели) определяет, как UXML будет инстанцироваться и визуализироваться в игре. Возможно иметь несколько активов настроек панели, чтобы включить разные стили для UI. Например, использование определенных настроек панели для HUD и других для мини-карты имеет смысл, так как это очень разные пользовательские интерфейсы с различными потребностями.

Настройки панели можно рассматривать как UGUI Canvas + Canvas Scaler с дополнительными опциями, такими как настройки текста, чтобы весь текст внутри панели использовал одну и ту же базовую настройку. Это позволяет избежать времени, потраченного на ручное сбрасывание каждого шрифта – но, конечно, шрифты все еще могут быть переопределены внутри отдельных документов пользовательского интерфейса, по мере необходимости.

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

public class UIEventHandler : MonoBehaviour
{
   [SerializeField]
   private UIDocument m_UIDocument;
 
   private Label m_Label;
   private int m_ButtonClickCount = 0;
   private Toggle m_Toggle;
   private Button m_Button;
 
   public void Start()
   {
       var rootElement = m_UIDocument.rootVisualElement;
 
       // This searches for the VisualElement Button named “EventButton”
       // rootElement.Query<> and rootElement.Q<> can both be used
       m_Button = rootElement.Q<Button>("EventButton");
 
       // Elements with no values like Buttons can register callBacks
// with clickable.clicked
       m_Button.clickable.clicked += OnButtonClicked;
 
       // This searches for the VisualElement Toggle named “ColorToggle”
       m_Toggle = rootElement.Query<Toggle>("ColorToggle");
 
       // Elements with changing values: toggle, TextField, etc... 
// implement the INotifyValueChanged interface,
       // meaning they use RegisterValueChangedCallback and 
// UnRegisterValueChangedCallback
       m_Toggle.RegisterValueChangedCallback(OnToggleValueChanged);
 
       // Cache the reference to the Label since we will access it repeatedly.
       // This avoids the relatively costly VisualElement search each time we update
       // the label.
       m_Label = rootElement.Q<Label>("IncrementLabel");
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnDestroy()
   {
       m_Button.clickable.clicked -= OnClicked;
       m_Toggle.UnregisterValueChangedCallback(OnToggleValueChanged);
   }
 
   private void OnButtonClicked()
   {
       m_ButtonClickCount++;
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnToggleValueChanged(ChangeEvent<bool> evt)
   {
       Debug.Log("New toggle value is: " + evt.newValue);
   }
}

Позиционирование Элемента по умолчанию использует архитектуру Flexbox. Это гарантирует, что большинство макетов реагируют на размер контейнера или экрана. Примените это к Дереву визуальных элементов с двумя или более элементами, затем определите, как они выравниваются на дереве.

Размещение элемента в Абсолютном позиционировании означает, что он будет располагаться относительно позиционирования его родителей и не будет влиять или подвергаться влиянию других позиций.

Для Flex и Align настроек используйте эту простую иерархию в качестве примера:

Отредактируйте следующие настройки с помощью Инспектора UI Builder:

• Основание: Это относится к размеру элемента по умолчанию, до того, как произойдет любое Сжатие (коэффициент сжатия, если у родителя не осталось места) или Увеличение (коэффициент увеличения элемента, если в родителе осталось место).
• Направление (Строка и Столбец): Используйте это для создания поведения, аналогичного Вертикальной группе макета и горизонтальной группе макета UGUI соответственно.

• Обертка: Определите, какие элементы не помещаются, и игнорируйте их, в противном случае поднимайтесь или опускайтесь под предыдущие элементы.

• Выравнивание элементов: Упакуйте элементы на выбранных позициях, используя их минимальный размер.

• Обоснование содержимого: Определите расстояние между элементами вдоль главной оси.

Для получения дополнительной информации о позиционировании визуальных элементов смотрите документацию по движку компоновки UI Toolkit.

Стилизация — это то, где UI Toolkit демонстрирует свою полную мощь. Добавление стилей к визуальным элементам осуществляется через USS файлы (Активы > Создать > UI Toolkit > Стиль). Они являются эквивалентом файлов CSS для веба и используют тот же формат на основе правил.

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

Вы можете добавить Селекторы стилей через Инспектор стилей UI Builder панель и затем редактировать их с помощью кода или UI Builder.

Селекторы стилей USS в UI Builder

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

На приведенном выше скриншоте селектор .RedButton добавлен к кнопке. Таким образом, селектор появляется рядом с встроенными .unity-text-element и .unity-button классами, которые автоматически имеют все кнопки.

Ниже приведен пример правила USS, которое устанавливает цвет фона всех элементов с классом .RedButton на красный. Первая строка правила — это селектор, использующий имя класса, за которым следует список стилей для применения.

.RedButton { background-color: red; }

Точно так же, как в CSS, классы могут быть объединены для дальнейшего ограничения области действия селектора правила:

.RedButton.BlueText { color: blue; }

В этом примере только объекты с классами .RedButton и .BlueText будут иметь синий текст. В сочетании с предыдущим фрагментом кнопка также будет иметь красный фон.

Как и стили CSS, файлы USS могут использоваться для переопределения внешнего вида объектов в зависимости от их состояния:

.unity-button:hover { background-color: red; }

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

Теперь, когда мы знаем основы UI Toolkit, давайте создадим пример, который сравнивает создание интерфейсов с использованием UGUI и UI Toolkit. Наша цель — создать простое меню, включая наведение мыши с двумя следующими эффектами:

• Изменение цвета фона кнопок
• Изменение цвета текста кнопок

Чтобы создать это меню с UGUI, настройте следующую иерархию:

Нам также нужно добавить несколько дополнительных компонентов к некоторым объектам:

• Меню имеет изображение для фона и нуждается в анкеровании для выравнивания.
• Кнопки должны быть правильно закреплены, чтобы они были правильно выровнены.
• Кнопки Перезапуск и Выход требуют:
• Скрипт для динамического изменения их цвета текста при наведении.
• Настройки компонента кнопки (редактируемые в редакторе) для изменения цвета фона.

В этом примере, Выход - это префаб, определяющий красную кнопку.

Теперь, чтобы создать меню с UI Builder, начните с аналогичной иерархии:

С Всплывающее окно Выравнивание установленным как Центр, и Кнопки Гибкое направление установленным как Строка, наш текущий всплывающий интерфейс выглядит так:

Обратите внимание, что кнопка Выход красная, так как она использует компонент QuitButton.uxml, эквивалент кнопки Выход.

Чтобы увидеть, где действительно происходит магия интерфейса, добавьте PopupStyle.uss с множеством правил и…

.background {
   background-image: url('/Assets/Assets/OptionsMenu.png#OptionsMenu');
   width: 500px;
   height: 300px;
}
 
.title {
   font-size: 32px;
   color: rgb(255, 255, 255);
}
 
.unity-base-field__input {
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/OptionsMenu9Slice.png#OptionsMenu9Slice_2');
   width: 300px;
   height: 75px;
   font-size: 20px;
   color: rgba(255, 255, 255, 0.5);
   -unity-text-align: middle-center;
}
 
.unity-button {
   color: white;
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/StartMenu.png#StartMenu_ButtonDefault');
   width: 160px;
   height: 30px;
   -unity-slice-bottom: 1;
}
 
.unity-button:hover {
   color: rgb(0, 21, 255);
}
 
#Restart {
   -unity-background-image-tint-color: rgb(112, 202, 125);
}

Пожалуйста, обратите внимание, что здесь действуют правила приоритета селекторов. Например, стиль, написанный непосредственно в UXML, переопределит стиль в файлах USS. Здесь ширина и высота элементов добавлены в PopupStyle.uss, но их также можно редактировать непосредственно в UI Builder и переопределить PopupStyle.uss. Правила приоритета можно найти здесь.

Допустим, мы хотим изменить все цвета, которые появляются в меню, но не в остальной части игры: UGUI потребует от нас вручную редактировать все цвета для всех компонентов, один за другим. Тем не менее, рассмотрим наш пример. Хотя только кнопка Выход является префабом, мы могли бы сделать их все префабами, чтобы переопределить их один раз локально. Затем, когда они редактируются, любое будущее изменение цвета в префабе будет игнорироваться меню.

С UI Toolkit нам нужно только создать NewStyle.uss, дублируя теги PopupStyle.uss, и заменить PopupStyle.uss на NewStyle.uss.

После создания и стилизации файла UXML последний шаг — добавить его в саму сцену. Для этого замените Сцену Canvas элемент и создайте пустой GameObject с UI Document элементом. Заполните его popup.uxml и настройками панели файлами, и нажмите воспроизведение, чтобы протестировать новый UI.

Как только вы попробуете UI Toolkit, пожалуйста, дайте нам знать, что вы думаете на форуме UI, или ознакомьтесь с официальной документацией для получения дополнительных деталей.

Наконец, вы можете следить за последними обновлениями, посетив нашу новую дорожную карту платформы Unity. Пожалуйста, поделитесь своим отзывом напрямую с командой продукта — мы с нетерпением ждем вашего ответа!

Эта статья написана Мариной Жоффрине на команде Unity Studio Productions, состоящей из самых опытных разработчиков программного обеспечения Unity. Команда Unity Studio Productions предлагает консультационные услуги и решения по индивидуальной разработке для игровых студий любого размера. Чтобы узнать больше о Unity Studio Productions и о том, как мы можем помочь вам достичь ваших целей, посетите наш веб-сайт.