Создайте пользовательский интерфейс на основе базового материала M_UI_Shape_Rectangle, создав экземпляры материалов на основе базового материала, используемого в виджетах UMG. Материал формы также позволяет создавать плоские формы, которые можно использовать для создания уникального дизайна интерфейса. Материал M_UI_Shape_Rectangle находится в Каталоге ресурсов в папке Fortnite в разделе Интерфейс > Материалы.
Экземпляры материалов можно использовать для заливки виджета, подобно раскрашиванию. Для виджетов предпочтительно использовать материалы вместо добавления текстур, поскольку они использует меньше памяти, чем импортированная текстура. Кроме того, материалы удобнее использовать для создания интерфейса в UEFN и UE, особенно для интерфейса с плоским дизайном, который проще отрисовывать, не говоря уже о возможности экспериментирования с трёхмерными и динамическими материалами.
Ссылки на виджеты UMG приводятся в специальных настройках интерфейса на нескольких устройствах в Unreal Editor для Fortnite (UEFN). Виджеты UMG заменяют стандартный интерфейс Fortnite в HUD-интерфейсе.
Другие уроки по использованию материала для создания интерфейса:
Создание пользовательских форм интерфейса
Прежде чем создавать пользовательскую форму интерфейса, решите, как он должен выглядеть, а затем используйте материал M_UI_Shape_Rectangle, чтобы оформить вид вашего виджета интерфейса. Это может быть что-то простое, например пользовательский квадрат, или более сложное, например форма в виде цветка. Для оформления может потребоваться несколько форм, которые должны быть скомпонованы при создании виджета.
Чтобы создать формы, сначала нужно создать экземпляр материала исходного материала M_UI_Shape_Rectangle.
Нажмите правой кнопкой мыши на миниатюре материала и выберите Создать экземпляр материала.
В окне Сохранить ресурс как укажите имя экземпляра материала, который будет сохранён в папке контента вашего проекта. Назовите свои ресурсы таким образом, чтобы обозначить их принадлежность к группе. Например, в UEFN экземпляры стандартных материалов начинаются с M_UGC_ и заканчиваются на _Inst. Имя вашего экземпляра материала должно выглядеть наподобие M_UGC_Circus_Inst.
Дважды нажмите на новый экземпляр материала, чтобы открыть Редактор экземпляров материала. Вы также можете открыть редактор, нажав на ресурс правой кнопкой мыши и выбрав Редактировать.
На панели Сведения редактора экземпляров материалов есть инструменты, необходимые для полной настройки экземпляров материалов. Эти инструменты находятся в следующих разделах:
[1] Заполнение
[2] Штрих
[3] Цвета
[4] Состояние (Наведён курсор/В фокусе/Нажато/Отключено)
Заполнить
Параметры в разделе Заполнение влияют на форму материала. Для многих параметров, таких как Прозрачность заполнения, значение 0,0 деактивирует настройку, а значение 1,0 активирует её. Чтобы ваша фигура отображалась в окне просмотра, параметр «Прозрачность заполнения» должен быть включён.
На изображении выше показаны скорректированные настройки, которые использовались для создания формы.
Гребец
Параметры в разделе Штрих можно настроить таким образом, чтобы создать пользовательскую границу. Благодаря предустановленному синему цвету границы вы можете отслеживать дизайн при изменении значений параметров в разделе «Штрих».
На изображении выше показан результат, когда для параметра Прозрачность штриха установлено значение 1,0, чтобы отображалась синяя граница.
Цвета
С помощью параметров на вкладке Цвет можно дополнительно настроить создаваемые формы. Эти параметры можно настраивать только после того, как вы установите значение «Вкл.», поставив флажок в соответствующем поле с логическим значением.
Вы даже можете создавать градиенты как для форм, так и для границ. Доступен предпросмотр градиентов в окне просмотра в процессе их изменения.
На изображении выше к цветам применены градиенты. Эта опция активируется при установке значения параметра Градиент вкл./откл. выше 0,0.
Состояние
Этот параметр находится в разделе Цвет. С его помощью можно задавать цвета формы в разных состояниях. Вы можете установить пользовательские цвета для различных действий игрока, таких как наведение курсора, фокусировка, нажатие или отключение формы интерфейса.
Если вы не зададите материал в настройке Физический материал, то при импорте в создаваемый виджет ваша форма будет иметь прозрачную границу. Чтобы избежать этого, задайте в качестве физического материала Древесина, чтобы он отрисовывался как реальный материал.
После того как вы закончите настройку формы интерфейса, не забудьте сохранить изменения, нажав на значок дискеты в правом верхнем углу. Настроенный экземпляр вашего материала будет сохранен в папке контента проекта.
В этом уроке для примера используются формы, которые в сочетании с фоном кнопки образуют подсолнух.
Создание виджетов интерфейса
Теперь нужно создать виджеты, с которыми будут взаимодействовать игроки. Прочтите документ Редактор виджетов интерфейса, чтобы узнать больше о создании виджетов и организации вкладки «Иерархия».
На данном этапе у вас должны быть готовы экземпляры материалов для каждого элемента дизайна.
Пример в этом уроке состоит из нескольких экземпляров лепестков цветка и цветоложа. Кнопка состоит из основания и двух изображений, которые используются в качестве значков кнопки.
Эти экземпляры материалов организуются в схемы создания виджетов для получения индивидуального дизайна. Схема создания виджета импортируется в устройство «Всплывающее диалоговое окно», чтобы переопределить стандартный интерфейс.
Создайте новую схему создания виджетов, которая будет содержать как экземпляры материалов, так и виджеты кнопок, составляющие пользовательский интерфейс. Это будет схема создания виджетов, которая добавляется в настройки устройства.
В этом виджете объедините все свои пользовательские экземпляры материалов, чтобы создать собственный дизайн. Создавая виджет интерфейса, перетаскивайте ресурсы из разделов Общие, Общий интерфейс, Панель, UIKIT и Создано пользователем под имя виджета.
На снимке экрана выше ресурсы организованы на вкладке Иерархия и расположены в окне просмотра так, чтобы образовать пользовательский интерфейс в форме цветка.
Когда вы будете удовлетворены дизайном, сохраните схему и вернитесь в Каталог ресурсов. Теперь эту схему нужно импортировать в устройство «Всплывающее диалоговое окно», которое будет отображать пользовательский интерфейс.
Добавление виджетов в устройства
Когда ваш дизайн будет готов, разместите устройство «Всплывающее диалоговое окно» для отображения виджета.
Перетащите виджет в папку Сведения > Модальный виджет > Класс переопределения шаблона.
Вы можете просматривать и тестировать своё творение, запустив сеанс.