UI Builder
Содержание
UI Builder позволяет создавать, просматривать и изменять файлы UXML и USS в визуальном интерфейсе, встроенном в основной редактор. Рассмотрим ключевые возможности UI Builder:
- StyleSheets: Здесь вы управляете правилами форматирования макета и стиля (также известными как селекторы USS) для совместного использования стилей между UXML Документами и UI элементами.
- Hierarchy: Подобно представлению Scene, оно отображает иерархию визуальных элементов в вашем документе UXML.
- Библиотека: Это содержит предопределенные или пользовательские элементы управления, готовые для добавления в вашу иерархию, такие как кнопки, метки и ползунки. Здесь вы также можете добавить другие элементы управления. UXML (шаблоны) в вашем текущем UXML.
- Просмотр: Здесь видно, как выглядит ваш интерфейс; элементы можно редактировать прямо на холсте с помощью гизмо.
- Примеры кода: Это показывает код, который UI Builder создает за кадром как для Документа UI (UXML), так и для Документа StyleSheets (USS). Вам может потребоваться изменить размер окна, чтобы его можно было правильно увидеть.
- Inspector: Используйте его для изменения атрибутов и свойств стиля выбранного элемента или селектора USS.
💡 Совет: Сохранение UI активов
В UI Builder, сохранить изменения из Видовой проем менюФайл > Сохранить). Это сохраняет все открытые UXML и USS файлы.
В отличие от uGUI (Unity UI), игра может запускаться в редакторе, пока вы активно вносите изменения в UI ToolkitИщите звездочку * рядом с именем файла в UI Builder’s Canvas заголовок; это указывает на несохраненные изменения.
Canvas фон
Включённый фон Canvas помогает оценить оформление элементов поверх цвета или фонового изображения. Выберите файл UXML в панели Hierarchy, а затем подберите фон Canvas, близкий к итоговому интерфейсу, чтобы судить об изменениях стиля в контексте.
Фон Canvas предоставляет несколько различных вариантов:
Цвет фона: Представляет собой определенный оттенок или тон игровой среды
Изображение: Для выбора sprite или текстуры в качестве фона (полезно для воспроизведения макетов экранов или справочных рисунков)
Camera: Отображает текущую игру в фоновом режиме, позволяя вам видеть UI в контексте реальной игры
Настройки окна просмотра
Чтобы перемещаться по рабочей области, настройте уровень масштаба (от 25% до 500%) или выберите опцию Fit Canvas, которая автоматически настраивает масштаб в соответствии с текущими параметрами экрана.
Используйте Предварительный просмотр для визуализации UI без случайного редактирования выбранных элементов. При активации Viewport может также показывать стили, применяемые к конкретным событиям мыши (e.g., наведение мыши, фокусирование).
💡 Совет: Соответствие Game вид и темы
Чтобы приблизиться к runtime UI, выберите загруженный в данный момент UI Документ (UXML) в Hierarchy и отметьте Match Game View. Это приведет размер Viewport к Reference Resolution вашего проекта. Помните, что изменение этого параметра не влияет на сами файлы UI, а только на визуализацию. С UI Builder вы также можете предварительно просмотреть различные темы, используемые в вашем проекте, функция, которая будет рассмотрена позже в руководстве.