In this tutorial you will learn how to add health bar to ANY object in your game.
Code is used in this tutorial.
What you need
Before you start, you will need at least one object.
Download a file to work from:
To go an object health, you first need to set a variable on the object to keep track of how much health the object has. Once you know this, you can draw a health bar, using the health value, you can calculate how long it will be using a function.
Functions are sets of actions that can be called with one action block or line of code. You can reuse functions without having to redo all the code or action blocks. This is idea for a set of actions that you use often.
Giving the Object Health
You will need an object to do this with a sprite, if you don't have one, quickly make one.
To give the object health, we need to set two variables, the first, is the maximum ammount of health the object can have, the second is how much health the object currently has.
You should always set variables on a create event,
| On the set Object, add a Create Event |
| Use the Set Variable Action from the Control Tab |
Set the variable name as, hp_max and set the value as 100
You can change the value for hp_max to what you want, for the example i've
put 100, this is the MAXIMUM ammount of health your object can have.
Now we need to set how much it has when the Object is created.
| Use the Set Variable Action from the Control Tab |
Set the variable name as, hp and set the value as hp_max
This will set the health to it's maximum.
Taking Health Away (in breif)
This tutorial doesn't cover taking health away, please refer to the enemy health tutorial for this.
To take health on the object away, add an event where the object should lose life, eg, bullet collision.
Use Set Variable Action, set hp, -1, relative.
On an End Step Event, Use, IF Variable has Value, variable is hp, operation is less than and value is 1.
So if hp is less than one, after this Action, use, Destroy Instance to get rid of the object if no more health.
Displaying the Health
Now that we have health on the Object, we want to display this, we CAN'T use the built in Draw Health action or varaibles because that only sets and displays the health of you main character. We want to display the hp value on the object.
Because this set of actions will more than likely be used, we put it in a function so we can use it just like an action block. To make functions, we have to use the Game Maker coding language, GML. Don't panic, you can just copy and paste the function in if you don't understand it and just think of it like an Action Block because Action Blocks are functions anyway.
Writing the Function
First, we have to make a new function to type the drawing health bar code in.
To add a new function,
| Click the Create a Script icon at the top of the screen |
To avoid confusion, a Script is the same as a Function, in Game Maker, Functions are called scripts.
The code editor window will open up, this is just like notepad, in here, you type your script.
Now we have to give the function a name, it's very important to keep your naming of functions consistant, for instance, all funtions that move your character should start with, move_.
Set the name of the function as, draw_percentage_bar
This function will draw a bar at a percentage of a value, such as health, we can reuse this function to draw bars for ammo, lives, weapon charge, timers, anything you can think of that could use a bar.
This tutorial doesn't explain coding, just functions, so copy this code in, the comments (green text) should help make sense of things.
Copy and paste in the following code to the code editor:
//set temp variables
var x1, y1, x2, y2;
var width, height;
var value, value_max;
var border;
//get values from arugments
x1 = argument0;
y1 = argument1;
width = argument2;
height = argument3;
value = argument4;
value_max = argument5;
//draw the back of the health bar
border = 1;
draw_set_color(c_black);
draw_rectangle(x1-border, y1-border, x1+width+border, y1+height+border, false);
//set length and height values
x2 = x1 + (hp/hp_max * width);
y2 = y1 + height;
//draw the health bar, set drawing
color then draw the rectange
draw_set_color(c_lime);
draw_rectangle(x1,y1,x2,y2,false);
When ever you use this function, it will draw a health bar, you have to tell this function a few things so it knows where and how the health bar will look. When you call a function, you can pass it values called, arguments, these arguments are used to control the output of the function.
We use arguments on this function to tell it where to draw the health bar from, how wide and high it should be, we also tell it what our hp and maximum hp is, the function then calculates the percentage of the hp and draws the bar accordingly.
Now we want to use this new function to display our object's health.
Drawing the Object's Health Bar
To draw the health bar, we have to call this function on the object's draw event, we can't do a draw action on any other event.
| On the Object, add a Draw Event |
When a draw event is used on an object, it doesn't draw it's sprite, because we are overiding the parent draw event on all objects that displays a sprite. All we have to do is redraw the sprite.
| Use the Execute a Piece of Code Action from the Control Tab |
Copy and Paste in, or type, the following code:
Copy and paste in the following code to the code editor:
//redraw the object's sprite
draw_sprite(sprite_index,image_index,x,y);
//draw a health bar
draw_percentage_bar(x-10,y-20,50,10,hp,hp_max);
The first thing this code does is the draw_sprite function, this does EXACTLY what the Draw Sprite Action does. We give it 3 arguemnts, the first, what sprite to draw, because our object has the sprite already set in the sprite_index variable, we put that in. The second argument is the frame in the sprite's animation, image_index, the last two is the x and y position, we want to draw it where the object is so just put x and y.
The next line calls our function, we give it 6 arguments,
1 & 2 , the top left point of where to draw the health bar from
3, the width of the health bar
4, the height of the health bar
5, how much health the object has
6, the maximum ammount of health the objec can have
This function takes these arguments and uses them to calculate the length of and draw the health bar.
That's all you have to do, you can now reuse this function over and over again, you could use it to draw an ammo bar for your main character or even use it as a timer.
Download Working Example
draw_percentage_bar.gmk (game maker 7)