Programming iPhone Games with Cocos2D Part 1

Hi,
I want to talk about cocos2d since I really think this is an amazing graphics and sound engine especially for small games like run&jump games or shooters.

Cocos2D is meant to display 2D content only but for most games this is enough. Use some parallax layers to visually update your 2D to 2.5D, or if you want to create real 3D games use unity3D.

If you want to start with cocos2d just download the current version here and seek for the install bash script to install the templates. Once you’ve done that you could start by creating a new Project in XCode and choose “cocos2d 0.99.0 Application”. In this case I give it the name “MyCocosGame”. After the project has been created you will find the start of everything in “MyCocosGameAppDelegate.m”.

Since version 0.9 alpha all the cocos2d stuff starts with CC prefix. Here some quick cocos2d classes you should know about:

CCDirector

This class directs the render process, handles scheduled timers and display settings. You could say this is the heart of cocos2d. To start up cocos2d you need to set a pixelformat, attach it to a UIWindow class and startup a CCScene which will lead us to the next important class.

CCScene

A Scene basically is a layer with all the content you want to render in it. You could use transition effects to blend from one scene to another (like crossblend, roll-in, etc.). CCDirector uses a stack of scenes so you can push and pop scenes to easily define a menue structure. But I recommend not to use this feature with many scenes since this could use lots of memory. Instead of “pushScene” and “popScene” use “replaceScene” which will release the current scene after the transition is done.

CCNode

CCNode is the root node of everything you can transform. So CCScene is basically a CCNode ( well if you look into the code you well see that actually CCScene is a CCLayer, but then CCLayer is a CCNode ). You could do interesting stuff with CCNodes like scaling, positioning and you can add child nodes to nodes. Nodes also have “anchorPoints” – others may call them “pivots”. Anchors could be inside the content ( between 0 and 1) or outside (like -1 and +2).
The most interesting feature is to transform points to local coordinates and vice versa.

CCSprite

Sprites are a known feature and you will find every thing you expect from it. Simpliest way to create one is to call within a Scene :

CCSprite * mySprite = [CCSprite spriteWithFile:@"myFile.png"];
mySprite.position = CGPointMake(160, 240);
mySprite.rotation = 45; // Degrees
[self addChild:mySprite];

You could create animated sprites and even more impressive are actions you could apply to them (actually to all CCNodes). Since this is a first introduction I will explain how to create animated sprites later.

CCAction

In my humble opinion actions are the most impressive thing in cocos2d. You can create complex actions and assign them to any node. There are half a dozen actions so I will introduce just a few.

Here is an example how to use them :

CCSprite * tveffect = [CCSprite spriteWithFile:@"televisionStreak.png"]; 
ccBlendFunc additiveBlendFunction = {GL_SRC_ALPHA, GL_ONE};
tveffect.blendFunc = additiveBlendFunction;
 
tveffect.position = ccp(160,0);	
[tveffect setOpacity:0];
 
id fadeAction = [CCSequence actions:
				 [CCFadeTo actionWithDuration:0.5 opacity:255],
				 [CCDelayTime actionWithDuration:1.0],
				 [CCFadeTo actionWithDuration:0.5 opacity:0],
				 nil];
 
id moveAction = [CCSequence actions:
				 [CCMoveTo actionWithDuration:0 position:ccp(160, 0)],
				 [CCMoveTo actionWithDuration:2 position:ccp(160, 480],
				 nil];
 
[tveffect runAction:[CCRepeatForever actionWithAction: [CCSpawn actions:fadeAction,moveAction, nil]]];

For the first introduction this should be it. In the next chapter I will talk about how to handle touch events and further more how to create your first menu.