Unreal Motion Graphics (UMG) — это мощный инструмент для создания пользовательских интерфейсов. Неважно, создаёте ли вы простое всплывающее окно или сложные системы интерфейса, — понимание основных принципов работы в UMG позволит вам экспериментировать с этим мощным инструментом.
Чтобы довести свой интерфейс до этапа игрового теста, нужно понимать, как UMG создаёт интерфейсы. Этот урок разбит на следующие разделы, в которых вы познакомитесь с рабочими процессами создания интерфейса:
Разработка систем интерфейса
Планирование дизайна интерфейса — это ключ к созданию удобных в использовании и полезных систем интерфейса. Подумайте о следующем:
Тип игры, которую вы создаёте.
Тип интерфейса, необходимый для поддержки игроков и для того, чтобы сделать игровой процесс увлекательным и понятным.
Окончательный внешний вид интерфейса.
Например, в HUD-интерфейсе Fortnite должна быть вся необходимая информация об игре: от сведений о здоровье и щите до общих игровых показателей.
Набросайте свои идеи по созданию интерфейса. Используйте эти наброски для создания интерфейса в UMG.
Базовые принципы веб-дизайна помогут вам спланировать макет интерфейса до того, как вы начнёте создавать пользовательские виджеты. Эти принципы можно использовать для определения того, какие части интерфейса должны быть жёсткими, а какие — гибкими. Используйте следующие принципы при веб-дизайне макета интерфейса:
Абсолютный макет
В абсолютных макетах обычно используются точные расчёты и координаты размещения элементов на экране. Это удобно, когда нужно удержать элемент интерфейса на месте, используя координаты X и Y. Элемент интерфейса должен учитывать, где на экране размещается родительский элемент. Родительский элемент начинается в левом верхнем углу макета.
Этот стиль макета менее гибкий, и его сложно поддерживать при воспроизведении на экранах разных размеров.
Абсолютный макет лучше всего использовать для небольших элементов, которые являются частью более масштабного дизайна. Например, абсолютное положение можно использовать для значка. В UEFN его можно задать с помощью настроек Выравнивание и Отступ виджета изображения.
Значок останется на том же месте независимо от расположения и размера других элементов интерфейса вокруг него.
Относительный макет
Такой тип макета лучше всего подходит для игр, которые можно запускать на нескольких платформах, поскольку он позволяет адаптировать интерфейс для большого ТВ-экрана или небольшого экрана сотового телефона.
Отступы и интервалы
Отступ нужен для корректировки небольших пробелов между элементами в целом. Для отдельных виджетов в UMG сложно управлять отступом. Вместо этого используйте инструменты Выравнивания для изображений и текстовых блоков. Они позволят управлять пространством и размещением эффективнее, чем отступ.
Это означает, что, после того как все элементы будут размещены, если вам всё ещё будет нужно пространство между элементами, его можно будет добавить в настройках отступа для отдельных виджетов.
Чтобы увеличить расстояние между виджетами, используйте пустое изображение или виджет ячейки между виджетами контейнера и пользовательскими виджетами. Ниже вы можете увидеть, что виджет изображения используется для создания расстояния после каждого пользовательского виджета, благодаря чему каждый виджет чётко отображает нужную информацию.
Для чего нужны виджеты UMG
Интерфейс в UMG следует создавать по секциям. Разработайте интерфейс с помощью отдельных пользовательских виджетов и слоёв. Когда все элементы интерфейса будут готовы, разместите отдельные секции под одним родительским пользовательским виджетом. Создание интерфейса по слоям позволит вам лучше управлять дизайном и макетом интерфейса в целом.
Чтобы спланировать и создать отдельные пользовательские виджеты, сначала нужно разобраться с виджетами, доступными на панели «Палитра». Существует два основных типа виджетов: контейнеры и элементы.
Контейнеры
Контейнер содержит несколько пользовательских виджетов, элементов и других контейнеров для создания части пользовательского интерфейса. Элемент может быть изображением, материалом, текстом или чем-то ещё. Размер виджета контейнера определяется размером самого большого дочернего элемента.
| Виджет контейнера | Назначение | Изображение |
|---|---|---|
Решётка | Размещает элементы в пределах гибкого шаблона решётки. Добавляет параметры для дочерних элементов в следующих пунктах:
|  |
Равномерная решётка | Размещает дочерние элементы в строках и столбцах с равными интервалами. Добавляет параметры для дочерних элементов в следующих пунктах:
|  |
Наложенный слой | Накладывает элементы и другие виджеты контейнера друг на друга. Контейнеры «Наложение» не добавляют дополнительные параметры или настройки для своих дочерних элементов. |  |
Стековые поля | Размещает элементы горизонтально или вертикально (слева направо и сверху вниз). Этот виджет контейнера не может размещать элементы правильно. Используйте другие виджеты контейнеров или элементов, чтобы создать интервал в стековом поле. |  |
Поле с размером | Вводит параметры, ограничивающие размер его дочерних элементов. Контейнеры «Размерное поле» не добавляют дополнительные параметры или настройки для своих дочерних элементов. |  |
Поле масштабирования | Определяет, как масштабировать интерфейс с учётом размера экрана. |  |
Область прокрутки | Создаёт поле прокрутки с набором элементов. Контейнеры «Поле прокрутки» не добавляют дополнительные параметры или настройки для своих дочерних элементов. |  |
Переключатель виджетов | Даёт возможность переключаться между виджетами. В этом виджете контейнера в переключателе одномоментно отображается только один виджет. Контейнеры «Переключатель виджетов» не добавляют дополнительные параметры или настройки для своих дочерних элементов. |  |
Холст | Привязывает элементы в пределах заданного пространства. Его лучше использовать в конце процесса разработки в качестве родительского контейнера. Добавляет следующие параметры для своих дочерних элементов:
|  |
Виджеты элементов
Все виджеты имеют свойства Внешний вид, для которых задаются настройки, специфичные для виджета, выбранного на панели «Сведения».
Размер дочерних элементов можно задавать на панели «Сведения», и они наследуют свойства родительского виджета контейнера.
| Виджет элемента | Назначение | Изображения |
|---|---|---|
Виджет действия | Даёт возможность использовать входные данные при привязке клавиш для определённого действия в Verse. Сам по себе виджет носит лишь косметический характер. |  |
Изображение | Позволяет добавлять текстуры (это могут быть импортированные изображения или текстуры, имеющиеся в UEFN) и материалы на фоне или переднем плане пользовательского виджета. |  |
Текстовый блок | Добавляет текст в пользовательский виджет. Вы можете настроить размер, шрифт, интервалы и другие параметры. |  |
Кнопка «Заглушить» | Прямоугольная кнопка с прозрачным фоном. |  |
Обычная кнопка | Прямоугольная кнопка с непрозрачным фоном. |  |
Громкая кнопка | Прямоугольная кнопка с жёлтым фоном. |  |
Ползунок | Ползунок, который увеличивает или уменьшает значение в пределах указанного диапазона. |  |
Подробнее о виджетах в Verse:Типы виджетов.
Создание и наложение пользовательских виджетов
Пользовательские виджеты — это файлы интерфейса, содержащие всё, что вы создали. При создании пользовательского виджета постарайтесь максимально разделять его на ячейки. Другими словами, используйте в пользовательском виджете только то, что необходимо для достижения желаемого вида элемента интерфейса.
На изображении ниже создано четыре пользовательских виджета для каждого компонента панели горячего доступа для собранных предметов. Каждый пользовательский виджет отслеживает отдельные показатели для различных компонентов, сохраняя при этом единообразный по стилю дизайн интерфейса.
Создавая отдельные пользовательские виджеты, вы можете вкладывать их в родительский виджет, чтобы придать панели горячего доступа более единообразный и управляемый вид. Устройству «Управление заданиями» будет также проще отслеживать показатели каждого отдельного компонента панели горячего доступа к коллекции.
Нажмите, чтобы увеличить изображение.
Таким образом, над разработкой интерфейса нужно потрудиться. Ознакомьтесь с уроками по созданию пользовательского HUD-интерфейса и уроками по играм в стиле Черепашек-ниндзя, чтобы попрактиковаться в создании отдельных пользовательских виджетов и разработке индивидуального внешнего вида отряда в игре.
Редактирование макета
Использование отдельных пользовательских виджетов для создания интерфейса упрощает его редактирование. Вы можете редактировать один раздел, не затрагивая при этом другие разделы дизайна интерфейса.
Обратите внимание, что на панели горячего доступа к коллекции выше все метки элементов центрированы, кроме одной. Так разработчик просто открывает пользовательский виджет для одного элемента и редактирует метку, не создавая проблем для всех остальных элементов панели быстрого доступа.
Если вы создаёте что-то более сложное, например систему инвентаря, то вы можете столкнуться с тем, что вы будете использовать ненужные виджеты контейнеров, либо не сможете привести виджеты элементов в соответствие с дизайном. В UMG есть настройки, упрощающие редактирование макета:
Заменить на…
Обернуть в…
Заменить виджеты
Замените ненужные виджеты из иерархии, не нарушив макет. Нажмите правой кнопкой мыши на ненужном виджете, выберите Заменить на…, а затем выберите другой виджет, на который вы хотите его заменить. Все заменяющие виджеты являются виджетами контейнерного типа.
Параметры дочерних виджетов изменяются в зависимости от нового используемого родительского контейнера.
Обернуть виджеты
Один из способов изменить макет, не затрагивая все дочерние виджеты, — это использовать настройку Обернуть в… в иерархии. Нажмите правой кнопкой мыши на дочернем виджете и выберите Обернуть в…, а затем выберите контейнер из выпадающего меню, чтобы использовать его свойства и сохранить настройки дочерних виджетов.
Игровой тест
Когда ваш дизайн будет готов, выполните его игровой тест. Помните следующее:
Интерфейс имеет определённое назначение. Не создавайте интерфейс просто так: он должен быть полезным.
Интерфейс должен быть полезен и удобен в использовании. Игрокам не нужно гадать, зачем он нужен.
Интерфейс должен вписаться в игру и дополнить игровой процесс.
Элементы интерфейса не должны нарушать игровой процесс.