Round Health Display

In this tutorial, we will be making a round healthbar. There is only part that is challenging. If you don’t know how to rig/animate, it is advised that you stick with the other health bars I’ve made. Now, other than the animation aspect of this tutorial, everything else is virtually the same as the healthbar tutorial, so I won’t explain much of that.

Also included, are a fractional display (health left as the numerator, and max health as the denominator), and a percentage display (which displays what percent of health is left) I’ll go over those at the end of the tutorial. In the end, this is what you should have:

Step #1: Setting Up

Go ahead and go into top view (7 on the numpad), and then add a circle with 10 sides. Rotate it so that the right and left sides are vertical.

Now select the face that I did, and duplicate it (Ctrl + D, then right-click). Select the face under it, and delete it. Merge the following vertexes (Alt + M. select “to last” or “to first”)

Now select both vertexes in the middle of the circle, and merge them using the same technique as before.

Now you need to move the following vertex out of the way, to make rigging easier:

Now exit editmode (Tab), and add an actuator:

Move the top connector to the topmost vertex. Now extrude the center connector out to one of the other vertexes. Keep doing this all around. This is what I got when I was done:

Now, all you have to do is to extrude one more bone out on top of the bottom one, like above. Exit editmode (Tab), and parent the circle to the armature without creating groups. Now we can rig. Go into weight painting mode, and paint only one vertex per bone (each bone gets the vertex underneath it. Now, for the bottom bones, select one bone, and paint the bottommost vertex, then select the other, and paint the one we moved earlier. This is a quick snapshot of what I have now:

Now, we’re ready for the animation. Just be sure to move that vertex we moved before back to where it belongs.
Step #2: Animation

You may want to go ahead and add the texture to the mesh now, just to iron out the flaws as you go. We’ll start out by going to frame 100. enter Pose mode, and enter a rotation keyframe for all of the bones. Go to 90 (by pushing the Down Arrow), and move the bottom bone, which controls the right bottom vertex(illustrated above), and rotate it across the z-axis until it overlays the bone to its right.

Now, just add a rotation keyframe for the bones, press the down arrow (going back 10 keyframes), and rotate the overlapping bones to the bone on their right. Add a rot keyframe like before, and repeat this process, until you get to the last bone (you should be on frame 1 by that time). By then, you should have something like this:

Now just test the animation (Alt + A), and if everything looks okay, then go on to the next step.

Step #3: Scripting and Logic Bricks

Exit pose mode, and select just the Armature. Go into the logic bricks panel (F4), and change the logic bricks to something like this:

IMAGE

Now add the following script, called “healthBarScript”:

import GameLogic

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

if own.health > own.healthMax:
    own.health = own.healthMax
if own.health <= 0:
    own.health = 0
    own.gameOver = 1

Step #4: Testing

You should now be able to Test it out. Press left and right to increase/decrease health.

Displaying Health as a Fraction or Percentage

This is pretty simple. Just add a plane where you want the percentage or fraction to be displayed. Now go to the section for the type you want, and change the logic bricks to what is in the picture

Percentage:

Fraction:

.Blend

Download .Blend

Advertisements

One Response to “Round Health Display”

  1. MasterSam Says:

    very nice, thx
    had some problem with that weight stuff, but it worked


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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: