Wednesday 25 January 2012

A health bar.

So the game is pretty much playable now, it just needs a few mechanics added, a bit of a polishing, and I can call an end to "Zommers! - Episode 1". I've decided to do this episodically for two reasons. Firstly, I can try a different AI routine with each episode, and not bundle all my ideas up into a single, confusing game or application. Secondly, I can have a crack at different projects, and return to the Zommers franchise at any time, using routines from previous episodes in later projects if needed. This first episode is called "Direct Pathfinding" for obvious reasons.

Anyhow, this blog update is all about the "Health Bar" (and I don't mean a place to hang out with sporty types while drinking fruit smoothies...)

The idea of the health bar is to give an indication of how close the player is to getting killed. Morbid, but essential. So the health bar spans from left to right at the top of the screen, and gets shorter and shorter as the player takes damage from the Zommers, until it finally shrinks away to nothing, in which case the player dies and the game is over. Here's what the health bar looks like in-game...

(As usual, click to enlarge)

...it's up there at the top left corner of the screen, and as you can see, it spreads out from the left to right. In this case, the player has plenty of health remaining. But not for long ;)  So here's how it was made...

First, I designed the health bar graphic in a graphics application (Paintshop Pro 7 if you're interested), and saved it as a .png file (portable network graphics, lossless)...


...next, within the Zommers source code,  I loaded it into memory, as image number 7, as follows...


...now I define a global variable which will be used to hold the health of the player...


...and assign it an initial value of 100...


...now you will notice I called that variable "playerdamage" where you would expect it to be called "playerhealth" or something. I did this because of the way I have decided to display and dynamically modify the health bar as the level of health decreases. Rather than decrease the amount of health the player has, I chose to increase the level of damage he has received. I've done it this way because it's created a platform for an idea I want to try out in the future, which I will no doubt explain in a future blog :)

So now to actually display the health bar. If you look at the design of the graphic, you will see that it is only one single vertical bar, whereas in-game the actual health bar is made up of lots of these vertical bars, arranged in a horizontal line. To facilitate the reduction (or later, addition) of player health, each one of these tiny bars needs to be controllable (not position-wise, although technically they are) in that I can turn them on or off as needed. So to that end, I wrote a routine to display 100 of these bars, each one as a sprite, with a gap between them. Here is the routine that does that...


...yes, I've counted backwards from 200 to 100 with the sprite definitions. This is because, as you will see in  the next code snippet, that as player damage goes up, it hides sprites starting at number 100 and going upwards to number 200. If I hadn't positioned them in reverse order, then the health bar would deplete from left to right, which is generally accepted (in my part of the world at least) as an indicated increase. This way, it depletes from right to left as you would expect. The temporary variable "barspacer" is just used to place a gap between each sprite do it doesn't look like a solid orange bar when it's rendered to the screen.

Finally, the code that actually changes the look of the health bar when the player is hit by a Zommer. It consists of two small routines, and they're both shown here...


...the "CheckFaceChew" function checks if the player object is hitting anything, and if it is, it goes on to check that the thing it's hitting is a Zommer, then if that's also true, it increases the value of the "playerdamage" variable. It also sets a flag called "playerdead" if the player damage exceeds the value 200. I think it's reasonably obvious what the "playerdead" flag represents...

The other function, "UpdateHealth", just hides a sprite in the healthbar which is directly related to the value held in the "playerdamage" variable, so the health bar looks like it's getting shorter, even though what's really happening is that some of the lined up sprites are being hidden. 

One final thing to note before I end this post. You might wonder why I've started the player health at a value of 100 and added damage up to a level of 200 (rather than starting at 0). Well if I'm totally honest, it was due to a lack of planning at the beginning (I'm sure you know the way I code by now!). I had already used a few sprites for other things (targeting reticle, score digits etc...) which were assigned low numbers, and I really couldn't be bothered recoding that lot, so I just started the first health sprite at number 100, and wrote the player damage routine around that value.

Trust me, I know what I'm doing....