Cocos2D Tutorial for iOS: How To Make A Space Shooter iPhone Game

Make a Space Shooter iPhone game!

In this Cocos2D tutorial, you’ll learn how to make a space shooter game for the iPhone!

You’ll pilot a space ship with the accelerometer, and blast your way through a field of dangerous asteroids with your trusty laser gun!

If you’re a complete beginner to making iPhone games, this Cocos2D tutorial is for you! You’ll learn how to make a complete game from scratch, with no prior experience necessary!

If you’re completely new to programming in general you might want to check out this slightly easier introduction first.

This Cocos2D tutorial is also good for intermediate developers, because it covers some neat effects such as parallax scrolling, pre-allocating CCNodes, accelerometer movement, and particle systems.

Without further ado, let’s get blasting!

Install Cocos2D

To make this game, you’ll need to be a member of the iOS developer program (so you can run this game on your iPhone) and have Xcode and the Cocos2D framework installed.

If you already have Cocos2D installed, feel free to skip to the next section. Otherwise, here are some instructions for how to install Cocos2D on your Mac:

• Download Cocos2D from this page. Be sure to pick the very latest version – at the time of this writing it is 1.0.0-rc2 in the Unstable category. Don’t worry that it says Unstable – it actually works quite well! :]
• Double click the downloaded file to unzip it, and (optionally) store it somewhere safe.
• Open a Terminal (Applications\Utilities\Terminal), and use the cd command to navigate to where your cocos2d folder. Then run the ./install-templates.sh command to install your Xcode templates, like the following:

$ cd Downloads
$ cd cocos2d-iphone-1.0.0-rc2
$ ./install-templates.sh -f -u

If all works well, you should see several lines saying “Installing xxx template”.

Then restart Xcode, and congrats – you’ve installed Cocos2D!

Hello, Cocos2D!

Let’s get started by creating a “Hello World” Cocos2D project.

Start up Xcode, go to File\New\New Project, choose the iOS\cocos2d template, and click Next. Name the project SpaceGame, click Next, choose a folder to save your project in, and click Create.

Compile and run your project, and you should see “Hello World” appear on the screen:

Adding Resources

To make this iPhone game, you are going to need some art and sound effects with a space theme.

But don’t whip out MS Paint quite yet – luckily my lovely wife has made some cool space game resources you can use in this project!

So go ahead and download the space game resources and unzip them to your hard drive.

Once you’ve unzipped the resources, drag the Backgrounds, Fonts, Particles, Sounds, and Spritesheets folders into the Resources group in your Xcode project. (Basically everything except the Classes folder).

Make sure that “Copy items into destination group’s folder (if needed)” is checked, and click Finish.

When you’re done your Groups and Files tree should look something like this:

If you’re curious, feel free to take a peek through the contents of the folders you just added to your project. Here’s what’s inside:

• Backgrounds: Some images that you’ll use to create a side-scrolling background for the game. Includes images of a galaxy, sunrise, and spatial anomolies (that will move quite slowly), and an image of some space dust (that will go in front and move a little bit faster).
• Fonts: A bitmap font created with Glyph Designer that we’ll use to display some text in the game later on.
• Particles: Some special effects we’ll be using to create the effect of some stars flying by, created with Particle Designer.
• Sounds: Some space-themed background music and sound effects, created with Garage Band and cxfr.
• Spritesheets: Contains an image in the pvr.ccz format containing several smaller images that we’ll be using in the game, including the asteroid, space ship, etc. This was created with Texture Packer – you’ll need this if you want to look at the pvr.ccz.

Don’t worry if you don’t have any of these tools installed – you don’t need them for this tutorial, since you can use these premade files. You can always try out these tools later!

Here’s what Sprites.pvr.ccz looks like by the way:

In case you’re wondering why we’re combining all those images into a large image like this, it’s because it helps conserve memory and improve performance while making the game.

It’s a good practice to get into, so we’re starting you out with it early! :]

Adding a Space Ship

Let’s start things out nice and simple by adding the space ship to the screen!

Start by opening HelloWorldLayer.h, and add two new instance variables inside the @interface:

CCSpriteBatchNode *_batchNode;
CCSprite *_ship;

The first variable (_batchNode) is necessary because we’re storing all of our images inside a single image, and using this helps us batch up all the drawing work.

The second variable (_ship) represents the space ship on the screen.

Next move to HelloWorldLayer.m, and replace the init method with the following:

-(id) init
{
    if( (self=[super init])) {
   
        _batchNode = [CCSpriteBatchNode batchNodeWithFile:@"Sprites.pvr.ccz"]; // 1
        [self addChild:_batchNode]; // 2
        [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"Sprites.plist"]; // 3

        _ship = [CCSprite spriteWithSpriteFrameName:@"SpaceFlier_sm_1.png"];  // 4
        CGSize winSize = [CCDirector sharedDirector].winSize; // 5
        _ship.position = ccp(winSize.width * 0.1, winSize.height * 0.5); // 6
        [_batchNode addChild:_ship z:1]; // 7
    }
    return self;
}

Let’s go over this step by step:

1. Creates a CCSpriteBatchNode to batch up all of the drawing of objects from the same large image. Passes in the image name (Sprites.pvr.ccz).
2. Adds the CCSpriteBatchNode to the layer so it will be drawn.
3. Loads the Sprites.plist file, which contains information on where inside the large image each of the smaller images lies. This lets you easily retrieve the sub-images later with spriteWithSpriteFrameName.
4. Creates a new Sprite using the SpaceFlier_sm_1.png image, which is a sub-image within the large image.
5. Gets the size of the screen from the CCDirectory – we’ll need this in a second.
6. Sets the position of the ship so that it’s 10% along the width of the screen, and 50% along the height. Note that by default the position of the ship is the center of the ship.
7. Adds the ship to the batchNode so that the drawing of the sprite is batched up.

Compile and run your project, and you should see your ship image appear on the screen!