Пользовательские виджеты создаются в Редакторе виджетов с помощью виджетов UMG.
Пользовательские виджеты можно сравнить с картами, на которых проложен маршрут между виджетом UMG и функциями устройства. Умение читать пользовательский виджет поможет вам понять, как устроен интерфейс. В Редакторе виджетов можно ознакомиться:
Привязки виджета в просмотре привязок.
В шаблоне функции откройте папку «Устройство управления интерфейсом» и дважды нажмите на виджет UW_HCD01, чтобы узнать, как этот виджет был создан и привязан к устройству управления интерфейсом.
Компоновка виджета
Компоновка виджета — это этап разработки пользовательского интерфейса. В Редакторе виджетов можно использовать виджеты UMG с панели «Палитра», чтобы настроить внешний вид интерфейса и определить его функции. Порядок использования виджетов UMG определяет внешний вид интерфейса.
Чтобы больше узнать о том, как работают виджеты UMG, см. раздел Палитра документа «Редактор виджетов».
Откройте виджет UW_HCD01 и посмотрите на панель Иерархия. На панели «Иерархия» показано, какие виджеты UMG использовались и в каком порядке они были добавлены в окно просмотра.
Виджеты UMG можно переименовать на панели «Иерархия» после их добавления в окно просмотра.
Во всех дизайнах виджетов должен быть корневой виджет, выполняющий функции экрана. Виджет наложения с именем «Корень» размещается в корне дизайна и выступает в качестве экрана. Для окна просмотра задан параметр Заполнить экран — так дизайн заполняет соответствующую корневую область.
Панель решётки используется для размещения дизайна шкал здоровья и щита. Панели решётки — это гибкие решётки, дочерние виджеты которых можно распределять по строкам и столбцам.
Вы можете дополнительно настраивать строки и столбцы, поскольку панель решётки добавляет к своим дочерним виджетам параметры, которые управляют количеством строк и столбцов, пространством, занимаемым строками и столбцами, слоем, который занимает виджет в дизайне, и специальным параметром перемещения под названием Подталкивание.
Этот параметр позволяет перемещать дочерний виджет по осям X и Y, не занимая место. Это означает, что смещается только содержимое внутри контейнера, а сам контейнер сохраняет своё положение и место, занимаемое в компоновке.
Виджет наложения ShieldBarContainer является первым дочерним виджетом панели решётки. Этот виджет размещается в 1-й строке, 0-м столбце и отображается по всему интервалу 1-й строки, интервалу 0-го столбца. Виджеты ShieldBarContainer отображаются на Layer1.
Это означает, что все дочерние виджеты ShieldContainer отображаются в начале дизайна, потому что они находятся в 1-м слое, но справа от виджетов позади него, поскольку они находятся в 1-й строке. Шкала щита затрагивает две строки (0-ю и 1-ю), что определяет её длину.
С помощью параметра Подталкивание > Y можно переместить виджет ShieldBarContainer на –25,0 единиц измерения Slate вниз от его местоположения по умолчанию так, чтобы он немного прикрывал контейнер здоровья, находящийся за ним.
Виджет наложения HealthBarContainer является вторым дочерним виджетом панели решётки. Этот виджет размещается в 1-й строке, 0-м столбце и отображается по всему интервалу 1-й строки, интервалу 0-го столбца. Виджеты HealthBarContainer отображаются на Layer0.
Это означает, что все дочерние виджеты HealthBarContainer отображаются в задней части дизайна, потому что они находятся на 0-м слое. Шкала здоровья находится в 0-й строке, поэтому она отображается слева от шкалы щита. HealthBarContainer также затрагивает 0-ю и 1-ю строки, что определяет длину шкалы здоровья.
Ниже представлена разбивка виджетов UMG, из которых состоят шкалы щита и здоровья, а также их назначение в общем дизайне.
ShieldBarContainer
В ShieldBarContainer находятся все виджеты UMG, из которых состоит дизайн шкалы щита. Шкала щита состоит из следующих элементов:
| Виджет UMG | Название виджета | Назначение |
|---|---|---|
Изображение | ShieldBar_backing | Используется в качестве контейнера для всего дизайна шкалы щита. Это экземпляр материала с именем MI_HCD01_Backplate. |
Стековое поле | ShieldContent | Упорядочивает дочерние виджеты (значок шкалы щита и материал шкалы щита) слева направо внутри материала ShieldBar_Backing и ShieldBarContainer. |
Изображение | ShieldIcon | Материал значка щита, используемый в качестве переднего слоя. |
Наложенный слой | ShieldBarContainer | Используется для компоновки его дочерних виджетов во втором столбце стекового поля ShieldContent. Эти виджеты составляют материал шкалы щита. |
Изображение | ShieldBarStroke | Используется в качестве контейнера вокруг шкалы щита. Это экземпляр материала с именем MI_HCD01_BarStroke. |
Изображение | ShieldBar | M_ProgressBar_Basic — это динамический двухцветный материал, который использует функцию материала для перемещения влево и вправо по шкале щита в зависимости от информации, которую виджет получает от устройства управления интерфейсом. |
HealthBarContainer
В контейнере HealthContainer находятся все виджеты UMG, из которых состоит дизайн шкалы здоровья. Шкала здоровья состоит из следующих элементов:
| Виджет UMG | Название виджета | Назначение |
|---|---|---|
Стековое поле | Содержимое здоровья | Упорядочивает дочерние виджеты (значок шкалы здоровья и материал шкалы здоровья) слева направо внутри HealthContainer. Это стековое поле растянуто вокруг виджета наложения ShieldContainer, и оно располагает шкалу щита в центре общего дизайна интерфейса. Всё потому, что стековое поле HealthContent имеет больший размер по оси X, чем стековое поле ShieldContent. |
Изображение | HPIcon | Материал значка здоровья, используемый в качестве переднего слоя. |
Наложенный слой | HPBarContainer | Используется для компоновки его дочерних виджетов во втором столбце стекового поля HealthContent. Эти виджеты составляют материал шкалы здоровья. |
Изображение | HPBarStroke | Используется в качестве контейнера вокруг шкалы здоровья. Это экземпляр материала с именем MI_HCD01_BarStroke. |
Изображение | HPBar | Динамический двухцветный материал, который использует функцию материала для перемещения влево и вправо по шкале здоровья в зависимости от информации, которую виджет получает от устройства управления интерфейсом. |
Далее вы узнаете, как выбрать модель просмотра, чтобы обновлять материалы интерфейса и отображать текущий статус здоровья и щита игрока в игре.
Модель просмотра
Модель просмотра управляет информацией об игроке через список функций. Эти функции позволяют управлять информацией об игроке через виджет UMG и функции устройства. Модели просмотра позволяют привязать виджеты UMG к устройствам творческого режима.
Модели просмотра прослушивают функции, выполняемые в устройстве, используя пользовательский виджет на замену интерфейсу по умолчанию. Затем модель просмотра использует функции устройства для обновления интерфейса через просмотр привязок.
Например, модели просмотра шкал щита и здоровья прослушивают функции щита и здоровья в устройстве управления интерфейсом. Когда в устройстве управления интерфейсом выполняется функция для щитов и здоровья игрока, модель просмотра прослушивает эти функции и передаёт информацию через просмотр привязок для обновления интерфейса.
Существует несколько различных моделей просмотра. В списке моделей просмотра ниже есть модели просмотра для конкретных устройств. Они содержат функции, специфичные для определённого устройства.
Следующие модели просмотра управляют несколькими частями интерфейса через функции устройства в списках функций.
Устройство: список сведений об игроке команды/отряда в устройстве управления интерфейсом используется с виджетом UW_HCD01. Он использует Данные контролирующего игрока, чтобы получить ваши данные из устройства управления интерфейсом, потому что этот шаблон предназначен для одиночной игры — только для вас!
В данном примере интерфейса Здоровье и Щит управляются через эту модель просмотра путём прослушивания функций устройства управления интерфейсом.
Далее вы узнаете, как привязать материалы интерфейса здоровья и щита к функциям устройства управления интерфейсом в просмотре привязок.
Просмотр привязок
Просмотр привязок сопоставляет функции виджета UMG с функциями привязанного устройства и обновляет пользовательский интерфейс в HUD-интерфейсе. В виджете UW_HCD01 материалы ShieldBar и HPBar привязаны к функциям щита и здоровья устройства управления интерфейсом. Эти функции отслеживают ваши щиты и здоровье в игре и обновляют материал шкалы в зависимости от уровня щита и здоровья.
Создание функций интерфейса щита и здоровья начинается с выбора виджета UMG и привязки свойств виджета к определённой функции устройства. Привязки необходимо создать на панели Просмотр привязок.
Добавление виджета UMG
Виджеты изображений (ShieldBar и HPBar) сначала выбираются на панели Иерархия, а затем на панели «Просмотр привязок». Чтобы открыть список функций модели просмотра, нажмите кнопку +добавить виджет. В виджет добавлена функция для управления информацией о его свойствах. В данном случае это функция «Кисть» для управления материалами ShieldBar и HPBar.
Добавление привязки устройства
После определения виджета для привязки выбирается тип привязки устройства. Рядом с полем виджета есть пустое поле. При нажатии на пустое поле открывается список доступных привязок устройства. Параметры привязки устройства автоматически появляются под полями виджета и привязки устройства. То, как виджет обновляется на основе информации, которую он получает от устройства, определяется параметрами.
Виджет UW_HCD01 использует параметр Задать скалярный параметр для обновления свойств Кисти.
Просмотр привязок
Панель «Сведения»
В виджете UW_HCD01 виджеты изображения (ShieldBar и HPBar) имеют динамические материалы в свойствах кисти (их можно найти на панели «Сведения»).
Настройка параметров устройства
Чтобы материал отражал текущее состояние щита и здоровья игрока, в привязках устройства есть параметры, которые необходимо задать для отправки информации об устройстве в виджеты UMG.
В этом примере виджет изображения и его функция Кисть автоматически добавляются в параметр Кисть устройства управления интерфейсом. Эта привязка определяет, какое свойство «Кисть» виджета изображения нужно обновить.
Имя параметра определяет, какой параметр в материале кисти будет обновлён. В данном примере в поле введено слово Прогресс.
Наконец, значение для привязки определяется моделью просмотра. В поле «Значение» привязки заданы функции HUDPlayerInfoListViewmodel > Данные контролирующего игрока > Щит и Здоровье.
Функции устройства управления интерфейсом теперь обновляют свойство Кисть в виджете изображения с помощью функции преобразования Скалярный параметр, для которой требуется свойство Прогресс, в которое передаются значения здоровья и щита.
Прогресс — это значение, которое перемещает шкалу вперёд и назад между значениями ProgressStart и ProgressEnd. Это означает, что значение прогресса будет ограничено диапазоном от 0 до 1.
Если вы начинаете игру с полными шкалами здоровья и щита, урон заставит шкалу сместиться влево в зависимости от свойств Прогресс и Нормализация прогресса. Эти свойства определяют, насколько сильно материал смещается влево, когда игрок получает урон.
Материал будет перемещаться по шкале вправо, если здоровье и щиты будут восстанавливаться с той же скоростью, с которой они уменьшаются, с учётом свойств Прогресс и Нормализация прогресса.
Откройте другие пользовательские виджеты и попробуйте прочитать их и понять порядок добавления виджетов UMG в иерархию, тип модели просмотра, выбранный для пользовательского виджета, и то, как параметры виджета UMG и функции устройства привязаны в просмотре привязок.
Модель просмотра используемого предмета
Эту модель просмотра можно использовать вместе с устройством управления интерфейсом для отслеживания статистических данных используемого предмета с помощью ячейки виджета Переопределение виджета информации об используемом предмете. Во всех примерах интерфейса в качестве используемого предмета задан автомат WID_Assault_AutoHigh_Athena_C_Ore_T03.
Откройте папку Устройства > Устройство управления интерфейсом > Виджеты и дважды нажмите на виджет UW_HCD03_SelectedItem. Используя эту модель просмотра, в интерфейсе можно отслеживать данные и статистические показатели оружия:
Значок предмета
Название предмета
Значок боеприпасов
Количество боеприпасов
Излишки боеприпасов
Оружие с обоймой