Graphics Customized health/energy bar using sprite

Discussion in 'Tutorials' started by jazzzar, Sep 19, 2016.

  1. jazzzar

    jazzzar Member

    Jun 29, 2016
    GM Version: 1.4.1760 Game Maker Studio Professional
    Target Platform: ALL
    Download: NA

    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 :
    ///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)
    //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
            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 :
    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 :)
    Biosyn, Hugh Patrick Greene and 41nd like this.

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