UI Builder

UI Builder

UI Builder открывается через меню Window > UI Toolkit > UI Builder.

UI Builder позволяет создавать, просматривать и изменять файлы UXML и USS в визуальном интерфейсе, встроенном в основной редактор. Рассмотрим ключевые области UI Builder: 1. StyleSheets. Здесь находятся правила компоновки и оформления, также называемые селекторами USS. Они позволяют совместно использовать стили в разных UXML-документах и элементах UI.

2. Hierarchy. Как и окно Hierarchy сцены, эта область показывает иерархию визуальных элементов UXML-документа. 3. Library. Здесь собраны готовые стандартные и пользовательские элементы управления: кнопки, подписи, ползунки и другие компоненты, которые можно добавить в иерархию. Отсюда же в текущий UXML можно вставить другой UXML-документ как шаблон.

4. Viewport. Эта область показывает внешний вид интерфейса. Элементы на холсте можно редактировать непосредственно с помощью экранных манипуляторов. 5. Code Previews. Здесь отображается код, который UI Builder формирует в фоновом режиме для документа UI (UXML) и таблиц стилей (USS). Чтобы увидеть код целиком, возможно, потребуется изменить размер окна. 6. Inspector. Позволяет изменять атрибуты и свойства стиля выбранного элемента или селектора USS. Совет: сохранение ресурсов UI В UI Builder сохраняйте изменения через меню области Viewport: File > Save. Команда сохраняет все открытые файлы UXML и USS. В отличие от Unity UI, при работе с UI Toolkit игра может выполняться в редакторе одновременно с внесением изменений. Звёздочка * рядом с именем файла в заголовке холста UI Builder означает, что изменения ещё не сохранены.

Фон холста Включив фон холста, можно оценить оформление элементов на заданном цвете или фоновом изображении. Выберите UXML-файл в области Hierarchy, затем настройте фон холста так, чтобы он напоминал итоговый интерфейс: это позволит оценивать изменения стиля в контексте. Для фона Canvas доступно несколько вариантов: - Background Color. Задаёт оттенок или цвет игрового окружения. - Image. Позволяет выбрать спрайт или текстуру в качестве фона, что удобно для воспроизведения макетов экранов или референсной графики. - Camera. Показывает текущий игровой процесс на фоне, позволяя оценивать UI непосредственно в контексте игры.

Холст нового UXML-документа. Его внешний вид настраивается с помощью параметров Color и Image.

Настройки области просмотра Для навигации по рабочей области изменяйте масштаб в пределах 25-500% или выберите Fit Canvas, чтобы он автоматически подстроился под доступное место на экране. Режим Preview позволяет просматривать UI, не рискуя случайно изменить выбранные элементы. В активной области Viewport также можно отображать стили для определённых событий мыши, например наведения и получения фокуса.

Совет: соответствие окну Game и предварительный просмотр тем

Чтобы приблизить отображение к UI во время выполнения, выберите загруженный UI Document (UXML) в Hierarchy и включите Match Game View. Размер области Viewport будет приведён к эталонному разрешению проекта. Изменение этого параметра влияет только на предварительный просмотр, но не на сами файлы UI. В UI Builder также можно заранее просматривать различные темы проекта; подробнее эта возможность рассматривается далее.