В этом разделе вы узнаете, как создавать полностью настраиваемые интерфейсы для своих игр, следуя инструкциям по воссозданию интерфейса игрока как в шаблоне «Черепашки-ниндзя: Аркада».
Последовательность шагов:
Добавьте просмотр привязок к каждому элементу интерактивного виджета.
Настройте устройство управления интерфейсом для отображения интерфейса.
Загрузите пакет текстур из Лаборатории материалов для интерфейса бесплатно и поэкспериментируйте с настройками интерфейса!
Нажмите на изображение, чтобы увеличить его.
нас ждёт увлекательнейшая экскурсия!
Настройка пользовательских виджетов
В Каталоге ресурсов перейдите в папку Все > [НАЗВАНИЕ вашего проекта] > Интерфейс > Виджеты и откройте схему создания виджетов UW_HUD_PlayerInfoBlock .
Слева есть вкладка Иерархия, которая работает так же, как и «Структура» в главном окне редактора, и отображает различные компоненты готового виджета.
Щит
Верхний раздел состоит из трёх изображений панелей, которые задают послойный вид интерфейса. Вам доступны:
Backplate1_Image — слой на сером фоне
Backplate2_Image — слой с оранжевым контуром
Backplate3_Image — слой с белым контуром
Вместе взятые эти изображения образуют обрамление информационной панели игрока.
При импорте изображений для использования в интерфейсе не забудьте задать для Группы текстур значение Интерфейс, а для Настроек сжатия значение UserInterface2D(RGBA8).
Имя игрока
Этот компонент состоит из двух элементов: Имя активного игрока и Имя неактивного игрока, которые отображаются, когда игрок жив, устранён или отключён.
Выберите два разных цвета, с помощью которых игроки буду различать, кто из их команды в данный момент активен, а кто был устранён.
Для параметра Видимости имени активного игрока задайте значение Отображается, а для неактивного — Скрыто. Значение этого параметра будет отображаться только при определённых условиях.
Измените значение параметра Переопределить ширину на 220,0, чтобы более длинные имена игроков не накладывались на значок аватара игрока.
Значок аватара игрока
Этот компонент представляет собой портрет персонажа игрока с учётом выбранного им игрового образа.
Он привязан к экземпляру материала MI_UI_PlayerCard, который находится в папке Интерфейс > Экземпляры материала.
Вы можете настроить этот экземпляр материала на панели **Сведения** по своему усмотрению. Попробуйте импортировать какое-либо пользовательское изображение и добавить несколько цветов обводки!
В данном примере выбранное изображение представляет собой пустую картинку, которая позже будет подключена к образу персонажа.
здоровья;
Этот компонент содержит области, в которых будет отображаться уровень здоровья и щита игрока.
На родительском уровне есть поле с размерами, которое определяет, насколько большой может быть общая область.
Далее идёт изображение панели здоровья MI_UI_Health_Backplate. Этот материал интерфейса также доступен в разделе Fortnite > Интерфейс > Материалы. Его можно легко настроить, и в нём есть множество настроек мгновенного отображения шкалы здоровья игрока.
В верхней части панели находится поле стека, состоящее из двух компонентов: шкалы здоровья и тени, которые называются Health_Image и Health_Shadow соответственно.
The Health_Image — это настраиваемый материал шкалы прогресса в интерфейсе. Если вы откроете экземпляр материала, то сможете увеличить масштаб, изменив Размер окна предпросмотра.
Попробуйте изменить некоторые настройки на панели «Сведения», чтобы увидеть, как эти изменения повлияют на существующий материал.
Поскольку значения скалярных параметров (состояние заполнения шкалы прогресса) варьируются от 0 до 1, а значения здоровья и щита в Fortnite обычно варьируются от 0 до 100, важно задать для Множителя значение 0,01, чтобы значения здоровья и щита отображались для игроков корректно.
Шкала Health_Shadow — это простое затенённое наложение, добавленное для красоты.
щита;
Компонент щита состоит из фона Shields_Container, пустой области экрана тёмно-серого цвета и Shields_Image с материалом интерфейса для шкалы прогресса.
В Shield_Image используется базовый экземпляр материала шкалы прогресса, который является упрощённой версией материала Health_Image.
Добавление просмотра привязок
Мы создали основные компоненты интерфейса для игры, а теперь давайте попрактикуемся в добавлении функции просмотра привязок, которая позволяет каждому из компонентов обновляться на основе данных, которые они получают из игрового сеанса в реальном времени.
Имя игрока
Чтобы имя игрока отображалось в нужном поле, выполните следующие действия:
Откройте вкладку Просмотр привязок, нажав на Окно > Просмотр привязок или выбрав Просмотр привязок в нижней части экрана и закрепив эту настройку.
Чтобы просмотреть список просмотра привязок HUDPlayerInfoViewModelBase:
1. Откройте окно «Модели просмотра», выбрав Окно > Модели просмотра.
1. Перейдите к +модель просмотра и выберите Базовая модель просмотра сведений об игроке в интерфейсе.
1. Нажмите Устройство — Модель просмотра сведений об игроке в устройстве управления интерфейсом, а затем Выбрать.
Выберите NameActive_Text из списка Иерархия или нажав в области с именем игрока на экране предпросмотра интерфейса.
Нажмите + добавить NameActive_Text виджета и выберите Текст в выпадающем меню.
В пустом поле справа выберите HUDPlayerInfoViewmodel, а затем Имя игрока в выпадающем меню.
Финальная привязка должна выглядеть так:
Повторите шаги 1–3 для элемента NameInactive_Text.
Чтобы изменить настройки видимости для имени неактивного игрока, добавьте новый виджет в NameInactive_Text и выберите Видимость в выпадающем меню.
Нажмите на пустое поле справа и выберите Функции преобразования > Для видимости (логическое значение).
При выборе этой настройки появятся три новых поля. Нажмите на значок ссылки рядом с полем Отображается. Выберите в меню HUDPlayerInfoViewModel и Устранён.
Ниже задайте для параметра True для видимости значение Без проверки нажатия (только сам элемент). Для параметра False для видимости оставьте значение Свёрнуто. При устранении или отключении игрока от сеанса его имя заменяется на NameActive_Text, а когда игрок жив, его имя остаётся свёрнутым.
Окончательная привязка NameInactive_Text должна выглядеть так:
Нажмите Скомпилировать, чтобы применить изменения. Больше с именами игроков ничего делать не нужно.
Значок аватара игрока
Выберите Profile_Image в Иерархии или нажмите на область значка игрока на экране предпросмотра интерфейса.
Нажмите + добавить виджет Profile_Image.
Перейдите к Profile_Image > Кисть и нажмите Выбрать. Эта привязка базируется на выбранной настройке «Кисть» на панели «Сведения» в Profile_Image.
Нажмите на пустое поле справа и выберите Функции преобразования > Задать параметр текстуры.
Наберите Texture в поле Название параметра. Чтобы найти название этого поля, откройте экземпляр материала для аватара игрока.
Убедитесь, что названия параметров экземпляра материала для функций Задать вектор/скалярное значение/параметр текстуры точно соответствуют значению в поле «Название параметра».
Нажмите на значок «Ссылка» рядом с полем Значение и выберите HUDPlayerInfoViewModel > Значок аватара игрока.
Финальная привязка должна выглядеть вот так:
Здоровье и щит
Выберите Health_Image в Иерархии или нажмите на область шкалы здоровья на экране предпросмотра интерфейса.
Нажмите + добавить виджет Health_Image.
Перейдите к Profile_Image > Кисть и нажмите Выбрать.
Нажмите на пустое поле справа и выберите Функции преобразования > Задать скалярный параметр.
Наберите Progress в поле Название параметра. Чтобы найти название этого поля, откройте экземпляр материала для аватара игрока.
Нажмите на значок Ссылка рядом со Значением и выберите HUDPlayerInfoViewModel > Здоровье.
Шкала прогресса позволяет увидеть оставшееся у игрока здоровье в процентах, а поскольку для параметра Множитель было задано значение 0,1, каждый процентный пункт будет менять шкалу прогресса на 1/100. Произвольно изменив процентное значение в экземпляре материала, вы увидите, как перемещается шкала прогресса.
Процент здоровья Нажмите на изображение, чтобы увеличить его.
Финальная привязка должна выглядеть вот так:
Для шкалы щита повторите шаги с 1 по 6, но выберите Щит вместо Здоровья.
Финальная привязка для щита должна выглядеть вот так:
Нажмите Скомпилировать, чтобы применить изменения.
Весь виджет
Эта привязка гарантирует, что виджет будет отображаться полностью только после подключения игрока к игре.
Выберите PlayerInfoBlock_Overlay из Иерархии.
Выберите + Добавить PlayerInfoBlock_Overlay виджета, а затем выберите «Видимость» в выпадающем меню.
Нажмите на пустое поле справа и выберите Функции преобразования > Для видимости (логическое значение). При выборе этой настройки появятся три новых поля.
Нажмите на значок ссылки рядом с полем Отображается. Выберите в меню HUDPlayerInfoViewModel и Отключён.
Задайте для параметра True для видимости значение Свёрнуто, для значения False для видимости значение Без проверки нажатия (только сам элемент).
Финальная привязка должна выглядеть так. Нажмите Скомпилировать, чтобы сохранить изменения.
Вот и всё! Теперь у вас есть полностью настроенный виджет интерфейса, который будет отображать сведения об игре!
Создание стека игроков
В этом разделе вы узнаете, как создать пользовательский виджет, который отображает дополнительных игроков команды вместе с контролирующим игроком.
Для начала создайте новую схему создания виджета: нажмите правой кнопкой мыши в «Каталоге ресурсов» и выберите Интерфейс > Схема создания виджета.
Выберите Пользовательский виджет в диалоговом окне и переименуйте его в HUDInfoStack.
Дважды нажмите на пользовательском виджете, чтобы открыть новое окно редактора.
Затем на панели Палитра перетащите элемент Наложение на панель Иерархия.
Перетащите Поле стека на уровень под наложением и переименуйте его в PlayerInfoStack.
На панели «Модели просмотра» нажмите на +модель просмотра и выберите Устройство управления интерфейсом: список сведений об игроке команды/отряда.
Перейдите к панели Сведения и нажмите +добавить расширение модели просмотра. Это позволит PlayerInfoStack принять значение класса виджета записи.
Если вы не видите этих настроек, попробуйте скомпилировать виджет ещё раз.
Выберите для класса виджета записи PlayerInfoBlock, созданный ранее. Ниже в качестве Записи модели просмотра выберите HUDPlayerInfoViewModel.
В разделе Шаблон ячейки можно настроить расстояние между каждым виджетом и выравнивание, а также просмотреть, как будет выглядеть определённое количество виджетов в игре.
Расстояние между виджетамиНажмите на gif, чтобы увеличить его.
На панели Просмотр привязок нажмите на +добавить виджет, а затем выберите HUDInfoStack. Выберите PlayerInfoStack_Viewmodel_Extension и разверните его, чтобы выбрать параметр Настроить элементы. Если в списке нет PlayerInfoStack_Viewmodel_Extension, нажмите Скомпилировать — после этого расширение должно появиться.
В пустом поле справа выберите HUDPlayerInfoListViewModel > Массив сведений об игроках команды/отряда. Это позволит передать массив моделей просмотра сведений об игроке в новое настроенное расширение с помощью функции Настроить элементы.
Нажмите Скомпилировать, чтобы сохранить изменения. Теперь можно добавить эти виджеты в игру с помощью устройства управления интерфейсом.
Если вы хотите создать виджет для контролирующего игрока, который был бы отдельно от остальной команды:
Создайте новый виджет для контролирующего игрока и настройте просмотр привязок так же, как вы делали это ранее, используя Устройство — Модель просмотра сведений об игроке в устройстве управления интерфейсом.
Поместите этот виджет под родительский виджет с полем стека.
Создайте привязку для этого виджета. В поле слева выберите Устройство — Модель просмотра сведений об игроке в устройстве управления интерфейсом. В поле справа выберите Устройство — Устройство управления интерфейсом: список сведений об игроке команды/отряда > Данные контролирующего игрока.
Настройка устройства управления интерфейсом
Найдите Устройство управления интерфейсом в «Каталоге ресурсов» и перетащите его в сцену.
В пользовательских настройках выберите элементы, которые будут отображаться игроку, и убедитесь, что для параметра Показать интерфейс задано значение Да, а для параметра Показать сведения о команде — значение Нет.
Прокрутите вниз до параметра Переопределение виджета информации об игроке и перетащите виджет HUDInfoStack в пустое поле. Проверьте, что это только что созданный виджет стека, а не исходный виджет, который вы создали.
Нажмите Сохранить.
Вот и всё! Обновлённый интерфейс должен появиться при тестировании вашей игры!
Далее
Далее рассмотрим, как настраивать камеры и устройства управления в игре в жанре «сайд-скроллер»!
