Руководство по пользовательскому интерфейсу Unreal Engine 4

В этом уроке, который посвящен подробному изучению пользовательского интерфейса Unreal Engine 4, вы научитесь, как создавать, отображать и обновлять HUD.

При создании видеоигр разработчики используют графику и текст для отображения соответствующей информации для игрока, такой как шкала здоровья или опыта. Это называется пользовательским интерфейсом игрока (UI).

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

Из этого урока вы узнаете:

  • Как создать экранный дисплей (HUD), который будет отображать счетчик и таймер;
  • Как показать HUD;
  • Как обновить счетчик и таймер для отображения значений переменных;

Обратите внимание: вы будете использовать Blueprints в этом уроке. Если вам необходимо освежить знания об этих инструментах, пожалуйста, вернитесь к предыдущим частям руководства прежде чем продолжить.

Это занятие является частью серии, которая состоит из 10 уроков, посвященных Unreal Engine:

Начало работы

В первую очередь вам необходимо скачать и разархивировать стартовый проект и все материалы, необходимые для работы.

После этого перейдите в папку проекта и откройте GeometryCatcher.uproject.

Примечание: Если во время открытия файла в программе вы сообщение о том, что проект был создан с использованием более ранней версии редактора Unreal, не переживайте, это нормально -программа часто обновляется. Вы можете открыть копию, или сразу преобразовать файл.

После того, как вы откроете файл в редакторе, нажмите Play, чтобы запустить игру. Попробуйте управлять белым кубом и попытаться поймать падающие фигуры. Вы можете перемещать платформу при помощи компьютерной мыши по горизонтали. Спустя десять секунд падающие фигуры перестанут появляться.

Первое, что вы должны будете сделать, это создать HUD, который отображает две вещи:

  • Счетчик, который отслеживает и показывает, сколько фигур собрал игрок;
  • Таймер, который показывает, сколько секунд осталось до тех пор, пока фигуры не перестанут появляться.

Чтобы реализовать все это, вам нужно использовать специальные виджеты.

Что нужно знать о виджетах

Виджет — это элемент пользовательского интерфейса, который предоставляет своего рода визуальную функциональность пользовательскому интерфейсу. Например, виджет Button дает возможность использовать объект, который пользователь может видеть и нажимать.

Сам виджет не должен быть видимым, например, виджет Grid Panel предназначен для разделения рабочего пространства между его содержимым. Пользователь не может видеть сетку разделения, но может видеть ее эффект.

Кроме того, виджеты также могут содержать другие виджеты. Перед вами пример такого случая, когда пользовательский виджет также содержит «Текст» (метка «Имя») и «Текстовое поле»:

Вы даже можете создать виджет в виде целого интерфейса, такого как экран игрового меню. Ниже приведен пример виджета, который сконструирован в виде главного экрана. Все элементы пользовательского интерфейса при этом также являются виджетами и находятся на этом экране:

Теперь, когда вы знаете, что такое виджеты, пришло время создать их для применения с HUD.

Процесс создания виджета

Перейдите в меню Content Browser и найдите там папку пользовательского интерфейса. Нажмите кнопку «Add New» и выберите «User Interface\Widget Blueprint». Переименуйте новый элемент в WBP_HUD:

Дважды кликните мышью по WBP_HUD, чтобы открыть его в редакторе UMG UI.

UMG UI редактор

Окно UMG UI редактора состоит из семи основных элементов:

  1. Designer: эта область содержит визуальное представление вашего виджета. Тут вы можете изменять масштаб объекта, удерживая правую кнопку мыши и двигая ей или прокручивая колесико.
  2. Details: в этом окне отображаются свойства выбранного вами виджета.
  3. Palette: тут находится список всех виджетов, которые вы можете использовать. Любые созданные пользователем новые виджеты также появляются здесь.
  4. Hierarchy: это меню содержит список всех виджетов, которые вы используете в данный момент.
  5. Animations: каждый виджет может быть анимирован, например, в отношении его расположения или размера. На этой панели перечислены все возможности анимации.
  6. Timeline: при выборе какой-либо анимации, на этой панели будут отображаться ее свойства и ключевые кадры.
  7. Editor Mode: здесь вы можете переключаться между режимами Designer и Graph, которые по функциональности схожи с одноименными режимами инструмента Blueprint.

Создание текстового виджета

Текстовые виджеты идеально подходят для отображения числовой информации, такой как счетчик очков и таймер оставшегося/прошедшего времени.

Перейдите на панель «Palette» и найдите там виджет «Text». Добавьте его, удерживая левую кнопку мыши и перетаскивая значок в свободную область панели «Designer».

Не переживайте о том, какой сейчас будет текст, вы всегда сможете изменить его позже.

Переименуйте виджет в CounterText, выбрав его и перейдя на панель «Details». Введите название CounterText в текстовое поле, расположенное вверху.

Вы можете расположить новый виджет в любом месте, перетаскивая его при помощи мышки.

Кроме того, вы также можете изменить размер виджета, и перетаскивая маркеры. Это позволит в первую очередь установить границы, чтобы все что вам будет нужно происходило в его пределах и не нарушало эти границы.

Установка расположения и границ виджета также происходит на панели «Details». Сейчас вам нужно ввести следующие свойства и значения для CounterText:

  • Положение X:200
  • Положение Y:50
  • Размер X:500
  • Размер Y:100

Обратите внимание, что сейчас текст занимает лишь небольшую часть поля:

Вы можете изменить размер шрифта, перейдя на панель «Details» и перейдя в раздел «Appearance». Справа от свойства Font есть текстовое поле для установки размера шрифта.

Установите размер шрифта = 68:

Теперь нужно улучшить наш счетчик, добавив значок рядом с ним.

Создание изображения для виджета

Графическое изображение для виджета — это простой способ отображения графики в вашем пользовательском интерфейсе, например, при создании значков.

Создайте новый виджет Image и назовите его CounterIcon. Установите Положение X = 75 и Положение Y = 50, чтобы он расположился рядом с объектом CounterText:

Чтобы выбрать и установить определенное изображение, перейдите на панель «Details» и найдите раздел «Appearance». Теперь откройте свойства Brush и выберете в появившемся списке пункт T_Counter.

Изображение будет выглядеть растянутым, потому что виджет имеет отличный размер от исходного размера изображения.

Вместо изменения размера виджета вы можете использовать функцию «Size To Content». Это автоматически изменит размер виджета в соответствии с его содержимым, в данном случае с изображением.

Не покидая панель «Details», перейдите в раздел «Slot» (Canvas Panel Slot) и установите флажок рядом с пунктом Size To Content:

Посмотрите, теперь размер виджета изменится в соответствии с изображением, которое больше не выглядит растянутым:

Когда вы играете в игру на разных устройствах, размер изображения также будет отличаться, ведь используются разные типы экранов. Однако пользовательский интерфейс при этом должен соответствующим образом перемещать имеющиеся в нем виджеты. Для поддержания макета вашего пользовательского интерфейса вы можете использовать анкоры.

Для чего нужны анкоры

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

В приведенном ниже примере каждое изображение привязано к одной точке (ближайшему углу):

Обратите внимание, что каждое изображение сохраняет свою позицию относительно своего анкора, не смотр на изменение масштаба или положения виджета. Используя привязки, вы можете гарантировать, что ваш пользовательский интерфейс сохранит одинаковый вид на разных по размеру экранах.

Кроме того, вы можете использовать анкоры для автоматического изменения размера виджетов. При привязке к двум или более точкам размер виджета автоматически изменится.

В приведенном ниже примере объект привязан к верхнему левому и верхнему правому углам:

По вертикали полоса перемещается вверх без изменений ее размера или длинны. Это происходит потому, что данный объект имеет только один анкор на оси Y (вверху). Тем не менее, размер полоски изменяется при горизонтальном перемещении, поскольку он имеет две опорные точки на оси X.

Так называемый Anchor Medallion представляет местоположение вашего анкора. Эта функция будет отображаться всякий раз, когда у вас будет выбран виджет:

Анкоры для CounterText и CounterIcon уже установлены в правильном положении, поэтому вам не нужно ничего изменять.

Теперь вам будет нужно создать еще один виджет текста и изображения, теперь уже для таймера. Однако на этот раз разместите их с правой стороны.

Создание таймера

Создайте новый текстовый виджет, назовите его TimerText и установите для него следующие свойства:

  • Положение X: 1225
  • Положение Y: 50
  • Размер X: 500
  • Размер Y: