Панели отображают различную информацию в HUD-интерфейсе, такую как изображение аватара игрока, «тег игрока», здоровье, щиты и многое другое.
Панели выполняют множество функций: от идентификации товарищей по команде в многопользовательских кооперативных играх до определения низких показателей здоровья и щитов.
В Unreal Editor для Fortnite (UEFN) панели создаются с помощью
Однако текстуры могут занимать много памяти. Из-за этого выделенный объём памяти может сильно сократиться, а производительность острова — снизиться. Текстуры и узлы Образец текстуры в материале занимают много памяти.
Материалы лучше использовать для создания плоского дизайна. С их помощью можно добавлять на панель анимированные эффекты. Материалы расходуют меньше памяти, поскольку для выполнения простых алгебраических вычислений используется графический процессор. Это позволяет делать что угодно — от создания простых форм до анимации сложных взаимодействий в материале.
 |  |
Плоский дизайн интерфейса с использованием материалов | Дизайн интерфейса с использованием текстур |
Если вы решите использовать текстуры, делайте это экономно — для интерфейса рекомендуется избегать текстур больше 256x256 пикселей.
Материалы требуют меньше памяти, поскольку для отрисовки используется графический процессор.
Метод, который вы будете использовать для панели аватара, будет зависеть от ряда факторов:
Пользовательские настройки интерфейса.
Стиль и дизайн интерфейса с учётом типа игры на острове
Сколько памяти нужно сэкономить
В этом уроке при разработке панели аватара используются три Экземпляра материала. С использованием материала M_UI_Shape_Rectangle созданы следующие дизайны панелей:
Прозрачный розовый фон
Розовый контейнер вокруг текста имени и прозрачного фона
Аквамариновый круг, в котором будет находиться аватар игрока
Создайте собственный интерфейс с помощью материалов! См. раздел Создание пользовательского интерфейса с помощью экземпляров материалов.
Настройка пользовательского виджета
Используйте рабочий процесс Пользовательский виджет из документа Всплывающие окна интерфейса, чтобы:
создать пользовательский виджет.
Переименовать миниатюру в Player_Info.
Дважды нажмите на миниатюру, чтобы открыть Редактор виджетов UMG.
В Редакторе виджетов для дизайна панели можно задать внешний вид и расположение на экране. После этого нужно будет добавить Модель просмотра, чтобы создать функцию привязки для сбора существующих сведений об игроке и их привязки к дизайну панели.
В Графе событий:
Выберите параметр Заполнение экрана в правом верхнем углу и задайте для него значение Желаемое.
С помощью этой настройки можно изменять виджеты до определённого размера, чтобы во время игры изображение интерфейса было бесшовным.
Разрабатывая дизайн для пользовательского HUD-интерфейса, сначала добавьте панели в граф событий.
На Панели Палитра перейдите в раздел Панель и перетащите панель Холст либо в Событие, либо непосредственно на панель Иерархии. Затем переименуйте панель в HUD_Canvas.
Панель Холста позволяет привязывать различные элементы интерфейса к определённым местам на экране. Прежде чем добавлять новые панели на холст, не забудьте создать план дизайна интерфейса, чтобы макет вашего дизайна отражался на Панели холста.
Используйте Панель холста только тогда, когда вы хотите использовать определённые элементы интерфейса в своём дизайне. К примеру, вы можете использовать эту панель, если вы создаёте HUD-интерфейс и вам нужно разместить различные дочерние виджеты в определённых местах на экране.
Вместо того чтобы изменять значение параметра Заполнение экрана на Желаемое, можно изменить размер Панели холста на 1920x1080 или 2560x1440, которые представляют собой наиболее стандартные соотношения сторон экрана (16:9).
В разделе Панель панели Палитра разместите Стековое поле под HUD_Canvas на панели Иерархия и переименуйте его в Backplate_StackBox. Это контейнер для интерфейса панели, в который вы будете вкладывать виджеты, составляющие переменные вашего интерфейса.
При добавлении переменных в Стековое поле они автоматически будут располагаться на панели слева направо.
Вы также можете использовать Стековое поле для размещения элементов интерфейса сверху вниз.
В секции Общие панели Палитра вставьте Изображение в Backplate_StackBox и Иерархию. Затем переименуйте Изображение в Avatar_Image, которое будет содержать границу аватара.
В разделе Панель панели Палитра разместите Наложенный слой в Backplate_StackBox и переименуйте его в Nameplate_Overlay. Инструмент Наложение позволяет накладывать виджеты друг на друга.
С панели Палитра перетащите и вложите два Изображения в Nameplate_Overlay.
Присвойте изображениям названия материалов: Фон и Граница.
Перетащите и вложите панель Размерное поле в Nameplate_Overlay.
Используйте Размерное поле, чтобы задать свойства его вложенных дочерних элементов. Это не даст элементам, находящимся в Размерном поле, растечься по экрану и, возможно, перекрыть другие элементы интерфейса или нарушить игровой процесс.
Перетащите и вложите Наложение в Размерное поле и переименуйте его в Text_Overlay.
Без Наложения вы можете сделать дочерним в Размерном поле только один виджет.
Из раздела Общие панели Палитра перетащите и вложите два Текстовых блока в Text_Overlay. Переименуйте текстовые блоки в Активный и Неактивный.
Макет интерфейса готов. Далее нужно настроить свойства виджета, чтобы привести размер элементов интерфейса панели в соответствие с размером экрана.
Настройка свойств виджета
Панель контейнера автоматически подстраивается под размер самого большого виджета внутри него. Прежде чем приступить к редактированию свойств родительской панели, нужно убедиться, что она содержит все дочерние элементы. В противном случае размеры родительского элемента могут измениться при добавлении дочерних элементов интерфейса во вкладку Иерархия.
Начните настраивать свойства панели Backgroundplate_StackBox, чтобы задать расположение панели на экране и её границы.
В дизайне этой панели отредактированы следующие свойства:
Нажмите на изображение, чтобы увеличить его.
| Настройка | Значение |
|---|---|
Ориентиры | Нижний левый угол |
Выравнивание | Должна быть задана пара координат, задающих отступ для виджета от краёв экрана. |
Подогнать размер под содержимое | True |
Ориентация | По горизонтали (все дочерние виджеты будут отображаться слева направо.) |
Сдвиг по оси X | –20,0 (наклоняет стековое поле вправо (отриц. значение)) |
Удерживайте Shift + Control и нажмите на левый нижний угол, чтобы автоматически обновить положение и выравнивание виджета.
Все базовые элементы макета панели готовы. Теперь можно добавить созданные материалы и отредактировать табличку с именем Текстовые блоки.
Добавление и редактирование ресурсов панели
В Редакторе виджетов есть настройки, позволяющие добавлять материалы и текст в выбранные виджеты, а также изменять свойства ресурсов, используемых в параметре Кисть.
Важно отметить порядок расположения материалов на панели Иерархия. При добавлении ресурсов убедитесь, что они отображаются правильно. Фоновые ресурсы должны располагаться снизу, а дополнительные ресурсы — сверху.
Редактирование экземпляров материалов
Выберите виджеты на панели Иерархия, чтобы начать добавлять материалы и текст.
Выберите Изображение аватара в разделе Стековое поле, чтобы выделить виджет и открыть его свойства на панели Сведения.
На панели Сведения добавьте Материал границы аватара в настройку Кисть. Отредактируйте настройки Размер изображения, чтобы виджет Изображения соответствовал размеру материала.
Нажмите на изображение, чтобы увеличить его.
Материалы работают как заливка. При добавлении в настройку Кисть материал заполняет пространство виджета изображения.
Если у вас есть конкретные аватары, выполните следующие действия:
* Создайте наложение, чтобы вложить изображение аватара под материал границы.
* Добавьте импортированные изображения аватара в фоновый слой Изображение.
* Используйте материал границы в верхнем слое.
Выберите Фоновое изображение на панели Иерархия, чтобы открыть параметры Наложения на панели Сведения.
На Панели Сведения установите для параметров Выравнивание по горизонтали и Выравнивание по вертикали значение Выравнивание по центру и добавьте Материал фона в настройку Кисть. Измените настройки Размер изображения, чтобы виджет Изображения соответствовал цвету материала фона.
Нажмите на изображение, чтобы увеличить его.
Выберите Изображение в рамке в разделе Nameplate_Overlay, чтобы выделить виджет и открыть его свойства на панели Сведения.
На Панели Сведения установите для параметров Выравнивание по горизонтали и Выравнивание по вертикали значение Выравнивание по центру и добавьте Материал рамки в настройку Кисть. Измените настройки в блоке Размер изображения, чтобы рамка опоясывала фон.
Нажмите на изображение, чтобы увеличить его.
Панель примет базовый вид, и вы сможете отредактировать Текстовые блоки.
Редактирование таблички с именем
На табличке с именем отображаются теги игрока. Панель, которую мы разрабатывали выше, содержит и Размерное поле, и Текстовые блоки.
Отредактировав свойства Размерного поля, можно сделать так, чтобы текст не выходил за его границы и не мешал обзору игрока.
Выберите Размерное поле на панели Иерархии, чтобы открыть его свойства на панели Сведения.
На Панели Сведения установите для параметров Выравнивание по горизонтали и Выравнивание по вертикали значение Выравнивание по центру. Это позволит автоматически центрировать Текстовые блоки на изображениях Таблички с именами. Установите для параметров Переопределение ширины и Переопределение высоты блока Размерное поле значение True и задайте нужный размер для Nameplate_Overlay.
В зелёном поле будет отображаться граница размерного поля.
Нажмите на изображение, чтобы увеличить его.
На панели Иерархия нажмите правой кнопкой мыши на Размерном поле и выберите Обернуть в… > Размерное поле для Текстовых блоков, чтобы обернуть текст игрока с учётом свойств Размерного поля.
Базовая настройка интерфейса таблички с именем завершена. Все дочерние элементы наследуют свойства родительского элемента, поэтому редактирование этих виджетов сводится к минимуму.
На панели Сведения можно редактировать Активный и Неактивный текстовые блоки, настраивая выравнивание и размер шрифта, цвет, контур и многое другое.
Активный текст должен иметь цвет, отличный от неактивного. В этом примере шрифт активного текстового блока установлен на 145 (белый с контуром 6), а шрифт неактивного блока — на 145 (SlateGrey с контуром 6).
Установите для параметра Видимость неактивного текстового поля значение Скрыто. Это позволит скрыть текст до тех пор, пока в игре не будет активирована привязка к виджету.
Это позволит собрать все элементы — табличку с именем и панель аватара — вместе.
Добавление просмотра привязок
Итак, дизайн интерфейса создан и пора добавить привязки к Текстовым полям и Avatar_Image на основе данных, которые они должны получить во время онлайн-сеанса.
Модель просмотра сведений об игроке в устройстве управления интерфейсом позволяет заменять части HUD-интерфейса на пользовательские виджеты. Чтобы воспользоваться этой настройкой, нужно создать модель просмотра панели.
Текст с именем игрока
Чтобы имя игрока отображалось в нужном поле, выполните следующие действия:
Откройте вкладку Просмотр привязок, нажав на Окно > Просмотр привязок или выбрав Просмотр привязок в нижней части экрана и закрепив эту настройку.
Чтобы просмотреть список просмотра привязок HUDPlayerInfoViewModelBase:
1. Откройте окно Модели просмотра, выбрав Окно > Модели просмотра.
1. Перейдите к +модель просмотра и выберите Интерфейс: базовая модель просмотра сведений об игроке команды/отряда.
Список сведений об игроке команды/отряда в устройстве управления интерфейсом позволяет отображать сведения о контролирующем игроке без отряда или команды.
1. Нажмите на Выбрать.
Выберите текстовый блок из списка иерархии или нажав в области с именем игрока на экране предпросмотра интерфейса.
На вкладке «Просмотр привязок» нажмите + добавить виджет Active_Name.
Выберите активное поле «PlayerName» и выберите Текст > Выбрать.
В пустом поле справа выберите HUDPlayerInfoViewModel > Данные контролирующего игрока > Имя игрока > Выбрать из выпадающего меню.
Финальная привязка должна выглядеть так:
Повторите шаги 2–3 для элемента Inactive_Name.
Чтобы изменить настройки видимости неактивного имени, добавьте новый виджет к Inactive_Name. Нажмите на первое поле, затем выберите Видимость > Выбрать из выпадающего меню.
Нажмите на пустое поле справа и выберите Функции преобразования > Для видимости (логическое значение) > Выбрать.
При выборе этой настройки появятся три новых поля. Нажмите на значок ссылки рядом с полем Отображается. Выберите в меню HUDPlayerInfoViewModel > Данные контролирующего игрока > Устранён > Выбрать.
Ниже задайте для параметра True для видимости значение Без проверки нажатия (только сам элемент). Для параметра False для видимости оставьте значение Свёрнуто. При устранении или отключении игрока от сеанса его имя заменяется на Active_Name, а когда игрок жив, его имя остаётся свёрнутым.
Финальная привязка Inactive_Name должна выглядеть следующим образом:
Нажмите на изображение, чтобы увеличить его.
Нажмите Скомпилировать, чтобы применить изменения. Больше с именами игроков ничего делать не нужно.
Значок аватара игрока
Выберите Avatar_Image в Иерархии или нажмите на область значка игрока на экране предпросмотра интерфейса.
Нажмите + добавить виджет Profile_Image.
Перейдите к Avatar_Image > Кисть и нажмите на Выбрать. Эта привязка базируется на выбранной настройке Кисть на панели Сведения в Avatar_Image.
Нажмите на пустое поле справа и выберите Функции преобразования > Создать кисть изображения из материала > Выбрать.
Задайте для пустых полей Размер изображения размер материала границы вашего значка в виджете. В этом примере для материала границы заданы значения X=50 и Y=45.
Финальная привязка должна выглядеть вот так:
Нажмите на изображение, чтобы увеличить его.
Нажмите на Скомпилировать, чтобы сохранить виджет.
Далее нужно перетащить устройство управления интерфейсом в проект и добавить виджет UMG в поле «Переопределить виджет сведений об игроке».
Протестируйте внешний вид пользовательской таблички с именем (с аватаром). Это должно выглядеть примерно как на изображении ниже.
Нажмите на изображение, чтобы увеличить его.
