How To Enable ARC in a Cocos2D 2.X Project

Xcode At Your Service

Apple recognized that many developers would want to embrace ARC, and has provided tools to assist in the transition. Since you know the steps to do the work manually, and understand what is involved, let’s look at converting an older Cocos2D project from 1.0 to 2.x and enabling ARC support.

Note: You can use the same techniques shown in this section to take any of the older tutorials from this site written for Cocos2D 1.X, and update them to Cocos2D 2.X and ARC!

Also, you can use these techniques to convert a new project made with the Cocos2D template to enable ARC just as you did in the last section – but even easier! :]

And what better place to use your new skills than the project from the first ever Cocos2D tutorial on Ray’s website? That’s right, the Ninjas Going Pew-Pew!

Ninjas Going Pew-Pew!

Ninjas Going Pew-Pew!

You are not going to spend a lot of time going over the ins and outs of the game itself, as the original tutorial does this wonderfully. Instead, you are going to focus on the necessary steps to get it working with Cocos2D v2.x, and then enabling ARC.

To save time, download the source project from here.

Extract the ZIP file to a convenient location. You will selectively grab pieces from this project and add them to the new converted version of the game that you will create.

Start up Xcode and create a new project using the iOS\Cocos2D v2.x\Cocos2D iOS template, and click Next. Name the project PewPewNinjas, set the Device Family to iPhone, click Next, choose a folder to save your project in, and click Create.

First add the game resources, including the sound effects and graphics, from the old game.

Locate the folder where you extracted the original game and open the Resources folder. Select the background-music-aac.caf file by clicking on it. Then hold down the Command key and click on ItunesArtwork, logo6.png, pew-pew-lei.caf, Player.png, Projectile.png, and Target.png. Drag these files over to your Xcode window and place the cursor right over the folder named Resources, and let go.

When the dialog box appears, make sure the Copy items into destination group’s folder is checked, and that PewPewNinjas is checked under Add to targets.

Click the Finish button. You have just copied over the graphic and sound effects into your new Cocos2D v2.x project! The Resources folder of your project should now look like this:

Build and run your application.

The application will show the same old Hello World screen, since you have not modified the code yet. It’s time to fix that!

One advantage of selectively adding files is that you can take advantage of new capabilities in the template code. This is the case in this effort, since you should be using the new AppDelegate files rather than bringing the older Cocos2D 1.x files into the project.

Once again, go to your folder with the older game code and open the Classes folder. Select all the files from GameConfig.h to HelloWorldScene.m.

Drag these files into your new Xcode project’s PewPewNinjas folder. Make sure the Copy items into destination group’s folder is checked and that PewPewNinjas is checked for Add to targets on the dialog.

Click the Finish button. Your Xcode project file view should look something like this:

You might wonder why some class files weren’t copied over. They simply aren’t needed with the new model.

Now let’s see what it will take to get PewPewNinjas running under Cocos2D 2.x by building the project again.

Xcode will complain about multiple errors. These are due to changes to the Cocos2D API since 1.x. Let’s go through and fix those issues.

First, CCColorLayer does not exist in Cocos2D v2.x, so you need to adjust the files accordingly.

Select GameOverScene.h and change the @interface line to:

@interface GameOverLayer : CCLayer {

Then, select HelloWorldScene.h and change the @interface line to:

@interface HelloWorld : CCLayer

The older CCColorLayer also allowed setting the layer’s background color using initWithColor:. You need to fix this as well. Select GameOverScene.m and change the first line in GameOverLayer’s init from:

	if( (self=[super initWithColor:ccc4(255,255,255,255)] )) {

To:

	if ((self=[super init])) {

Save your changes, then open HelloWorldScene.m. Locate the same line in HelloWorld’s init:

	if( (self=[super initWithColor:ccc4(255,255,255,255)] )) {

Change it to:

if ((self=[super init])) {

Build and run again.

Whoa, what happened? Where is your game?

The Cocos2D v2.x startup sequence begins with the AppDelegate. The AppDelegate loads the IntroLayer, which pauses for a second and then calls makeTransition, which then displays the HelloWorldLayer scene.

That is not your game code, but the standard HelloWorld scene from the template.

Select IntroLayer.m. You need to tell it about the new HelloWorldScene class and remove the import for the template’s HelloWorldLayer.h. The final #import section should look like:

// Import the interfaces
#import "IntroLayer.h"
#import "HelloWorldScene.h"

Scroll to the bottom. Replace makeTransition: with the following:

-(void)makeTransition:(ccTime)dt {
    [[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:1.0 scene:[HelloWorldScene node]]];
}

Then delete HelloWorldLayer.h and HelloWorldLayer.m from the project, since they are not needed anymore.

Build and run.

Gadzooks!!

Your ninjas and aliens move in the dark. In may be in their nature to do such a thing, but you want to keep an eye on them! What happened?

Remember how you removed the initWithColor:ccc4(255,255,255,255) bit? That set the background color and alpha modes for the scenes. Since this call does not exist in Cocos2D v2.x, the scene must be set up to using the new API calls in Cocos2D 2.x to get the white background back.

In Cocos2D v2.x, this is done using a glClearColor(r,g,b,a) call directly to the openGL view.

Since the entire game uses a white background, what better place to set this than in the AppDelegate?

Open AppDelegate.m, locate application:didFinishLaunchingWithOptions:, scroll down to where the scene is added to the director, and enter:

glClearColor(255, 255, 255, 255);  //set your background to all white for all the scenes

Build and run.

Yippee! Your game is now running under Cocos2D v2.x, and it has the right background. Go grab a drink and take five. :] When you come back, you’ll begin the process of making the game ARC-compliant!

Here is the code for the PewPewNinjas app up to this point.