Help with an upgradable Healthbar(Using sprite/objects)

E

Eklips_Studios

Guest
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.

Cheers.
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
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.
 
E

Eklips_Studios

Guest
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 -
https://drive.google.com/file/d/0BypT-yKIJdq5Zng5UHJHQ3FwczA/view?usp=sharing

Controls:

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

Cheers.
 
Last edited by a moderator:
A

Aura

Guest
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.
 
E

Eklips_Studios

Guest
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:
CREATE EVENT
/// 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]);
STEP EVENT
I just have some keyboard inputs here to increase/decrease hp capacity and max hp capacity
DRAW EVENT
/// Comment to overide the draw event
DRAW GUI
/// 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:

TheouAegis

Member
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.
 
E

Eklips_Studios

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