Creating a Vertical Scrolling Car Game Using Cocos2d Part 2
In the last article we started implementing a vertical scrolling car game. The game demonstrated the use of Tiled application. In this article we are going to implement several cool new features which includes health bar, flares, smoke etc.
Adding Objects to the Road:
Currently, the road is clear of any obstacles which makes our car the king of the highway. In this section we are going to add objects to the road which the car can collide against. You can add any object you like but for the sake of simplicity we leveraged the power of Cocos2d particle system and added flares to road. In case you are wondering what are flares, it is just a CCParticleSun instance which when placed on the road looks like an emergency flare. Here is a screenshot of flares in action.
Flares can be red or green. Red is bad and green is good or in other words red will drain your fuel and green will earn fuel. In the implementation below we added the flares to the game.
populateRandomFlares method create 4 random flares using the "red.png" and "green.png" images. The Flare instance is then put inside the flares array. After populating the flares the next step is to display the flares on the screen. This is achieved by using the following code:
One thing to note about the above method is that the runAction is performed on flare.flareParticle instance which is of type CCParticleSun. The runAction makes the flares move downwards which gives the illusion that the flares are also moving with the background.
Now, we need to call addFlaresToRoad method at regular intervals so flares can be added on the screen. This can easily be performed by using the schedule method of the CCLayer.
The above code dictates that the addFlaresToRoad method will be invoked every 10 seconds. This will add new flares to the road every 10 seconds.
Collision Detection:
At this point you can pass your car through the red and green flares and nothing will happen. In this section we are going to add collision detection between the car and the flares. Before digging into the details let's first take a look at the Flare class which identifies a flare.
The actual flare effect is created using the CCParticleSun. The isCollided property represents if the Flare has collided with the car or not. The isRed simply represents if the flare is red or green. The collision detection code is implemented below:
We iterate through all the flares and check to see if it has collided with the car or not. We have also utilized the hypotf function which is used to calculate the hypotenuse. One interested thing to note about the above method is the flare.isCollided property. Since, the car will collide with the flare multiple times we have restricted this collision to one by setting the isCollided property to true. The next step takes action on the car depending on the collision with the red flare or green flare. In the next section we are going to implement the health bar for the car which will be reduced when the car collides with the red flare.
Implementing Health Bar:
There are multiple ways of creating health bar in a game. You might lean towards putting the Health bar on the upper left corner or lower left corner but we have used a slightly different approach. We decided to put the health bar right under the car as shown in the screenshot below:
The health bar is created using the CCProgressTimer class which is capable of showing part/percentage of the image. The HealthBar class is implemented below:
As you can see the self.progressTimer.percentage is initialized to 100 which indicates full health. Now each time our car collides with the red flare we invoke the hit method of the car instance. The hit method is shown below:
Each hit takes 25% of health. When the health reaches 25% the green health bar is replaced with the red health bar. When the health falls to 25% then the smoke particles effect is also enabled. The screenshot below shows the car damage in action:
The other part of the equation is when the car drives over the green flare. The energize method is invoked when the car collides with the green flare. The implementation is shown below:
In this article we moved forward with our implementation of the vertical scrolling car game. We implemented collision detection and also added health bar to our game. In the next article we are going to add points, background music and sound effects to make our game more attractive.
