Language:
Page Info
Engine Version:

1. Required Project Setup

Choose your OS:

For this tutorial we are using the Blueprint First Person template with Starter Content enabled. If you do not know how to create a new project and use a template, please see the Project Browser page for more information.

  1. Click the Add New button inside the Content Browser, then under User Interface select Widget Blueprint and name it HUD.

    UMGQS1.png

    All User Interface elements (HUD, Menus, etc.) will be created and housed inside a Widget Blueprint. The Widget Blueprint allows you to visually layout your UI elements as well as provides scripted functionality for those elements. We are creating this now so that we can tell it to be displayed when our player character spawns in the world, however we will set it up later.

    For more information on Widget Blueprints see the Widget Blueprint documentation.

  2. Create two more Widget Blueprints, one called MainMenu and another called PauseMenu.

    AllWidgets.png

  3. Right-click in the Content Browser and create a new Level called Main.

    CreateLevel.png

    We will use this later in the guide for our Main Menu setup.

  4. In the Content Browser, open the FirstPersonCharacter Blueprint located under the Content/FirstPersonBP/Blueprints folder.

    UMGQS2.png

    This is the playable character's Blueprint in which we will create some information to pass to our HUD Widget Blueprint for display.

  5. In the My Blueprint window, click the Add Variable Button.

    UMGQS3.png

  6. In the Details panel for the new variable, name it Health, change it to a Float variable type and set the Default Value to 1.0.

    UMGQS4.png

    This variable will represent the player character's Health that we will display on the HUD.

  7. Create another Float variable called Energy with a Default Value of 1.0.

    UMGQS5.png

    This will represent the player character's Energy that we will display on the HUD.

    Unable to enter a Default Value? Click the Compile button from the Tool Bar to compile the Blueprint then try again.

  8. Create another variable of the Integer type called Ammo with a Default Value of 25.

    UMGQS6.png

  9. Create one more Integer variable called MaxAmmo also with a Default Value of 25.

  10. Inside the Graph window, Right-click and add an Event Begin Play node.

  11. Drag off the Event Begin play then add a Create Widget node with Class set to your HUD Widget Blueprint.

    UMGQS7.png

  12. Off the Return Value of the Create HUD_C Widget, select Promote to Variable and name HUD Reference.

    UMGQS8.png

    This will create our HUD Widget Blueprint when the game is started and store it as a variable that we can access later. This is useful for calling functions or setting properties of the HUD later on, for example if you wanted to hide the HUD while the game is paused you can access the HUD through this variable.

  13. Drag off the out pin of the Set node and add the Add to Viewport node.

    UMGQS9.png

    As the name suggests, this will add the Widget Blueprint specified as the target to the player's viewport, drawing it onscreen.

Adjusting Character Variables

The last thing we will do before we start generating our actual HUD is provide a way for our character variables to change.

  1. Inside the FirstPersonCharacter Blueprint, while holding Alt drag in the Energy variable and place it next to the Jump script.

    Step2_1.png

  2. Hold Ctrl and drag in a copy of the Energy variable and connect it to a Float - Float node set to 0.25 and connect as shown.

    Step2_2.png

    Each time the character jumps, 0.25 will be subtracted from the character's current Energy value.

  3. Set up the same script for the Health variable but use an F Key Event (or any other key press event) for testing.

    Step2_3.png

    This will allow us to test that our Health variable is properly displayed through our HUD whenever a key is pressed.

  4. Find the Spawn Projectile script and following the InputAction Fire event, Right-click and add a Branch node.

  5. For the Branch condition, Ctrl drag in the Ammo variable connected to a Integer > Integer variable set to 0 and connect as shown.

    Step2_4.png

    This will only allow the player to fire a projectile if their ammo is greater than zero.

  6. At the end of the Spawn Projectile script following the Play Sound at Location node, set Ammo to equal Ammo - 1.

    Step2_5.png

    This will subtract 1 ammo each time the player fires a projectile, giving us something to display on our HUD.

  7. Compile and Save then close the Blueprint.

In the next step we will set up the displaying of our Health, Energy and Ammo variables on our HUD and get them working in-game.