Writing Your First Cocos2d iPhone Code

by Ben on Mar.04, 2010, under Cocos2D, Code Samples

If you’re like me, you’re probably dying to jump in and start writing some code. We’re about to do just that. By the end of this tutorial, you’ll be able to display a background, graphics and some text. Certainly nothing we really need Cocos2d for, but the few things you’ll learn in this tutorial will form the basis for most of your future code, so it’s worth getting them right at the beginning. If you just want to see the code, jump to the end of the article for the link.

The first thing to do is to boot up Xcode and create a new Cocos2d for iPhone project. If you haven’t installed the templates yet, you can follow the directions here. Create a regular Cocos2d project from the template (not with Chipmunk or Box2d). Once this is done, go into the Classes folder and remove the HelloWorldScene files, we won’t be needing them.

We’re going to have three layers in this project, a background layer, a sprite layer and a text layer. So go ahead and add three new files to your project, and name them BackgroundLayer, SpriteLayer, and TextLayer. We’re also going to need a scene to hold these layers, so create a new file called GameScene. Of course, don’t forget to create the .h files as well. Once you’ve done all that, your project should look something like this:

Files

First we’re going to create our background layer. Open up BackgroundLayer.h, import the cocos2d headers, and make sure the object inherits from CCLayer. You may as well complete these steps in SpriteLayer.h and TextLayer.h as well. Your layer header files should now look like this

#import "cocos2d.h"
@interface BackgroundLayer : CCLayer {
}
@end

We’re only going to write one method in the implementation files for now, which will be the init method. I’ll show the code first, and then we can go through it:

#import "BackgroundLayer.h"
@implementation BackgroundLayer
- (id) init
{
self = [super init];
if (self != nil) {
//load image file
CCSprite *background = [CCSprite spriteWithFile:@"background.png"];
//get the current screen dimensions
CGSize size = [[CCDirector sharedDirector] winSize];
//place the image in the center of the screen
background.position = ccp(size.width/2, size.height/2);
//add the sprite object to the layer
[self addChild:background];
}
return self;
}
@end

The code should be fairly self explanatory. Basically we are just loading an image file and placing it in the center of the layer. The only thing that might not be familiar is “ccp”, with is a Cocos2d method for creating a point. If you need a background image, you can find one here. Make sure you include the file in your project as you normally would.

Next we’ll implement the SpriteLayer. This is going to be very similar to the BackgroundLayer, except this time we will place the image off to the left of the screen. The X and Y axes in Cocos2d start from the bottom left corner, not the top left, where as sprites work from the center of the image. So by placing the image at position 150, 150, we are effectively saying “place the center of the image 150 pixels up from the bottom of the screen, and 150 pixels across from the left”. Once we’ve got the code up and running, change the position of the image a few times to get a better understanding of this. If you can’t manage to find your own image, here is the one we used.

#import "SpriteLayer.h"
@implementation SpriteLayer
- (id) init
{
self = [super init];
if (self != nil) {
//load image file
CCSprite *robot = [CCSprite spriteWithFile:@"robot.png"];
//place the image to the left of the screen
CGSize size = [[CCDirector sharedDirector] winSize];
robot.position = ccp(150, size.height/2);
//add the sprite object to the layer
[self addChild:robot];
}
return self;
}
@end

Next, we’ll create the last layer. Rather than showing an image this layer will display some text. If you’ve used UILabels at all, which I’m sure you have, then CCLabels will be look quite familiar. Here’s the implementation for the TextLayer:

#import "TextLayer.h"
@implementation TextLayer
- (id) init
{
self = [super init];
if (self != nil) {
CCLabel* myLabel = [CCLabel labelWithString:@"Dance Like A Robot" dimensions:CGSizeMake(100,100) alignment:UITextAlignmentCenter fontName:@"Arial" fontSize:30];
CGSize size = [[CCDirector sharedDirector] winSize];
myLabel.position = ccp(360, size.height/2);
[self addChild:myLabel];
}
return self;
}
@end

Now that we’ve created our three layers, we can tie them together in our scene class. This is a fairly simple matter of adding each layer to the scene. Here’s the implementation, don’t forget to also import the cocos2d header files and inherit from the CCScene class in the GameScene.h file.

#import "cocos2d.h"
@interface GameScene : CCScene {
}
+(id)scene;
@end

#import "GameScene.h"
#import "BackgroundLayer.h"
#import "SpriteLayer.h"
#import "TextLayer.h"
@implementation GameScene
+(id)scene {
// ’scene’ is an autorelease object.
CCScene *scene = [CCScene node];
// ‘layer’ is an autorelease object.
BackgroundLayer *backgroundLayer = [BackgroundLayer node];
SpriteLayer *spriteLayer = [SpriteLayer node];
TextLayer *textLayer = [TextLayer node];
// add layers as a children of the scene
[scene addChild:backgroundLayer];
[scene addChild:spriteLayer];
[scene addChild:textLayer];
// return the scene
return scene;
}
@end

As you can see, we simply create each of the layers and then add them as children to the scene. The order you add them in is important, so if you add the background last you won’t see the other two layers. One other thing you might be unsure of is the call to “node” when creating the layers. You can pretty much call “node” on any Cocos2d object and it will create a new instance of it. So if you call “node” on a CCLayer, it creates a new CCLayer. If you call “node” on a CCSprite, it returns a new CCSprite. Think of it as a bit like calling alloc/init on your normal Objective C objects.

Finally, to get everything up and running we need to modify the app delegate a bit. Change the imports so that we’re importing “GameScene.h” rather than “HelloWorldScene.h”, and then change the last line of the applicationDidFinishLaunching method accordingly. Note that we are telling the CCDirector that we want to start running with the GameScene. Later on we’ll learn how to set up a menu, and call different scenes at different times.

[[CCDirector sharedDirector] runWithScene: [GameScene scene]];

You should now be able to build and run to see your beautiful creation. Once you’re done, play around with the positioning numbers a bit, or add some new sprites. You should now have the very basics of starting your Cocos2d project covered.