Макеты

Макеты

UI Builder предоставляет все инструменты, необходимые для создания адаптивного макета.

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

Ниже показан UXML-файл и его код в панели UXML Preview окна UI Builder. Чтобы создать ресурс в UI Builder, выберите File > New, а затем Save As.

Щёлкните значок в правом верхнем углу окна Code Preview, чтобы открыть код в своей IDE.

В этом примере кода UXML визуальные элементы представлены разметкой, напоминающей HTML, с открывающими и закрывающими угловыми скобками. Например, так выглядит синтаксис кнопки Start: <engine:Button text="START" name="start-game__button" />

Основные компоненты времени выполнения Элементы UI Toolkit не отображаются в окне Scene. Создаваемый интерфейс виден в UI Builder, но более точный предварительный просмотр с целевым разрешением даёт окно Game. Чтобы вывести UI в окне Game, на GameObject должен находиться компонент UI Document с ресурсами Panel Settings и Visual Tree (UXML), как показано на снимке:

Компонент UI Document определяет, какой UXML будет отображаться, и по умолчанию содержит ресурс Panel Settings. Поле Sort Order задаёт порядок этого документа относительно других UI Document, использующих те же Panel Settings. Добавьте компонент на GameObject через меню Add Component в инспекторе или щёлкните правой кнопкой мыши в Hierarchy и выберите UI Toolkit > UI Document ресурс Panel Settings будет назначен автоматически. Ресурс Panel Settings определяет, как компонент UI Document создаётся и отображается во время выполнения. В проекте может быть несколько Panel Settings для разных вариантов UI. Например, HUD и мини-карта могут использовать собственные Panel Settings.

Создайте ресурс через Assets > Create > UI Toolkit > Panel Settings Asset. Он появится в корневой папке проекта, после чего его можно назначить компоненту UI Document на GameObject.

Адаптивные макеты: Flexbox UI Toolkit позиционирует визуальные элементы с помощью Yoga - механизма компоновки HTML/CSS, реализующего подмножество Flexbox. Если вы ещё не знакомы с Yoga и Flexbox, эта глава поможет освоить принципы, лежащие в основе системы компоновки UI Toolkit.

Flexbox, или Flexible Box Layout, - способ размещать элементы по строкам или столбцам. Эта система отлично подходит для сложных, хорошо организованных макетов. Рассмотрим несколько её преимуществ:

- Адаптивный UI. Flexbox организует содержимое в сеть блоков или контейнеров. Элементы можно вкладывать друг в друга как родительские и дочерние и размещать на экране по простым правилам. Дочерние элементы автоматически реагируют на изменения родительских контейнеров. Адаптивный макет подстраивается под разные размеры и разрешения экрана, упрощая поддержку нескольких платформ. - Упорядоченная сложность. Стили задают простые правила, управляющие внешним видом визуального элемента. Один стиль можно одновременно применить к сотням элементов, а изменения сразу отразятся во всём UI. Благодаря этому дизайн интерфейса строится на единообразных повторно используемых стилях, а не на ручном оформлении каждого элемента. - Разделение логики и дизайна. Макеты и стили UI отделены от кода. Дизайнеры и разработчики могут работать параллельно, не нарушая зависимости, и каждый сосредотачивается на своей специализации.

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

Визуальные элементы В UI Toolkit основными строительными блоками каждого интерфейса служат визуальные элементы. VisualElement - базовый класс всех элементов UI Toolkit: кнопок, изображений, текста и других компонентов. Их можно считать аналогом GameObject в UI Toolkit. Иерархия UI из одного или нескольких визуальных элементов называется визуальным деревом (Visual Tree). .

Упрощённая иерархия визуального дерева и соответствующий ей интерфейс справа

Комбинации визуальных элементов хранятся в UXML-файлах. Они содержат сведения об иерархии, макете элементов и их стилях, если те не вынесены в StyleSheet или USS.

Прежде чем углубляться в UI Toolkit, необходимо освоить основы компоновки Flexbox. Их удобно изучать на простых визуальных элементах в UI Builder.

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

В примере ниже один большой визуальный элемент может служить контейнером для панели меню и её содержимого слева. Каждую кнопку следует представить отдельным дочерним визуальным элементом.

Рекомендуется подготовить подробный макет или каркас (слева), а затем выделить и разметить элементы, из которых этот дизайн будет собран в UI Toolkit (справа).

UI Builder поддерживает два способа позиционирования визуальных элементов:

- Относительное позиционирование. Используется по умолчанию для новых визуальных элементов. Дочерние элементы подчиняются правилам Flexbox родительского контейнера. Например, если Direction родителя задан как Row, дочерние визуальные элементы располагаются слева направо. При относительном позиционировании размеры и положение элементов динамически зависят от следующих факторов:

- Размер и правила стиля родительского элемента. Если изменить параметры родителя, например Padding или Align > Justify Content, дочерние элементы соответствующим образом перестроятся. - Собственные размеры и правила стиля дочернего элемента. Если для дочернего визуального элемента заданы минимальные или максимальные размеры, система компоновки также старается их соблюдать. UI Toolkit разрешает возникающие противоречия между параметрами родительского и дочернего элементов. Например, если минимальная ширина дочернего элемента больше ширины контейнера, содержимое выйдет за его границы.

Режимы позиционирования, доступные для любого визуального элемента

- Абсолютное позиционирование. Положение визуального элемента привязывается к родительскому контейнеру, как при работе Unity UI с Canvas. Правила размера и параметры, влияющие на дочерние элементы, продолжают действовать, но сам элемент накладывается поверх родительского контейнера и игнорирует такие параметры Flex, как Grow, Shrink и Margins. Для привязки абсолютно позиционированного элемента можно использовать Left, Top, Right и Bottom. Например, нулевые значения Right и Bottom закрепят Button в правом нижнем углу родительского контейнера.

Слева синий визуальный элемент использует Relative, а у его родителя для Flex задано Direction: Row. Справа синий визуальный элемент использует Absolute и игнорирует правила Flexbox родителя.

Относительное позиционирование обычно подходит для постоянно видимых элементов, сложных групп и контейнеров с множеством дочерних элементов. Абсолютное удобно для временных интерфейсов, например всплывающих окон, декоративных элементов, не влияющих на общую компоновку, и UI, следующего за игровыми объектами, например индикатора здоровья персонажа.

Параметры размера Помните, что визуальные элементы представляют собой контейнеры. В Unity 6 значение Grow по умолчанию равно 1, поэтому элемент занимает всё свободное место в контейнере. В иных случаях он не занимает пространства, если только внутри нет дочерних элементов с заданным размером или самому элементу не назначены определённые Width и Height.

Параметры размера визуального элемента

Поля Width и Height определяют размер элемента. Max Width и Max Height ограничивают его расширение, а Min Width и Min Height - сжатие. Вместо значения auto по умолчанию размеры можно задать в пикселях или процентах. Эти параметры влияют на то, как настройки Flex, описанные ниже, изменяют размер элементов в зависимости от свободного пространства.

Параметры Flex При относительном позиционировании параметры Flex могут изменять размер элемента. Рекомендуется поэкспериментировать с ними, чтобы на практике понять их действие. Basis задаёт исходные Width и Height до применения коэффициентов Grow и Shrink:

- Если Grow равен 1, элемент займёт всё доступное вертикальное или горизонтальное пространство родителя. При значении 0,5 он займёт половину свободного пространства. - Если Grow равен 0, элемент не увеличивается сверх текущего Basis, то есть исходного размера.

- Если Shrink равен 1, элемент сжимается настолько, насколько требуется, чтобы поместиться в свободном пространстве родителя. - Если Shrink равен 0, элемент не сжимается и при необходимости выходит за границы контейнера.

Параметры Basis, Grow и Shrink

Пример выше показывает совместную работу Basis, Grow и Shrink: 1. Зелёный элемент с Basis 80% занимает 80% доступного пространства. 2. При Grow 1 зелёный элемент расширяется на всё свободное пространство. 3. После добавления жёлтого элемента содержимое выходит за границы контейнера, а зелёный элемент вновь занимает 80% пространства. 4. При Shrink 1 зелёный элемент сжимается, освобождая место для жёлтого. 5. Здесь Shrink обоих элементов равен 1, поэтому они сжимаются в равной степени и вместе помещаются в доступном пространстве. Как видно из примера, элементы с фиксированным размером в пикселях - синий блок на шагах 3-5 - не реагируют на параметры Basis, Grow и Shrink.

Совет: расчёт размера визуального элемента При относительном позиционировании система компоновки объединяет параметры Size и Flexbox, чтобы определить итоговый размер каждого элемента. Расчёт выполняется следующим образом:

1. Система компоновки рассчитывает размер элемента по свойствам Width и Height. 2. Затем она проверяет, осталось ли в родительском контейнере свободное место или дочерние элементы уже выходят за доступные границы. 3. Если свободное место есть, система находит элементы с ненулевым Flex > Grow и распределяет между ними дополнительное пространство пропорционально этому коэффициенту, увеличивая дочерние элементы. 4. Если дочерние элементы не помещаются, элементы с ненулевым Flex > Shrink соответствующим образом уменьшаются. 5. Затем учитываются прочие свойства, влияющие на итоговый размер элемента, например Min Width и Flex Basis. 6. Система компоновки применяет рассчитанный итоговый размер.

Параметр Direction определяет порядок дочерних элементов внутри родителя. Элементы, расположенные выше в Hierarchy, выводятся первыми, а находящиеся в конце - последними. Параметр Wrap указывает, следует ли пытаться уместить элементы в одной строке или одном столбце (No Wrap) либо переносить их в следующую строку или столбец (Wrap или Wrap Reverse).

Родительские и дочерние визуальные элементы в UI Builder с относительным позиционированием и разными сочетаниями Direction и Wrap

Параметры выравнивания Параметры Align определяют выравнивание дочерних элементов относительно родителя. В родительском элементе задайте Align > Align Items, чтобы прижать дочерние элементы к началу, центру или концу. Эти варианты действуют вдоль поперечной оси, перпендикулярной строке или столбцу из Flex > Direction. Stretch также работает по поперечной оси, но его эффект могут ограничивать минимальные и максимальные размеры; этот вариант используется по умолчанию.

Значение Auto позволяет системе компоновки автоматически выбрать один из остальных вариантов с учётом других параметров. Для более точного управления макетом рекомендуется явно выбирать нужный режим, оставляя Auto для особых случаев.

Параметр Align > Justify Content определяет распределение дочерних элементов внутри родителя. Они могут располагаться вплотную друг к другу либо распределяться по доступному пространству. На результат также влияют Flex > Grow и Flex > Shrink.

Параметры Align и Justify применены к родительскому элементу с Direction: Row. Обратите внимание: на итоговый результат могут влиять и другие параметры положения и размера.

Параметр Align Self позволяет самому контейнеру выровняться по центру, началу или концу Flex-макета.

Внешние и внутренние отступы Параметры Margin и Padding задают свободное пространство вокруг визуальных элементов и их содержимого. Unity использует разновидность стандартной блочной модели CSS, представленную на схеме ниже.

Визуальный элемент в UI Builder с заданными Size, Margin, Border и Padding. Элементы с фиксированными Width или Height могут выходить за границы доступного пространства.

- Content Space содержит основные визуальные компоненты: текст, изображения, элементы управления и т. д.

- Padding задаёт пустую область вокруг Content Space, но внутри Border. - Border образует границу между Padding и Margin. Ей можно назначить цвет и скругление. При заданной толщине Border расширяется внутрь. - Margin, как и Padding, задаёт свободную область, но уже снаружи Border. Для элементов с Position: Absolute параметры Margin не действуют; внешнее пространство относительно точки привязки можно добавить параметрами Position.

Фон и изображения В UI Toolkit любой визуальный элемент может выводить изображение на экран. Достаточно задать свойство background и назначить текстуру или спрайт. Цвет или изображение фона меняет внешний вид элемента и особенно удобно при создании каркаса. Яркие контрастные цвета помогают увидеть, как соседние элементы сочетаются и реагируют на изменения контейнеров.

На этапе создания каркаса используйте контрастные цвета.

Относительные и фиксированные единицы измерения В UI Builder расстояния и размеры элементов задаются четырьмя вариантами: - Auto. Значение по умолчанию для размера и положения. Система компоновки рассчитывает параметры элемента по сведениям о родителе и дочерних элементах. - Percentage. Единица равна процентной доле контейнера и динамически меняется вместе с Width и Height родителя. Проценты помогают масштабировать макет для экранов разных форматов. - Pixels. Подходит для фиксированного размера. Например, небольшим элементам можно задать минимальный размер в пикселях, чтобы они всегда оставались читаемыми. - Initial. Возвращает свойство в исходное состояние, заданное стандартными правилами стилей Unity, и игнорирует текущие значения оформления.

Примеры стандартных параметров Size и размеров, заданных в пикселях и процентах

Чтобы применить единое правило масштабирования ко всему UI, используйте параметры Scale Mode в Panel Settings: - Constant Pixel Size. Элементы сохраняют фиксированный размер в пикселях независимо от размеров экрана. Для пропорционального изменения всех размеров можно задать Scale Factor.

- Constant Physical Size. Элементы сохраняют одинаковый физический размер на разных экранах. Система масштабирует UI относительно Reference DPI, корректируя размер при отличии фактического DPI экрана.

- Scale with Screen Size. Размеры элементов динамически меняются в зависимости от разрешения. Screen Match Mode определяет приоритет ширины, высоты или их сочетания, а Reference Resolution задаёт базовый размер UI. Если в Screen Match Mode выбран Match Width or Height, значение Match определяет, будет ли UI подстраиваться под ширину экрана, его высоту или промежуточное соотношение.

В Panel Settings системы UI Toolkit доступны параметры масштабирования, похожие на параметры Unity UI.

Переопределённые свойства в UI Builder Изменённые свойства выделяются в инспекторе жирным шрифтом и белой линией, как на снимке ниже. Это означает, что они переопределяют стандартные значения или значения селектора из таблицы стилей USS выбранного UXML-файла. Такое оформление также называют встроенным стилем (inline styling). Если значение менять не требуется, лучше оставить его в исходном состоянии: так переопределения легче находить и контролировать. Чтобы сбросить свойство, воспользуйтесь соответствующей командой в меню с вертикальным многоточием ( ) рядом с разделом свойств.

В этом меню изменённое значение можно вернуть к стандартному или к исходному значению селектора.

UXML как шаблоны UXML-файлы можно использовать подобно префабам. Например, в проекте может быть UXML-макет со значком предмета и счётчиком количества, который нужно многократно создавать в инвентаре. Щёлкнув правой кнопкой мыши любой UXML, можно создать Template. Затем его можно добавить к другому визуальному элементу в области Hierarchy или создать экземпляр из кода. Готовый шаблон появится в Library и окне Project.

Шаблоны представляют повторно используемые UXML и доступны на вкладке Project области Library.

Дополнительные ресурсы Подробнее о системе компоновки Flexbox можно узнать из следующих материалов. Flexbox и Yoga - признанные стандарты веб-разработки и разработки приложений, поэтому в интернете доступно множество дополнительных источников.

- UI Toolkit во время выполнения: подробный разбор

- Официальная документация Yoga - Руководство CSS-Tricks по Flexbox