1. Required Project Setup

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. 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.
  3. Right-click in the Content Browser and create a new Level called Main. 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. 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.
  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. 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. 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.
  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.
  12. Off the Return Value of the Create HUD_C Widget, select Promote to Variable and name HUD Reference. 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.
    Click image for full size.
    As the name suggests, this will add the Widget Blueprint specified as the target to the player's viewport, drawing it onscreen.