Пост по прошлой неделе

О виджетах:

Виджет (widget) — это элемент UI, предоставляющий UI визуальные функции. Например, виджет Button предоставляет объект, который пользователь может видеть и нажимать на него. Сам виджет необязательно должен быть видимым. Например, виджет Grid Panel равномерно разделяет своё пространство между его содержимым. Пользователь не может увидеть Grid Panel, но видит его воздействие. Можно даже создать виджет, являющийся целым интерфейсом, например, экраном меню. Ниже представлен пример виджета, созданного так, чтобы он выглядел как начальный экран игры. Все элементы UI тоже являются виджетами и содержатся внутри виджета начального экрана.

Создание виджета:

Перейдем в Content Browser и найдем папку UI. Нажмем на кнопку Add New и выберем User Interface\Widget Blueprint. Переименуем новый ассет в WBP_HUD.

UMG UI Designer:

UMG UI Designer состоит из семи основных элементов:

• Designer: в этой области представлено визуальное отображение виджета. Перемещаться по ней можно зажав правую клавишу мыши и двигая мышью. Масштабирование выполняется прокруткой колёсика мыши.
• Details: здесь отображаются свойства выбранного виджета
• Palette: список всех виджетов, которые можно использовать. Все созданные пользователем виджеты тоже появляются здесь.
• Hierarchy: список всех уже используемых виджетов
• Animations: некоторые свойства виджетов могут иметь анимацию, например, расположение и размер. В этой панели перечислены все анимации.
• Timeline: при выборе анимации на этой панели показываются анимированные свойства и ключевые кадры
• Editor Mode: здесь можно переключаться между режимами Designer и Graph. Режим Graph почти аналогичен Event Graph у Blueprint.

Привязки:

Точка привязки задаёт место, относительно которого определяется положение виджета. По умолчанию виджеты привязаны к верхнему левому углу своего родительского элемента. Поэтому когда мы задаём положение виджета, мы на самом деле указывает положение относительно этой точки привязки. Заметьте, что каждое изображение сохраняет положение относительно своей привязки. Благодаря привязкам UI будет иметь одинаковое расположение при разных размерах экрана. Также можно использовать привязки для автоматического изменения размера виджетов. В случае привязки к двум или более точкам виджет будет менять свой размер для сохранения относительного размера.

Отображение HUD:

Нажмем на Compile, а затем вернемся в основной редактор. Перейдем в папку Blueprints и дважды щёлкнем на BP_GameManager, чтобы открыть его. HUD должен становиться видимым после запуска игры. Для этого можно использовать нод Event BeginPlay. Найдем нод Event BeginPlay и добавим нод Create Widget в конец цепочки нодов. Этот нод создаёт экземпляр указанного виджета. Нажмем на раскрывающийся список рядом с Class и выберем WBP_HUD.

Давайте разберёмся с порядком событий:

• Когда Unreal спаунит BP_GameManager, выполняются функции Restart и SetUpCamera. Эти функции настраивают несколько переменных и камеру. Если вы не знаете, что такое функция, то не волнуйтесь, скоро мы их рассмотрим.
• Нод Create Widget создаёт экземпляр WBP_HUD
• Нод Add to Viewport отображает WBP_HUD

Итоги работы

По итогам работы я научился следующему:

• Создавать HUD-дисплей, на котором отображается счётчик и таймер
• Отображать HUD на экране
• Обновлять счётчик и таймер, чтобы отображать значения переменных

License

Copyright 2022-present Борис Тараканов.

Released under the MIT license.