GMS 2 2 Sided Healthbar

Discussion in 'Programming' started by _Proxy, May 26, 2019.

  1. _Proxy

    _Proxy Member

    Joined:
    Jun 22, 2018
    Posts:
    16
    How would I do 2 sided healthbars, like when both of the sides decrease instead of one side.
     
  2. woods

    woods Member

    Joined:
    Jun 21, 2016
    Posts:
    223
    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)
     
  3. _Proxy

    _Proxy Member

    Joined:
    Jun 22, 2018
    Posts:
    16
    rip
     
  4. Buff

    Buff Member

    Joined:
    Jun 26, 2016
    Posts:
    63
    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)
     
  5. SupernaturalCow

    SupernaturalCow Member

    Joined:
    Sep 11, 2016
    Posts:
    95
    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.
     
  6. _Proxy

    _Proxy Member

    Joined:
    Jun 22, 2018
    Posts:
    16
    thanks boys, this seems legit ill try it out; Thanks for the help.
     
  7. SupernaturalCow

    SupernaturalCow Member

    Joined:
    Sep 11, 2016
    Posts:
    95
    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 ;)
     
  8. Rob

    Rob Member

    Joined:
    Jul 12, 2016
    Posts:
    677
    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: May 27, 2019

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice