- Title: Cool Looking Healthbars
- Description: a tutorial on how to make good looking health bars.
- GM Version: GM7 or GM8
- Registered: nah
- File Type: .gmk
- File Size: 9 kb
- File Link: Download
Tired of lame healhbars?
Do you want them not to be one colored rectangles?
Do you want them to look cool?
Do you want them to be any shape?
Then!, simply read the following tutorial:
Hello. I decided to create a tutorial on how to make good looking health bars.
The things that you will need are:
- Game Maker Pro (GM 7 or GM8)
- An Health bar idea
- Medium coding knowledge
- Some time
By default GM draws a healthbar, using a rectangle that changes color. For some games that is good, but some games would rather like a healthbar that is actually and image or something else. Some one uses text to display health, or several sprites. This tutorial will throw all of those in the recycle bin, and add a new way of healthbars. One that's more healthier
...We will begin by starting ours Game Maker. For this tutorial I am using Game Maker 8, becaouse it supports alpha transparency, and other things that will make the healthbar look better.
STEP 1: Sprtiting
Create a new sprite and name it "spr_bar".
The tutorial bar will use several images in that sprite. These are:
- The border
- The color filling
- Shadow
- Highlight
- Light Reflection
As you can see i used 5 images. The spriting is complete.
STEP 2: Coding
Create a new script and name it "draw_healthbar". Paste this code into it.
/*
Draw Healthbar Script
draw_hpbar(x,y,value);
x - x position to draw the bar at
y - y position to draw the bar at
w - previously initiated variable to define the width or height displayed in the bar.
*/
var xx, yy, w;
xx=argument0;
yy=argument1;
w=argument2;
for (i=1; i<5; i+=1)
{
draw_sprite_part(spr_bar,i,0,0,0+w,sprite_height,xx,yy);
};
draw_sprite(spr_bar,0,xx,yy);Before continuing let me explain what this does. The "var w;" will create a variable w, and xx and yy are for x and y coordinates. Dont forget to put the sign ";" after typing out your variable names. In the next line, we set the correct arguments. That way it will be easier later to change the valus. The "draw_sprite_part", will draw a part of the sprite. Let me explain it more theral:"spr_bar" is the name of the sprite we used for the healthbar. 1, 2, 3, etc is the image index. 0,0 are the beging where to start the sprite and 0+w is the value the healtbar starts. "sprite_height" will set the sprite doesnt cuts on the y axis, but on the x only. x and y are the origins.
Save the code.
STEP 3: Object
Create a object and name it "obj_bar"
Paste this code.
//Create
width=16
//Step
if keyboard_check(vk_left){if width>0{width-=1}} //Make the value go down
if keyboard_check(vk_right){if width<sprite_width{width+=1}} //Make the value go up
//Draw
draw_healthbar(width)In the create event we have created the variable width and set it to 16.In the step event, if we press left, the value will go down (health), and right will make it go up.
In the draw event we called the script "draw_healthbar" with the next arguments:
argument0 = X position
argument1 = Y position
argument2 = width
Here is the screenshot of the final product.
I hope that helped you on the way of creating decent looking healthbars. If you want the health can go up/down, simply changing the code into "draw_sprite_part(spr_bar,i,0,0,sprite_width,0
+w,xx,yy)" and adjusting other variables. The healthbar can be any shape, size color, alpha...
Thank you for your patience for reading.
You can download the example here: Download
/Shadowrend
Edited by Shadowrend, 12 January 2011 - 03:23 PM.
