Tag Archives: indicator

Player Bar Indicator (Health Bar)

Most of game application today’s used some kind of bar indicator, such as health indicator, time indicator, power indicator, length indicator, etc to enhance their user interface.
SS041

In construct2, we need to do a little trick to create a bar indicator. The concept of creating bar indicator is not as hard as you think, look at this picture.
SS042
See? That is the event with their action needed to create a bar indicator. Real time update and a sprite limitation to break the grid is the only thing you need. In my previous post, I have an aircraft which have 100 health points. Compared with my green bar width (500 pixel to make it easier to count), so every 1 point of my aircraft health is represented as 5 pixel in my bar indicator (500/100).

I didn’t see any tricks here, where is the trick? When you try to execute the game right after you write down the “code”, you will see that the green bar is not working as it supposed to be.
SS043

Now, here’s the trick. You need to change the origin point of your object. Because the default origin point is in the center of your image, this thing will make your bar indicator shrink to the middle. Change the origin point by editing your sprite (Right click on your sprite, choose “Edit animation”).
SS044

Click on a button with caption “Set origin and image points”, a new little window will appear as in the picture above. Click on “Origin” and change the X-axis to “0” which move the center of your image to that coordinate. This thing will make your bar indicator work as it supposed to be. After you change the axis, just close both window. Have a try!