Уроки Unreal Engine

Unreal Engine 4. Учебник для начинающих, часть 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: 100
  • Размер шрифта: 68
  • Justification: выровнять текст по правому краю (текст будет выровнен по правой стороне виджета)

Теперь установите анкор в верхнем правом углу, щелкнув левой кнопкой мыши и выбрав соответствующую область на Anchor Medallion (сейчас вам нужен верхний правый угол):

Обратите внимание, каким образом теперь обновились координаты:

Далее создайте виджет Image, назовите его TimerIcon и присвойте ему следующие значения:

  • Положение X: 1750
  • Положение Y: 50
  • Size To Content: проверено
  • Brush\Image: T_Timer

Вместо того, чтобы снова устанавливать анкор с помощью Anchor Medallion, вы можете использовать шаблоны. Для этого перейдите на панель «Details» и откройте список, который находится рядом с раскрывающийся список рядом с пунктом «Анкоры». Вам нужно выбрать третий шаблон, у которого квадрат расположен справа вверху.

Теперь макет для пользовательского интерфейса завершен. Вы можете увидеть, как действуют анкоры, эмулируя экран разных размеров. Перейдите на панель «Designer» и выберете пункт «Screen Size»:

Выбор определенного значения изменит размер WBP_HUD для соответствия определенному устройству. Ниже показано, как HUD будет выглядеть на iPad Air, обратите внимание, что виджеты тут расположены немного ближе друг к другу:

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

Чтобы сохранить изменения, нажмите Compile и затем вернитесь в главный редактор. Перейдите в папку «Чертежи» и дважды щелкните мышкой BP_GameManager, чтобы открыть файл.

HUD должен быть виден сразу после того, как начнется игра. Для этого вы можете использовать узел Event BeginPlay. Найдите его и добавьте в последовательность еще один узел под названием Create Widget, чтобы он мог создать экземпляр указанного виджета.

Теперь в меню рядом с входом Class выберете пункт WBP_HUD:

Для того, чтобы HUD корректно отображалось, вам нужно использовать узел Add to Viewport. Щелкните левой кнопкой мыши и перетащите выход «Return Value» узла «Create Widget» в пустое место. Появится контекстное меню в котором вам нужно выбрать функцию Add to Viewport.

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

  1. Как только программа Unreal создает BP_GameManager, начинают выполняться функции Restart и SetUpCamera. Именно они настраивают значения нужных нам переменных. Мы немного позже поговорим об этих функциях более подробно.
  2. Узел Create Widget создает экземпляр WBP_HUD.
  3. Узел Add to Viewport отображает WBP_HUD.

Для сохранения результата, нажмите Compile, вернитесь в главный редактор и нажмите Play, чтобы посмотреть, как работает новый HUD:

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

Чтобы использовать эти переменные, вам нужен способ получить быстрый доступ к BP_GameManager из WBP_HUD. Вы можете сделать это, сохранив ссылку на BP_GameManager в переменной.

Использование ссылок

Чтобы получить быстрый доступ к какому-то определенному экземпляру очень удобно использовать ссылки к нему. Представьте, что у вас была одна коробка с шариком. Если бы вы хотели взять этот мяч и рассмотреть его, то легко бы это сделали – коробка то всего одна.

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

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

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

Откройте WBP_HUD и переключитесь в режим редактора, выбрав график:

Перейдите к вкладке My Blueprint и создайте новую переменную с именем GameManager.

Теперь вам нужно перейти к панели «Details» и щелкнуть по списку рядом с «Variable Type». Найдите BP_GameManager и выберите BP Game Manager\Object Reference.

Использование ссылок

Для того, чтобы сохранить результат, нажмите Compile и затем откройте BP_GameManager.

Найдите узел «Create Widget» и перетащите значок «Return Value» в пустую область. Вам нужно выбрать команду «Set Game Manager» в появившемся меню и связать узел Add to Viewport с узлом Set Game Manager.

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

Следующим шагом создайте узел Self и подключите его к левому выводу узла Set Game Manager. Узел Self должен иметь свойство Get a reference to self:

Теперь, когда вы создали WBP_HUD, он будет иметь ссылку на BP_GameManager.

Функции

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

Организация

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

Внимательно посмотрите на Event BeginPlay в разделе BP_GameManager: тут есть две функции Restart и SetUpCamera.

Вот как будет выглядеть этот раздел без использования функций:

Согласитесь, график выглядит немного пустовато.

Возможность повторного использования

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

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

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

Обновление данных виджета

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

Для сохранения прогресса нажмите Compile и откройте WBP_HUD, переключившись в режим редактора. Вам необходимо выбрать CounterText и перейти к панели «Details». Установите флажок в квадрате «Variable», расположенному в самом верху окна.

Теперь вы сможете обновлять значение CounterText. Следующим шагом является создание функции для изменения текста в соответствии с необходимым значением.

Создание функции обновления данных

Вам необходимо вернуться в режим редактирования графика и перейти к вкладке «My Blueprint». Нажмите знак «+» справа от раздела «Functions»:

Таким образом вы создадите новую функцию и построит новый график.  Переименуйте функцию в UpdateCounterText.

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

Для того, чтобы CounterText корректно отображал переменную ShapesCollected, вам нужно создать новое соединение. Переместите с помощью мыши переменную GameManager в область графика и также поместите в свободную область новый значок, присвоив ему свойство «Get Shapes Collected»:

Чтобы установить значение текста, вам нужно использовать узел SetText (Text). Перетащите переменную CounterText в график событий и добавьте новый узел SetText (Text):

SetText (Text) принимает только данные типа Text, однако переменная ShapesCollected имеет тип Integer, для которого программа выполняет автоматическое преобразование данных.

Подключите переменную ShapesCollected к выходу In Text узла Set Text (Text). Смотрите, Unreal автоматически создает новый узел ToText (int):

Для завершения создания функции подключите узел Entry к узлу Set Text (Text):

Резюмируя:

  1. Когда вы обращаетесь к UpdateCounterText, функция получает переменную ShapesCollected из BP_GameManager.
  2. Узел ToText (int) преобразует значение ShapesCollected в тип Text.
  3. SetText (Text) установит текст для CounterText значение из ToText (int).

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

Вызов функции обновления данных

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

Нажмите Compile и вернитесь к окну BP_GameManager.

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

Подсказка:

  • Найдите раздел, в котором вы создали WBP_HUD.
  • Щелкните левой кнопкой мыши и перетащите выход «Return Value» узла «Create Widget».
  • Отпустите левую кнопку мыши на пустом месте и выберите в появившемся меню пункт «Promote to variable».
  • Добавьте новый узел в конец всей цепочки узлов.

После того, как вы создадите переменную, переименуйте ее в HUDWidget:

Теперь перетащите правой кнопкой мыши узел Pin HUDWidget и отпустите его на пустом месте графика. Добавьте новый узел UpdateCounterText, чтобы обеспечить корректное отображение данных CounterText значения ShapesCollected при каждом запуске игры.

Вернитесь к панели «My Blueprint» и найдите там раздел «Functions». Дважды щелкните на IncrementShapesCollected, чтобы открыть его график:

Перетащите переменную HUDWidget в график и добавьте узел UpdateCounterText, подключив его следующим образом:

Теперь, когда будет выполняется команда IncrementShapesCollected, она будет увеличивать значение ShapesCollected и затем вызывать команду UpdateCounterText. Эта же функция выполняет обновление CounterText до значения ShapesCollected.

Для того, чтобы сохранить результат, нажмите Compile и закройте BP_GameManager. Нажмите Play и попробуйте поймать несколько падающих фигур, чтобы увидеть, как теперь работает виджет CounterText:

Зачем нужны привязки

Так называемые привязки (Bindings) позволяют автоматически обновлять определенные свойства виджета. Чтобы быть привязываемым, свойство должно иметь «Bind drop-down».

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

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

Создание привязки

Откройте WBP_HUD и переключитесь в режим редактора. Вам нужно выбрать тут TimerText и перейдите раздел «Content» на панели «Details». Посмотрите, для свойства Text можно создать привязку, указав соответствующую команду в списке меню «Bind drop-down».

Это создаст новую функцию и график для нее. Переименуйте эту функцию в UpdateTimerText.

Функция будет иметь узел Return с выводом Return Value типа Text. TimerText будет отображать любой текст, который вы впишете в это поле.

Переместите GameManager в график, а затем создайте для него переменную TimeRemaining. Подключите новую переменную к выходу Return Value узла Return. Как и в прошлый раз, Unreal автоматически добавит узел преобразования.

Резюмируя:

  • Привязка будет постоянно вызывать функцию
  • Функция получает переменную TimeRemaining из
  • Узел ToText (float) преобразует значение из TimeRemaining в текстовый тип.
  • Преобразованное значение затем выводится на узел Return.

Последний раз нажмите Compile для сохранения результата, а затем закройте WBP_HUD. Теперь вы можете нажать кнопку Play, чтобы увидеть окончательный результат ваших стараний:

Что делать дальше?

Вы можете скачать готовый проект и все необходимые материалы.

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

С другими типами виджетов вы можете ознакомиться на странице Widget Type Reference документации Unreal Engine.

В следующем уроке этой серии вы узнаете, как самостоятельно создать простую игру!

Перевод
raywenderlich.com
Показать еще

3 Comments

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Back to top button