• Hey! Guest! The 39th GMC Jam will take place between November 26th, 12:00 UTC and November 30th, 12:00 UTC. Why not join in! Click here to find out more!

GMS 2 2 Sided Healthbar

woods

Member
first thoughts.. i would use image_xscale on the top sprite and a "empty container" for the sprite underneath.. not sure exactly how to do it, but thats where i would start ;o)
 

Buff

Member
You want to keep the healthbar in the middle so it looks like it is shrinking from both sides. Try this in the draw event:

Code:
// Width of the healthbar in pixels.
var width = 512
// Height of the healthbar in pixels.
var height = 40
// x is the location where the healthbar will be centered. Health is how full the healthbar is.
var health_x = x - width / 2 * health / 100
// y is the top location of the healthbar.
draw_healthbar(health_x, y, health_x + width, y + height, health, -1, c_green, c_red, 0, false, false)
 
Code:
// Magic numbers bruh.
var _max_width = 420,
    _hp_percentage = my_dudes_hp / my_dudes_max_hp,
    _width = _max_width * _hp_percentage,
    _height = 69,
    _cx = view_width*0.5,        // This is the center of the bar.
    _cy = view_height*0.9,       // Here seems like a nice spot.
    _left = _cx-_width/2,
    _right = _cx+_width/2,
    _top = _cy-_height/2,        // This centers on the Y axis too.
    _bottom = _cy+_height/2,     // Up to you how you want it.
    ;
draw_rectangle(_left, _top, _right, _bottom, false);

// There's your shrinking rectangle - now you just gotta draw the background bar.
 

_Proxy

Member
You want to keep the healthbar in the middle so it looks like it is shrinking from both sides. Try this in the draw event:

Code:
// Width of the healthbar in pixels.
var width = 512
// Height of the healthbar in pixels.
var height = 40
// x is the location where the healthbar will be centered. Health is how full the healthbar is.
var health_x = x - width / 2 * health / 100
// y is the top location of the healthbar.
draw_healthbar(health_x, y, health_x + width, y + height, health, -1, c_green, c_red, 0, false, false)
Code:
// Magic numbers bruh.
var _max_width = 420,
    _hp_percentage = my_dudes_hp / my_dudes_max_hp,
    _width = _max_width * _hp_percentage,
    _height = 69,
    _cx = view_width*0.5,        // This is the center of the bar.
    _cy = view_height*0.9,       // Here seems like a nice spot.
    _left = _cx-_width/2,
    _right = _cx+_width/2,
    _top = _cy-_height/2,        // This centers on the Y axis too.
    _bottom = _cy+_height/2,     // Up to you how you want it.
    ;
draw_rectangle(_left, _top, _right, _bottom, false);

// There's your shrinking rectangle - now you just gotta draw the background bar.
thanks boys, this seems legit ill try it out; Thanks for the help.
 
In my experience, you can do a lot of configuration stuff in the local vars, leaving you with a clean and easy-to-read function at the end. If you ever need something funky, just play with those variables till you get it ;)
 

Rob

Member
Have the red bar be displayed normally. Sprite origin doesn't really matter for that.

For the "green" bar have the Sprite origin in the middle.

Using draw_sprite_ext and having a variable called xscale that equals currentHP/maxHP will give you a value between 0 and 1 for it, and that should give you the desired effect.

Code:
//Image index 0 is Red Bar (background) and image index 1 is green bar

xscale = currentHP / maxHP;

draw_sprite(spr_bar, 0, barX, barY);

draw_sprite_ext( spr_bar, 1, barX, barY, xscale, 1, 0, c_white, 1);
 
Last edited:
Top