8. User Interfaces

Overview

In this chapter, we will continue our work on the Dodgeball-based game that we have been working on in the last few chapters. We will continue this project by learning about game UIs (short for user interfaces) and some of their forms, namely menus and HUDs. By the end of this chapter, you will be able to use UMG, UE4's game UI system, to make a menu with interactable buttons, as well as a HUD that displays the player character's current health points through a progress bar.

Introduction

In the previous chapter, we learned about general-purpose utilities that allow you to properly structure and organize the code and assets in your project by using Blueprint Function Libraries, Actor Components, and Interfaces.

In this chapter, we will dive into the topic of game UIs, which is something that's present in almost every video game. The game UI is one of the main ways to show information to the player, such as how many lives they have left, how many bullets are in their weapon, which weapon they are carrying, and so on, and to allow the player to interact with the game by choosing whether to continue the game, create a new game, choose which level they want to play in, and so on. This is shown to the player mostly in the form of images and text.

User Interfaces or UIs are usually added on top of the rendering of the game, which means that they are in front of everything else you see in the game and behave as layers (you can add them on top of one...

Game UI

There are usually two different types of game UI: menus and HUDs.

Menus are UI panels that allow the player to interact with them, either by pressing a button or a key on their input device.

This can be done in the form of many different menus, including the following:

• Main menus, where the player can choose whether to continue the game, create a new game, exit the game, and so on
• Level select menus, where the player can choose which level to play
• And many other options

HUDs are UI panels that are present during gameplay that give the player information that they should always know, such as how many lives they have left, which special abilities they can use, and so on.

We will be covering game UI and making both a menu and a HUD for our game in this chapter.

Note

We won't be covering diegetic UI here, as it is beyond the scope of this book.

So how do we go about creating a game UI in UE4? The main way to do that is by...

UMG Basics

In UE4, the main way to create a game UI is by using the UMG tool. This tool will allow you to make a game UI in the form of Widgets, which can be created using UMG. It will allow you to easily edit your game UI in a visual manner, through UMG's Designer tab, while also allowing you to add functionality to your game UI through UMG's Graph tab.

Widgets are the way UE4 allows you to represent a game UI. Widgets can be basic UI elements such as Buttons, Text elements, and Images, but they can also be combined to create more complex and complete Widgets, such as menus and HUDs, which is exactly what we will be doing in this chapter.

Let's create our first Widget in UE4 using the UMG tool in the next exercise.

Exercise 8.01: Creating a Widget Blueprint

In this exercise, we will be creating our first Widget Blueprint, as well as learning the basic elements of UMG and how we can use them to create a game UI.

The following steps will help you complete...

Anchors

As you might be aware, video games are played on many different screen sizes with many different resolutions. Because of that, it is important to make sure that the menus you create can adapt to all these different resolutions effectively. This is the main purpose of Anchors.

Anchors allow you to specify how you want a UI element's size to adapt as the screen resolution changes by specifying the proportion of the screen you want it to occupy. Using Anchors, you can have a UI element always at the top left of the screen, or always occupying half of the screen, no matter the size and resolution of that screen.

As the size of the screen or resolution changes, your Widget will scale and move relative to its Anchor. Only elements that are direct children of a Canvas Panel can have an Anchor, which you can visualize through the Anchor Medallion, a white flower-like shape in the Designer tab, when you select said element:

Figure 8.10: The Anchor Medallion...

Progress Bars

One of the ways that video games can represent character stats such as health, stamina, and so on is through Progress Bars, which are what we'll use to communicate to the player how much health their character has. Progress Bars are essentially a shape, usually rectangular, that can be filled and emptied in order to show the player how a specific stat is progressing. If you want to show the player that their character's health is only half its maximum value, you could do this by showing the Progress Bar as half full. This is exactly what we'll be doing in this section. This Progress Bar will be the only element in our Dodgeball game's HUD.

In order to create this Health Bar, we'll first need to create our HUD Widget. Open the editor, go to the ThirdPersonCPP -> Blueprints directory inside the Content Browser, and right-click and create a new Widget Blueprint class of the User Interface category. Name this new Widget Blueprint BP_HUDWidget...

Summary

With this chapter concluded, you have now learned how to make a game UI in UE4, understanding things such as menus and HUDs. You've seen how to manipulate a Widget Blueprint's UI elements, including Buttons, Text elements, and Progress Bars; work with Anchors effectively, which is instrumental in allowing your game UI to adapt elegantly to multiple screens; listen to mouse events in C++, such as the OnClick event, and use that to create your own game logic; as well as how to add the Widgets you create to the screen, either at specific events or have them present at all times.

In the next chapter, we'll be taking a look at polishing our Dodgeball game by adding audiovisual elements such as sound and particle effects, as well as making a new level.