• 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!

Graphics Customized health/energy bar using sprite

jazzzar

Member
GM Version: 1.4.1760 Game Maker Studio Professional
Target Platform: ALL
Download: NA

Summary:
Draw a health or energy or whatever bar using a sprite, something like this :


Description :
This is a script I wrote recently to draw an energy bar for my game using a custom sprite (green rectangles in my case), it works and somehow customisable, you can choose max energy and how many segments it contains and the distance between each one of these segments.

The script :
Code:
///draw_energy(sprite,x,y,max energy,current energy,number of sections,distance between sections)

var spr,x1,x2,y1,y2,nrj,max_nrj,split,p_amount,dist,pos,t_nrj,c;

spr = argument0;//sprite of the each energy section

x1 = argument1;//start x coor of drawing the first sprite
y1 = argument2;//start y coor of drawing the first sprite

max_nrj = argument3;//max energy that the player starts with( when using this script, use numbers for this)
nrj  = argument4;//current energy(use the variable here)
split = argument5;// how many energy sections we want
dist = argument6;//distance between each of these sections
curr_dist = 0;//current distance,we'll use this to add the distance to it each time we draw a sprite

p_amount = max_nrj/split;//each section has an amount of energy,this variable holds it
pos = split;// this is used to know how many sections we need to draw, it's the limit fo the for loop
t_nrj = max_nrj;//temporary energy used for the while loop to calculate the pos variable

//while loop to calculate pos varible for later use with the for loop
while (t_nrj - p_amount >= nrj)
{
    pos--;
    t_nrj-=p_amount;
}

//for loop that draw everything
for (var i=1;i<=pos;i++)
{
    if pos==i //i use this only to decrement the section that we are currently in, or else just draw it with a 1 xscale
    {
        c = (pos*p_amount)-p_amount//this actually represents numbers like 100,90,80 or 180,160, basically it's always max_nrj-10,or max_nrj-20,it's used to determin in which section we are and so calculate xscale later
        
        draw_sprite_ext(spr,0,x1+curr_dist,y1,(nrj-c)/p_amount,1,0,c_white,1);//the current energy - the minimum one for the current section divided by the amount of each section gives us a maximum number of one and decreases as energy go down
    }
    else
        draw_sprite_ext(spr,0,x1+curr_dist,y1,1,1,0,c_white,1);//we are not in these sections so we just draw them with a 1 xscale
    curr_dist+=dist;//increase the current width to determin where we need to draw the next section (next sprite)
}
Example of usage :

it could be used like this :
Code:
draw_energy(sEnergyBar,50,50,100,player.hp,10,25)
Everything is explained in the script but I'll explain it here as well
  • First argument you use the sprite you want (like the green rectangle in my case)
  • the second and third arguments are the x and y coordinates of the first section to be drawn
  • The third one is the max hp/energy the player can have, use numbers here not variables as we want it to be constant
  • Forth argument is the player hp or energy, it's like the current one, use a variable here as we want to know how much is left
  • Argument number 5 is the number of sections to be drawn, in my case there is 5, it's your choice
  • Argument number 6 is the distance between each of these section, it depends on the origin of the sprite so tweak it as you like
NOTE : use this script in a draw event :)
I Hope you find it useful, use it as you like in any project and feel free to edit it as well :)
 
Top