This article is part of a series in which we will begin a journey to build a complete iPhone game. The game will be build using the Cocos2d framework. In the first part we will discuss how to setup the game environment and add sprites to the scene.

Idea:

The game we are going to implement is called "Space Demon". It is a typical space shooting game with a twist. The twist is that when the demon is shot it will turn into a ball of fire and then descent downwards. If the ball of fire hits the our spaceship then we die.

Recommended Reading:

If you are completely new to the iPhone game development using Cocos2d then please check out all the previous posts on this blog. There are also free screencasts available which introduces the Cocos2d framework. All screencasts are hosted on YouTube and can be viewed using the following URL:

http://www.youtube.com/azamsharp

Getting Started:

First, create a new Cocos2d application using the Cocos2d template. Space Demon will work in portrait mode so we need to make a change in the HelloCocosAppDelegate.m file. The following implementation shows how to set the mode to portrait.

We also turned off the display for the FPS by using the setDisplayFPS method as shown in the above implementation. Clear out the init method so it will look like the following:

If you run the application right now you will see a black screen with nothing displayed on it. Our next step is to create the space environment where our spaceship will kill the demons.

Creating the Space Environment Using Cocos2d Particles Framework:

There are many ways of creating the Space environment which includes movable images etc. We are going to take the route of using the Particles framework in Cocos2d. Particles framework can create astonishing effects when used correctly. The code below builds a sea of fire which acts as the background of the game.

There are couple of interesting things about the above code. The following line puts the particle emitter in a position which is above the iPhone or the iPhone screen. The reason is that it gives the impression that we are moving forward since the particles are going in the opposite direction.


The gravity of the particles is set to -90 which makes the particles descent in the opposite direction. The effect is shown in the video below:

We have created the background for the space demon game. The background gives us the illusion that we are moving. Next, step is to add the spaceship to the game.

Adding Spaceship to the Scene:

Spaceship will be a CCSprite object and it is recommended to declare it first in the header file as shown below:

We expose the spaceship instance by using the @synthesize keyword in the implementation file. The @synthesize keyword will generate the getter and setters for the spaceship property.

The spaceship is added in the init method which is triggered when the layer is initialized. The init method is shown below:

One important thing to note about the init method is that we used the CGSize instance to find the window size and then place the spaceship using the windowSize properties. It is always a good idea to use the relative positions instead of hard-coding the values. If you hard code the positions and make your app iPhone/iPad specific then it will look horrible on the iPad since the position was iPhone specific. Another thing to notice is the z-index assigned to the spaceship. The spaceship needs to be in the front layer which the sea of fire needs to be in the background. The z-index of 999 makes sure that the spaceship is always placed in the layer above the sea of fire layer.

The screenshot below shows the view with spaceship:

NOTE:

There are many places in the code that we can refactor and make is more readable. We will continue to refactor the application through the rest of the series.

Conclusion:

In this article we setup the environment to create the space demon game. We used particles framework to create the animating background and added a spaceship to the view. In the next article we will make the spaceship move and shot.