Step by Step Tutorial on Cocos2d-Android game Development: Part-1

Developing game is a real fun. Recently I was working with cocos2d-android engine. I think it’s a very cool game developing engine. In this text I will introduce you to the essential building block of cocos2d-android game engine.

The Cocos2d Scene

A scene is a more or less independent piece of game workflow. You may call it screen or stage. Your game may have multiple scenes. For example – Splash screen, Menu, Level, High scores screen etc.

Scene is implemented by CCScene class.

In the most cases CCScene doesn’t contain any game specific code and is rarely sub-classed. Normally it holds children which are derived from CCLayer which contain in turn contain the individual game objects. Most often Scene is created inside CCLayer Object in a static method.  Example-

public class MyGameLayer extends CCLayer {

public static CCScene scene(){
CCScene scene = CCScene.node();
CCLayer layer = new MyGameLayer();
scene.addChild(layer);
return scene;
}

public MyGameLayer() {

// my game specific codes

}
}

 

Director

The director is the component which takes care about going back and forth between scenes.  The Director is a shared object. It is implemented singleton. It knows everything, like which scene is currently active etc. More generally it holds stack of scene. Any replacement of scene is made by Director. It is implemented by CCDirector class.

The Major Responsibility of CCDirector is –

1. Providing access to the currently running scene
2. Running, replacing, pushing and popping scene
3. Proving access of cocos2d-android configuration details
4. Pausing, resuming, and ending game
5. Determining how game state is updated.

We can change currently active scene via

CCDirector.sharedDirector().runWithScene(CCScene scene);

CCDirector.sharedDirector().replaceScene(CCScene scene);

CCDirector.sharedDirector().pushScene(CCScene scene);

 

Layer

Sometimes you need more than one layer in your scene. In that case you can add more CCLayer object to your scene. It helps you organize the scene. For example – background, top, bottom etc. Layers are basically a grouping concept.   Some layers-

CCLayer:  very basic layer of cocos2d.

CCColorLayer: A solid color rectangle, it works as CCLayer but only contains a background color.

CCMultiplexLayer:  A group of layers where only one is seen at a time.

CCMenu: Implemets simple menu

Sprite

A cocos2d sprite is like any other computer sprite. It is a 2D image that can be moved, rotated, scaled, animated etc.

CCSprite is implementation of it. It can have other sprite as children. When parent is transformed, all the other children are transformed as well.

Creating a sprite is very simple. You have to add the image file to the asset folder of your project. And the code is very straight forward.

CCSprite mySprite = CCSprite.sprite("mySprite.png");

addChild(mySprite);

The default position of sprite is 0, 0 that means it will be positioned at the lower-left corner of the screen.

CCSpirite is subclass of CCNode, they can be transform manually or using actions.

Anchor Point

Anchor point is quite confusing term in cocos2d. I think I would better give more detail on it make it clear.

We know CCLayer, CCSprite etc. are derived class of CCNode. CCNode has two special property, anchorPoint_ and position_

When we draw something, cocos2d will combine both properties.

By default the anchorPoint_ property is set at 0.5f, 0.5f or in other word at the center.

More simply, we can say the _anchorPoint is an offset of the texture relative to the node’s positions. Setting our _anchorPoint to 0, 0 effectively places the texture’s lower left corner at the node’s position. Let see some example_

First example-

CCSprite mySprite = CCSprite.sprite("cocos2d.png");

mySprite.setPosition(CGPoint.ccp(0, 0));

mySprite.setAnchorPoint(CGPoint.ccp(0, 0));

addChild(mySprite);

Position: 0, 0

AnchorPoint: 0, 0

2^nd example-

CCSprite mySprite = CCSprite.sprite("cocos2d.png");

mySprite.setPosition(CGPoint.ccp(0, 0));

mySprite.setAnchorPoint(CGPoint.ccp(0.5f, 0.5f));

addChild(mySprite);

Position: 0, 0

AnchorPoint: 0.5f, 0.5f

3^rd example- 

CCSprite mySprite = CCSprite.sprite("cocos2d.png");

mySprite.setPosition(CGPoint.ccp(0, 0));

mySprite.setAnchorPoint(CGPoint.ccp(-1, -1));

addChild(mySprite);

Position: 0, 0

AnchorPoint: -1, -1

When rotating, we need to be very careful as it can give us very weird results.  More so when using irregular anchor points such as CGpoint.ccp(0,0).

Don’t change anchor point unless it is very necessary.

 

This is all about for today. Stay tuned for more tutorial.