Health Bar Tutorial

ajan-ko

Member
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


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

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.


Edit:
Already get the trick to make it shiny... The problem is how to make it textured.
 
Last edited:
Top