Gw Temp


Tutorial - 'Making a Health Bar Using Percentages' by Bootface

An item about RPGMaker 2000 posted on


Another tutorial that shows you how you can use pictures to display a health bar on the map.


Hello my public! This is Death Shock, long time reader, first time writer. Prepare to dive into the exciting, grotesque, evil, malicious and depressing world of health bars. Yep, a health bar is all those things.
I wouldn't write a tutorial on something there are so many of. Health bar tutorials are common but not this one. This is a picture-based percentage health bar. What does that mean you ask? It means that you can have 7814 HP yet only have to use three pictures(one is required, the other two are for apperance.) for the actual health. Now I'll critique the task in a popular way as of late.

Difficulty: 2/5
Goal: To create a picture based functional health bar.
Advantages: You can have as much health as you want.
Disadvantages: 100 conditional branches/ forks per bar... ouch.
Knowledge required: Conditional branches, switches, variables and being able to use pictures.
Tutorial meant for: RPG Maker 2003.(Hey we 2K3ers have learned the 2K commands pretty well so its your turn.)

To start this off you'll need three pictures. Open up MS paint and make an image 102 X 12. Fill it in any color(it'll be transparent) and make a 1 pixel white border going around the whole thing. Save it as a 256 bitmap and name it Bar_Outline. Now make a new image and adjust the size so its 100 X 10. Just fill it in red, save it as a 256 bitmap and name it HPbar. Make another one 100 X 10, make it black and save it as Bar_Backgroud. Import HPbar and background normally but for the Outline you'll need to make the center transparent. If you're too lazy to make those then I have premade ones just for you.

Outline: (this one will look like the previous one but it isn't.)

Just for the purpose of this tut you should change your hero's maximum HP. So open up the database and change his/her max HP to 5. The reason for this is just to see the results and if this was done correctly without having to make 100 conditional branches. Oh yes, this tutorial also assumes that you use the default HP system. If you don't than you should know how to modify this to work for you.

Now, on a 20 X 15 map you need to make an autostart event. The purpose of this is just to set up the variables and picture locations. To make a percentage based health bar you need a percentage, right? Correct, so open up event commands and place a [r]Variable operations[/r]. Create the variable HeroHP and set it equal to your hero's current HP. To get the percentage of health multiply HeroHP by 100 and then divide it by your hero's maximum HP.

Next you need to place the pictures. Select [r]Show Picture[/r] and choose Bar_Background as the first picture. The coordinate X should be 51 and Y should be 6. That'll put it right at the top left corner of the screen. Next put down HPbar and make it picture N0. 2. Same coordinates. Now insert [r]Show Picture[/r] again. Use Bar_Outline. Same coordinates, picture N0.3 but this time make sure that you are able to use the transparent color.

Finally create a switch called Setup and turn it on. Add another page to the autostart and make the precondition "switch 0001:Setup is on." Make this page a parallel process. You'll get back to it later. The reason for doing that is so the event will run but then stop and no longer pester you. Now test play your game to see the health bar. For now it is just eye candy and a variable containing your health percentage.

Code for the event Setup.

<>Variable Oper: [0001: HeroHP] Set, Hero HP
<>Variable Oper: [0001: HeroHP] *, 100
<>Variable Oper: [0001: HeroHP] /, Hero Max HP
<>Show Picture: 1, Bar_Background, (51,6)
<>Show Picture: 2, HPbar, (51,6)
<>Show Picture: 3, Bar_Outline, (51,6)
<>Switch Operation: [0001: Setup] ON

Now go to the page 2 parallel process of the event. We'll make the health bar come to life(and death if you suck at games). Now you just need to copy the formula to get the percentage again so that the computer can recalculate it. Uggh but now the easy yet repetitive part. 100 conditional branches but I'll shorten it down for this. Since you have 5 HP you only need 5 branches. So create a branch that checks to see if HeroHP is equal to 100(no else handler). If yes it means you have 100% health. In the branch select [r]Move Picture[/r] and have it move picture N0.2 to X 51 and Y 6 with a transition time of 0.1 seconds and no wait. Now copy this one and paste it 4 times. Each one down take twenty away from HeroHP is equal to *number* in the branch and twenty away from X in move picture(even into the negatives.) It'll look something like this when you're done:

<>Variable Oper: [0001: HeroHP] Set, Hero HP
<>Variable Oper: [0001: HeroHP] *, 100
<>Variable Oper: [0001: HeroHP] /, Hero Max HP
<>Branch if Var[0001: HeroHP] is 100
<>Move Picture: 2, (51,6), 0.1 Sec

<>Branch if Var[0001: HeroHP] is 80
<>Move Picture: 2, (31,6), 0.1 Sec

<>Branch if Var[0001: HeroHP] is 60
<>Move Picture: 2, (11,6), 0.1 Sec

<>Branch if Var[0001: HeroHP] is 40
<>Move Picture: 2, (-11,6), 0.1 Sec

<>Branch if Var[0001: HeroHP] is 20
<>Move Picture: 2, (-31,6), 0.1 Sec

Note: You'll need to add a branch for 0% if you have more than one party member.

Now before you test it you should have an NPC onscreen that takes away one hit point everytime to talk to it. [r]Simulated enemy attack[/r] is how to do it. It works? Great job. The same can be done for an MP bar. In closing I think this is a pretty efficient system. One variable and a switch wouldn't argue with me. Plus its a pretty short tut that gets the job done.

Now just to warn you. The reason the bar doesn't really shrink. It just moves and looks like it. If you put the health bar in the middle of the screen then you'll get some ugly results.