How To Create A HUD Unreal Engine 4

Learn How To Create A HUD in Unreal Engine 4 - on this page you will also learn how to make an on screen Pause button. You will learn how to create a simple HUD that displays the character energy and has an on screen Pause button. For this tutorials to work you need to select the Third Person Project with Starter Content.

How To Create A Simple HUD

Create a new Widget Blueprint, go to Content Browser > click RMB > under User Interface select Widget Blueprint > for example purposes, let's call it SimpleHUD.

Next, we will make the HUD to show on screen and create the character energy system, go to Content Browser > ThirdPersonBP > select and open Third Person Character > right click and add the Event BeginPlay then add a Create Widget node with Class set to SimpleHUD (or what name you gave to your HUD), off the Return Value of the Create SimpleHUD_C Widget, select Promote to Variable and name HUD Reference, drag off the out pin of the Set node and add the Add to Viewport node (this will add the Widget Blueprint specified as the target to the player's viewport).

Now, we need to create a variable for the energy system, on the left side, in My Blueprint panel scroll to the Variables section and click the +Variable button, this will create a new variable, change the name to Energy and the type to Float, compile the Blueprint and change the variable value to 1, then drag and select Set Energy in the Events Graph next to the InputAction Jump event, add a Float - Float node set to 0.20 and connect, then connect the Float - Float to a Get Energy node (now, each time the character jumps, 0.20 will be subtracted from the character's current Energy value).

Open the SimpleHUD Widget Blueprint, drag from Palette a Progress Bar and a Button, for the Button drag a Text and go to the Details panel into the Content section next to Text, erase Text Block and write Pause.

Select the Progress Bar, go to Details panel, next to Position X type 200 - next to Position Y type 100 - next to Size X 400 - next to Size Y 50, in the Style section > Background Image > double click the Tint bar > in the Hex sRGB replace the text with B1FFB7FF - in the Appearance section > double click the Fill Color and Opacity bar > in the Hex sRGB replace the text with FF2300FF.

Select the button, go to Details panel, next to Position X type 1200 - next to Position Y type 100 - next to Size X 300 - next to Size Y 50, under Appearance > Style > Normal > double click the Tint bar > in the Hex sRGB type 6B6B6BFF - do the same for Style > Hovered and Style > Pressed.

Next, we will start scripting (we can add the hooks to provide the functionality behind our HUD elements).

Click the Graph button in the upper-right corner of the Widget Blueprint Editor window, under the Event Construct node, Right-click and add a Get Player Character node, drag off the Return Value pin and select Cast to ThirdPersonCharacter, drag off the As Third Person Character pin and select Promote to Variable (name it My Character) then connect, click Compile in the toolbar to compile the script.

Return to the Designer tab and select the Progress Bar, in the Details panel under Progress, click the Bind option next to Percent and set it to use Energy from MyCharacter (now whenever our Energy value changes in our Character Blueprint it will automatically be updated in our HUD as well).

To create the script for the Pause button, we need first to create the Pause Menu, if you want to learn how to do that, read the following article How To Create A Menu (Main & Pause Menu) Unreal Engine 4 - after, you have created the Pause Menu, select the Pause button in the SimpleHUD Blueprint, go to the Details panel, under Events section > click LMB on the green button next to On Clicked, you will be transferred in the Graph editor, were you will see your newly created event, off the On Clicked event add an IsValid node, drag off the Is Not Valid pin and select Create Widget node (set it to SimplePauseMenu or the name you gave to your Pause Menu Widget Blueprint), drag off the Return Value pin and select Promote to Variable (name it PauseVariable) then connect, then, drag the PauseVariable in the editor, select Get, and connect it to the IsValid Input Object pin.

Now, add a Get Player Controller node, off the Get Player Controller use Set Show Mouse Cursor and set it to True, add a Set Input Mode UI Only node and connect the Player Controller pin to the Get Player Controller and the In Widget to Focus pin to the PauseVariable, then, add an Add to Viewport node connect the Target pin to the PauseVariable, add a Set Game Paused and set it to True, Compile and Save.

Congratulations! You have created A Simple HUD for your character in Unreal Engine 4

Interesting articles to read on Edvog.com
Unreal Engine 4 Beginner's Guide
Unreal Engine 4 Tutorials & How To's (With Pictures & Video)
Blender 3D Beginner's Guide
GIMP Beginner's Guide

- - - - - - - - - - - -

About Edvog.com - Music, Games & Educational Resources (Information, Health, Medicine & Research) by Edvog.com

My name is Andrei Ionita, I am the creator and owner of Edvog.com website, I am also the creator and owner of all of the products associated with it, such as: music, games, videos and more...

I like to write articles about everything I find interesting in this world. The entire content found on this website is fact checked and original, when I post something, I try to double check all the information provided against all the reliable and trustworthy sources that I can find. On this website you may find content about medicine, the purpose of this type of content is simply informational and is not intended to be a substitute for professional medical advice, for questions you may have regarding your health, always seek the guidance of your doctor or other qualified health professional.

About entertainment and media - Beside, being a website owner and content writer, I'm also a game developer, music producer and video creator. I create, video games, music, animations, photos and more, this is why, from time to time, I will also post content about entertainment and media industry (a broad terminology, just to cover everything in the category)

You can check out the games made by me on Steam and on Google Play, if want to listen my music you can check out my Youtube channel, Spotify profile, iTunes profile, Google Play Music profile, etc. Who knows? Maybe your next favorite game or song will be created by me :)

If you want to support my work, you can play the games created by me, listen to my music and/or Make A PayPal Donation, whatever form of support you will choose, I thank you and wish you a nice day!

Edvog.com / AI Edvog / Andrei Ionita on the internet

YoutubeSpotifyApple MusicAmazon MusicGoogle Play MusicGoogle PlaySteamSupport My Work Make A PayPal Donation