How To Make A Simple iPhone Game with Cocos2D 3.0 Tutorial

Note from Ray: This tutorial is a 2014 reboot of the classic How To Make A Simple iPhone Game Cocos2D 2.0 Tutorial.

What better way to celebrate the brand new 3.0 release of Cocos2D than with a fresh update to a classic tutorial!

Cocos2D 3.0 is the latest version of the hugely popular open source iOS framework for developing 2D games, including thousands of App Store games and many top 10 hits.

It has great sprite support, a deeply integrated version of the excellent Chipmunk2D physics library, OpenAL sound library, fun effects, and loads more.

In this Cocos2D 3.0 tutorial for beginners, you will learn how to create a simple and fun 2D game for your iPhone from start to finish. If you’ve previously followed the Cocos2D 2.0 Tutorial, then this may feel familiar however you will be utilizing the integrated physics engine to take it to the next level.

You can either follow along with this tutorial or just jump straight to the sample project source at the end. And yes, there will be blood, I mean ninjas!

Cocos2D vs Sprite Kit

Before you get started, you may be thinking, “Hey, why bother with Cocos2D now that I have Apple’s Sprite Kit? Do I really want to try anything else?”

Well, as with any game framework, there are a few pros and cons of Cocos2D.

Cocos2D Pros

• Pro: You are not locked into the iOS ecosystem, want to port your game to Android? It’s your choice and you can now typically do it with Cocos2D in one line!
• Pro: You can write your custom OpenGL effects code.
• Pro: It’s Open Source, so if you want to change something or find out how it works, you can dig right into the source code.

Cocos2D Cons

• Con: It’s not built into Xcode, so you will have to download and run the Cocos2D installer.
• Con: It doesn’t currently have a built-in texture and particle tool editor (however, it does have great 3rd Party tool support).

Cocos2D has an established community and there are loads of existing tutorials, books and code samples out there. Cocos2D is developed and maintained by game developers who aim to make it easier for you to get on with making great games.

Installing Cocos2D

Cocos2D 3.0 comes with a new installer, so getting started has never been easier!

Just download the latest Cocos2D installer (version 3 or later), open the DMG and double click the installer. This will automatically install the Cocos2D templates for Xcode and build the Cocos2D Xcode documentation.

You will see a bunch of messages as the installer runs, once finished it will open up the Cocos2D welcome page. Congrats – you’re now ready to work with Cocos2D!

Hello World

Let’s start by getting a simple Hello World project up and running by using the Cocos2D template that was installed in the previous step.

Open Xcode, select File\New Project, select the iOS\cocos2d v3.x\cocos2d iOS template and click Next:

Enter Cocos2DSimpleGame for the Product Name, select iPhone for Devices and click Next:

Choose somewhere on your drive to save the project and click Create. Then click the play button to build & run the project as-is. You should see the following:

Tap the Simple Sprite button to reveal another test scene, which you will be working with in this tutorial:

Cocos2D is organized into the concept of scenes which you can think about kind of like
“screens” for a game. The first screen with the HelloWorld menu is the IntroScene, and the second screen with the spinning Cocos2D logo is the HelloWorldScene. Let’s take a closer look at this.

Enter the Ninja!

Before the Ninja can make his grand entrance, you will need some artwork to work with…

First step, download the resource pack for this project. Unzip the file, and drag the ResourcePack folder into the Xcode project. Make sure that the “Copy items into destination group’s folder (if needed)” option is checked and that your Cocos2DSimpleGame target is selected.

Second, open HelloWorldScene.m. Remember, this is the code for the screen with the spinning Cocos2D logo, and this will be a nice spot to start building the game. Take a look at the template code before you modify it:

@implementation HelloWorldScene {
    // 1
    CCSprite *_sprite;
}

- (id)init {
    // 2
    self = [super init];
    if (!self) return(nil);
    
    // 3
    self.userInteractionEnabled = YES;
    
    // 4
    CCNodeColor *background = [CCNodeColor nodeWithColor:[CCColor colorWithRed:0.2f green:0.2f blue:0.2f alpha:1.0f]];
    [self addChild:background];
    
    // 5
    _sprite = [CCSprite spriteWithImageNamed:@"Icon-72.png"];
    _sprite.position  = ccp(self.contentSize.width/2,self.contentSize.height/2);
    [self addChild:_sprite];
    
    // 6
    CCActionRotateBy* actionSpin = [CCActionRotateBy actionWithDuration:1.5f angle:360];
    [_sprite runAction:[CCActionRepeatForever actionWithAction:actionSpin]];
    
    // 7
    CCButton *backButton = [CCButton buttonWithTitle:@"[ Menu ]" fontName:@"Verdana-Bold" fontSize:18.0f];
    backButton.positionType = CCPositionTypeNormalized;
    backButton.position = ccp(0.85f, 0.95f); // Top Right of screen
    [backButton setTarget:self selector:@selector(onBackClicked:)];
    [self addChild:backButton];

    return self;
}

Let’s go over this step-by-step:

1. Declare a private instance variable for the sprite for the Cocos2D logo, makes it easy to access the sprite later on.
2. Initialization of the HelloWorld scene.
3. This is how you configure a scene to receive touch events in Cocos2D. This means that the touchBegan:withEvent: method will be called, which you’ll see later on in this file.
4. Creates a CCNodeColor, which is simply a node that displays a single color (dark gray in this case). Once this node is created, it needs to be added to the scene with the addChild: method so you can see it. Now your scene has a background color!
5. Create a CCSprite with the spriteWithImageNamed: method to load the image resource. The position of the sprite is set to the center of the screen by using the dimensions of the screen. Again this needs added to the scene using the addChild: method.
6. Create a CCActionRotateBy action that will be used to spin the sprite 360 degrees and using the CCActionRepeatForever to repeat the rotation action. This action is then applied to the sprite using the runAction method. Actions are a very powerful feature of Cocos2D that will be discussed later.
7. Create a CCButton that will navigate back to the IntroScene when clicked, you can be use this as a simple way to restart the scene.

OK, great! As a first step, let’s replace the spinning Cocos2D logo with a spinning ninja instead.

How do you think you’d do that? Here are some hints:

• Have a look in the ResourcePack that you recently added to the project to find the ninja image.
• You only have to modify one line of code!

Try and do it yourself if you can, but if you get stuck here’s the solution:

[spoiler]

// 5
_sprite = [CCSprite spriteWithImageNamed:@"player.png"];

[/spoiler]

That was easy, _sprite is a pretty obvious name however it may get a little confusing if you start using _sprite1, _sprite2 so change the name _sprite to _player. Find the first entry in @implementation:

@implementation HelloWorldScene {
    // 1
    CCSprite *_sprite;
}

And change this to:

@implementation HelloWorldScene {
    // 1
    CCSprite *_player;
}

Shortly after you do this, Xcode will flag the code as having 5 errors and highlight these lines in red. No need to worry, it’s just informing you that _sprite is not longer valid as you renamed the object to _player. So go ahead and change all the other _sprite references to _player.

Let’s see what ninjas do when they are not fighting monsters, build and run the project.

The spinning Cocos2D logo is now replaced with a spinning ninja. Thankfully ninjas can not get dizzy.

However, a ninja does train their entire life for combat, so next you will want to add some monsters to challenge your ninja!