Существует два способа создания пользовательского материала интерфейса для вашего проекта:
Коллекция материалов: коллекция материалов, которые содержат все встроенные в материал функции интерфейса.
Пользовательский родительский материал: материал, созданный с нуля с помощью функций материала.
Коллекция материалов
Коллекция материалов — это серия материалов шкалы и текстур с множеством настроек. Коллекцию материалов можно найти в Каталоге ресурсов по пути Fortnite > Интерфейс > Материалы. Материалы разделены на два типа:
Материалы шкалы: обычно используются в качестве индикаторов хода выполнения.
Текстуры: обычно используются для значков и портретов игроков.
Устройство material_collection_device наглядно показывает, как коллекцию материалов можно использовать с Verse для отображения текстур и материалов, а также для использования параметров экземпляров материалов для динамического изменения материалов интерфейса при нанесении урона в игре.
Пользовательский родительский материал
Чтобы создать пользовательский родительский материал для виджета изображения типа UMG, для параметра Назначение материала в Основном узле материала необходимо задать значение Пользовательский интерфейс. В этом родительском материале используются Функции материала, которые делают материал более динамичным.
Материалы преобразуются в экземпляры материалов, чтобы обеспечить эффективное повторное использование родительского материала и создать более удобный интерфейс, позволяющий настраивать параметры материалов. Затем параметры материала обновляются в интерфейсе через привязанные свойства виджета UMG.
Любые изменения, внесённые в родительский материал после преобразования, распространяются на все его экземпляры.
В Каталоге ресурсов откройте папку Интерфейс > Устройства > Устройство управления интерфейсом > MaterialInstances. Найдите и откройте материал шкалы щита с именем MI_HCD01_ShieldBar, дважды нажав на миниатюру. В Редакторе экземпляров материалов откроется экземпляр материала.
В предыдущем разделе Настройка параметров устройства было объяснено, как свойство Прогресс экземпляра материала используется для обновления шкалы щита в HUD-интерфейсе, когда щиту игрока наносится урон или когда игрок восстанавливает щит. Эти изменения достигаются за счёт использования данных игрока из устройства управления интерфейсом, чтобы сообщить экземпляру материала, в какую сторону скользить по шкале с учётом данных игрока.
Материалы
Причина, по которой экземпляр материала может прослушивать функцию устройства, заключается в том, что в родительском материале для него заданы параметры. Материалы пользовательского интерфейса используют Функции материала для создания временных ритмов или шаблонов в материале, которые можно использовать с помощью экземпляров материалов для обновления данных игрока в HUD-интерфейсе.
В этом шаблоне используются те же функции материала, что и в проекте «Лаборатория материалов интерфейса». Чтобы лучше понять различные типы функций материала и как их использовать, см. страницу Разбивка функций материала проекта «Лаборатория материалов интерфейса».
Ниже представлена таблица с описанием различных материалов, созданных для проекта, и способов их использования.
| Список материалов проекта | Использование |
|---|---|
M_DropShadow | Создаёт тень, отбрасываемую формой. Подходит для квадрата, круга, шестиугольника или пользовательской формы (с использованием текстуры). Пользовательские формы не позволяют сглаживать тень. |
M_IconWithbackground | Создаёт значок с фоном и контуром. |
M_Meter | Создаёт простую шкалу для устройства «Сложное взаимодействие». |
M_Notches | Создаёт декоративные выемки, которые размещаются на равных расстояниях. Используется с M_Meter для создания шкалы с выемками для устройства «Сложное взаимодействие». |
M_ProgressBar_Basic | Создаёт шкалу прогресса со скруглёнными или резкими углами, а также градиентной заливкой и контуром. |
M_ProgressBar_Orb | Создаёт шкалу прогресса в виде орбиты, которая заполняется по мере прогресса. Содержит текстуру значка в центре орбиты. |
M_Texture_Complex | Позволяет масштабировать и (или) искажать пользовательскую текстуру. Может использоваться для создания эффекта искры или эффекта нахождения под водой. |
M_Texture_SImple | Позволяет окрашивать простые текстуры. Может использоваться с простой чёрно-белой текстурой или текстурой с большим количеством каналов (с использованием каналов RGB). |
M_Wave | Создаёт волну с поднимающимися на поверхность пузырьками. |
Группы параметров
Откройте различные экземпляры материалов из шаблона, чтобы увидеть различные параметры, перечисленные в Группах параметров. Это редактируемые параметры функций материала, которые можно привязывать к устройствам и обновлять в HUD-интерфейсе.
Группы параметров можно редактировать в Редакторе экземпляров материала, только если они отмечены галочками.
Чтобы отредактировать параметры в Редакторе экземпляров материала, откройте Каталог ресурсов и папки Интерфейс > Устройства > SkilledInteraction > MaterialInstances, а затем найдите и откройте экземпляр материала MI_SID03_Water.
Начните с изменения цвета воды, дважды щёлкнув по параметрам 1-й цвет жидкости и 2-й цвет жидкости. Откроется цветовой круг. Измените цвет воды. В приведённом ниже примере цвет воды изменён с синего на зелёный.
Посмотрите внимательно на пузырьки. Если у вас выбрано окно «Редактор экземпляров материала», вы должны увидеть, что пузырьки в материале всплывают вверх. Вы можете изменить размер пузырька, включив параметры размера BubblesStartSize и BubblesMiddleSize и отредактировав их. Если размер слишком большой, будет казаться, что пузырёк исчезает за стеной.
Подобные параметры можно настраивать в просмотре привязок и использовать в функциях устройства для обновления данных игрока.
Переносите экземпляры материалов и ресурсы текстур для использования в своих проектах.
текстуры.
Текстуры используются в интерфейсе для добавления деталей и доведения интерфейса до идеала, что невозможно с помощью одних материалов. Если вы решите использовать текстуры в дизайне интерфейса, имейте в виду, что текстуры расходуют больше памяти.
Используя текстуру «Сложное взаимодействие», а также комбинированные примеры текстур и материалов, вы можете увидеть, какая часть интерфейса создана с помощью текстур. В примере с Текстурой при отключении виджета «Задняя панель» видимыми в интерфейсе остаются только сообщение, шкала здоровья и счётчик устранений.
Рекомендуемый метод оформления стилизованных кубоидов на задней панели — использование текстуры. В UMG трудно воспроизвести сложность дизайна и формы. Материалы интерфейса можно использовать только для создания базовых примитивных форм, добавления обвода по контуру формы материала, а также добавления градиентов к форме и обводу материала.
В примере интерфейса с материалом и текстурой показано, как смешивание текстур и материалов делает внешний вид интерфейса идеальным. Интерфейс включает три текстуры, составляющие дизайн задней панели, а также изображение существа.
Изображение существа накладывается поверх виджета изображения. Виджет изображения не использует экземпляр материала. Вместо этого параметр «Кисть» создаёт белый прямоугольник в слое под изображением существа. Размеры прямоугольника задаются на панели Сведения с помощью настроек Размер изображения.
На панели Иерархия виджеты, стоящие перед другими в списке, размещаются на фоновом слое, а каждый дополнительный виджет размещается поверх предыдущего виджета в списке.
В качестве тени для фотографии существа в дизайне используется экземпляр материала.
Текстуры SDF
Поле расстояния со знаком (SDF) — это функция, которая использует позицию в качестве входных данных и выводит значение расстояния от этой позиции. Например, на изображении ниже центр радиальной модели равен 1, что означает полностью белый цвет, но по мере продвижения к краю он переходит в 0, т. е. в полностью чёрный. Благодаря этой концепции изображения SDF позволяют указывать диапазон значений от 0 до 1 для применения эффекта.
Это значит, что вы можете:
Выбирать значения от 0,5 до 1,0 и применять сплошной цвет.
Выбирать значения от 0,49 до 0,0 и применять потускнение цвета, имитирующее свечение.
Обычные текстуры не дают такой эффект, поскольку для них можно задать значения либо 1 (белый), либо 0 (чёрный). Изображения SDF содержат все эти данные в диапазоне от 0 до 1.
Эти концепции можно применить и к фотографиям. Если фотография сохранена как файл в формате .png и к нему уже применены эффекты, но не получается воспроизвести весь спектр цветов и световых деталей, вы можете задать для изображения меньше настроек, поскольку редактирование изображения (чтобы сделать его ярче или темнее) может привести к потере или «сбросу» деталей.
Если то же изображение было снято на цифровую зеркальную камеру, то файл необработанных данных, в котором есть вся информация о цвете и свете, можно настроить до определённого уровня детализации, например сделать тёмные части ярче без потери деталей в этих тёмных областях и наоборот.
Зайдите в папки Интерфейс > Текстура > SDF, чтобы просмотреть все текстуры SDF для создания уникального интерфейса.
В этой папке есть папка Значки, в которой много значков SDF.
Текстуры SDF в материалах
Большинство материалов интерфейса — это плоские двухмерные материалы, в которых для определения внешней и средней части материала используются двоичные значения 0 и 1. В двухмерных материалах. Когда текстуры SDF используются в узле Texture Sample (Образец текстуры) и в сочетании с функцией материала SDF, вы можете настроить интерфейс, изменив некоторые значения в материале интерфейса.
Изменение различных значений в материале интерфейса с помощью текстур и узлов материала SDF позволяет добиться нескольких эффектов, например:
Тени
Размытия
Свечение
Нео-ниндзя
Контуров
Анимация
Масштабирования
С текстурами SDF материалы интерфейса выглядят более динамично и уникально, поскольку их можно легко масштабировать без потери качества, в то время как обычные ресурсы теряют качество при их увеличении или уменьшении. Текстуры SDF оптимизированы лучше: для создания всех эффектов используется одна текстура, а граф материала является более понятным.
С другой стороны, обычными чёрно-белыми текстурами в графе материалов сложно управлять, поэтому приходится использовать несколько текстур. Как показано на изображении выше, самый простой способ добавить свечение для текстур — это наложить текстуру поверх радиального градиента, а не создавать для достижения аналогичного результата детализированный граф материалов.
Узел материала Smooth Step (Сглаживание переходов)
Узлы материала типа Step (Переход) обычно создают резкий переход в материалах, например, напрямую от 0 к 0,25. Узел Smooth Step (Сглаживание переходов), с другой стороны, использует функции SDF для создания плавного перехода в материалах интерфейса. Материалы интерфейса в шаблоне, использующие текстуры SDF, используют узел материала Smooth Step (Сглаживание переходов) для создания плавного перехода от центра материала к внешнему краю.
Выводы
Вот несколько ключевых выводов по использованию материалов и текстур для ресурсов интерфейса:
Использование функций материала позволяет сэкономить время благодаря предопределённым узлам материала, которые ссылаются на функции в материалах шкал здоровья и щита, а также в материалах интерфейса задней панели, которые заставляют их реагировать на события в игре.
Материалы и текстуры SDF позволяют создать более динамичный интерфейс.
Понимание того, как накладывать виджеты изображения, позволяет определить разницу между интерфейсом стандартного вида и более интересным с визуальной точки зрения интерфейсом.
Текстуры следует использовать для элементов дизайна, которые визуально сложные и которые нельзя создать с помощью материалов.