To display the HUD, follow these steps:
- Return to the FirstPersonExampleMap tab and Content Browser. Find and open the FirstPersonCharacter Blueprint in the Blueprints folder.
- In Event Graph, right-click on any empty grid space to open Context Menu, and then search for Event BeginPlay and click on it. The Editor will move to the position in Event Graph where Event BeginPlay is already placed.
- Press the Alt key and click on the white pin of Event BeginPlay to disconnect it. Move the Event BeginPlay node to the left.
In most cases, Event BeginPlay will call the subsequent Actions as soon as the game is started. If the Actor the Blueprint is attached to isn't present when the game starts, then instead, it will trigger as soon as the Actor is spawned. Since the FirstPersonCharacter player object is present as soon as the game begins, attaching our Blueprint logic to this trigger will spawn the HUD immediately.
- Drag a wire from the output execution pin of Event BeginPlay, and add a CreateWidget node. Within the node, you will see a drop-down menu labeled Class. This is our opportunity to use the Widget Blueprint we created. Recall that we named our Widget Blueprint as HUD. If you open the drop-down menu, then you will see the HUD option. Select it to have the player character Blueprint generate the UI elements you created. The following screenshot shows the Create HUD Widget node associated with our HUD Widget Blueprint:
- Although we now have a Widget generated when the game starts, there is a final step required to get the Widget containing our UI elements to actually appear on the screen. Drag the Return Value output pin into empty grid space, and add an Add to Viewport node.
- This will link the Widget information to the display the player sees when interacting with the game. The output execution pin should automatically connect with the new node, completing our Blueprint chain.
- Delete the previous nodes that were connected to Event BeginPlay because they deal with the case of playing the game in VR and we will not use VR in this example game.
- Create a comment for yourself around the three nodes. Label the comment as Draw HUD on Screen. The final product should appear as follows:
- Now, compile, save, and click on Play to test the game. You should see the two meters representing the player's health and stamina, as well as numerical counters for ammo and eliminated targets. But as you shoot from your gun, you may notice one very important problem: none of the UI values change! We will address this missing Component in the next section.