Макеты
Содержание
Этот раздел охватывает основные шаги по созданию макетов в UI Builder.
UI Builder — это WYSIWYG, удобный для дизайнеров инструмент для создания UXML и USS файлов. В то время как некоторые команды могут предпочесть создавать UI непосредственно в коде, UI Builder дает художникам творческий элемент управления, позволяя значительно улучшить рабочий процесс. Когда вы вносите изменения в UI Builder, он генерирует код для вас, и все, что вы создаете в UI Builder, может быть реализовано как код непосредственно в UXML и USS.
Эффективная настройка адаптивных макетов является основным преимуществом использования UI Toolkit и UI Builder. Такие макеты являются необходимой функцией для любой игры, которая ориентирована на несколько платформ с разными разрешениями экрана и соотношениями.
Ниже приводится UXML файл с его кодом, отображаемым в UXML Панель предварительного просмотра UI Builder. И UI Builder, создать ассет через Файл > Новые а затем Сохранить как.
В этом примере кода UXML вы можете увидеть, что визуальные элементы и представлены в виде языка разметки, похожего на HTML, например, начиная с открытой и закрывающей скобки. Например, вот синтаксис для кнопки запуска:
<engine:Button text="START" name="start-game__button" />
Основные компоненты времени выполнения
Элементы UI Toolkit не отображаются в окне Scene. Свой интерфейс вы видите по ходу работы в UI Builder, но более точный предпросмотр в целевом разрешении даёт окно Game. Чтобы интерфейс отрисовывался в окне Game, у GameObject должен быть UI Документ компонент с Настройки панели ассетов и Визуальное дерево asset (UXML), как видно на этом скриншоте:
Компонент Документа UI определяет, что будет отображаться в UXML, и поставляется с ассетом Установки Панели по умолчанию. Поле Порядок сортировки определяет, как этот документ будет отображаться по отношению к другим Документам UI, использующим те же Установки Панели.
Добавьте этот компонент в GameObject с помощью меню Добавить Компонент в Inspector, или щелкните правой кнопкой мыши в Hierarchy и выберите UI Toolkit > UI Документ, который автоматически назначит ассет Установки Панели.
Ассет Panel Settings определяет, как компонент UI Document будет инстанцирован и визуализирован во время выполнения. Можно иметь несколько ассетов Panel Settings, чтобы включить различные стили для UIs. Если ваша игра включает HUD или мини-карту, например, эти специальные UIs могут иметь свои собственные Panel Settings.
Создайте ресурс с помощью Ассеты > Создайте > UI Toolkit > Panel Settings Asset. Он будет добавлен в корневую папку проекта, которую можно затем применить к компоненту UI Document на GameObject для многоступенчатой настройки. В примере можно использовать несколько документов UI для различных режимов игры или меню. Вы также можете найти UIs для runtime и для Editor в одном и том же проекте Unity.
Адаптивные макеты: Flexbox
UI Toolkit располагает визуальные элементы на основе Yoga, движка макета HTML/CSS, который реализует подмножество Flexbox.
Если вы не знакомы с Yoga и Flexbox, эта глава позволит вам быстро ознакомиться с принципами, лежащими в основе движка макета UI Toolkit.
Flexbox (или Flexible Box Layout) — это метод расположения элементов в строках или столбцах.
Архитектура Flexbox отлично подходит для разработки сложных, хорошо организованных макетов. Рассмотрим некоторые из ее преимуществ:
Реагирующий UI: Flexbox организует все в сеть коробок или контейнеров. Вы можете вставлять эти элементы как родительские и дочерние и расположить их пространственно на экране с помощью простых правил. Дети автоматически реагируют на изменения в их родительских контейнерах. Реагирующий макет адаптируется к различным разрешениям и размерам экрана, что позволяет вам легче ориентироваться на множество платформ.
Организованная сложность: Стилы определяют простые правила, которые контролируют эстетические ценности визуального элемента. Один стиль может быть применен к сотням элементов одновременно, с изменениями, немедленно отраженными на всем UI. Это центрирует UI дизайн вокруг последовательных многоразовых стилей, а не работает над внешним видом отдельных элементов.
Разделение логики и дизайна: UI макеты и стили отделены от кода. Это помогает дизайнерам и разработчикам работать параллельно без нарушения зависимостей. Каждый пользователь может сосредоточиться на том, что он делает лучше всего.
Визуальные элементы
В UI Toolkit основной строительный блок любого интерфейса — визуальный элемент. Визуальный элемент является базовым классом для всех элементов UI Toolkit (кнопок, изображений, текста и т. д.). Считайте их аналогом GameObject в UI Toolkit.
UI Hierarchy одного или нескольких визуальных элементов называется визуальным деревом.
Комбинации нескольких визуальных элементов хранятся в файлах UXML, которые содержат информацию, связанную с иерархией, а также ее стилизацию (если не используется StyleSheet или USS) и расположение визуальных элементов.
Прежде чем мы углубимся в UI Toolkit, вам нужно будет понять основы Flexbox Layout, которые можно продемонстрировать с помощью основных визуальных элементов в UI Builder.
Расположение визуальных элементов
При создании макета UI подходите к каждому экрану как к отдельной группе визуальных элементов. Подумайте о том, как разбить экраны на коробки, которые складываются горизонтально или вертикально, и нужны ли им дочерние коробки для организации информации.
В примере ниже один большой визуальный элемент может быть контейнером, меню и его элементы слева. Отдельные дочерние визуальные элементы для представления каждой из кнопок.
UI Builder предлагает два варианта расположения визуальных элементов:
-
Относительное позиционирование: Это параметр по умолчанию для новых визуальных элементов. Дочерние элементы следуют правилам Flexbox родительского контейнера. Например, если родительского элемента Направление установлено на Столбец, дочерние визуальные элементы располагаются слева направо. Относительное позиционирование изменяет размер и перемещает элементы динамически на основе:
Правила размера или стиля родительского элемента: Если вы изменяете настройки родительского элемента с помощью Padding или Align > Justify Content, его дочерние элементы сами приспосабливаются к этим изменениям.
Правила размера и стиля для дочернего элемента: Если дочерний визуальный элемент имеет собственные настройки минимального или максимального размера, движок макета пытается соблюдать и эти настройки.
UI Toolkit обрабатывает любые конфликты между родительским и дочерним элементами (например, дочерний элемент с минимальной шириной, которая шире его контейнера, приводит к переполнению).
Режимы позиционирования доступны для любого визуального элемента. -
Абсолютное позиционирование: Здесь положение визуального элемента прикрепляется к родительскому контейнеру, аналогично тому, как uGUI (Unity UI) работает с Canvas. Правила размера или правила, которые влияют на дочерние элементы, все еще применяются, но сам элемент будет наложен на родительский контейнер, игнорируя гибкие настройки, такие как Grow, Shrinkили Разница.
Абсолютно позиционированные элементы могут использовать параметры Левый, Top, Правыйи Нижняя в качестве якорей. Например, нулевые значения для Right и Bottom прикрепляют Button к правому нижнему углу родительского контейнера.
Слева синий визуальный элемент имеет относительное положение, а родительский элемент использует настройку Направление: строка в качестве настройки Flex. Справа синий визуальный элемент использует абсолютное положение и игнорирует правила Flexbox родительского элемента.
Возможно, вы захотите использовать относительное позиционирование для элементов, которые постоянно видны, имеют сложную группировку или содержат несколько элементов.
Абсолютное позиционирование может быть полезным для временных UIs (например, всплывающих окон), декоративных элементов, которые не мешают композиции макета, или элементов, которые следуют за положением других игровых элементов (например, шкалы здоровья персонажа).
Настройки размера
Помните, что визуальные элементы — это просто контейнеры. В Unity 6, их Grow по умолчанию установлено на 1, что означает, что они займут все свободное пространство в контейнере. В противном случае они не займут никакого пространства, если только они не заполнены другими дочерними элементами, которые уже имеют определенный размер, или вы установили для них определенную Ширину и Высоту.
Поля Ширина и Высота определяют размер элемента. Поля Максимальная Ширина и Максимальная Высота ограничивают, насколько он может расширяться. Аналогичным образом, Минимальная Ширина и Минимальная Высота ограничивают, насколько он может сжиматься. Вы можете определить размеры в пикселях или процентах, переопределяя автоматическое по умолчанию. Эти параметры влияют на то, как настройки Flex (ниже) могут изменять размер элементов в зависимости от свободного пространства.
Настройки Flex
Настройки Flex могут повлиять на размер элемента при использовании относительного позиционирования. Рекомендуется экспериментировать с элементами, чтобы понять их поведение из первых рук.
Базис относится к ширине и высоте элемента по умолчанию до любой операции увеличения или уменьшения соотношения:
- Если Grow установлено в 1, то этот элемент займет все свободное вертикальное или горизонтальное пространство в родительском элементе. Если Grow установлено в 0.5, то он займет половину свободного пространства.
- Если Grow установлено на 0, элемент не будет расти за пределы текущей Базы (или размера).
- Если значение Shrink установлено на 1, элемент будет уменьшаться настолько, насколько это необходимо, чтобы поместиться в свободное пространство родительского элемента.
- Если Shrink установлен на 0, элемент не будет уменьшаться и будет переполняться при необходимости.
Вышеприведенный пример показывает, как работает База с опциями Расширение и Уменьшение:
Зелёный элемент с базой 80% занимает 80 процентов имеющегося пространства.
Установка Grow на 1 позволяет зеленому элементу расшириться на всё пространство.
С добавлением желтого элемента элементы переполняют пространство. Зелёный элемент возвращается к занятию 80 процентов пространства.
Настройка Shrink в 1 делает зеленый элемент уменьшиться, чтобы вписаться в желтый элемент.
Здесь оба элемента имеют значение Shrink 1. Они уменьшаются одинаково, чтобы поместиться в свободное пространство.
Как видно, элементы с фиксированным размером, выраженным в пикселях (синий квадрат в 3-5), не реагируют на настройки Base, Grow или Shrink.
💡 Совет: Расчет размера визуального элемента
Механизм макета объединяет параметры Размер и Flexbox, чтобы определить, насколько большим будет каждая фигура при использовании относительного позиционирования. Расчет размера визуального элемента включает следующие шаги:
Система макета рассчитывает размер элемента на основе свойств Ширина и Высота.
Машина макета проверяет, есть ли в родительском контейнере дополнительное свободное пространство, или его дочерние объекты уже переполняют свободное пространство.
Если имеется дополнительное свободное пространство, система макета ищет элементы, которые имеют ненулевые значения в настройке Flex/Grow. Она распределяет дополнительное пространство в соответствии с этим фактором, расширяя дочерние элементы.
Если дочерние элементы переполняют свободное пространство, элементы, имеющие ненулевые значения Flex/Shrink, будут соответственно уменьшены в размере.
Затем принимаются во внимание любые другие свойства, влияющие на размер элемента (Min-Width, Flex-Basis и т.д.).
Машина макета применяет окончательный, разрешенный размер.
Настройка Направление определяет порядок расположения дочерних элементов внутри родительского элемента. Дочерние элементы выше в меню Hierarchy появляются первыми. Элементы в конце Hierarchy появляются последними.
Настройка Оверлок указывает системе макета, должны ли элементы попытаться вписаться в одну колонку или строку (No Wrap). В противном случае, они появляются в следующей строке или столбце (Wrap или Wrap reverse).
Настройки выравнивания
Настройки Выравнивания определяют, как дочерние элементы выстраиваются по отношению к родительскому элементу. Установите Выравнивание > Align Items в родительском элементе для выравнивания дочерних элементов по началу, центру или концу. Эти параметры влияют на поперечную ось (перпендикулярную строке или столбцу в Flex > Направление).
Опция Стретч также работает вдоль поперечной оси, но значения Min или Max от размера могут ограничить эффект (это по умолчанию). Между тем, опция Авто указывает, что движок макета может автоматически выбрать один из других вариантов на основе других параметров. Рекомендуется выбрать один из вариантов для большего контроля над макетом, и в основном использовать опцию Auto для специальных случаев использования.
Перейдите к Выравнивание > Justify Content, чтобы определить, как движок макета располагает дочерние элементы внутри родительского элемента. Эти элементы могут быть выстроены, смежными друг с другом, или распределены с использованием имеющегося пространства. Настройки Flex > Grow и Flex > Shrink влияют на получаемый макет.
Параметр Align Self позволяет контейнеру выравнивать себя по центру, концу или началу гибкого макета.
Поле и заполнение
Используйте настройки Поле и Заполнение, чтобы определить пустые пространства вокруг визуальных элементов и их содержимого. Unity использует вариант стандартной модели CSS, похожий на диаграмму ниже.
В области содержимого находятся основные визуальные элементы (текст, изображения, элементы управления и т. д.).
Заполнение определяет пустую область вокруг Пространства Содержимого, но внутри Границы.
Граница Граница определяет границу между Заполнением и Полем. Она может быть окрашена и округлена. Если задана толщина, Граница расширяется внутрь.
Поле похоже на Заполнение, но определяет область за пределами Границы. Для элементов с Абсолютной позицией, настройки поля не будут иметь никакого эффекта, но вы можете использовать настройки Позиции для добавления значений смещения.
Справочная информация и изображения
В UI Toolkit любой визуальный элемент может быть использован для отображения изображения на экране. Просто установите свойство background для отображения текстуры или спрайта.
Вы можете заполнить цвет или изображение, чтобы изменить внешний вид элемента. Это полезно для wireframing. Яркие цвета с контрастом могут показать, как различные элементы выглядят рядом друг с другом и реагируют на изменения в их контейнерах.
Переменные или фиксированные единицы измерения
В UI Builder вы встретите четыре параметра, которые определяют расстояние и размер элементов:
Авто: Это параметр по умолчанию для размера и положения. Система макета рассчитывает значения элементов на основе информации как родительского, так и дочернего элемента.
Процент: Единица измерения равна проценту контейнера элемента и изменяется динамически с шириной и высотой родительского элемента. Работа с процентами может обеспечить масштабируемость при работе с несколькими размерами формата.
пикселей: Эта опция полезна, когда вы хотите, чтобы ваш элемент имел фиксированный размер, например, когда вы хотите, чтобы небольшие элементы имели минимальный размер в пикселях, который позволит им оставаться читаемыми в любое время.
Первоначальный: этот параметр возвращает свойство к состоянию по умолчанию (правилам оформления Unity по умолчанию), игнорируя текущие значения стилей.
Если вы хотите применить правило масштабирования ко всему UI в то же время, вы можете сделать это в Настройки панели в соответствии Режим масштабирования параметры:
Постоянный размер пикселей: Этот режим масштабирования сохраняет элементы с фиксированным размером пикселей, не зависящим от размера экрана. Коэффициент масштабирования может быть применен для умножения размеров элементов.
Постоянный физический размер: В этом режиме элементы сохраняют один и тот же физический размер на всех экранах. Система масштабирует UI на основе ссылки DPI, изменяя размер, если фактический экран DPI отличается.
Scale with Screen Size: этот параметр динамически изменяет размер элементов в зависимости от разрешения. Режим соответствия экрана определяет, чему отдаётся приоритет при масштабировании: ширине, высоте или их сочетанию. Параметр Справочная резолюция задаёт базовый размер UI. Когда для Screen Match Mode выбрано Соответствие ширине или высоте, значение Матч определяет, масштабирует ли система UI интерфейс по ширине экрана, по его высоте или по сочетанию этих двух параметров.
Переопределенные свойства в UI Builder
Изменённые свойства выделяются в Inspector жирным шрифтом, и рядом с ними появляется белая линия, как на снимке экрана ниже. Это означает, что они переопределяют значения по умолчанию или значения из селектора в таблице стилей либо в USS выбранного файла UXML. Такое поведение также называют «встроенным стилем». Если значение менять не нужно, лучше оставить его в состоянии по умолчанию, чтобы изменения было проще находить и контролировать. Чтобы вернуть свойству значение по умолчанию, воспользуйтесь пунктом в меню с многоточием рядом с разделом свойств.
UXML как шаблоны
Файлы UXML могут использоваться так же, как и префабы. Например, у вас может быть проект с макетом UXML, который содержит значок предмета и число, которое вам нужно создать много раз внутри инвентаря. Если вы щелкнете правой кнопкой мыши любой UXML, вы получите возможность создать Шаблон, который можно позже добавить к любому другому визуальному элементу в панели Hierarchy или инстанционировать из кода. После создания вы можете найти его в вашей Библиотеке и в представлении Project.
Дополнительные ресурсы
Узнайте больше о движке Flexbox с помощью следующих ресурсов. Поскольку Flexbox и Yoga являются существующими стандартами в разработке веб-сайтов и приложений, в Интернете будет доступно множество ресурсов.
- UI Toolkit во время выполнения: Получить разбивку
- Официальные документы по йоге
- CSS-Руководство по трюкам Flexbox