THIS SITE HAS MOVED TO A NEW LOCATION

Using Healthbars

by RoboBOT

So you need a healthbar, or maybe more than one, but how is it done? I'll bet you've tried the drag and drop functions, but found that those will only work for one healthbar. Well, you need to use GML. Don't stop reading! It's easy, and I'll make it easier. Just follow this example to make two healthbars.

Say you want the health bars to be for Jack and Jill. Jack's health and Jill's health will need separate variables. So, lets make some up. In the creation event of each character, you need to "intialize" (create) two variables: In object "Jack", creation event: Using a piece of code (under the Control tab), type this:

global.h_jack=100;

Do the same for "Jill", only use:

global.h_jill=100;

The variable names don't matter. We could call them qwerty and fred if we wanted too. But easy to remember variables makes coding easier.

Now, to explain WHAT the variables are. h_jack is the current health, and is the variable you will change when jack gets hurt. h_jill of course is the health of jill.

Now, create an object, and call it "drawer" (or something, anything). Drawer's job will be to draw your healthbars. This is done in the draw event of drawer.

Use another piece of code, and put it in the draw event:

draw_healthbar(200,100,400,150,global.h_jack,c_black,c_red,c_blue,0,true,true); draw_healthbar(200,200,400,350,global.h_jill,c_black,c_red,c_blue,0,true,true);


What does that mean?? Well, its quite easy, so let me explain.

The first 4 numbers set the corners of the healthbar (x1,y1,x2,y2). the first two are the x and y values of the top left corner, and the second two are the x and y values of the bottom right corner.

The next argument is the health variable we created a moment ago. This is the value the health bar will display. It must be between 0 and 100. If it is less than 0, then the bar will display 0 until the variable is back in range. If it is greater than 100, it will display 100 until the variable is back in range.

The next argument is the background color of the bar. This will only show when the health is less than 100.

The next two arguments sets the colors of bar. The first color is the minimum color, or the color the bar will turn when there is very little health. Red is good color for this. The next argument is the max color, or the color the bar turns when you have all or most of your health. When you have another amount of health in between, the colors are mixed (if your min color is red, and your max color is blue, then at 50 health the bar will be purple). If you don't want the bar's color to change, set them both to the same color.

The next argument is the direction the bar goes down. if you put 0, the bar will lower from right down to the left. If you put 1, the bar will lower from the left to the right. If you put 2, the bar will lower from the bottom to the top, and if you put 3, it will lower from the top to the bottom.

The next argument decides whether to show the background color or not. If you put "false", then the background color won't show, and therefore at zero health the bar will be invisible. Put "true" to keep the background color.

The next argument decides whether to show a border. "false" will remove the border, and "true" will keep it.


Experiment with these arguments to get a feel for them. Now that you understand the function, here's another trick that will help you.

Say you want to bar to show something beside health. Say you want it to show damage, but you only want the damage to be between 0 and 35. If you put your damage variable in the draw_healthbar() function, then it will only show a maximum of 35% damage. Well, its easy to fix this.

Look at the function again:

draw_healthbar(200,100,400,150,global.damage,c_black,c_red,c_blue,0,true,true);

since the amount of "health", or whatever variable we use, is just a percentage, we can do a little math.

take your damage variable, and divide it by the maximum amount of the damage variable:

global.damage / 35

This will get a decimal number between zero and one. So, multiply it by 100 to get a number between 0 and 100:

( global.damage / 35 ) * 100

Take this and put it in the function where the variable would have gone:

draw_healthbar(200,100,400,150,(global.damage/35)*100,c_black,c_red,c_blue,0,true,true);

Try it. Wow! It's magic! Your damage now shows a percentage. Neat, isn't it?

So, Now I bet you want your healthbar to stay in place on the screen while your character moves throughout the room. Well, you're in luck, because it's easy.
Use view_xview[0] and view_yview[0] to position the healthbar. These variables get the corner position of the view. Which view it's talking about depends upon the number inside the brackets. Use 0 for view 0, 1 for view 1, etc.
So an example of placing a healthbar inside the view:

draw_healthbar(view_xview[0]+20,view_yview[0]+10,view_xview[0]+120,view_yview[0]+25,health,c_black,c_red,c_blue,0,true,true);

Just remember these key things when using this function:

All variables must be initialized (created) before you use the function. That means, put it in a creation event.

If you use a drawer object like I told you, then the variables should be global, so that the drawer object knows what you are talking about.

If you draw the healthbar in the same object as the variable, then you don't need to make it global. HOWEVER, you will need to tell Game Maker to draw your objects sprite, since you are using a draw event. When you don't use a draw event, Game Maker assumes you want your sprite drawn. So if you do use one, you must remind gamemaker.

If you have any further questions, email RoboBOT at contact_robobot@yahoo.com

Good luck!
Back to Tertal: RoboBOT's Internet Portal
Design & Content © 2006 RoboBOT
Best viewed in 1024x768 resolution
HTML 4.01 and CSS 2 Compliant