Create A Parasite Platformer Game In Unreal Engine Part 7: Creating Game Over UI

Table of Contents

  • Learn
  • Unreal
  • Create A Parasite Platformer Game In Unreal Engine Part 7: Creating Game Over UI

Create A Parasite Platformer Game In Unreal Engine Part 7: Creating Game Over UI

Reading Time: 9 minutes
Level: Beginner
Version: Unreal Engine 4.26

Help Others Learn Game Development

In part 6 of this tutorial series we learned some new tricks that we can do with Geometry Actors and we also prepared our level goal.

In this part of the tutorial we are going to create the game over UI.

What Is An User Interface - UI

User Interface, or short UI, is an interface that displays text, buttons and images on the screen.
 
UI is used to show some kind of information to the user who plays your game such as the current health status of the main game character, score count, bullet count, level way points, and so on.
 
If you played any game in your life you’ve seen an UI in action.
 

Creating A UI Blueprint

In Unreal Engine UI is represented with a Blueprint.
 
To create an UI Blueprint, inside the Blueprints folder Right Click -> User Interface -> Widget Blueprint:
 
Img 1

When you create it, give it a name BP_GameOver_UI.

If this was a bigger game with more UI Blueprints I would have created folders where I would store UI Blueprints, but since this is a small game and this is the only UI Blueprint that we will have there is no need for that.

Open the BP_GameOver_UI in the Blueprint editor. You will notice that the editor for the UI Blueprints is a little different than the editor for normal Blueprints:


Exploring The UI Blueprint Editor

Looking at the image above, in the middle we have the Editor tab where we will place and see all the UI widgets we want to use for this Blueprint.

On the left side we have the Palette tab which contains all the UI widgets that you can use and place inside the canvas.

Next, we have the Hierarchy tab which shows all the UI widgets currently used.

Below the Hierarchy tab we have the Animations tab which is used to create animations with UI widgets.

On the right side of the Animations tab we have the Timeline tab which contains tracks for the animations that we create.

The Compiler Results tab will show us any errors or warnings when we compile the UI Blueprint.

And on the left side we have the Details tab which shows the details of the selected UI widget.

At the top right corner, above the Details tab you will notice two buttons, Designer and Graph:

Img 3

The Designer button opens the UI Blueprint Design Mode where we can add UI widgets to create our desired UI interface:

The Graph button opens the Graph editing mode where we can code using nodes same as in normal Blueprints:


Adding UI Widgets In The Canvas

The white dotted lines forming a rectangle inside the Editor window is called a canvas:

This is where we place our UI widgets that we want to display in the game.
 
The first widget that we will place is an image. From the Palette tab drag a UI image in the canvas:
 

When it comes to Compile and Save, the same rules that apply to normal Blueprints also apply to UI Blueprints which means after any change we make press the Compile and Save button.

Now that we have a UI widget in the canvas, you can see that widget in the Hierarchy tab:

Img 8


UI Element Settings

Any UI widget we place in the canvas we will see it inside the Hierarchy tab.
 
When we select a specific UI widget in the Hierarchy tab, inside the Details tab we will see all the settings available for that UI widget:
 

In the Details tab you will find different settings for the UI widget such as its position, size, alignment and so on.

Now when it comes to the UI image we added, change its name to BG inside the Hierarchy tab.

Next, inside the Details tab under the Slot (Canvas Panel Slot) settings for the Anchor property click on the drop down list:

Img 10
This will open a pop up window containing anchor presets for the UI widget, in this case image:
 
Img 11
The anchor property determines a UI widget’s location on a canvas and maintains that position with varying screen sizes.
 
Anchors are normalized where Min(X = 0, Y = 0) and Max(X = 0, Y = 0) is the upper left corner and Min(X = 1, Y = 1) and Max(X = 1, Y = 1) is the bottom right corner.
 
Basically, a UI widget will use its anchor as the center of its orientation and position itself in respect to the anchor.
 
Currently the anchor for our BG image is set at top left corner, which is displayed with the flower like icon in the editor:
 

I am going to change the anchor for the BG image to the stretch anchor which is the one at the bottom right corner inside the anchor presets:

Img 13
When you change the anchor you will notice that the flower like icon is not present in the editor. Instead you see 4 arrow like icons in every corner of the canvas:
 

Now we can change the values for Offset Left, Top, Right and Bottom inside the Details tab under the Slot (Canvas Panel Slot) setting for the BG image:

Img 15

When you do that you will notice that the BG image has stretched to fill the whole canvas:

This is because of the stretch anchor which is placed on the whole canvas as we saw from the arrow like icons located in every corner of the canvas.

Next inside the Appearance settings for the Color and Opacity property click on the color palette:

Img 17

When you do that a Color Picker pop up window will appear where we can select a new color for the BG image.

However, we are not going to change the color for the BG image, instead we are going to set a new value for the alpha channel for RGBA colors of the BG image.

Currently, the value for alpha channel is 1.0, we are going to set it at 0.3:

This will change the opacity of the image making it transparent.

Adding A Text And A Button Widget

Next we are going to add a text widget in the canvas. From the Palette tab, drag the text widget in the editor:

Inside the Slot(Canvas Panel Slot) settings choose the middle or center anchor for the text widget:

Img 19

For the position set the following values:

  • X = -465
  • Y = -265

And for the sizes set the values:

  • X = 918
  • Y = 341
In the Content settings you can type the text you want to appear inside the text widget.
 
Add the following text:
 
Img 20

After you type Game Over! you can hold shift and press enter to go on the line below and then type Play Again?

This way the text will appear one below the other.

Under the Appearance settings which is right below the Content, for the Justification which is basically alignment, set the alignment to middle:

Img 21

Inside the Appearance settings again, click on the drop down list for the Font property and set the font size value to 108:

Img 22 Fixed

The rest of the settings I am going to leave as is, but you can explore and change the values on your own to see the effect that you will achieve, and this is the best way to retain the knowledge that you are learning.

Next, we are going to add a button widget to the canvas. From the Palette tab drag a button inside the canvas:

Inside the Hierarchy tab rename the button widget to Play Game Button.

In the Details tab inside the Slot (Canvas Panel Slot) settings set the anchor for the button widget to center, and set the following values for the position:

  • X = -188
  • Y = 223

For the size set these values:

  • X = 365
  • T = 100
Since the button widget by itself is empty, we can drag a text widget as a child of the button widget to add some info what the button will do:
 

As you can see UI widgets can be children of other UI widgets.

For the text widget that is the child of the Play Again Button widget, set the text to Play Again inside the Content settings, and set the font size to 44:

Img 24

We are also going to change the color of the text by clicking on the color palette under the Color and Opacity property in the Appearance settings:

Img 25

When the Color Picker window appears select the dark color for the text and press OK:

Img 26
Don’t forget to press Compile and Save to save all the changes we made in the UI Blueprint.
 

Spawning The UI Blueprint In The Game

Since the UI widget is actually a Blueprint, we need to spawn it in the game.
 
Of course, there are ways how we can make a UI Blueprint appear in the game without using any Blueprint code, and we will see examples of that.
 
For this particular example, we are going to spawn it in the game from our BP_ParasitePlatformer_GameMode.
 
So open that Blueprint in the editor, and inside the Event Graph from the BeginPlay event, drag a line from the Exec and filter for create widget:
 
Img 27

Inside the Create Widget node, under the Class, click on the drop down list and filter for the UI Blueprint you wish to create, in our case BP_GameOver_UI:

Img 28
We are still not done because this will only create the UI widget, to make it appear in the game, we need to add it to the viewport.
 
To do that, from the Create Widget node’s Exec drag a line and filter for add to viewport:
 
Img 29
Next, drag the Return Value from the Create Widget node inside the Target parameter for the Add To Viewport node:
 
Img 30
Compile and Save the changes and now run the game. This is what you will see:
 

Of course, we are not going to leave the UI like this, but I just wanted to demonstrate how we add UI widgets inside the game e.g. how do we make them visible in the game after we created them.

You can delete the nodes that create the game over UI so that it’s not spawned when the game runs.

Later we will create a function that will do that for us when the game is actually over by reaching the goal or if the PlayerCharacter gets caught by the monster.

Where To Go From Here

In this tutorial we learned how to create UI widgets and how to create user interfaces with them.
We also learned how to spawn them in the game and make them visible.
 
In the next part of this tutorial series titled Reaching The Goal In The Game And Dealing Damage To The Player we will create the code logic that will be triggered when the PlayerCharacter reaches the goal of the level or when he collides with the Fire Obstacle.
 

Leave a Comment

Youtube Instagram Facebook