Материал шкалы идеально подходит для использования в интерфейсе. Этот материал можно использовать в виджете изображения UMG для отслеживания здоровья, устранений или собранных внутриигровых предметов и валюты. В этом уроке вы научитесь создать собственный материал шкалы и использовать его при разработке пользовательского интерфейса.
Пользовательский материал, который вы создаёте для отслеживания здоровья, щитов или другого типа показателей игрока, может переопределить внешний вид Fortnite по умолчанию.
При разработке этого материала используются значки. В Unreal Editor для Fortnite (UEFN) встроено множество значков. Значки находятся в следующих папках Fortnite: Текстуры > Значки.
Создать материал
Все материалы создаются в Каталоге ресурсов. Чтобы организовать проект, создайте папку для хранения всех своих материалов.
Нажмите правой кнопкой мыши в Каталоге ресурсов, чтобы открыть Контекстное меню.
Выберите там Материал.
Назовите его M_Meter.
Дважды щёлкните по миниатюре материала, чтобы открыть Редактор материалов.
Для создания материала шкалы нужно загрузить Лабораторию материалов интерфейса из Fab.
Подробнее об узлах материала и о том, как они работают: Узлы и настройки материала.
Узлы материала
Ниже приведён список узлов материала, используемых в данном уроке, и их назначение в конечном продукте. Чтобы пропустить это описание и приступить к созданию материала, нажмите здесь.
| Узел материала | Назначение |
|---|---|
Добавляет цвет в параметр «Заполнение значка и прогресса». | |
Используется для добавления маски фона под значком. Также используется в качестве шкалы прогресса для маскировки фона с учётом прогресса. | |
Позволяет добавить текстуру в материал интерфейса. | |
Используется для наложения цветного значка поверх цвета фона, а также для создания маски для значка поверх фона. | |
Выводит Координаты текстуры UV-развёртки значка в виде значения двухканального вектора. | |
Material Function (Функция материала) > UI Scale (Масштаб интерфейса) | Функции текстуры являются подкатегорией узла Material Function (Функция материала). Это позволяет масштабировать развёртку значка. |
Material Function (Функция материала) > UI SDF Circle (Кружок интерфейса с полем расстояния со знаком) | Позволяет маскировать шкалу прогресса за значком и степень заполнения кружка цветом фона. Обычно эта функция материала используется для отрисовки кружка в материале. Её можно заменить другими функциями материала формы поля расстояния со знаком (например, «Кубоид SDF» интерфейса) из «Лаборатории материалов интерфейса» для создания другой формы. |
Используется для равномерного масштабирования по осям X и Y значка, к которому мы добавляем 2 параметра. 1 для масштабирования по оси X, а другой — по оси Y, и их подключения к MF_UI_Scale. | |
Развёртки значка ограничены значениями от 0 до 1, чтобы он не был обёрнут и не замощался. | |
Используется для создания диапазона 0–10 для скалярного параметра «Прогресс» в устройстве «Управление заданиями». ConstantBiasScale принимает заданное значение из параметра, вычитает значение смещения и умножает его на значение масштаба. | |
Узел Multiply (Умножить) принимает два входа, умножает их друг на друга и выводит результат. В этом примере для окрашивания фона каналы RGB текстуры умножаются на узел Vector3. Кроме того, для окрашивания значка LinearGradient умножается на Vector3. | |
Step (Шаг) | Создаёт пороговое значение для координат X и Y. Пороговое значение создаёт контейнер для материала фона в интерфейсе. Узлы Step (Шаг) преобразуют значения выше порогового в 1, а ниже порогового в 0. Это позволяет выводить маску для шкалы прогресса, на которой есть чёткое разделение между залитой и незалитой областями. |
Принимает значения UGradient узла Linear Gradient (Линейный градиент), округляет их в бóльшую сторону до следующего целого числа и выдаёт результат. Это позволяет легко создавать базовый сплошной фон. | |
Constant (Константа) | Позволяет добавить значение для свойства материала. |
Подготовка основного узла материала
Прежде чем добавлять какие-либо узлы материала, подготовьте материал, который будет использоваться в интерфейсе, изменив настройки Основного узла материала (MMN). Настройки MMN определяют, какие входы доступны в MMN и где может быть использован материал.
Выберите узел MMN.
На панели Сведения Редактора материалов задайте для параметра Назначение материала Пользовательский интерфейс.
Измените Режим смешивания на Прозрачный.
Нажмите на изображение, чтобы увеличить его.
Настройка цвета прогресса
Начните установку материала шкалы с настройки Цвета прогресса, который можно определить в UMG с помощью виджета изображения. Вы можете использовать этот цвет прогресса для создания собственного дизайна интерфейса.
Нажмите правой кнопкой мыши на Графе материалов, чтобы открыть меню узла.
Введите «Линейный градиент» в строке поиска. Выберите LinearGradient из выпадающего меню. На графе появится узел.
Повторите первый и второй шаги, чтобы добавить следующие узлы в граф материалов:
Ceil (Округлить до целого)
Multiply (Умножить)
Constant3vector
Соедините белый контакт узла Constant3Vector со входом А узла Multiply (Умножить). Форма в окне просмотра изменит цвет.
Выберите узел материала Constant3Vector в Графе материалов. На графе будет выделен узел, что будет означать, что вы его выбрали.
Нажмите на чёрный квадрат в узле, чтобы открыть Цветовой круг. Выберите цвет материала на цветовом круге.
Соедините контакт UGradient узла Linear Gradient (Линейный градиент) с левым входом узла Ceil (Округлить до целого).
Соедините правый контакт узла Ceil (Округлить до целого) со входом B узла Multiply (Умножить).
Эта конфигурация узлов задаёт цвет для контейнера интерфейса.
Нажмите правой кнопкой мыши в области графа и добавьте в граф узел LinearInterpolate (Линейная интерполяция).
Соедините узел Multiply (Умножить) со входом A первого узла LinearInterpolate (Линейная интерполяция).
Эта часть материала используется для отслеживания прогресса на шкале путём заливки фона контейнера.
Чтобы сгруппировать узлы вместе и перемещать их как единое целое, выполните следующие действия:
Нажмите левой кнопкой мыши и перетащите группу узлов. Все выбранные узлы будут выделены.
Выберите узел и перетащите его по графу. Все выбранные узлы будут перемещаться вместе, как одно целое.
Настройка масштабирования и цвета значка
В этой секции материала вы выберете значок, масштабируете его и выберете цвет значка в материале и в интерфейсе. Значки находятся в папках Fortnite > Текстуры > Значки.
Нажмите правой кнопкой мыши в области графа и добавьте в граф следующие узлы:
TextureCoordinate
AppendVector
Сжатие
TextureSample
Constant3vector
Multiply (Умножить)
Constant (Константа)
Выберите узел Constant (Константа) в графе, а затем нажмите правой кнопкой мыши и выберите Дублировать из выпадающего меню. В первом узле появится ещё один узел Constant (Константа). Поместите копию под оригинал.
Скопируйте узел Multiply (Умножить).
Скопируйте узел LinearInterpolate (Линейная интерполяция).
Выберите верхний узел Constant (Константа) в графе и добавьте значение по умолчанию — 0,7.
Нажмите правой кнопкой мыши на узел и выберите «Преобразовать в параметр» из выпадающего меню. Назовите параметр IconScaleX. Этот узел будет управлять масштабом для координаты X значка.
Выберите нижний узел Constant (Константа) в графе и добавьте значение по умолчанию — 0,7.
Нажмите правой кнопкой мыши на узел и выберите Преобразовать в параметр из выпадающего меню. Назовите параметр IconScaleY. Этот узел будет управлять масштабом для координаты Y значка.
Соедините узел параметра IconScaleX со входом A узла AppendVector.
Соедините узел параметра IconScaleY со входом B узла AppendVector.
Значениями X и Y для IconScale, заданными в узле параметра, можно управлять за пределами материала при преобразовании в экземпляр материала.
Далее, нужно создать узел Material Function (Функция материала), чтобы добавить к материалу функцию, которая будет масштабировать развёртку значка.
Настройка функции материала: UI_Scale
На этом этапе вы узнаете, как создать функцию материала и найти функции, доступные для использования в узле.
Нажмите правой кнопкой на графе и введите MaterialFunction в строке поиска. Выберите MaterialFunctionCall из выпадающего меню. На графе появится узел MaterialFunctionCall.
На панели Сведения нажмите на выпадающее меню Функции материала и введите UI_Scale в строке поиска, а затем выберите MF_UI_Scale из выпадающего меню. Узел MaterialFunctionCall станет узлом UI Scale (Масштаб интерфейса).
Функция UI_Scale позволяет увеличивать или уменьшать масштаб развёртки значка с помощью функций материала. Функции материала можно использовать в материале только через узел Material Function (Функция материала).
Настройка развёртки значков
Далее, добавляем значок и цвет значка к материалу, который будет масштабироваться с учётом данных из параметров и масштабирования интерфейса.
Соедините узел TextureCoordinate со входом «Развёртка (V2)» узла MF_UI_Scale.
Соедините узел AppendVector со входом «Масштаб (V2)» узла MF_UI_Scale.
Соедините контакт «Результат» узла MF_UI_Scale с белым входом узла Clamp (Ограничить).
Выберите узел Texture Sample (Образец текстуры), чтобы открыть его настройки на панели «Сведения».
Откройте выпадающее меню «Текстура».
Введите «значок» в строке поиска.
Выберите значок из выпадающего меню.
Соедините белый контакт узла Clamp (Ограничить) со входом «Развёртка» узла Texture Sample (Образец текстуры).
Соедините контакт RGB узла Texture Sample (Образец текстуры) со входом A первого узла Multiply (Умножить).
Соедините контакт A узла Texture Sample (Образец текстуры) со входом B первого узла Multiply (Умножить).
Снова соедините контакт A узла Texture Sample (Образец текстуры) со входом «Альфа» второго узла LinearInterpolate (Линейная интерполяция).
Соедините первый узел Multiply (Умножить) со входом B второго узла Multiply (Умножить).
Выберите узел Constant3Vector, чтобы открыть его параметры на панели Сведения.
Нажмите на поле Константа, чтобы открыть Цветовой круг.
Выберите цвет значка на цветовом круге.
Соедините белый контакт узла Constant3Vector со входом A второго узла Multiply (Умножить).
Соедините белый контакт второго узла Multiply (Умножить) со входом B первого узла LinearInterpolate (Линейная интерполяция).
Соедините белый контакт первого узла Multiply (Умножить) со входом «Альфа» первого узла LinearInterpolate (Линейная интерполяция).
Соедините белый контакт первого узла Multiply (Умножить) со входом B второго узла LinearInterpolate (Линейная интерполяция).
Соедините белый контакт первого узла LinearInterpolate (Линейная интерполяция) со входом «Итоговый цвет» основного узла материала.
В окне предпросмотра материала появится значок.
Далее, настроим маску для шкалы прогресса. Она позволит отображать только ту часть материала, которая соответствует увеличению количества устранений, как на GIF ниже.
Настройка маски шкалы выполнения
Последний шаг материала — это создание маски для шкалы прогресса, которую можно вызвать в виджете или в Sequencer, чтобы анимировать материал интерфейса, благодаря чему шкала прогресса будет заполняться цветом материала по мере устранения игроком врагов.
Нужно создать место для следующей серии узлов. Выберите все существующие на данный момент узлы, нажав левой кнопкой мыши и перетащив их, а затем переместите их влево как единое целое.
Созданную маску нужно подключить ко второму узлу LinearInterpolate (Линейная интерполяция). Выберите второй узел LinearInterpolate (Линейная интерполяция) и переместите его вправо к Основному узлу материала. Ниже показано, как должна выглядеть конфигурация узлов на этом этапе.
Нажмите на изображение, чтобы увеличить его.
Для этой секции материала нужно будет замаскировать свойства материала с учётом их координат X и Y в контейнере. Эти координаты также будут использоваться для отображения материала по мере увеличения количества устранений игроков.
Нажмите правой кнопкой мыши в области графа и добавьте в граф следующие узлы:
Constant (Константа)
ConstantBiasScale
LinearGradient
Step (Шаг)
Multiply (Умножить)
Выберите узел Constant (Константа), нажмите на него правой кнопкой мыши и выберите Дублировать из выпадающего меню.
Выберите первый узел Constant (Константа) и задайте для него значение 5,0.
Нажмите на узел правой кнопкой мыши и выберите Преобразовать в параметр.
Назовите параметр TrackerProgress.
Этот параметр будет использоваться в UMG и Sequencer для отслеживания устранений игрока и отображения материала в контейнере.
Соедините белый контакт узла Tracker Progress (Прогресс устройства «Управление заданиями») с узлом ConstantBiasScale.
Выберите узел ConstantBiasScale и на панели «Сведения» установите для параметра «Смещение» значение 0, а для масштаба — 0,1. Это нормализует TrackerProgress до значения 0–10 устройства «Управление заданиями».
Соедините узел ConstantBiasScale со входом Y узла Step (Шаг).
Соедините контакт VGradient узла LinearGradient со входом X узла Step (Шаг).
Соедините белый контакт узла Step (Шаг) со входом B узла Multiply (Умножить).
Выберите второй узел Constant (Константа) и задайте для него значение 0,9.
Нажмите правой кнопкой на графе и введите MaterialFunctionCall в строке поиска.
Выберите узел Material Function (Функция материала), чтобы открыть его параметры на панели Сведения.
Введите UI_SDF_Circle в строке поиска.
Выберите UI_SDF_Circle из выпадающего меню.
Эта функция материала управляет размером контейнера через узел Constant (Константа) и определяет форму контейнера материала. В данном случае это круговой контейнер.
Соедините второй узел Constant (Константа) со входом Размер(ы) узла MF_UI_SDF_Circle.
Соедините контакт «Заполнить» узла MF_UI_SDF_Circle со входом A узла Multiply (Умножить).
Соедините белый контакт узла Multiply (Умножить) со входом A второго узла LinearInterpolate (Линейная интерполяция).
Соедините белый контакт второго узла LinearInterpolate (Линейная интерполяция) со входом Непрозрачность Основного узла материала.
Материал готов. Полная конфигурация узлов должна выглядеть, как показано ниже.
Нажмите на изображение, чтобы увеличить его.
Чтобы использовать этот материал с UMG, преобразуйте его в экземпляр материала. Параметры экземпляра материала можно переопределить, включить или выключить, а также вызывать в UMG и Sequencer для анимации интерфейса, с которым используется материал.
Чтобы создать экземпляр материала:
Нажмите правой кнопкой мыши на миниатюру материала в Каталоге ресурсов.
Выберите Создать экземпляр материала из выпадающего меню.