Help with an upgradable Healthbar(Using sprite/objects)



Hi guys, I'm having trouble figuring out a way to create a custom health bar using spites/objects.
In my game, I want the player to start with 8 health pieces, and he can find more health pieces throughout the game to upgrade his maximum health capacity.
Basically I want the health system to be just like it is in the Zelda games.(See example picture below.)

Any idea how I would go about coding this in an efficient manor? I can only kinda think of some ugly ways to do it, but I'm completely stuck on a good way of doing it.
Any help would be greatly appreciated.



ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
I assume that a good approach would be to split your main healthbar sprite into 3 pieces (start, stretchable middle, and end) and have another sprite for an individual health piece (just the red+black area from example).

Then you would draw the start and end via draw_sprite, stretch the middle between them via draw_sprite_ext\draw_sprite_stretched, and then draw the health pieces on top with a simple for-loop (deciding whether to draw a full or empty piece depending on whether health exceeds the loop variable).
Basically I want the health system to be just like it is in the Zelda games.(See example picture below.)
Have a single sprite which is a square (or Heart in LoZ). Give it two frames*, one full and one empty.

Have a max health variable. Use a for loop to draw that many of the EMPTY hearts.

Have a current health variable. Use a for loop to draw that many of the FULL hearts over top.**

* This can be modified to have multiple health levels per heart or health square.
** This is slightly inefficient, but is a simple way to do it.


Many thanks guys. I tried my best to follow your advice and I tried making it with just one object by using the draw event to draw the 3 separate pieces, but I couldnt quite get it to work properly.
I had problems with the depth of the sprites being drawn.
I should note that Im a beginner and had to use a video tutorial about draw events. I also found a 'zelda hearts' tutorial, which helped me out quite a lot.

For now I have made it using 3 separate objects and it works perfectly, but I'd really like to make it using just one object, if that's possible?
If anyone could take a look at my .gmz file below and give tips on how to create it using just one object, that would be great.
I'll also make a .gmz file tomorrow of the failed one-object version, if that will be more useful for anyone willing to have a look.

.GMZ file -


WASD = Player movement
Arrow keys(Up & Down) = Increase/Decrease hp capacity
Arrow keys(Left & Right) = Increase/Decrease maximum hp capacity
N = Decrease hp
M = Increase hp

Last edited by a moderator:


Maybe post only the relevant code instead of posting the entire file? (I'm not a huge fan of having to download things to be able to help personally... but Google Drive doesn't work at all for me, so that doesn't count! ^^")

You can do that easily by using the Show Information button and copy-pasting the everything. But if you can avoid posting irrelevant code, do so. It would make it easier for us to help you.

Either way, if you want some pseduocode, let me know. And if you want me to create an example, go ahead and ask for it.


The file I posted only really contains the relevant code and sprites etc.
Here is the code -

Object 1:
This object doesn't have any code, apart from to create the other two objects next to it...
Object 2:
/// Initialize the stats

hpCapacity = 3; // This value needs be set 1 lower than o_hp's 'hp'
maxHpCapacity = 3; // This value needs be set 1 lower than o_hp's 'maxHp'

// Set the size of the GUI layer
display_set_gui_size(view_wview[0], view_hview[0]);
I just have some keyboard inputs here to increase/decrease hp capacity and max hp capacity
/// Comment to overide the draw event
/// Draw the hp capacity
var xoffset = 5;

// Use a for loop
for (var i=0; i<hpCapacity; i++) {
draw_sprite(s_hp_capacity_end, 0, xstart+(xoffset*i), ystart);
Object 3:
Pretty much the same as object 2...
Last edited by a moderator:


You don't need to override the Draw event.

Draw the left piece. If hp > 1, use filled image. Draw i-2 middle pieces, using filled if i<= hp. Draw the end piece, using filled if hp=max hp.


Absolutely perfect! Very clean way of doing it, and just what I was looking for.
Many thanks! :)