Unreal Engine 4 UI Tutorial

Unreal Engine 4 UI Tutorial

In video games, developers use graphics and text to display relevant information to the player such as health or score. This is known as the user interface (UI).

[…]

To create all of these, you need to use widgets.

[…]

Widgets can also contain other widgets. Here is an example of a custom widget that contains a Text widget (the Name label) and a Text Box widget:

[…]

Rename the widget to CounterText. You can do this by selecting the Text widget and going to the Details panel. Type in CounterText into the text box located at the top.

You can move widgets by left-clicking and dragging the widget in the Designer.

[…]

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

[…]

Find the Event BeginPlay node and then add a Create Widget node to the end of the node chain. This node will create an instance of the specified widget.

[…]

Now that you know what functions are, you will use one to update the CounterText widget.

When you create a widget, a reference variable for the widget is automatically created as well. However, Text widgets do not have reference variables by default. This means you won’t be able to set their Text property. Luckily, this is an easy fix.

[…]

To set the text, you will use the SetText (Text) node. Drag the CounterText variable into the graph. Left-click and drag its pin and then release left-click on an empty space. From the menu, add a SetText (Text) node.

[…]

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

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

[…]