Make a Legend of Zelda Styled Health Bar with Hearts! (in 14 events!!)

  • 35 favourites


Attached Files

The following files have been attached to this tutorial:



Download now 173.59 KB


9,269 visits, 28,858 views



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.


Making the code better

This section has some ideas that user Kyatric said in the comments.

So we made it and it's working. How can we make our code better?

I did everything in a very simple way to understand and to explain, but we can always make the code better.

In the picture below, I put all the On start of layout together and create a Function that takes damage as a parameter and changes the life variable, the function is called when the button is pressed and the parameter is the Text of the TextBox. I changed the order of the code in a way that I always do:

1) On start of Layouts

2) Triggers

3) Functions

Also, instead of using a couple events to set a maximum or minimum to life, we can use the clamp() expression, which does exactly the same.

So yeah, I lied. It's actually less than 14 events. Even less if we don't count the Global Variables. So there.

Adding new Hearts

In our game we might want the hero to have more life as the game progresses, so let's make a Function that will add another heart to the maximum. We simply need to copy the code above and create another Button to simulate the effect:

Using two lines of hearts

This one should be very simple too. We simply need to make a lastHeartPositionY variable to use as a second parameter to the Create object action.

But how do we increment it?

Well, for this we are going to use the modulo (or mod) native expression, which returns the remainder of a division between two numbers. For example:

5%3 = 2, because 5 = 3*1 + 2, and this 2 is the remainder of the division.

15%4 = 3

18%2 = 0

So we are going to use to check if we have a certain number of hearts using that. Let's say we only want 7 hearts in each row. When we add a new heart (in the addHeart() function) we check if the number of hearts we have divided by 7 has no remainder, or heart.Count % 7 == 0. If it is, then we increment the variable lastHeartPositionY.

Now, all we gotta do is adjust the lastHeartPositionX variable so the hearts are always aligned. We do that by setting it to -16-2 (or -18). That is because when we add another heart, the X coordinate is (lastHeartPositionX + heart.Width + 2)). Since our initial heart position is 16 (that means our first heart has an X coordinate of 16), we get rid or it and of that 2 too.

Here is the code.

Here is it in action.

Don'f forget that you can change that 7 for any integer.

And that's that.


  • Order by
Want to leave a comment? Login or Register an account!