Cocos2D: Scenes and Layers

In this tutorial we are going to use the cocos2d ARC templates, which are created by Steffen Itterheim, the author of the "Learn Cocos2d" book. Download the templates at GitHub. Unpack the templates and make a copy of the cocos2d-2.x-ARC-iOS folder. Open the cocos2d-2.x-ARC-iOS project file.

First, some theory. The CCDirector class creates and handles the main Window and manages how and when to execute the Scenes. One of the building blocks of a cocos2d app is the “scene” object. Each scene containts some game logic. For example, a title scene and a gameplay scene. Each scene contains one or more layers. For example, an Background layer and a Gameplay layer. All classes inherits from the CCNode class, which is a abstract class to change the state of Cocos2d Objects. For example, you can change the position onscreen, scale or rotate objects.

Build and Run, You can see the HelloWorld scene.

As you can see the app starts in Landscape mode. For now, we want to start in Portrait mode. Go to AppDelegate.m and change the shouldAutorotateToInterfaceOrientation: method in

// Supported orientations: Landscape. Customize it for your own needs 
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}

Next, we have some cleanup to do so we can start fresh. In the init method in HelloWorldLayer.m remove everything between the next if-statement

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

}

We want to set a background image and later on add a sprite to the current scene. Download the following zip file. Extract and copy these picture-files to the current project.

In HelloWorldLayer.m in the scene method the scene and layer object are created with the following lines of code

CCScene *scene = [CCScene node]; HelloWorld *layer = [HelloWorldLayer node];

To display a background we load the sprite from the file and add this to the layer

CCSprite *background = [CCSprite spriteWithFile:@"cartoon_landscape.png"]; 
[layer addChild:background]

Build and Run

background_sprite
background_sprite

As you can see the sprite is not centered in the middle of the screen, this is because, by default,the childnode is centered to the lowerleft of the parent node. You can fix this to change the anchorpoint with the following line. ccp is a macro to create a CGPoint.

background.anchorPoint = ccp(0,0);

Build and Run, now the background is centered right in the middle of the screen.

background_sprite_centered
background_sprite_centered

Ok, now in the init method in HelloWorldLayer.m load the goat sprite, give it a position on the screen and add this to the layer

if( (self=[super init]) ) 
{
CCSprite *goat = [CCSprite spriteWithFile:@"cartoon_goat.png"];
goat.position = ccp(250,250);
[self addChild:goat];
}

Build and Run

background_sprite_centered
background_sprite_centered

What's going on, the goat sprite isn't visible on the screen. All childs of layers have a z-index. This is a priority index to decide whether something is displayed in front of the other. the default z-index is 0 and the z-index for the background and the goat sprite is equal. Change the z-index of the background sprite in the scene method to -1. The background sprite will be placed behind the goat sprite. The scene method will now look like this

+(CCScene *) scene 
{
CCScene *scene = [CCScene node];
StartLayer *layer = [StartLayer node];

CCSprite *background = [CCSprite spriteWithFile:@"cartoon_landscape.png"];
background.anchorPoint = ccp(0,0);

[layer addChild:background z:-1];
[scene addChild: layer];

return scene;
}

Build and Run, the goat is now visible.

That's it for now.Next time, we are going to put some Actions on the sprite.