• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!

GML League of Legends like health bar [SOLVED!]

N

Noam Shafir

Guest
So I have been trying to program a League of Legends like health bar.
If you don't know what it means, in the League of Legends health bar, other than the regular colored health bar, every few health points there is a line, so that you can quickly determine if a player has a lot of health or little health by the amount of lines and by their space from one another.
I tried to program this sort of health bar in GameMaker by writing this in the draw event:
Code:
/max_hp = 100;
// The sprite origin point is the center.

// Draw the health bar
draw_healthbar(x-sprite_width/2-20, y-sprite_height/2-40, x+sprite_width/2+20, y-sprite_height/2-20, hp*(100/hp), c_black, c_red, c_lime, 0, true, true);

// Draw the health bar lines
// I want to draw a line every 25 health points.
for (var i = 0; i < max_hp/25; i++) {
    draw_line_colour(x-sprite_width/2-20+i*(40/(max_hp/25)), y-sprite_height/2-41, x-sprite_width/2-20+i*(40/(max_hp/25)), y-sprite_height/2-20, c_white, c_white);
}
I will try to explain what I tried to do in the second part of the code.
First of all, I define the number of times the loop need to repeat by the number of lines I need to draw: max_hp/25.
than I draw a lines, starting from the starting point of the health bar (x-sprite_width/2-20), and going up every repeat (i*(40/(max_hp/25)), (I*(the_size_of_the_bar/the_number_of_lines)).

The Y position is working correctly, but the X position of the lines is not.
Here is a gif of the health bar, with the max health increasing by 10 each time.



(I changed the color of the health bar in the gif to orange because my recorder thought the green was a green screen.)

Thank you to anyone who helps.
 
Last edited by a moderator:

Luke Peña

Member
Code:
//max_hp = 100;
// The sprite origin point is the center.

// Draw the health bar
draw_healthbar(x-sprite_width/2-20, y-sprite_height/2-40, x+sprite_width/2+20, y-sprite_height/2-20, hp*(100/hp), c_black, c_red, c_lime, 0, true, true);

// Draw the health bar lines
var div = max_hp/25;
var unit = sprite_width/div;
for (var i=0; i < div; i++) {
    draw_line_colour(x-(sprite_width/2)+unit*i, y-sprite_height/2-41,x-(sprite_width/2)+unit*i, y-sprite_height/2-20, c_white, c_white);
}
Maybe that?

EDIT: a problem I have with your code is that you have a lot of magic numbers floating around. I'd get in the habit of not having those at all, if possible.
 
N

Noam Shafir

Guest
Code:
//max_hp = 100;
// The sprite origin point is the center.

// Draw the health bar
draw_healthbar(x-sprite_width/2-20, y-sprite_height/2-40, x+sprite_width/2+20, y-sprite_height/2-20, hp*(100/hp), c_black, c_red, c_lime, 0, true, true);

// Draw the health bar lines
var div = max_hp/25;
var unit = sprite_width/div;
for (var i=0; i < div; i++) {
    draw_line_colour(x-(sprite_width/2)+unit*i, y-sprite_height/2-41,x-(sprite_width/2)+unit*i, y-sprite_height/2-20, c_white, c_white);
}
Maybe that?

EDIT: a problem I have with your code is that you have a lot of magic numbers floating around. I'd get in the habit of not having those at all, if possible.

I dont really see the difference in your code other than my code apart from you made some calculations into variables, and removed the 20 pixels offset.
Can you explain me what you have changed?

Also can you mention the magic numbers I have?
The only magic numbers I could spot are the x and y offset of the health bar from the character, and I dont think I have much to do with those...
 
Z

zendraw

Guest
lets say 1 bar represents 100hp. so
repeat (hp/100)
{draw_vertical_line(x+100/maxhp*100, y)};

this is pseudo code, i think u get the logic?
 

Luke Peña

Member
I dont really see the difference in your code other than my code apart from you made some calculations into variables, and removed the 20 pixels offset.
Can you explain me what you have changed?

Also can you mention the magic numbers I have?
The only magic numbers I could spot are the x and y offset of the health bar from the character, and I dont think I have much to do with those...
The magic numbers issue is almost entirely in this one line:
Code:
draw_line_colour(x-sprite_width/2-20+i*(40/(max_hp/25)), y-sprite_height/2-41, x-sprite_width/2-20+i*(40/(max_hp/25)), y-sprite_height/2-20, c_white, c_white);
I'm guessing the -20 and -41 are the offsets. There is also the 40/(max_hp/25), in which both 40 and 25 are magic numbers.

And I really wasn't sure what the number 40 was. Is that the sprite width? If so, then I guess there isn't much difference between our code, haha. But that sort of shows what I mean when I say magic numbers are an issue.

EDIT: I just looked at your sprite in an editor, and it IS the magic number of 40 that is causing the issue, and my code actually should work.

"40" is only about half of the width of your health bar, which explains why your vertical lines only reach half way through the bar. If you use my version that takes into account the actual sprite width, not the number "40", then it should work.
 
N

Noam Shafir

Guest
The magic numbers issue is almost entirely in this one line:
Code:
draw_line_colour(x-sprite_width/2-20+i*(40/(max_hp/25)), y-sprite_height/2-41, x-sprite_width/2-20+i*(40/(max_hp/25)), y-sprite_height/2-20, c_white, c_white);
I'm guessing the -20 and -41 are the offsets. There is also the 40/(max_hp/25), in which both 40 and 25 are magic numbers.

And I really wasn't sure what the number 40 was. Is that the sprite width? If so, then I guess there isn't much difference between our code, haha. But that sort of shows what I mean when I say magic numbers are an issue.

EDIT: I just looked at your sprite in an editor, and it IS the magic number of 40 that is causing the issue, and my code actually should work.

"40" is only about half of the width of your health bar, which explains why your vertical lines only reach half way through the bar. If you use my version that takes into account the actual sprite width, not the number "40", then it should work.

20, 41, 20 and 20 are just the positions of the health bar, and the reason the 41 is 41 and not 40 is because when I tried 40 it didn't draw the line all the way up the health bar.
I mentioned in the code that I want it to draw a line every 25 hp, so that's what the 25 is.
And the 40 in here (40/(max_hp/25)) is not my sprite width, its the width of the health bar.
The health bar starts at -20 from the player and ends in +20 from the player, so the width of the health bar is 40.
The sprite width is actually 32 by 32.
 

Bingdom

Googledom
Draw the health bar as a sprite, rather than using the built-in draw functions. They should only be used for debugging.

Possible solution:
Make the sprite have a single width pixel line on the very right.
Then you might be able to draw using draw_sprite_part_ext, extend out the bar larger than usual (width) and using the function texture_set_repeat(true). Then it should "tile".

If that doesn't work, paint the whole sprite with the black lines and use draw_sprite_part.
 
N

Noam Shafir

Guest
Draw the health bar as a sprite, rather than using the built-in draw functions. They should only be used for debugging.

Possible solution:
Make the sprite have a single width pixel line on the very right.
Then you might be able to draw using draw_sprite_part_ext, extend out the bar larger than usual (width) and using the function texture_set_repeat(true). Then it should "tile".

If that doesn't work, paint the whole sprite with the black lines and use draw_sprite_part.
If I understood you correctly, even with this logic I need to calculate the places for the lines to be in, and my calculations are not working well so far.
 

poliver

Member
i think you'd get more help if you'd explain exactly how those are supposed to work
not everyone is familiar with that game

i tried to watch some gameplay videos but couldn't really make sense out of them
 

Luke Peña

Member
And the 40 in here (40/(max_hp/25)) is not my sprite width, its the width of the health bar.
In your original image, is the orange bar the health bar? Because if so then the width of your healthbar is 75, not 40. Right? Because pixel 40 along your health bar is literally where the lines stop. And the entire bar is 75 pixels wide. I feel like I'm going crazy because I'm looking at the image. It's 75 pixels wide.

Also, just those numbers are the coordinates of your health bar doesn't mean they aren't magic numbers and does not make them good coding practice. You could have variables like this:

Code:
hpbar_w = 75;
hpbar_h = 24;
hpbar_x = 5;
hpbar_y = 5;
And then the right side of the bar would be hpbar_x+hpbar_w. This is better coding practice.
 
N

Noam Shafir

Guest
I solved the problem!
Thank you to anyone who helped me, I was drawing some illustrations to visualize the health bar, and while I drew them, I noticed that I drew the actual health bar sprite_width wider, than I referred to it in the lines logic.
Also I switched the line's color into black so they will blend with the health bar's outline.
Here is a gif of how the health bar looks right now:
 
Last edited by a moderator:

lazertrax

Member
I solved the problem!
Thank you to anyone who helped me, I was drawing some illustrations to visualize the health bar, and while I drew them, I noticed that I drew the actual health bar sprite_width wider, than I referred to it in the lines logic.
Also I switched the line's color into black so they will blend with the health bar's outline.
Here is a gif of how the health bar looks right now:
[/IMG]
I'd love to see it in action, please fix the img tags :)
 

lazertrax

Member
It should be written like this.

Example:
Code:
[IMG]https://avatarfiles.alphacoders.com/168/1683.jpg[/IMG]

 
Last edited:
Top