Моушен Графика UE 101

ЦЕЛИ И ИТОГИ ЛЕКЦИИ
В этой лекции:
Представить Моушен Графику Анрила (UMG)
Показать Widget Blueprint
Показать как создавать титульный экран используя UMG
Показать как создавать HUD интерфейс используя UMG
К концу этой лекции вы сможете:
Создать простой титульный экран
Сделать связь между титульным экраном и уровнем
Создать простой HUD интерфейс
Дать доступ к переменным из Player Character Blueprint для использования в HUD Widget Blueprint

ОСНОВЫ UMG

UMG
Unreal Motion Graphics (UMG) UI Designer используется для создания элементов пользовательского интерфейса, таких как титульные экраны и HUD в Unreal Engine 4.
Чтобы работать с UMG, важно создать Widget Blueprint, особый тип Блюпринта, который содержит виджеты и панель Designer.
Чтобы создать Widget Blueprint, нажмите зеленую кнопку Add New в Content Browser, и в подменю User Interface выберите “Widget Blueprint”.

ПАНЕЛЬ DESIGNER
У Widget Blueprint есть два режима:
Режим Designer позволяет создавать визуальный макет с помощью панели Designer.
В режиме Graph простраивается логика создаваемых виджетов.
Виджеты с панели Palette можно брать и перетаскивать на панель Designer.
Виджет можно поместить внутрь другого виджета.
Иерархия виджетов отображается на панели Hierarchy.

ВИДЖЕТЫ
Виджеты являются компонентами интерфейса. Они добавляются на панель Canvas и редактируются в Widget Blueprint.
Картинка справа показывает некоторые основные виджеты, которые находятся в режиме Designer на панели Palette.

ТИТУЛЬНЫЙ ЭКРАН

ПРОСТОЙ
ТИТУЛЬНЫЙ ЭКРАН
Легко создать простой титульный экран, используя только виджеты Image и Button.
В примере, показанном справа, есть две кнопки: одна для запуска игры, а другая для выхода из игры.

ТИТУЛЬНАЯ КАРТИНКА ИГРЫ
Чтобы создать простой титульный экран, сначала импортируйте текстуры, которые будут использоваться. Далее создайте Widget Blueprint и назовите его “TitleScreenUMG”. Дважды кликните по нему чтобы открыть редактор UMG Editor.
Перетащите виджет Image с панели Palette на панель Designer. Назовите его “GameTitle”. На панели Details у виджета, раскройте свойство Brush в разделе Appearance нажмите по раскрывающемуся списку Image и выберите Texture которая будет использоваться.
Меняйте размер и позицию виджета GameTitle на панели Designer пока он не встанет по центру и будет выглядеть хорошо.

КНОПКИ С КАРТИНКАМИ
Перетащите виджет Button с панели Palette на панель Designer. Назовите его “Btn_Start”. Далее перетащите виджет Image на виджет Btn_Start. Назовите виджет Image “Img_Start”.
Выберите виджет Img_Start и на панели Details раскройте свойство Brush в разделе Appearance раскройте список Image и выберите Texture которая будет использоваться.
Создайте другой виджет Button и виджет Image для кнопки Exit. Назовите виджет Button “Btn_Exit” и виджет Image “Img_Exit”. Разместите виджеты кнопки Exit под кнопкой Start на панели Designer.
Меняйте размер и позицию кнопок на панели Details. Установите Size X на “250” и Size Y на “84” для обеих кнопок.
Картинка справа показывает панель Hierarchy с виджетами которые были добавлены.

СОБЫТИЕ ON CLICKED
Выберите одну из кнопок и на панели Details раскройте раздел Events и добавьте событие OnClicked.
Тоже самое проделайте для другой кнопки.

ДЕЙСТВИЯ КНОПОК
События On Clicked для кнопок были добавлены на Event Graph внутри Widget Blueprint.
Кнопка Start открывает основной игровой уровень для начала игры.
Кнопка Exit вызывает функцию Quit Game.

ИСПОЛЬЗОВАНИЕ ТИТУЛЬНОГО ЭКРАНА
Чтобы использовать Widget Blueprint для титульного экрана, создайте новый Уровень и установите его как default map (карта по умолчанию).
Внутри Level Blueprint, повторите граф нод, как показано на картинке справа.
График включает курсор мыши, создает объект Widget Blueprint, а затем добавляет объект Widget Blueprint в область просмотра.

HUD

HUD ВИДЖЕТ БЛЮПРИНТ
UMG может также использоваться для создания HUDs (heads-up displays). HUD используется для визуальной передачи информации игроку во время игры.
На примере справа, HUD отображает значение Score как текст и значение Health в виде полоски индикатора.
Score и Health это переменные которые нужны в Player Character Blueprint.
Создайте Widget Blueprint и назовите его “HUD_UMG”. Дважды кликните по нему чтобы открыть редактор UMG Editor.

HUD ТЕКСТ
Начнем со значения Score . Перетащите виджет Horizontal Box из раздела Panel на панели Palette ближе к левому верхнему углу панели Designer.
Далее перетащите два виджета Text на виджет Horizontal Box.
Выберите первый виджет Text и на панели Details установите значение свойства Text на “Score:”.
Выберите второй виджет Text и установите значение свойства Text на “9999”.
Выберите зеленый цвет и установите размер шрифта на “48” для обоих виджетов Text.

ФУНКЦИЯ GET SCORE
Выберите виджет Text со значением “9999”. На панели Details нажмите у Text по раскрывающемуся списку Bind и выберите “Create Binding” чтобы создать новую функцию.
Значение виджета Text свойства Text будет привязано к возвращаемому значению новой функции. Дайте функции имя “GetScore” и повторите действия с картинки справа.
Этот пример использует класс FirstPersonCharacter из шаблона First Person. Переменная Score была добавлена в класс FirstPersonCharacter.

HUD ИНДИКАТОР
Индикатор будет использоваться для отображения состояния переменной Health.
Перетащите виджет Horizontal Box из раздела Panel панели Palette и разместите его ближе к верхней границе по центру панели Designer.
Далее, перетащите виджет Text на виджет Horizontal Box. Установите свойство Text у виджета Text на “Health: ”, выберите зеленый цвет, и установите размер шрифта на “48”.
Перетащите виджет Progress Bar на такой же виджет Horizontal Box. измените fill color на красный. Значение свойства Percent варьируется от “0.0” до “1.0” и устанавливает текущее состояние индикатора.

ФУНКЦИЯ GET HEALTH
Выберите виджет Progress Bar. На панели Details кликните у свойства Percent по раскрывающемуся списку Bind и выберите “Create Binding” чтобы создать новую функцию.
Значение виджета Progress Bar свойства Percent будет привязано к возвращаемому значению новой функции. Дайте функции имя “GetHealth” и повторите действия с картинки справа.
Переменная Health была добавлена в класс FirstPersonCharacter.

ИСПОЛЬЗОВАНИЕ HUD
Чтобы использовать HUD Widget Blueprint, откройте Level Blueprint у игрового уровня и повторите действие как на картинке справа.
Граф создает объект Widget Blueprint object и затем добавляет его во Viewport.