UMG
Система пользовательского интерфейса в Unreal Engine называется Unreal Motion Graphics или UMG. Она сильно отличается от стандартной системы пользовательского графического интерфейса в Unity. Если вы работали ранее с конструктором интерфейсов из набора инструментов для создания интерфейсов в Unity, инструмент разработки пользовательского интерфейса в UMG покажется вам знакомым. Инструмент разработки интерфейсов подробно рассмотрен в официальной документации, при этом разработчикам, переходящим с Unity, особенно рекомендуем обратить внимание на разделы «Создание интерфейса» и «Рекомендации по работе с UMG». В основе UMG лежат виджеты, которые представляют собой набор готовых функций и иерархий, которые вы можете использовать для создания собственного пользовательского интерфейса.
CommonUI
CommonUI — это собственный плагин, разработанный компанией Epic Games и использующийся в игре Parrot. CommonUI позволяет добиться единообразия стиля и действия всех виджетов, что обычно достаточно долго приходится настраивать вручную. Один из примеров — это обнаружение смены устройств ввода и автоматическое переключение соответствующих значков ввода на экране. Подобная настройка вручную заняла бы много времени, в то время как CommonUI помогает автоматизировать этот процесс. CommonUI также требуется для поддержки переназначения клавиш расширенного ввода, о чём более подробно рассказано в разделе документации «Расширенный ввод».
Для использования CommonUI необходимо сначала включить его в окне «Плагины». В меню перейдите в раздел Правка > Плагины, найдите плагин CommonUI, включите его и перезапустите редактор.
Перейдите в Настройки проекта > Общие настройки и измените Класс клиента окна просмотра игры с GameViewportClient на CommonGameViewportClient. Это позволит виджетам CommonUI получать события ввода от движка.
В разделе Настройки проекта > Общие настройки ввода отметьте параметр Включить поддержку расширенного ввода. Это позволяет обеспечить работу расширенного ввода с CommonInput. CommonInput обрабатывает данные ввода внутри виджетов CommonUI.
Также дополнительно необходимо включить некоторые модули в проект, чтобы использовать их в коде. Перейдите в файл
$ProjectName.Build.cs, в данном случае это будет файлParrot.Build.cs. Добавьте следующее в список PublicDependencyModuleNames:CommonInput;CommonUI;EnhancedInput;GameplayTags;UMG.
Иерархия виджетов в проекте Parrot
Первый класс интерфейса игры Parrot, который следует рассмотреть, — это AParrotHUD. Класс HUD в Unreal Engine представляет собой актор, создаваемый для каждого локального игрока и выполняющий обработку визуального интерфейса. В нём есть холст и отладочная область, на которых можно рисовать напрямую. Вы также можете назначить его как часть конфигурации игрового режима. В игре Parrot этот класс используется как актор, владеющий корневым виджетом, из которого создаются и управляются все остальные виджеты.
Виджет-владелец будет принадлежать типу класса UParrotGameLayout. UParrotGameLayout является базовым виджетом-контейнером C++ для всех остальных виджетов интерфейса. Внутри него находится список «слоёв» типа UCommonActivatableWidgetContainerBase. Все остальные отображаемые виджеты будут перемещены на один из этих слоёв.
Устанавливаются следующие базовые слои:
Game: слой, в который мы помещаем виджет HUD из UMG.
GameMenu: слой, в который мы помещаем любой виджет, требующий отображения поверх HUD-интерфейса.
Menu: слой для всех виджетов экрана, таких как экран паузы, экран настроек, экран инвентаря и другие подобные экраны.
Modal: слой для всех всплывающих окон и сообщений.
Одновременно активен может быть только один виджет на слой. Вы можете поместить на слой Menu несколько различных виджетов экрана, но активным и отображаемым будет только последний из них.
В игре Parrot мы также создали иерархию классов для активируемых экранов, поскольку все эти виджеты имеют общие возможности и подключаются к слою Menu. Иерархия классов выглядит следующим образом:
Именно таким образом и создаются все экраны пользовательского интерфейса в игре.
Стилизация виджетов
После установки плагина CommonUI и настройки экрана можно приступить к стилизации виджетов. В качестве примера отлично подойдёт виджет W_ButtonBase из Содержимое/UI/Widgets/Common. Он использует данные стилизации ButtonStyle_Base из Содержимое/UI/Styling. Она также использует класс UCommonButtonStyle из CommonUI. Вы можете настроить множество параметров. В качестве примера можно привести звуки и кисти в зависимости от состояния кнопки. В CommonUI есть множество различных классов для стилизации, зависящие от используемого виджета. Если хотите сделать что-то своё, то всегда можете перейти в код движка, где приведена дополнительная информация.
Экран загрузки
Загрузочный экран в игре Parrot использует собственный плагин от Epic Games: CommonLoadingScreen. Ещё один способ применения этого плагина на практике можно найти в примере проекта Lyra от Epic Games. Чтобы разобраться, почему мы используем этот плагин, сначала нужно разобраться в основах загрузки уровней в Unreal Engine.
Существует несколько способов обработки процесса загрузки уровней в UE. Простым способом будет вызов узла Открыть уровень в схеме. Эта функция может загрузить карту по строке или мягкой ссылке на объект. Такой вариант подходит для простых карт, но есть одна оговорка. При вызове этой функции карта загружается синхронно, что может вызвать заметное зависание в зависимости от того, какой объём данных необходимо загрузить для новой карты. Другая проблема заключается в том, что виджет, добавленный в окно просмотра, будет привязан к контроллеру игрока, существующему на предыдущем уровне. При переходе между уровнями он будет очищен в процессе выгрузки уровня.
Стоит рассмотреть вариант с загрузкой нового режима игры с учётом используемой карты (к примеру, если есть уровень одиночной и многопользовательской игры). Но как сохранить экран загрузки и при этом избежать возможных зависаний при загрузке с помощью узла Открыть уровень? Взглянем на BP_ParrotGameInstance:
Асинхронная загрузка уровня позволяет решить проблему, когда к моменту вызова узла «Открыть уровень» ресурсы оказываются не готовы. Как сообщается в комментарии, работа с экраном загрузки здесь уже выполнена. Настройка плагина достаточно простая, а сам виджет загрузочного экрана вы можете задать через раздел Правка > Настройки проекта > Общий экран загрузки.
Обратите внимание на раздел параметров для отладки. Благодаря этим возможностям отладки прямо в редакторе вы сможете разобраться в том, как будет работать экран загрузки в упакованной версии.
Теперь загрузка ваших уровней будет сопровождаться загрузочным экраном. Чтобы разобраться, как настроить порядок уровней для одиночной и многопользовательской игры, рекомендуем самостоятельно ознакомиться с BP_ParrotGameInstance. Настройка состояния игры более подробно рассмотрена в разделе документации «Инфраструктура игрового процесса Unreal Engine».