Apps

Unreal Engine 5 UI Tutorial

Throughout gameplay, it’s frequent to want to speak with the participant both by displaying info corresponding to well being, rating or ammo by way of textual content or graphics or by permitting gamers to make picks or talk preferences by way of buttons or lists. That is the Person Interface (UI) of the sport.

Replace observe: Ricardo Santos up to date this tutorial for Unreal Engine 5. Tommy Tran wrote the unique.

In Unreal Engine 5, you should use Unreal Movement Graphics (UMG) to create Person Interfaces. UMG means that you can assemble a UI simply by dragging and dropping UI components corresponding to buttons and textual content labels, creating each Display screen Area UI, which shows on prime of the sport view or a World Area UI, which seems as an in-game aspect for weapons or giving details about enemies, as an illustration.

On this tutorial, you’ll discover ways to:

  • Create a heads-up show (HUD) that shows a counter and a timer.
  • Show the HUD.
  • Replace the counter and timer to show variable values.

This tutorial is aimed toward a newbie stage however assumes some familiarity with the Unreal Editor. In case you want some refreshing, please consult with the next:

The above tutorials present the idea of the Unreal Engine Editor, find out how to create new Blueprints, find out how to work with blueprint nodes, variables and capabilities. If you happen to really feel at a loss at any time, please consult with them earlier than going ahead with this tutorial.

Getting Began

Obtain the starter mission by clicking the Obtain Supplies hyperlink at both the highest or backside of this tutorial and unzip it. To open the mission, go to the starter mission folder and open GeometryCatcher.uproject.

Notice: If you happen to get a message saying that the mission was created with an earlier model of the Unreal editor, that’s OK, the engine updates often. You’ll be able to both select the choice to open a duplicate or the choice to transform in place.

Press Play to manage a white dice and attempt to catch the falling shapes. You’ll be able to transfer the catcher horizontally by shifting your mouse. After ten seconds, the shapes will cease spawning.

The very first thing you’ll do is create a HUD that shows two issues:

  • A counter that tracks what number of shapes the participant has collected.
  • A timer that shows what number of seconds stay till the shapes cease spawning.

It is advisable use widgets to create all of those.

Utilizing Widgets

A widget is a UI aspect that gives visible performance to the UI. For instance, a Button widget supplies an object that the consumer can see and click on.

Button widget interaction example, shading on mouse over and click interaction.

The widget itself doesn’t should be seen. For instance, a Grid Panel widget divides its area evenly between its contents. The consumer can’t see the Grid Panel however can see its impact.

Image widgets organized in a Grid Panel widget.

Widgets can even comprise different widgets. Right here’s an instance of a customized widget that comprises a Textual content widget and a Textual content Field widget:

Composite widget, with a Text widget and a Text Box widget.

You’ll be able to even assemble a widget to be a complete interface, corresponding to a menu display screen. Under is an instance of a widget constructed to seem like a title display screen. All of the UI components are additionally widgets and are contained throughout the title display screen widget.

Example title screen.

Now that you recognize what widgets are, it’s time to create one for the HUD.

Making a Widget

Go to the Content material Browser and navigate to the UI folder. Click on Add New and choose Person InterfaceWidget Blueprint.

Creating a UI element.

After deciding on this selection, Unreal will show a window asking you what widget class you’d prefer to create. Click on the button Person Widgets and rename the brand new asset to WBP_HUD.

Double-click WBP_HUD to open it within the UMG UI Designer.

The UMG UI Designer

Seven foremost components compose the UMG UI Designer:

UMG Window areas.

  1. Designer: This space comprises the visible illustration of your widget. Pan by holding right-click and shifting your mouse. Zoom by scrolling your mouse wheel.
  2. Particulars: Any widget you choose can have its properties displayed right here.
  3. Palette: An inventory of all of the widgets you should use. Any user-created widgets will even seem right here.
  4. Hierarchy: An inventory of all of the widgets you’re at the moment utilizing.
  5. Animations: Widgets can have sure properties animated, corresponding to place and measurement. This panel lists all of your animations.
  6. Timeline: When you choose an animation, this panel will show the animated properties and keyframes.
  7. Editor Mode: Right here, you possibly can change between the Designer and Graph modes. The Graph mode is sort of similar to a Blueprint’s Occasion Graph.

Making a Textual content Widget

Textual content widgets are good for displaying numerical info, such because the counter and timer.

As of UE5, the UMG editor doesn’t present a default container for performing as the foundation of the UI, so that you want a container to fill this function. If you happen to attempt to insert a Textual content Widget and not using a container, the Textual content Widget will turn into the foundation, and the conduct received’t be as anticipated.

Go to the Palette panel, seek for the Canvas Panel widget, and add it to the Designer panel.

Adding a Canvas Panel to the Designer Panel

Now, go to the Palette panel and seek for the Textual content widget. Add the widget by holding left-click< and dragging it into the Canvas Panel you positioned beforehand.

Adding a Text Widget

Don’t fear concerning the textual content content material for now, you’ll exchange it later.

Rename the widget to CounterText. You are able to do this by deciding on the Textual content widget and going to the Particulars panel. Kind in CounterText into the textual content field situated on the prime.

Text Widget change name

You’ll be able to transfer widgets by left-clicking and dragging the widget within the Designer.

Changing widget position using drag and drop.

You may as well resize widgets by left-clicking and dragging the handles. Resizing means that you can set the bounds for the widget. Unreal received’t render something outdoors the bounds.

Altering widget bounds.

Alternatively, you possibly can set the place and measurement by modifying the values within the Particulars panel. Set the next properties and values for CounterText:

  • Place X: 200
  • Place Y: 50
  • Dimension X: 500
  • Dimension Y: 100

Text Widget Position

At the moment, the textual content solely takes up a small portion of the field.

You’ll be able to enhance the font measurement by going to the Particulars panel and navigating to the Look part. There’s a textual content field to set the font measurement on the proper of the Font property.

Changing font size

Set the font measurement to 68.

Appearance of the new font size.

Let’s make the counter look nicer by including an icon subsequent to it.

Creating an Picture Widget

Picture widgets are a straightforward method to show graphics in your UI, corresponding to icons.

Add an Picture widget by dragging it from the Palette window and title it CounterIcon. Set Place X to 75 and Place Y to 50. This may place it subsequent to CounterText.

Starting point in creating an Image Widget with a Text Widgt.

To set a picture, go to the Particulars panel and the Look part. Increase the Brush property after which click on the drop-down for Picture. Choose T_Counter. Subsequent set the Picture Dimension to 100 by 100.

Select T_Counter Image

The picture will look stretched as a result of the widget has a unique measurement to the picture.

Stretched image, caused by resizing the widget.

As a substitute of resizing the widget, you should use the Dimension To Content material possibility. This feature will routinely resize a widget to accommodate its contents.

Whereas nonetheless within the Particulars panel, go to the Slot (Canvas Panel Slot) part. Test the checkbox subsequent to Dimension To Content material.

Select size to content checkbox

The widget will resize itself to suit the picture.

Image widget correctly resized.

When taking part in the sport throughout completely different display screen sizes, the UI wants to maneuver its widgets accordingly. To take care of the structure of your UI, you should use anchors.

Utilizing Anchors

An anchor level defines the place a widget’s place is relative to. By default, widgets have their anchor set to the top-left of their guardian. So, if you’re setting a widget’s place, you’re truly setting its place relative to that anchor level.

Within the instance under, every picture is anchored to a single level, the closest nook.

Effect of anchored widgets in screen resizing.

Discover how every picture maintains its place relative to its anchor. Utilizing anchors can guarantee your UI has the identical structure throughout completely different display screen sizes.

You may as well use anchors to resize widgets routinely. When anchoring to 2 or extra factors, the widget will resize itself to take care of its relative measurement.

Within the instance under, the bar is anchored to the top-left and top-right corners.

Bar widget changing size due to anchors.

Vertically, the bar strikes however doesn’t resize. It is because it solely has one anchor on the Y-axis, the highest. Nonetheless, the bar resizes horizontally as a result of it has two anchor factors on the X-axis.

The Anchor Medallion represents the situation of your anchor. It should seem each time you have got a widget chosen.

The anchor medallion.

The anchors for CounterText and CounterIcon are already within the appropriate place, so that you don’t have to set them.

Subsequent, you’ll create one other Textual content and Picture widget for the timer. Nonetheless, this time you’ll place them on the right-hand aspect.

Creating the Timer

First, create a Textual content widget and title it TimerText. Set the next properties:

  • Place X: 1225
  • Place Y: 50
  • Dimension X: 500
  • Dimension Y: 100
  • Font Dimension: 68
  • Justification: Align Textual content Proper; this may align the textual content to the appropriate aspect of the widget.

Result of Text Widget positioning.

Subsequent, you’ll set the anchor to the top-right. You are able to do this by left-clicking and dragging the circle on the Anchor Medallion. Transfer the Anchor Medallion to the top-right nook.

Anchor medallion repositioning.

Discover how the place has up to date to be relative to the anchor.

Coordinates when anchor changed.

Create an Picture widget and title it TimerIcon. Set the next properties:

  • Place X: 1750
  • Place Y: 50
  • Dimension To Content material: Checked
  • BrushImage: T_Timer
  • BrushImage Dimension: 100 | 100

Complete interface.

As a substitute of setting the anchor utilizing the Anchor Medallion, you should use presets. Go to the Particulars panel and click on the drop-down subsequent to Anchors to show the presets. Choose the third preset, the one with the sq. on the top-right.

Setting anchor position.

Notice: If you happen to additionally maintain shift when deciding on the anchor then you’ll change the widget alignment to be the highest proper of the widget itself. This manner you possibly can set the place to -75 to reflect the place of the shapes icon.

The structure for the UI is now full. You’ll be able to see the anchors working by emulating completely different display screen sizes. Go to the Designer panel and click on the Display screen Dimension drop-down.

Change screen size settings.

Deciding on an possibility will change the scale of WBP_HUD to match the choice. Under is how the HUD would look on an iPad Mini 5. Discover how the widgets are nearer collectively.

iPadMini5 Screen simulation.

Within the subsequent part, you’ll discover ways to show the WBP_HUD widget.

Displaying the HUD

Click on Compile and return to the primary editor. Navigate to the Blueprints folder and double-click BP_GameManager to open it.

The HUD must be seen as quickly as the sport begins. You should utilize the Occasion BeginPlay node to do that.

Discover the Occasion BeginPlay node, after which add a Create Widget node to the top of the chain. This node will create an occasion of the desired widget.

Complete blueprint nodes.

Click on the drop-down subsequent to Class and choose WBP_HUD.

Drop down in which to select class.

It is advisable use an Add to Viewport node to show the HUD. Left-click and drag the Create Widget node’s Return Worth pin. Launch left-click on an empty area to convey up the context menu. Add an Add to Viewport node.

Including Add to Viewport node.

Let’s go over the order of occasions:

  1. As soon as Unreal spawns BP_GameManager, the Restart and SetUpCamera capabilities will execute. These capabilities arrange a number of variables and the digicam. If you happen to don’t know what a operate is, don’t fear, the tutorial will cowl them quickly.
  2. The Create Widget node creates an occasion of WBP_HUD.
  3. The Add to Viewport node shows WBP_HUD.

Click on Compile after which return to the primary editor. Press Play to play the sport along with your new HUD.

Gameplay with complete interface.

You’ll want the variables holding that info to show the values for the counter and timer. These variables are present in BP_GameManager.

Variables in BP_GameManager.

To make use of these variables, you want a method to entry BP_GameManager from WBP_HUD. You are able to do this by storing a reference to BP_GameManager in a variable.

Storing References

Storing a reference is helpful as a result of you possibly can simply entry a particular occasion.

Think about you had a single field with a ball in it. If you happen to needed to seek out and study the ball, it’d be simple as a result of there’s just one field.

Analyzing one object in a collection.

Now, think about you had 100 bins, however just one comprises a ball. You would need to verify every field till you discovered the field with the ball.

Analyzing all objects in a collection.

Everytime you wish to study the ball, you’ll it’s important to carry out this operation. This is able to shortly result in efficiency points.

Utilizing references, you possibly can hold observe of the field with the ball. This manner, you don’t should verify each field.

Using a reference to analyze only the relevant object.

Creating the Variable

Open WBP_HUD and change to Graph mode by going to the Editor Mode and deciding on Graph.

Graph button selected.

You’ll discover that the Palette panel was changed by the My Blueprint tab. Navigate to it and create a brand new variable referred to as GameManager.

Go to the Particulars panel and click on the drop-down subsequent to Variable Kind. Seek for BP_GameManager and choose BP Sport ManagerObject Reference.

Game manager class reference.

Setting the Reference

Click on Compile after which open BP_GameManager.

Find the Create Widget node after which left-click and drag the Return Worth pin. Launch left-click on an empty area after which choose Set Sport Supervisor from the menu.

Afterward, hyperlink the Add to Viewport node to the Set Sport Supervisor node.

Connected Game Manager node.

Notice: You’ll be able to reroute wires by double-clicking on them to create a Reroute node. Left-click and drag the Reroute node to reroute the wire.

Subsequent, create a Self node and join it to the left pin of the Set Sport Supervisor node. The Self node will likely be listed as Get a reference to self.

Adding a reference to self.

Now, when WBP_HUD is created, it can have a reference to BP_GameManager.

Within the subsequent part, you’ll discover ways to replace a widget with the assistance of capabilities.

Features

In Blueprints, capabilities are graphs much like the Occasion Graph. In contrast to the Occasion Graph, you possibly can name a operate utilizing a node. However why would you wish to do that? Learn on to seek out out!

Doubt.jpg

Organizing

One of many causes to make use of capabilities is group. By utilizing capabilities, you possibly can collapse a number of nodes right into a single node.

Check out the Occasion BeginPlay part of BP_GameManager. There are two capabilities: Restart and SetUpCamera.

Restart and Set Up Camera nodes.

Right here’s what that part would seem like with out capabilities:

Really complicated node graph.

As you possibly can see, it appears rather a lot cleaner utilizing capabilities.

Reusability

One more reason to make use of capabilities is reusability. For instance, in the event you needed to reset the counter and timer, you possibly can simply accomplish that utilizing the Restart operate.

Reusing function nodes.

This protects you the work of getting to recreate the nodes each time you wish to reset these variables.

Now that you recognize what capabilities are, you’ll use one to replace the CounterText widget.

Updating a Widget

By default, Textual content widgets should not accessible from Blueprints. This implies you received’t have the ability to set their Textual content property. Fortunately, that is a straightforward repair.

Click on Compile after which open WBP_HUD. Change to Designer mode.

Choose CounterText after which go to the Particulars panel. Test the Is Variable checkbox situated on the very prime.

Check Is Variable box.

Now, you’ll have the ability to replace CounterText. The subsequent step is to create a operate to replace the textual content.

Creating the Replace Perform

Change again to Graph mode after which go to the My Blueprint tab. Click on the + signal to the appropriate of the Features part.

Include function.

This may create a brand new operate and take you to its graph. Rename the operate to UpdateCounterText.

By default, the graph will comprise an Entry node. When the operate executes, that is the place it can begin.

Function Entry node.

To make CounterText show the ShapesCollected variable, you’ll have to hyperlink them.

Drag the GameManager variable into the graph. Left-click and drag its pin after which launch left-click on an empty area. Choose Get Shapes Collected from the menu.

Adding a reference to Game Manager.

To set the textual content, you’ll use the SetText (Textual content) node. Drag the CounterText variable into the graph. Left-click and drag its pin after which launch left-click on an empty area. From the menu, add a SetText (Textual content) node.

Adding the SetText node.

The SetText (Textual content) solely accepts an enter of kind Textual content. Nonetheless, the ShapesCollected variable is of kind Integer. Fortunately, Unreal will do the conversion routinely if you attempt to plug an Integer right into a Textual content enter.

Join the ShapesCollected variable to the In Textual content pin for the Set Textual content (Textual content) node. Unreal will routinely create a ToText (int) node for you.

Creation of connection and automatic inclusion of cast node.

To finish the operate, join the Entry node to the Set Textual content (Textual content) node.

Complete function.

Order of occasions:

  1. While you name UpdateCounterText, the operate will get the ShapesCollected variable from BP_GameManager.
  2. The ToText (int) node converts the worth of ShapesCollected to a Textual content kind.
  3. SetText (Textual content) will set the textual content for CounterText to the worth from ToText (int).

Subsequent, it’s important to name UpdateCounterText each time the participant collects a form.

Calling the Replace Perform

One of the best place to name UpdateCounterText is true after the sport increments ShapesCollected. I’ve created a operate referred to as IncrementShapesCollected that increments the counter for you. The shapes name this operate each time they overlap the participant.

Update shapes collected score.

Click on Compile after which return to BP_GameManager.

Earlier than you possibly can name UpdateCounterText, you want a reference to WBP_HUD. See in the event you can retailer a reference by your self first. If you happen to get caught, learn on!

  • Find the part the place you created and displayed the WBP_HUD.
  • Left-click and drag the Return Worth pin of the Create Widget node.
  • Launch left-click on an empty area after which choose Promote to variable from the menu.
  • Add the brand new node to the top of the node chain.

After you have created the variable, rename it to HUDWidget.

Complete node function.

Subsequent, drag-click the proper pin of the Set HUDWidget node and launch on an empty area. Add an UpdateCounterText node. This may be certain CounterText shows the worth of ShapesCollected when the sport begins.

Update Counter Text node added.

Afterward, navigate to the My Blueprint panel and go to the Features part. Double-click on IncrementShapesCollected to open its graph.

IncrementShapesCollected function.

Drag the HUDWidget variable into the graph. Left-click and drag its pin and launch on an empty area. Add an UpdateCounterText node and join it like so:

Added reference to HUDWidget.

Now, each time IncrementShapesCollected executes, it can increment ShapesCollected after which name UpdateCounterText. This operate will then replace CounterText to the worth of ShapesCollected.

Click on Compile after which shut BP_GameManager. Press Play and acquire some shapes to see the CounterText widget replace.

Counting collected shapes.

Within the subsequent part, you’ll replace the TimerText widget utilizing a unique technique referred to as binding.

Bindings

Bindings can help you replace sure widget properties routinely. The property will need to have the Bind drop-down to be bindable.

Bindable attributes.

You’ll be able to bind properties to a operate or variable contained throughout the widget. The binding will continuously get hold of a worth from the operate or variable. It should then set the certain property to that worth.

Binding variables workflow.

You is likely to be questioning why you shouldn’t simply use bindings on a regular basis. Bindings are inefficient as a result of they’re continuously updating. This implies the sport wastes time updating the property even when there isn’t any new info. Evaluate it to the earlier technique, the place the widget solely updates when wanted.

That stated, bindings are nice for often altering components, such because the timer. Let’s go forward and create a binding for TimerText.

Making a Binding

Open WBP_HUD and change to Designer mode.

Choose TimerText after which go to the Content material part within the Particulars panel. You’ll see that the Textual content property is bindable. Click on the Bind drop-down and choose Create Binding.

Creating a binding to the Text Widget.

This may create a brand new operate for you and take you to its graph. Rename the operate to UpdateTimerText.

The operate can have a Return node with a Return Worth pin of kind Textual content. TimerText will show no matter textual content you plug into this pin.

The function return node.

Drag GameManager into the graph after which get the TimeRemaining variable from it.

Join the TimeRemaining variable to the Return Worth of the Return node. Like final time, Unreal will routinely add a conversion node for you.

Finalized UpdateTimerText funcion.

Abstract:

  • The binding will continuously name the UpdateTimerText operate.
  • The operate will get the TimeRemaining variable from BP_GameManager.
  • The ToText (float) node will convert the worth from TimeRemaining to a Textual content kind.
  • The transformed worth is then outputted to the Return node.

Properly achieved! The HUD is lastly full.

Click on Compile after which shut WBP_HUD. Press Play to see the ultimate outcomes, it appears nice.

Complete interface.

The place to Go From Right here?

You’ll be able to obtain the finished mission information by clicking Obtain Supplies on the prime or backside of the tutorial.

Now that you recognize the fundamentals of UMG, constructing extra complicated interfaces is comparatively simple. Attempt to experiment with different widgets and check out the panel widgets. Feeling assured? Why not strive constructing one other Widget Blueprint to behave as a New Sport menu!

For a deeper understanding of the UMG and its sources, you possibly can strive the Unreal Engine 5 UMG courses. Right here you can see info and full programs for creating interfaces to your video games.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button