Unreal Engine Part 18: Setting up the HUD

In chapter 18 of Rob Redman's comprehensive introduction to Unreal Engine, learn how to create your heads up displays (HUDs)...

Previous tutorials

Part 1: Setting up a new project
Part 2: Introducing materials and landscapes
Part 3: Adding foliage and rocks
Part 4: Particle smoke
Part 5: Introducing the skybox
Part 6: Setting up cameras and post-effects
Part 7: Teleporters
Part 8: Adding random assets
Part 9: Destruction
Part 10: Adding sound
Part 11: Linking audio to actions and objects
Part 12: Using the matinee tool
Part 13: Lighting
Part 14: Post effects
Part 15: Virtual reality
Part 16: VR motion controllers
Part 17: Bullet impacts

As much as a gaming experience is an interactive one, where the player should be able to understand what is happening, there are still many times when a little info can go a long way. This is why we have things like health bars, ammo counters and inventories, or other data like motion warning systems, radars, or HUD alerts for danger zones.

There are various ways of setting up this kind of system but what I'm going to concentrate on is the simpler method, of using triggers and widgets.

We will add a HUD alert that pops up to display a message when the player moves into an area that could damage them, such as spikes, steam or fire.

It really doesn't matter what level you are using for this. You can us one of your own, or just the basic templates. Just open it up and let's get started. I've opted for the level from a previous chapter. It's an interior scene from the library.

Step 1: Getting a font

Unreal doesn't load fonts upon launch in the way some software does, nor does it call on the system's font so you need to import one.

This is easy enough. Right-click in your content browser, then choose User Interface/Font, which will launch the font manager warning font. Choose the one you'd like to use and set a size for it. I'd advise matching the size your intended use. Unreal doesn't seem to import it as a font, rather a texture, so you may find you get smoothing issues if you go to small.

Import you font so you have something to display

Step 2: HUD Blueprint

Next up you need to add a HUD to your game. The method varies slightly from build to build, but follow the chain in the image and you'll get an idea of what you're looking for.

Once you choose the create HUD button the editor will open. Move to the Event Graph and add both an Event Receive Draw HUD and a Draw Text node and connect them up.

Creating a HUD blueprint

Step 3: Draw Text settings

Now it's time to tell UE4 what your text should say and look like. This is a matter of taste and purpose but in the purple field you can define what text should be displayed (in my case 'Burn baby!'). Choose a text colour next. The default isn't black. It's empty, so you will need to manually choose black. Next up select a font. Click on the button and you will see a list of any font's you imported from step 1. You can always import more later if you have a change in design. Just return here and newly imported fonts will be in the drop-down.

Press save and then compile, before testing the game. Now, when you press play you should see the text at the top left of your screen. Not quite what we need, so let's move on.

Step 4: Blueprint communication

We don't want the text to be always on, so we need to set up some question and answer systems to define when it should show. I want the text to flash as the player nears one wing of the level, to warn them there is a danger ahead.

Start by right-clicking the content browser and choose Blueprints/BlueprintInterface and give it a name. Double-click to open the editor and add a new function. Add a new Boolean input (the default type). We will come back to this shortly.

Step 5: Triggering and the level blueprint

Save the interface and then, in your level, add a box trigger. This will have a collision event attached to make the text pop up, so put it where you need. For me it's across the stairs, so the player will get a warning as he tries to enter the room ahead.

Now open up your level blueprint and add the new function node (a quick search for ShowWarning will find it).

With the trigger selected add an OnActorBeginOverlap node and hook it up to the ShowWarning function. Check the box to show the warning in the function node.

Set up a Boolean operator to show your HUD

Step 6: Turn it off

Our setup now allows us to show our player a message when they enter the trigger zone but it will stay on for good. We need a second Boolean operator to switch it off when the player leaves the area. This means we need to add an EndOverlap node and a copy of the function, this time unchecked. Hook the two together. We need to tell the nodes what we are actually asking of it, so add a GetPlayerController node, then drag out and add a GetHud node. Connect this to the target inputs of the Booleans and hit compile.

Step 7: Turn it off

One final little set up is to connect the various setups, so open up the HUDs event graph and add a Gate between the Draw HUD and Draw text. Now add a branch node and connect the true and false to the open and close inputs of the gate. Click on the Class Settings icon on the menu, then in the details area scroll until you see interfaces. Click add and choose your interface from the list.

Add an event for showing the text node and hook up both the event and condition nodes to the inputs of the branch and you are good to go. Play your level and as you enter the trigger zone you will see the text. Of course the text isn't overly pretty but that's a matter of taste. You can make simple adjustments to scale and position using the text node. Just experiment and see what works best for you.

When the scaling and positioning are set to your liking, the work is done

Tip: More than words

A similar setup can be used for other warnings. If you don't want to use text you can import a graphic and have that flash up on the HUD instead!

Related links

Part 1: Setting up a new project
Part 2: Introducing materials and landscapes
Part 3: Adding foliage and rocks
Part 4: Particle smoke
Part 5: Introducing the skybox
Part 6: Setting up cameras and post-effects
Part 7: Teleporters
Part 8: Adding random assets
Part 9: Destruction
Part 10: Adding sound
Part 11: Linking audio to actions and objects
Part 12: Using the matinee tool
Part 13: Lighting
Part 14: Post effects
Part 15: Virtual reality
Part 16: VR motion controllers
Part 17: Bullet impacts
Download Unreal