Health Bar Tutorial

In this tutorial, you will learn how to make a very portable health bar. The more green it is, the more health you have, and the more red the bar is, the less health you have. This technique is fairly simple, and pretty easy to implement into your game. You will have something similar to this when you are complete:

Introduction

To make a health bar, we must first try to figure out how it works. A health bar simply starts out at 100% it size (the maximum), and depending on how much health is left, it will shrink. Now, to figure out the percentage, we’ll need to figure out the maximum health allowed. In this tutorial, we will use 100. Now, all that is left for us to do is to figure out the mathematics. In this case, we will be using 3 variables. One for maximum health (called “healthMax”), one for health left (just called “health”), and one for the percentage left (called “percent”). The percentage property will simply be healthMax divided by health, and then multiplied by 100 to get the answer out of decimal form. Now that we know how the health bar will display health, we can begin actually making it.

Step #1: Setting up the Images

You’ll need two images, one for the background of the health bar, and one for the bar. If you don’t know what I mean, there are two images included with the example file below.

You want to create a plane, size it to about the same size as the image. Go into Face Select Mode (F) , then open the background image for the health bar. After you are done with that, exit the Face Select Mode (F), then create a new plane, adjusting it to the size of the red bar on the background. Enter Face Edit Mode (F), set the texture as the health bar image, then exit the Face Select Mode(F). You should now have something like this (ignore the MP bar):

Step #2: Animating the Health Bar

Animation? Yes, you will need to animate the bar to get it to do what you want. First, go into edit mode (Tab), then move the mesh, so that the edge is on the object’s center point, like so:

Now, exit Editmode (Tab), realign the bar, and create “scale” IPO keys (I) at frames 1 and 100. Go to frame 1, and scale the bar across the x-axis (press S, then X), until it is not able to be seen anymore. Now re-insert a frame (I) on the same frame (1). The animation process is now done. This is sort of what you should have on frame 1:

Step #3: Scripting the Health Bar

Now comes the part that usually scares most (even though this script is as elementary as it gets); scripting. Start off by going into the Logic Bricks Panel (F4), and add 3 int properties: “healthMax”, “health”, and “percent”. Now open the text editor, and add the following script:

import GameLogic
cont = GameLogic.getCurrentController()
own = cont.getOwner()
own.percent = own.health * 100 / own.healthMax

All this script does is does all of the math, discussed in the intro paragraph, for us. Now, all that’s left to do is to add the following logic bricks:

Step #4: Testing

For testing purposes, I just made the following changes to the logic bricks, so that I can add/subtract health by pushing a key. You can test it another way, but this is the simplest way, for me at least.

Step #5: Displaying Health as a Fraction

You can also make it so that you can see exactly how much health you have left (because the bar will only give you a slight understanding). Make a text plane (I shown you how HERE), and make the following changes to the logic bricks:

Now we have the value for health, we need to get the total and display it as the denominator. All you have to do is copy it, and make the following change:

Step #6: Final Test

Run a final test (as long as the first test worked out fine, this one should as well), and this will conclude this tutorial.

Conclusion

Now, we have everything all straightened out, but one problem remains: How can we keep the health value from going over the max, or under 0? The answer is just to add this small code into the script you wrote earlier:


if own.health > own.healthMax:
own.health = own.healthMax
elif own.health < 0:
own.health = 0

If you’re wondering about how to make it so that if you reach a health value of 0, just simply add a game over scene, and make your logic bricks look like this(this is not included in the example):

.Blend

Download the .Blend

Advertisements

7 Responses to “Health Bar Tutorial”

  1. Pablo Lizardo Says:

    nice tuto!
    thanks for sharing!!!

  2. BGE Tutorials Says:

    No problem 🙂

  3. RH2 Says:

    thank you.
    I think the bar is a nice solution.

  4. BGE Tutorials Says:

    You’re welcome 🙂

  5. thecheet Says:

    when i downloaded it all the textures exept the text
    was not loaded its all pink

  6. coonerboy Says:

    Umm i am not sure when you say ‘create scale, ipo keys’

  7. MasterSam Says:

    very nice, thx for tut


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: