Создавайте пользовательские шкалы здоровья и щита в Unreal Motion Graphics (UMG), используя материалы интерфейса, текстуры интерфейса и различные виджеты в палитре, чтобы заменить пользовательский интерфейс Fortnite по умолчанию. Шкалы здоровья и щита можно добавить в табличку с именем или разместить отдельно в HUD-интерфейсе.
Шкалы здоровья и щита разрабатываются и размещаются с учётом типа игры (файтинг, многопользовательская кооперативная игра, ролевая игра и т. д.).
Настройка экземпляров материалов без изменения материалов
В этом примере вы будете использовать различные материалы, созданные в UEFN. Они включают в себя шкалу прогресса в форме прямоугольника (кубоида) и круга. Прямоугольную шкалу прогресса также можно разделить на секции.
Материалы настраивались с помощью комбинации функций материала из Лаборатории материалов интерфейса, параметров, предоставленных в экземпляр материала, и некоторых математических вычислений, обеспечивающих совместную работу всего этого.
Лучше всего использовать материалы для виджетов. Материалы обновляются динамически с учётом игровых данных. Это помогает оптимизировать интерфейс и добавлять специальные эффекты. Текстуры используются только для более сложного дизайна, который нельзя легко реализовать с помощью математических функций.
Подробнее об использовании материалов при разработке и реализации интерфейса: Полезные материалы интерфейса. В этом уроке содержится больше информации об использовании Расписанных полей расстояний (SDF) для создания материалов динамической шкалы прогресса в UEFN и UE.
Экземпляр материала создаёт экземпляры материала с параметрами, которые позволяют легко настроить внешний вид этого материала без его перекомпиляции. Чтобы создать экземпляр материала, нажмите правой кнопкой мыши на Материала и выберите Создать экземпляр материала.
Подробнее об экземплярах материалов: раздел Создание и использование экземпляров материалов документации Unreal Engine.
В UEFN предоставлено несколько параметров. В материале, приведённом в примере, параметр «Прогресс» позволяет изменять степень заполнения шкалы. Результат нормализуется в диапазоне 0–100 с помощью узла ConstantBiasScale в M_CircleProgressBar с учётом диапазона очков здоровья Fortnite.
Вы можете изменять градиенты Цвет фона (BGColor) и Цвет жидкости. Результат внесённых изменений можно увидеть в окне предпросмотра слева.
Вы можете создать столько экземпляров материалов, сколько захотите. В этом примере используются два материала: один для здоровья, а другой для щита.
Рекомендации по использованию макета виджета
Рекомендуем использовать панель холста в UMG только в том случае, если требуется абсолютное положение на экране или нужно точно задать места расположения различных виджетов.
Для небольших виджетов используйте:
Наложенный слой
Стековые поля
Размерные поля (если нужно ограничить виджет определённым размером)
Панель решётки (если нужно сохранить размер контейнера и при этом управлять положением дочерних виджетов)
Когда материалы будут готовы, создайте Схему создания виджетов в Каталоге ресурсов, в затем дважды нажмите на миниатюру виджета, чтобы открыть редактор UMG.
Использование панели холста
В этом примере панель холста используется для размещения шкал здоровья и щита в HUD-интерфейсе в абсолютном положении путём привязки виджетов к определённым частям экрана.
Для отдельных элементов HUD-интерфейса рекомендуется использовать комбинацию следующих виджетов:
Наложение: если нужно наложить виджет поверх другого
Стековые поля: если виджеты нужно расположить горизонтально или вертикально
Размерные поля: если нужно ограничить виджет определённым размером
Панель решётки: если нужно сохранить размер контейнера и при этом управлять положением дочерних виджетов внутри него
Начните размещать виджеты здоровья и щита с учётом этой информации.
Создайте Контейнер для всего HUD-интерфейса. Для этого используйте Панель холста в качестве контейнера для размещения всех отдельных элементов HUD-интерфейса.
В этом примере здоровье и щиты будут привязаны к нижней центральной части экрана.
Разместите Стековое поле на Холсте, чтобы создать контейнер для здоровья и щитов. В данном примере эти элементы будут располагаться слева направо.
Если вы хотите расположить виджеты в стековом поле вертикально, измените параметр «Ориентация» на панели «Сведения» в разделе Поведение > Ориентация.
Переименуйте свои виджеты, выбрав их и нажав F2, когда будете добавлять их в Иерархию для более удобной организации.
Выберите Стековое поле в иерархии, и на панели Сведения появится параметр Ориентиры. Откройте настройку, нажав комбинацию Shift + Control. Прикрепите стековое поле к нижней центральной части HUD-интерфейса, выбрав параметр в Строке 3, столбце 2.
Теперь стековое поле должно быть прикреплено к нижней части. Значок цветка показывает, где прикреплён виджет на панели холста.
Сдвиньте Стековое поле вверх, чтобы оно не накладывалось на нижний край экрана. Для этого отредактируйте параметр Положение Y.
Положительные значения смещают виджет вниз, а отрицательные — вверх.
Установите флажок Подогнать размер под содержимое, чтобы размер контейнера всегда изменялся с учётом содержимого внутри него.
Настройка шкалы здоровья и текста внутри неё
Итак, контейнер здоровья и щитов готов, и теперь можно настроить соответствующий виджет.
Вложите Наложение в Размерное поле и переименуйте его в HPOverlay. Так текст с ОЗ будет накладываться на круглую шкалу ОЗ.
Вложите Изображение в HPOverlay и переименуйте его в HPBar. Это позволит добавить созданный выше экземпляр материала в виджет.
Выберите Шкалу здоровья в иерархии, а затем на панели «Сведения» в разделе Кисть > Изображение выберите пользовательский экземпляр материала шкалы здоровья.
Изменить размер экземпляра материала можно с помощью свойства «Размер изображения» ниже.
Вложите Текстовый блок в HPOverlay и переименуйте его в HPText. Это позволит добавить текст в верхней части круглой шкалы здоровья.
Выберите Текстовый блок и на панели «Сведения» установите для параметра Выравнивание по горизонтали и по вертикали значение По центру. Так текст в Шкале здоровья всегда будет выравниваться по центру.
Нажмите, чтобы увеличить изображение.
Измените размер шрифта в разделе Внешний вид > Шрифт > Размер, чтобы он соответствовал размеру шкалы здоровья.
Нажмите, чтобы увеличить изображение.
Нажмите на Скомпилировать. Теперь у вас есть шкала ОЗ и текст ОЗ!
Настройка шкалы и текста щита
Чтобы настроить шкалу и текст щита, повторите вышеописанные шаги. На этот раз добавьте пространство между шкалами здоровья и щита. Поскольку HPShieldsContainer — это стековое поле, оно автоматически размещает дочерние виджеты по горизонтали.
Используйте виджет изображения внутри стекового поля, чтобы добавить пробел между шкалами здоровья и щита. Настройте пустой виджет изображения, выполнив следующие действия:
Вложите изображение в стековое поле.
В свойстве «Кисть» изображения для параметра «Рисовать как» задайте значение «Нет».
Так виджет останется пустым, но всё равно займёт место в макете! Это позволит вам легко управлять расстоянием между элементами в стековом поле без необходимости добавлять отступ.
Настройте Виджет щита с помощью той же процедуры, что и шкалу здоровья.
Чтобы быстрее создать панель щита, продублируйте HPOverlay, нажав правой кнопкой мыши на HPOverlay в иерархии и выбрав «Дублировать».
Вложите ShieldOverlay в Изображение разделителя так, чтобы он отображался в конце стекового поля.
Эти два типа шкал будут отображаться в вашем виджете рядом друг с другом!
Переименуйте переменные в ShieldOverlay, ShieldBar и ShieldText, как показано на изображении иерархии виджетов ниже.
Теперь можно создать привязки, которые добавят функциональность для шкал здоровья и щита.
Просмотр привязок
Добавление модели просмотра
С её помощью можно добавлять функции устройства в схему создания виджетов. Модель просмотра использует просмотр привязок для идентификации виджетов в схеме и графа функций устройства для этого виджета.
Модель просмотра сведений об игроке в устройстве управления интерфейсом позволяет заменять части HUD-интерфейса на пользовательские виджеты.
Выберите Окно > Модели просмотра, чтобы открыть и добавить Модель просмотра в виджет.
В окне «Модель просмотра» выберите +модель просмотра. Откроется всплывающее окно со всеми моделями просмотра, доступными для использования на данный момент.
Существует два типа моделей просмотра устройства управления интерфейсом:
Выберите Устройство: модель просмотра списка сведений об игроке команды/отряда в устройстве управления интерфейсом в настройках HUDPlayerInfoListViewModel. С учётом описанного выше вам нужно отображать данные только для контролирующего игрока, а не его команды/отряда.
Выберите Устройство: модель просмотра сведений об игроке в устройстве управления интерфейсом, если нужно создать отдельные виджеты для контролирующего игрока и его команды/отряда. Используйте свойства в разделе «Устройство: модель просмотра сведений об игроке в устройстве управления интерфейсом» для каждого из этих виджетов. После этого вам нужно создать виджет стека отряда, который привяжет модели просмотра списка сведений об игроке команды/отряда к их моделям просмотра.
Модель просмотра сведений об игроке команды/отряда содержит ту же информацию, что и модель просмотра сведений об игроке в устройстве управления интерфейсом, но используется по-другому в зависимости от сценария.
Выберите Модель просмотра списка сведений об игроке команды/отряда в настройках HUDPlayerInfoListViewModel. С учётом описанного выше вам нужно отображать данные только для контролирующего игрока, а не его команды/отряда.
Теперь пора настроить привязки данных из модели просмотра к вашему виджету!
Настройка просмотра привязок ToText
Выберите Окно > Просмотрь привязок, чтобы открыть панель Просмотр привязок.
Выберите HPText в Иерархии, а затем выберите Добавить виджет в разделе Просмотр привязок, чтобы привязать HPText для отображения текущего Показателя здоровья. Появится пустая привязка.
Левое поле — это Свойство виджета, а правое — данные, которые нужно привязать к этому свойству. Нажмите на левое поле, и появится список свойств Текстового блока HPText. Выберите свойство text, чтобы передать показатели здоровья в это свойство.
Правое поле — это данные, которые нужно передать в выбранное свойство виджета. Однако свойство text принимает данные только типа text. Поскольку показатель здоровья в Fortnite имеет тип float (т. е. double), необходимо преобразовать его в соответствующий тип text. Нажмите на поле справа и выберите Функции преобразования > To Text (Double).
Откроется большой список настроек. Наиболее важные настройки, как правило, находятся вверху, тогда как остальные параметры позволяют форматировать конечное значение, передаваемое в свойство text.
Нажмите на изображение, чтобы увеличить его.
Нажмите Значок ссылки рядом с полем Значение, а затем выберите Показатель здоровья в модели просмотра устройства управления интерфейсом.
Нажмите на пустое поле и выберите HUDPlayerInfoListViewmodel в левом столбце, разверните Данные контролирующего игрока справа и выберите Здоровье.
Это позволит передать свойство здоровья — тип float (т. е. double) с помощью функции преобразования To Text (Double). Параметр To Text (Double) преобразует тип здоровья в тип text для отображения в виджете. После этого преобразованное здоровье передаётся в свойство text вашего виджета HPText.
Повторите вышеописанные шаги для настройки виджета ShieldText. Эти же привязки будут отображать показатели щита.
Настройка параметра материала
Подробнее о настройке параметра материала: раздел Настройка параметра материала документации Unreal Engine.
Теперь пришло время настроить круговую шкалу прогресса. Прогресс будет изменяться в зависимости от уровней здоровья и щита игрока.
Создайте пустую привязку для своего круга HPBar.
В левом поле выберите HPBar > Кисть. Кисть содержит экземпляр материала круговой шкалы здоровья.
В правом поле выберите Функции преобразования > Задать скалярный параметр.
В поле Название параметра введите название параметра, который будет изменять прогресс на шкале прогресса.
Чтобы найти это параметр по заданному названию, откройте экземпляр материала шкалы здоровья и просмотрите значения параметров справа.
За управление шкалой прогресса отвечает параметр Прогресс. Введите это название в поле Название параметра.
Важно, чтобы название параметра совпадало с названием параметра в экземпляре материала, в противном случае материал не будет работать в игре.
Нажмите на значок ссылки рядом со значением. Как и в случае с ToText, привяжите Здоровье игрока к Значению.
Это итоговый результат привязки показателей здоровья и щита в модели просмотра. Теперь при изменении здоровья игрока оно будет передавать свойство здоровья в экземпляр материала шкалы здоровья и обновлять скалярный параметр «Прогресс».
Повторите то же самое для шкалы щита. Вместо привязки его к свойству здоровья его следует привязать к Свойству щита.
Привязки здоровья и щитов настроены! Пришло время отобразить виджет в HUD-интерфейсе.
Настройка устройства управления интерфейсом
Разместите устройство управления интерфейсом на уровне.
На панели Сведения устройства проверьте следующее:
Отображать интерфейс = Да
В поле Переопределить виджет сведений об игроке используйте виджет, содержащий пользовательские здоровье и щиты.
Нажмите на изображение, чтобы увеличить его.
Выберите Запуск сеанса, и в HUD-интерфейсе должен появиться виджет здоровья и щитов! Протестируйте свой интерфейс: получите урон и понаблюдайте, как в интерфейсе будут обновляться показатели.
Прочие примеры шкал прогресса
Найдите Материал прямоугольника в разделе Fortnite > Интерфейс > Материал. Вы можете настроить базовый кубоид, чтобы использовать его в качестве фона в самых разных формах для любого виджета!
Создайте экземпляр материала, как описано выше, и начните использовать его в UMG!
Попробуйте создать следующие шкалы прогресса, используя предоставляемые здесь данные и материалы:
Используйте текстуру в качестве фона для кадрирования аватара игрока, отображаемого имени и шкалы здоровья.
Используйте комбинации текстур, значков, материалов шкал прогресса и материала прямоугольника в разделе Fortnite > «Интерфейс» > «Материал» для стилизации базовых шкал прогресса.
Разделённая на секции шкала здоровья и щита, а также аватар игрока и отображаемое имя.
