Create a Zelda-style Hearts (Health) bar from scratch

I’m looking to create a hearts-based health bar as seen in the Legend of Zelda games, which will allow for three different individual heart animations: full, half full, and empty. I also would like to have the player start the game with 3 hearts, but throughout the game they will be able to increase their maximum hearts to a total of 20. Now, I know there are some prefabs available for this in the asset store. However, I wanted to try to create this mechanic myself and tailor it to my specific game so I can learn how to do it.

I will have a global number variable for the player called CurrentHP, as well as one called MaxHP. I basically want the hearts bar image to reflect the value of the player’s CurrentHP, while the width of the hearts bar will create a second row below the first once the player has more than 10 maximum hearts.

A VERY long way of doing this, I think, would be to create every possible animation for the hearts bar, then use an expression or two to display the proper hearts bar animation in the UI at all times. I know this isn’t the best way to do it.

I was hoping that someone could give me a general procedure for how they would make this work in a much easier way with code. I’m not looking for anyone to write out all the code for me. I just want some basic knowledge on how a mechanic like this would be implemented, such as what kinds of variables I would need to create/track, what the procedure would be for getting the hearts bar to reflect the number of the player’s HP, adding an additional heart to the bar when the player increases max HP, etc. I see a lot of tutorials online for doing this in Unity, but I can’t follow the procedure of them since I don’t know C#.

Could anyone provide this general information? Thank you in advance!

Hi, I found 2 tutorials that show how to implement this, I just don’t know whether the given approach scales well to 20 hearts. At least you might get some inspiration to come up with a solution.

Thank you for the info. I’ve already watched both of these tutorials, and I don’t believe they will scale to 20 hearts on two rows of 10. Nor do they explain how to show half hearts. But I did get some ideas from them.

The built-in heart bar does half hearts (or any fraction) with real values like 1.5

If you want 2 rows of hearts then you could use 2 different heart bars. One for 1 to 10, the other for 10.5 to 20 (or value -10)

You could modify the values with min() max() or use conditions like

hearts <= 10
-----topBar = hearts
------bottomBar = 0

hearts > 10
------topBar = 10
------bottomBar = hearts -10

Edit: if you want to do this with tiled sprites, the method is the same. Just set the width of the heart objects based on the value and the value minus 10.

1 Like

If for some reason Keith’s solution does not satisfy you
I made that hearts health system the old fashion way
But it is really Frankensteins work and A LOT to explain

Anyway press
Z to add heart
X to heal player
C to damage player

Starting with 5 hearts

Starting with 12 hearts

Order of some events are crucial here so better not change them

Up to 20 Hearts

If you will decide to go with my method ask for explanation since i don’t want to explain it if Keith’s method turns out better

And i think his method is better
I never used that built in health bar stuff so idk if everything i done here is possible with it but if it does i guess it will be way better solution than mine

Thank you ZeroX4 and Keith for your methods. I’m going to experiment with them and report back with any further questions. Thank you so much for giving me these ideas. The GDevelop community truly is great!

2 Likes