Health bar represents how much damage a sprite can sustain before falling apart. Almost all modern games utilize the concept of the health bar. In this article we are going to learn how to create a simple health bar which can be used in any iPhone game.

Numerical Health Bar:

You might think why not create a simple numerical health bar where the user's health is represented by plain numbers. There are multiple problems with this approach. First, this technique will confuse the users if the game displays additional numerical data on the screen like score, lives etc. Also, numerical data does not provide instant visual feedback which is essence in a game.

Scenario:

For the sake of simplicity we will only focus on the health bar. The application will have two options "Hit" and "Miss" respectively. When the user touches "Hit" then the health bar is decreased indicating that the user is taking damage. When the user touches the "Miss" option then the health bar is increased indicating the user is taking power ups or fuel.

Creating Hit and Miss Options:

The Hit and Miss options are indicated by CCMenu and CCMenuItemFont. The loadMenu method is used to display the menu on the screen. The implementation is shown below:

    

The screenshot below shows the result:



Nothing complicated just two options displayed on the screen! In the next section we are going to implement the health bar.

Implementing the Health Bar:

There are several different ways of implementing a health bar in an iPhone. Fortunately, the Cocos2d framework provides an easy way to achieve it. The CCProgressTimer class allows the developer to display only a part/percentage of the image which makes it easy to create a health bar effect. Let's first display the health bar on the screen using CCProgressTimer class.



Please note that setScale is only used since our image was not scaled properly. In your real app you should always use an image that is scaled correctly. The screenshot below shows the health bar displayed on the screen.



The health bar is displayed completely since we have set the percentage to 100. Let's implement the hit method which is called when the user touches the "Hit" menu option.



If life is greater than 0 then we take out 25% of health and set the new percentage. The effect is shown in the screenshot below:



We can make it more appealing by indicating the critical health by red color. The critical health gets active when the user only has 25% of the health remaining.



The effect is shown below:



Now, let's implement the "Miss" method which will power up the user.



The miss method will also make sure that when the life is greater than or equal to 25% then change the color of the health bar to green instead of red.

Downloading Code:

The complete code is available in the Desert Race open source game which is hosted on GitHub. The Car.h and Car.m files contains the complete implementation of the hit and miss methods. Please visit the following URL for Desert Race repository on GitHub:

https://github.com/azamsharp/Desert-Race

Conclusion:

In this article we learned how to create a health bar using CCProgressTimer class which is part of the Cocos2d framework.