Unreal Engine Tutorial. Part 4: UI

Video game developers use graphics and text to display the necessary information, such as health or points. This is called a user interface (UI).

UI in Unreal Engine 4 is created using Unreal Motion Graphics (UMG). UMG allows you to conveniently build UIs by dragging and dropping UI elements such as buttons and text labels.

In this part of the tutorial you will learn the following:

• Create a HUD display that displays a counter and timer
• Display HUD on screen
• Update counter and timer to display variable values

It is worth considering that we will use Blueprints in this part. If you need to refresh your knowledge, then re-read the part of the tutorial on Blueprints .

Note: this article is one of the eight parts of the Unreal Engine tutorial:

• Part 1: Introducing the Engine
• Part 2: Blueprints
• Part 3: Materials
• Part 4: UI
• Part 5: How to create a simple game
• Part 6: Animation
• Part 7: Sound
• Part 8: Particle Systems
• Part 9: Artificial Intelligence
• Part 10: How to create a simple FPS

Getting to work

Download the project blank and unzip it. Go to the project folder and open GeometryCatcher.uproject .

Note: if a window opens informing that the project was created in an earlier version of the Unreal editor, then everything is in order (the engine is often updated). You can either select the option to create a copy, or the option to convert the project itself.

Click on Play to start controlling the white cube and try to catch the falling shapes. The cube can be moved horizontally with the mouse. Ten seconds later, the shapes cease to be created.


The first thing to do is create a HUD display that displays two things:

• A counter that tracks the number of pieces collected by the player
• Timer displaying the number of seconds remaining until the completion of the creation of shapes

To create all this, we need widgets .

About widgets

A widget is a UI element that provides UI visual functions. For example, the Button widget provides an object that the user can see and click on.


The widget itself does not have to be visible. For example, a Grid Panel widget evenly shares its space between its contents. The user cannot see the Grid Panel, but sees its impact.


In addition, widgets may contain other widgets. Here is an example of a widget containing a Text widget (Name label) and a Text Box widget:


You can even create a widget that is an entire interface, for example, a menu screen. The following is an example of a widget designed to look like the game’s home screen. All elements of the UI are also widgets and are contained within the widget of the home screen.


So, we learned what widgets are. Now you can create a widget for the HUD.

Widget creation

Go to Content Browser and find the UI folder . Click on the Add New button and select User Interface \ Widget Blueprint . Rename the new asset to WBP_HUD .


Double-click on WBP_HUD to open it in UMG UI Designer.

UMG UI Designer

UMG UI Designer consists of seven main elements:

1. Designer: in this area, a visual representation of the widget is presented. You can move on it by holding the right mouse button and moving the mouse . Scaling is performed by scrolling the mouse wheel .
2. Details: the properties of the selected widget are displayed here
3. Palette: A list of all widgets that can be used. All user-created widgets also appear here.
4. Hierarchy: a list of all widgets already in use
5. Animations: Some widget properties may have animations, such as location and size. This panel lists all the animations.
6. Timeline: when you select an animation, this panel displays animated properties and key frames
7. Editor Mode: here you can switch between Designer and Graph modes. Graph mode is almost similar to Blueprint's Event Graph.

Creating a Text widget

Text widgets are great for displaying numerical information such as a counter and a timer.

Go to the Palette panel and find the Text widget . Add a widget by dragging it to the Designer panel.


The content of the text does not interest us yet; we will change it later.

Rename the widget to CounterText . This can be done by selecting the Text widget and going to the Details panel. Type CounterText in the text box at the top.


Widgets can be moved by dragging them with the left mouse button in the Designer panel.


You can also resize widgets by dragging the borders with the left mouse button . Resizing allows you to set the borders of the widget. Unreal will not render anything beyond borders.


Or you can set the position and size by changing the values ​​in the Details panel. Set the following properties and values ​​for CounterText :

• Position X: 200
• Position Y: 50
• Size X: 500
• Size Y: 100

At the moment, the text occupies only a small part of the field.


You can increase the font size by going to the Details panel and to the Appearance section . To the right of the Font property is a text box for specifying the font size.


Enter size 68 .


Let's make the counter prettier by adding an icon to it.

Creating an Image Widget

Image widgets are an easy way to display graphics in a UI, such as icons.

Create an Image widget and name it CounterIcon . Set Position X to 75 and Position Y to 50 . The widget will be placed next to CounterText .


To set the image, go to the Details panel and go to the Appearance section . Expand the Brush property , and then click on the drop-down list next to Image . Choose T_Counter .


The image will look stretched because the size of the widget is different from the size of the image.


Instead of resizing the widget, we can use the Size To Content option . This option automatically resizes the widget to the size of its content.

In the Details panel, go to the Slot (Canvas Panel Slot) section . Check the box next to Size To Content .


The widget will adjust its size to fit the image.


If the game starts up with different screen sizes, then the UI must move widgets accordingly. To preserve the layout of the UI, you need to use bindings .

Bindings

An anchor point defines the location relative to which the position of the widget is determined. By default, widgets are tied to the upper left corner of their parent element. Therefore, when we set the position of the widget, we actually indicate the position relative to this anchor point.

In the example below, each image is attached to one point (to the nearest corner).


Notice that each image maintains a position relative to its snap. Thanks to the bindings, the UI will have the same layout at different screen sizes.

You can also use bindings to automatically resize widgets. If snapped to two or more points, the widget will change its size to maintain its relative size.

In the example below, the indicator is attached to the upper left and upper right corners.


The indicator moves vertically, but does not change size, because there is only one snap (on top) on the Y axis. However, the indicator horizontally changes size because it has two snap points on the X axis.

Anchor Medallion displays the location of the snap. It appears when you select a widget.


The CounterText and CounterIcon bindings are already in the right place, so you don't need to set them.

Now we will create one more widget Text and Image for the timer. However, this time we will put them on the right.

Timer creation

Create a Text widget and name it TimerText . Set the following properties:

• Position X: 1225
• Position Y: 50
• Size X: 500
• Size Y: 100
• Font Size: 68
• Justification: Align Text Right (this will align the text to the right side of the widget)

Now we want to set the snap in the upper right corner. This can be done by dragging the circle with the mouse in Anchor Medallion . Move Anchor Medallion to the upper right corner .


Notice how the position is updated relative to the snap.


Create an Image widget and name it TimerIcon . Set the following properties:

• Position X: 1750
• Position Y: 50
• Size To Content: Checked
• Brush \ Image: T_Timer

Instead of defining an anchor using Anchor Medallion, you can use the predefined values. Go to the Details panel and click on the drop-down list next to Anchors to open the predefined values. Select the third scheme (with a square in the upper right corner).


The creation of the UI scheme is now complete. You can make sure that the bindings work by emulating different screen sizes. Go to the Designer panel and click on the Screen Size drop-down list .


Selecting an option will resize WBP_HUD to match the option. The following shows how the HUD will look on the iPad Air. Notice that the widgets are closer to each other.


In the next section, we will learn how to display the WBP_HUD widget .

HUD mapping

Click Compile , and then return to the main editor. Go to the Blueprints folder and double-click on BP_GameManager to open it.

HUD should become visible after starting the game. You can use the Event BeginPlay node for this .

Find the Event BeginPlay node and add the Create Widget node to the end of the node chain. This node creates an instance of the specified widget.


Click on the drop-down list next to Class and select WBP_HUD .


To display a HUD, you must use the Add to Viewport node . Drag the left mouse button, touch Return Value node to the Create Widget . Release the left mouse button in the empty space to open the context menu. Add an Add to Viewport node .


Let's figure out the order of events:

1. When Unreal spawns BP_GameManager , the Restart and SetUpCamera functions are executed . These functions configure several variables and the camera. If you do not know what a function is, then do not worry, we will consider them soon.
2. Nod Create Widget creates an instance WBP_HUD
3. Nod Add to Viewport display WBP_HUD

Click on Compile and return to the main editor. Click on Play to start the game with the new HUD.


To display the counter and timer values, we need variables to store this information. These variables can be found in BP_GameManager .


To use these variables. we need a way to access BP_GameManager from WBP_HUD . You can use the link variable for this .

Link Variables

Keeping links is useful because they make it easy to access instances.

Imagine that you have one box in which the ball lies. If we need to find and study the ball, then it will be simple, because we have only one box.


Now imagine that we have a hundred boxes, but there is only one ball. We will need to check each box until we find the box with the ball.


Each time we need to examine the ball, we have to perform this operation. This will quickly lead to performance issues.

Thanks to the links you can track the box with the ball. Thus, we do not have to check every box.

Creating a Link Variable

Open WBP_HUD and switch to Graph mode by going to Editor Mode and selecting Graph .


Go to the My Blueprint tab and create a new GameManager variable .

Go to the Details panel and click on the drop-down list next to Variable Type . Find BP_GameManager and select BP Game Manager \ Object Reference .

Setting a reference variable

Click on Compile and open BP_GameManager .

Find the Create Widget node and drag the Return Value contact with the left mouse button . Release the left key on an empty space and select Set Game Manager from the menu .

Then connect the Add to Viewport node with the Set Game Manager node .


Note: you can redirect “wires” by double-clicking on them to create a Reroute node . Left-click the Reroute node to redirect the wire.

Then create a Self node and connect it to the left pin of the Set Game Manager node . The Self node will be listed as Get a reference to self .


Now that WBP_HUD has already been created, we will have a link to BP_GameManager .

In the next section, we will learn how to update a widget using functions .

Functions

Functions in Blueprints are graphs similar to Event Graphs. Unlike Event Graph, functions can be called using nodes. Why might this be needed?

Orderliness

One reason for using functions is orderliness. Thanks to the functions, you can combine several nodes into one.

Take a look at the Event BeginPlay section in BP_GameManager . There are two functions here: Restart and SetUpCamera .


Here's what this section will look like without functions:


As you can see, thanks to the features, it looks much cleaner.

Reuse

Another reason for using functions is reuse . For example, if you need to reset the counter and the timer, then this can easily be done using the Restart function .


This saves you the time to recreate nodes every time you need to reset these variables.

We got acquainted with the functions and now we can use them to update the CounterText widget .

Widget update

When creating a widget, a link variable to this widget is also automatically created. However, by default, Text widgets do not have reference variables. This means that we cannot set their Text property. Fortunately, this is easy to fix.

Click on Compile and open WBP_HUD . Switch to Designer mode .

Select CounterText , and then go to the Details panel. Make sure the Is Variable checkbox is at the very top .


Now we can update CounterText . The next step is to create a function to update the text.

Create update function

Switch back to Graph mode and go to the My Blueprint tab. Click the + icon to the right of the Functions section .


This will create a new function and you will go to its graph. Rename the function to UpdateCounterText .

By default, the graph will contain an Entry node . When a function is executed, it will start from this node.


To CounterText displays variables ShapesCollected , we need to put them together.

Drag the GameManager variable into the graph . Left-click on its contact and release it in an empty space. From the menu, select Get Shapes Collected .


To set the text, you will need to use the SetText (Text) node . Drag the CounterText variable into the graph. Drag the contact with the left mouse button and release it on an empty space. Add a SetText (Text) node to the menu .


SetText (Text) can receive input of type Text . However, the ShapesCollected variable is of type Integer . Fortunately, Unreal automatically performs the conversion when Integer is connected to the Text input .

Connect the ShapesCollected variable to the In Text pin of the Set Text node (Text) . Unreal will automatically create a ToText (int) node .


To complete the function, connect the Entry node to the Set Text (Text) node .


Order of events:

1. When calling UpdateCounterText, the function gets the ShapesCollected variable from BP_GameManager
2. The ToText (int) node converts the value of ShapesCollected to type Text
3. SetText (Text) sets the text CounterText from the value ToText (int)

Now we need to learn how to call UpdateCounterText when a player catches a piece.

Call Upgrade Function

It is best to call UpdateCounterText immediately after the game increases the value of ShapesCollected . I created the function IncrementShapesCollected , which performs the increment of the counter. Shapes call this function when they encounter a player.


Click on Compile and return to BP_GameManager .

Before calling UpdateCounterText , we need a link to WBP_HUD . Try creating the link variable yourself!


After creating the variable, change its name to HUDWidget .


Then drag the right pin of the Set HUDWidget node and release it in the empty space. Add the UpdateCounterText node . Thanks to this, CounterText will display the value ShapesCollected when the game starts.


Then go to the My Blueprint panel and go to the Functions section . Double-click on IncrementShapesCollected to open its graph.


Drag the HUDWidget variable into the graph. Drag his contact and release it in the empty space. Add the UpdateCounterText node and connect it as follows:


Now when executing IncrementShapesCollected, it will increase ShapesCollected , and then call UpdateCounterText . This function will then update CounterText with the value ShapesCollected .

Click on Compile and close BP_GameManager . Click on Play and collect some shapes to see how the CounterText widget is updated .


Now we need to learn how to update the TimerText widget , only in a different way called binding .

Bindings

Bindings allow you to automatically update certain properties of widgets. To be able to bind, the property must have a Bind drop-down list .


You can bind properties to a function or to a variable stored inside the widget. A binding constantly receives a value from a function or variable and assigns this value to the bound property.


You are probably wondering why you can’t always use bindings. Bindings are inefficient because they are constantly updated. This means that the game spends time updating properties, even if there is no new information. Compare this with the previous method, in which the widget was updated only when necessary.

With this in mind, bindings are well suited for frequently changing elements such as timers. Let's create a binding for TimerText .

Create binding

Open WBP_HUD and switch to Designer mode .

Select TimerText , and then go to the Content section of the Details panel. You will see that the Text property has the ability to bind. Click on the Bind drop-down list and select Create Binding .


A new function will be created and the transition to its graph will be performed. Rename the function to UpdateTimerText .

The function will have a Return node with a Return Value pin of type Text . TimerText will display any text that you connect to this contact.


Drag the GameManager onto the graph and get the TimeRemaining variable from it .

Connect the TimeRemaining variable to the Return Value of the Return node . Like last time, Unreal will automatically add a conversion node.


Summarize:

• The binding will constantly call the UpdateTimerText function
• Function gets TimeRemaining variable from BP_GameManager
• The ToText (float) node converts a value from TimeRemaining to a Text type .
• The converted value is then output to the Return node.

Our HUD is finally ready. Click on Compile and close WBP_HUD . Click on Play to see the final results.

Where to go next?

The finished project can be downloaded here .

Now you know the basics of UMG and you can easily create more complex interfaces. Try experimenting with other widgets and panel widgets.

If you want to know what other widgets do, read the Widget Type Reference page in the Unreal Engine documentation.

To continue exploring, read the next post in the tutorial, in which I will show you how to put everything together to create a simple game!