I would like to create a health bar in my UE5 with C++. I found some videos on YouTube, but lots of them use only blue print. Actually, there are some videos that use C++ and blueprint combinations, but all of them I found so far are like one of the episodes and make me confused.
If you know a video like not one of the episodes, please let me know. Or if you know how to create health bar, please teach me how to create it.
Big thanks;)
Hey @yuma9921jp ,
Have you found the solution about what you want? If you haven’t, I can help you if you want.
Hi, I have not found any solution yet. It would be great if you could help me.
Hello.
can you tell me what is your problem with your health bar so I know where to start? or you haven’t create it yet?
To be honest, I have not started to create it yet. I am new to UE5 and C++, so I want to find some example codes first. That is the reason I asked here.
Sure, then let me show you how the way I usually do this step by step. If you feel there is a step that doesn’t make sense to you, or maybe you want to know some alternatives, feel free to ask.
When I do widget, I usually create the user widget, and reparent it with C++ User Widget class because I feel it easier to do that. First, let us create the widget first.
1. Create the User Widget
To create the user widget, you can right click on content browser > User Interface > Widget Blueprint. Just drag a progress bar to the screen.
then, in the detail panel, you can set the percent to more than 0, and set the Fill color and opacity to red or color that you want your health bar to be. (Setting the percentage here is just for visualization purpose so actually you don’t need to do this)
For the user widget, for now it’s all done!
**2. Create the C++ User Widget Class **
Create a normal C++ class that is based on UserWidget class
reparent the User Widget Blueprint that we created in step 1 to this new class. Go to your WidgetBlueprint, File > Reparent and choose your freshly created C++ class.
in your .h file, declare some functions and variable below:
protected:
// Begin Play alternative
virtual void NativeConstruct() override;
/** Function to calculate Player HP Percentage */
UFUNCTION(BlueprintPure)
float CalculateHealthPercentage();
/** The player */
UPROPERTY(VisibleAnywhere)
ACustomCharacter* Player;
NativeConstruct will automatically be called when the widget is constructed. While CalculateHealthPercentage will be used for calculating our character Health percentage and later will bind it to the progress bar. It use UFUNCTION(BlueprintPure) so we can use and call it like a getter in the blueprint itself. Lastly, the Player is a pointer to your custom character class that already have health code in there.
Let’s go to .cpp file shall we,
void UPlayerHUDWidget::NativeConstruct()
{
Super::NativeConstruct();
Player = Cast<ACustomCharacter>(UGameplayStatics::GetPlayerCharacter(GetWorld(), 0));
}
in native construct, just initialize your Player variable.
float UPlayerHUDWidget::CalculateHealthPercentage()
{
if (Player)
{
return Player->GetHealth() / Player->GetMaxHealth();
}
return 0.f;
}
then in CalculateHealthPercentage, IF player is valid, then we will return Player Health / MaxHealth. For example if player Hp is 50 and the maxHp is 100, 50/100 will be 0.5. The progress bar percentage is from 0 - 1, then 0.5 will be the same as 50% percentage.
Compile it and we done in this class.
3. Bind the function to the widget
Open your Widget Blueprint, then click the progress bar. Beside the Percentage, you can see there is a Bind button, click it and your Calculate function will be there (IF there is no function, consider restart unreal / make sure you reparent it correctly)
After binding, it should look like that.
Done. Don’t forget to show the widget on the screen to see it. If there is any question, feel free to ask.