Steamroll’s 3D User Interface

Steamroll’s 3D UI

Этот документ показывает, как можно отображать 3D объекты на HUD игрока, чтобы сделать анимированный интерактивный пользовательский интерфейс в Unreal Engine 4.

Image

[свернуть]

Introduction

Steamroll является игрой головоломкой и стратегией, в стимпанк вселенной, где игрок разрешает проблемы и преодолевает препятствия, чтобы добраться до следующего уровня. На steamball может быть оснащено до 4-х предметов, включая стены, пандусы, бомбы, которые будут установлены так, как игрок их запрограммирует. Хорошим примером может быть steamball, содержащий стену которая разворачивается через 2 секунды после запуска, и пандус к которому прикреплен steamball, и если тот отскочит, бомба активируется когда мяч остановится.

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

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

Method description

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

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

Image

[свернуть]
Unreal Engine 4 UMG имеет экспериментальный виджет под названием Viewport, который может сделать сцену независимой от основного уровня, но после тестирования его на нескольких версиях, и видя что он работает недостаточно хорошо для нас, и не смогли заставить работать это стабильно, поэтому решили искать альтернативный путь.

Мы используем старомодную технику chroma key, где объекты, предоставляющие интерес, вынесенный перед зеленым фоном, а затем у захваченной сцены удаляем фон.

Image

[свернуть]

Isolation and Instancing

3D UI акторы дополняют друг друга, однако настройки должны быть все сгруппированы и затем созданы инстансы в каждом из уровней игры. Именно по этому мы создаем уровень UI_Sublevel и загружаем его в качестве под уровня на каждом уровне нашей игры.

Image

[свернуть]
Только не забудьте поместить его очень далеко от начала координат, так что, когда он включен в реальном уровне он бы не появлялся в конечном итоге в середине действия.
Image

[свернуть]
Важно так же помнить, чтобы изменить настройки подуровня на «Always loaded» на вкладке уровней, иначе вы ничего не увидите.
Image

[свернуть]

Scene Capture to Render Target

В месте этого уровня мы и собираемся «захватить» все что относится к 3д интерфейсе, особым типом камеры под названием SceneCapture2D, и сделать все через RenderTarget, которая на самом деле будет являться текстурой, которую мы будет использовать позже. Создадим SceneCapture2D перед chroma background.

Image

[свернуть]
Создаем Texture Render Target в контент браузере
Image

[свернуть]
Измените настройки Render Target и установите нужное разрешение, так же не забудьте указать адресации.
Image

[свернуть]
Отредактируем SceneCapture2D и установите FOV и CaptureSourse – Final Color
Image

[свернуть]
Важно, снимите флажок Sky Lighting чтобы предотвратить воздействия света на наш интерфейс. Потратьте несколько минут, чтобы снять все функции рендера, если вы уверены что они вам не нужны. Это позволит выиграть прирост в производительности.
Image

[свернуть]

Post Process

Теперь, когда SceneCapture и RenderTarget связаны между собой, мы должны гарантировать, что пост процесс при захвате сцены не будет ломать цвета. Unreal включает в себя tone-mapping, что тонко изменяет окончательный цвет визуализации, и такая система может нарушить цвета, что сломает наш ui. К счастью, мы можем заменить пост процесс по умолчанию на тот который по существу ничего не делает.
Можно победить стандартный post process и tone-mapping в деталях SceneCapture. Мы конечно можем выбрать Scene Color вместо Final Color. Но это вызовет тот же самый недостаток.
Создадим новый материал, и изменим его Material Domain на «Post Process». После чего необходимо указать, что этот материал заменяет Tonemaper.

Image

[свернуть]
Затем настройте материал. Нам нужно «Input 0», который является нашей сценой, и делаем Add к «Input 1», чтобы добавить пост процесс эффекты, такие как bloom. И отправляем это в EmessiveColor.
Image

[свернуть]

Chroma Material

Это ключевой этап всего процесса. Зеленый фон должен быть «стерт», так, чтобы наш под уровень смотрелся как 3D UI. К счастью, невероятно мощные и гибкие материалы UE, делают эту задачу довольно простой.
Создадим новый материал, и назовем его OverlayMaterial и установим следующие его свойства:

Image

[свернуть]
И организуем следующие ноды.
Image

[свернуть]

UMG (Unreal Motion Graphics UI Designer)

До этого мы создавали сцену пользовательского интерфейса в подуровне, расположенную в отдаленной части уровня. Тогда мы захватили его с SceneCapture актера в TextureRender. Недостающая часть, как отрисовать эту текстуру на экран.
Хотя мы могли бы это сделать прямиком на HUD, однако мы будем использовать UMG, потому это дает возможность сделать наш UI независимым от разрешения экрана.
Прежде всего давайте создадим новый виджет UMG в контент браузере.

Image

[свернуть]
Во вновь созданном Widget Blueprint, перетащите виджет изображения из вкладки Pallete, на вкладку иерархии. И назовем его OverlayImage.
Image

[свернуть]
Этот виджет должен иметь подходящие размеры и расположен на вьюпорте. Идеальным размером будет, размер RenderTarget, чтобы не было никакого лишнего масштабирования. Это так же хорошая идея чтобы отключить масштабирование DPI в настройках проекта. Обратите внимание, что «якорь» виджета, мы установили в нижнем правом углу.
Image

[свернуть]
Теперь пришло время назначить нашу текстуру виджету. Подключаем OverlayMaterial в соответствующую графу.
Image

[свернуть]

Final Set-up

Последним шагом будет добавление UMG виджета к вьюпорту игры. Было бы нецелесообразно если бы нам пришлось добавлять BP на каждом нашем уровне. Вот поэтому мы сделаем это через UI_Sublevel. Откройте его, нажав на иконку геймпада рядом сего именем во вкладке уровней:

Image

[свернуть]
И теперь добавляем следующие ноды на граф:
Image

[свернуть]
Обратите внимание, что виджет который мы создаем, является UMG виджетом что мы сделали не столь давно. Теперь все наконец таки готово, нажимаем Play и тестируем.

Original page


Читайте также: