User Interface Devices

There are a few devices that support using widgets to display a custom UI. The devices featured in the template display UIs in different and specific ways. Each room in the template has information about the devices featured there and how they display a custom UI. 

Below is a table outlining the devices displayed in the template, links to their device pages, and the room numbers where a device can be found:

Device	Room Number	Device Image
HUD Message Device	1
Pop-Up Dialog Device	1
HUD Controller Device	2
HUD Controller Device (Quickbar)	2
Stat Creator Device	3
Skilled Interaction Device	3
Timer Device	3
Conversation Device	4

User Widget Types

Almost all devices in the feature template use User Widgets to control the HUD and display a custom UI. 

During gameplay, User Widgets display a custom player UI in the HUD when a device is triggered. Devices are bound to UMG Widgets. This means that when a player interacts with a device, the UI updates and displays the updated player information.

There are two different types of User Widgets,  User Widget and Modal Dialog Variant. Both widget types can use any of the UMG Widgets to create a custom UI.

• A User Widget is the default widget to use when creating a custom UI.

• The Modal Dialog Variant can only be used with the Pop-Up Dialog device.

UI made with a User Widget and basic UI material.

UI made with a Modal Dialog Variant widget and textures.

For example, the Conversation device uses a Conversation Bank to build the conversation UI, but you can create a custom look for your conversation UI with a Modal Dialogue Variant.

Verse UI Utilites

Verse UI utilities are a collection of Verse driven user interface (UI) utilities. These utilities control and create a number of different UMG widgets in Verse and use a Verse device to display the UI in the HUD. 

In Verse you create a layout using containers such as Overlays or Stack Boxes, much like you would in the UMG Editor. Inside these containers, widgets such as text_block, material_block and image_block are used to insert text, materials, or images. These Verse widgets can respond to events in-game, and you can use them with other Verse widgets.

The Verse widgets are featured in the back of the second hall, in the second room alongside examples of each widget. The material_block widget controls UI materials,  the text_size widget controls the UI text size in the text_block in the HUD,  and the player_input widget maps custom UI elements to the HUD based on keybinds.

Material Block	Text Size	Player Input

All Verse scripts are available in the User Interfaces Template project. In Verse Explorer, you can find the following Verse scripted UI files:

• materialblock_basic_device.verse

• materialblock_gameplay_device.verse

• textsize_device.verse

• hud_keybind_demo_device.verse

Material Block

A material_block is used as one of the slots inside a custom widget created with Verse code. During gameplay, the material_block provides a way for you to manipulate the material parameters through Verse. You can use this to change how the UI material/material instance looks and behaves in the HUD. This is similar to how an image_block lets you use a texture in Verse.

A material_block is used in a number of ways in the Verse code:

• It provides a way to use material parameters to determine the size, behavior, and look of the material to create more dynamic UI.

• It can pass values from Verse to material parameters, so your materials can update dynamically based on gameplay.

To learn more about using material_block in your projects, see the Material Block document.

Text Size

The text_size property is part of the text_block widget provides a way for you to customize the size of text rendered on a player's UI using a text_block widget.

The custom text_size propety uses Verse code to control the following text attributes:  

• Size

• Placement

• Color

Player Input

Player input is used to listen for player data that informs the code where and when to map UI controls to the HUD based on buttons pressed. In UMG this works when an Action Widget is used in a User Widget, the Enhanced Input Action Field is linked to an Input Action through a keybind. 

In the widget, the keybinds are mapped to Reload, Shoot, Crouch, and Stand.

In the template when the widget is added to the player, Input Mapping is added in Verse. This automatically ties Input Actions to that player so the UMG widget is updated with the correct keybinds for that Input Action.

In order to map the UI elements to players, the players are first detected by the Verse code, then PlayerInput is used to map the custom UI to the HUD based on the keybinds mapped to:

• Traversal Mapping

• Ranged Weapon Mapping

Next, PlayerInput.AddInputMapping is used to map the UMG widget UI to the player’s keybinds for crouching and standing. The UI is mapped to the player through the subscribed event OnPlayerAdded. Similarly, the mapping is removed through the subscribed event, OnPlayerRemoved.

UI Samples

Each device has three categories of UI samples:

1. Made with materials.

2. Made with textures.

3. Made with materials and textures.

Walking into the volumes next to the device booth triggers the custom UI to display. The three samples not only showcase what’s possible with UMG, but also the level of detail and design you can put into your own UI. Some volumes cause damage and provide health power-ups. This way, you can see the UI changes in real time. 

All of the UI samples can be recreated using the tutorials from the In-Game User Interfaces section. Below is a list of the sample UI designs, the type of User Widget used to create the UI, and the tutorials that teach how to create a similar UI.

UI Sample	Widget Type	Tutorial
HUD Message
	User Widget	UI Pop-Ups
	User Widget	UI Pop-Ups
	User Widget	UI Pop-Ups
Pop-Up Dialog
	Modal Dialog Variant	UI Pop-Ups
	Modal Dialog Variant	UI Pop-Ups
	Modal Dialog Variant	UI Pop-Ups
HUD Controller
	User Widget	Making a Custom HUD
	User Widget	Making a Custom HUD
	User Widget	Making a Custom HUD
	User Widget	Making a Custom HUD
	User Widget	Making a Custom HUD
	User Widget	Making a Custom HUD
	User Widget	Making a Custom HUD
HUD Controller - Quickbar
	User Widget
	User Widget
	User Widget
	User Widget
Stat Creator
	User Widget
	User Widget
	User Widget
Skilled Interaction
	User Widget	Creating Custom Skilled Interactions
	User Widget	Creating Custom Skilled Interactions
	User Widget	Creating Custom Skilled Interactions
Conversation Device
	Conversation Bank	Creating Conversations
Timer Device
	User Widget	Making an Animated Timer
	User Widget	Making an Animated Timer
	User Widget	Making an Animated Timer