Интерфейс UMG и HUD

Урок про создание пользовательского интерфейса в Unreal с помощью UMG.

UMG (Unreal Motion Graphics) — это визуальный конструктор интерфейса, где экраны собираются из виджетов вроде текста, кнопок и полос здоровья.

Что такое HUD и UI

Любой игре нужен интерфейс: полоса здоровья, счёт, меню, кнопки. Постоянные элементы поверх игры называют HUD (Heads-Up Display). В Unreal весь интерфейс строится в UMG — отдельном редакторе, похожем на конструктор форм.

Widget Blueprint

Экран интерфейса — это Widget Blueprint. У него две вкладки. Designer — визуальный холст, куда перетаскивают виджеты и располагают их. Graph — обычный Blueprint-граф для логики этого экрана (например, что делать по нажатию кнопки).

Раскладка

Виджеты размещают в контейнерах, которые управляют их расположением. Horizontal Box ставит элементы в ряд, Vertical Box — в столбец, Canvas Panel даёт свободное позиционирование по координатам. Якоря (anchors) привязывают элемент к краю экрана, чтобы интерфейс корректно тянулся под разные разрешения.

Привязка данных

Чтобы полоса здоровья отражала реальное HP, её значение связывают с переменной через Binding или обновляют вручную из кода. Простой способ — каждый раз при изменении здоровья вызывать функцию, которая ставит виджету новое значение Percent.

Здоровье изменилось
     |
[Update HUD: Set Health Bar Percent = HP / MaxHP]
     |
Полоса на экране перерисовалась

Вывод на экран

Созданный виджет не появляется сам — его нужно создать и добавить на экран функцией Add to Viewport (обычно из PlayerController или персонажа при старте). Чтобы убрать — Remove from Parent. Меню паузы, наоборот, создают и показывают по нажатию клавиши.

Как работает под капотом

UMG-виджеты рисуются поверх 3D-картинки в отдельном слое (Slate — низкоуровневая система интерфейса Unreal, на которой построен сам редактор). Каждый кадр движок обходит дерево виджетов, применяет Binding'и и перерисовывает изменившиеся части. Слишком много Binding'ов, пересчитываемых каждый кадр, могут просадить производительность — лучше обновлять интерфейс по событию, а не постоянно.

Частые ошибки

• Забыть Add to Viewport. Виджет создан, но его не видно, потому что он не добавлен на экран.
• Тяжёлые Binding каждый кадр. Лучше обновлять интерфейс по событию изменения.
• Игнорировать якоря. Без них интерфейс «разъезжается» на других разрешениях.

Виджеты в мире и адаптивность

Интерфейс не обязан жить только на плоскости экрана. Widget Component позволяет разместить UMG-виджет прямо в 3D-мире: полоска здоровья над головой врага, экран терминала на стене, ценник над товаром. Такой виджет существует как часть Actor'а и поворачивается вместе с ним. Это стирает границу между HUD и сценой и часто смотрится естественнее, чем плоские надписи поверх всего.

Отдельная забота — адаптивность под разные экраны. Игроки сидят за мониторами с разным разрешением и соотношением сторон. Чтобы интерфейс не разъезжался, используют якоря (привязку к краям), контейнеры с автоматической раскладкой и DPI Scaling — масштабирование под плотность пикселей. Хорошо собранный HUD одинаково аккуратно выглядит и на ноутбуке, и на большом телевизоре, и продумать это стоит заранее, а не латать перед релизом.

Итоги

• UMG — визуальный конструктор интерфейса; экран — это Widget Blueprint.
• Виджеты раскладывают в контейнерах, привязывают к краям якорями.
• Данные связывают через Binding или обновляют по событию.
• Виджет показывают через Add to Viewport, скрывают через Remove from Parent.