I am continuing the Battery Collector tutorial. This is the 17th video. Click here for the first part and here for the previous one.

Creating the HUD

BatteryHUD

In the Unreal Engine Editor, I am creating a Widget Blueprint and I am naming it BatteryHUD.

In the UMG editor, I am adding a ProgressBar and set the anchor to the center. I am setting the PositionX to 0, PositionY to -100, SizeX to 600 and AlignmentX to 0.5.

In the Details panel of the ProgressBar, I am right-clicking on the Bind button next to the Percent value in the Progress section:

In the new GetPercent blueprint, I am adding a GetPlayerCharacter node and cast it to a BatteryCollectorCharacter. I convert this last node to a pure cast by Right-Clicking on it:

 

I get the CurrentPower of the CharacterPlayer and divide it by the PowerToWin of the Game mode to define the value to return:

GameMode_BP

I am now creating a new blueprint based on BatteryCollectorGameMode:

I am naming it GameMode_BP. I am opening this blueprint and in the Details panel, I set the HUDWidgetClass to BatteryHUD:

Project Settings

In the Project Settings, I am now changing the default Game Mode to GameMode_BP:

When I play, I can now see the progress bar:

Next Step

Next, I will set up the play states