Health Bar Tutorial

Discussion in 'Tutorials' started by ajan-ko, Mar 26, 2017.

  1. ajan-ko

    ajan-ko Member

    Joined:
    Aug 22, 2016
    Posts:
    263
    GM Version: 1.4
    Target Platform: ALL
    Download:
    Basic Version
    :
    https://drive.google.com/file/d/0B4RFnFOGRq0dRmNKYVZFUFRxUUU/view?usp=sharing
    Glowing Version:
    https://drive.google.com/open?id=0B6m5-by1DNyMelY1R2NRdWpNZ0k

    Summary:
    This is basic health bar tutorial
    [​IMG]

    So basically, I cut the sprite the into 3 parts. Left, Right, and center with 1 pixel width.
    [​IMG]

    I'm bad at explaining things XD. Download the code from link above.

    Create Event
    Code:
    global.max_hp=400;
    global.hp=global.max_hp*0.5;
    
    //toggle hsv_effect
    hsv_effect=1;
    
    //minimum hsv and max hsv, max 255
    hsv_min=20; //red
    hsv_max=120; //green/blue
    
    hsv=hsv_min;
    hsv_inc=0.2; //incremental hsv
    
    
    saturation=200;
    
    Draw Code
    Code:
    //Health bar position
    posx=x;
    posy=y;
    
    //max hp bug (if your hp max, it will stop at max_hp)
    if global.hp>global.max_hp global.hp=global.max_hp
    
    hsv=hsv_min;
    for (i= 0;i<global.hp;i++){
        //draw the color effect
        if hsv < hsv_max and hsv_effect {
            hsv+=hsv_inc;
        }
     
        //create the color
        col=make_colour_hsv(hsv,saturation,200);
     
        //draw the health fill
        draw_sprite_ext(spr_health_bar_fill,0,posx+i,posy,1,1,0,col,1);
    }
    
    //draw the health center
    for (i= 0;i<global.max_hp;i++){
        draw_sprite(spr_health_bar_center,0,posx+i,posy);
    }
    
    //draw the health left bar, adjust if needed
    left_posx=0;
    left_posy=0;
    draw_sprite(spr_health_bar_left,0,posx+left_posx,posy+left_posy);
    
    //draw the health right bar, adjust if needed
    right_posx=0;
    right_posy=0;
    draw_sprite(spr_health_bar_right,0,posx+global.max_hp+right_posx,posy+right_posy);
    
    The process pretty simple:
    Step 1: draw spr_health_bar_fill (just 1 pixel width sprite with white color)
    Step 2: draw spr_health_bar_center
    Step 3: draw spr_health_bar_left
    Step 4: draw spr_health_bar_right

    Actually, you can make it shiny and stuff like draw substract.
    My favorite probably the log horizon health effect, that's was rad.
    Probably using shader and stuff. I remember somebody tell me about underwater shader tutorial.

    [​IMG]

    Edit:
    Already get the trick to make it shiny... The problem is how to make it textured.
     
    Last edited: Mar 26, 2017
    Shiroo16, Eyeson15 and slojanko like this.
  2. CKlidify

    CKlidify Member

    Joined:
    Nov 22, 2016
    Posts:
    9
    Looks really sleek, I like it. May consider using it for one of my games!
     
  3. Yaywaffles95

    Yaywaffles95 Guest

    Looks great! Thank you for the tutorial!
     
  4. Eyeson15

    Eyeson15 Member

    Joined:
    Jul 21, 2017
    Posts:
    3
    so good. thank you! AND still works fine with gml 2.x
     
  5. Waterticket

    Waterticket Member

    Joined:
    Nov 22, 2016
    Posts:
    7
    very good. I want to make this one. thank you!
     
  6. Shiroo16

    Shiroo16 Member

    Joined:
    Oct 6, 2018
    Posts:
    4
    thank you very much, i'll try this for my next project
     
  7. William Garrison

    William Garrison Member

    Joined:
    Apr 16, 2019
    Posts:
    62
    Very Cool! Keep it up friend.
     

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