cocos2d & Chipmunk2D games development for iOS

Konrad Kołakowski, Playsoft

cocos2d

What is it?

cocos2d - what was made with it?

Kingdom Rush

cocos2d - what was made with it?

Robot Unicorn Attack

cocos2d - what was made with it?

League of Evil

Chipmunk

What is it?

Chipmunk - what was made with it?

Waking Mars

Chipmunk - what was made with it?

Feed me Oil

Chipmunk - what was made with it?

I Dig It

Creating project in Xcode

1. Download cocos2d-iphone: www.cocos2d-iphone.org/download

2. If you want to comfortably creating new games, install templates for Xcode ( run this command in Terminal ):

./install-templates.sh -f -u

Creating project in Xcode

That's all, in this moment, after creating a project you should see following options:

Creating project in Xcode

As you can see cocos2d delivers Chipmunk code in theirs templates.

Beside Chipmunk there is also version with Box2D integrated, similar 2D physics.

cocos2d basics - layers, nodes

cocos2d logic is divided to scenes. Scene is a main node to which we connect next ones ( layers, sprites, particle effects etc. )

Each element added to the game ( except scenes ) have to be added to some parent element.

Podstawy cocos2d - warstwy, węzły

cocos2d basics - layers, nodes

cocos2d basics - coordinates

Coordinate system, anchor points.

cocos2d basics - adding elements

How to draw such an alien?

// GameScene.h#import "cocos2d.h"

@interface GameScene : CCScene@end

// GameScene.m

#import "GameScene.h"@implementation GameScene-(id) init {

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

// 1

CGSize s = [CCDirector sharedDirector].winSize;// 2

CCSprite* invader = [CCSprite spriteWithFile: @"invader.png"];invader.position = ccp(s.width/ 2, s.height/2);

// 3

[self addChild: invader];}

return self;}

@end

cocos2d basics - adding elements

To enable gathering touch events on our layer:

[self setIsTouchEnabled: YES];

Next we need to implement CCStandardTouchDelegate methods:

- (void)ccTouchesEnded:(NSSet*)touches withEvent:(UIEvent*)event;- (void)ccTouchesBegan:(NSSet*)touches withEvent:(UIEvent*)event;- (void)ccTouchesMoved:(NSSet*)touches withEvent:(UIEvent*)event;- (void)ccTouchesEnded:(NSSet*)touches withEvent:(UIEvent*)event;- (void)ccTouchesCancelled:(NSSet*)touches withEvent:(UIEvent*)event;

cocos2d basics - touch support

cocos2d basics - touch support- (void)ccTouchesEnded:(NSSet*)touches withEvent:(UIEvent*)event{

for( UITouch *touch in touches ) {CGPoint pos = [touch locationInView: [touch view]];

pos = [[CCDirector sharedDirector] convertToGL: location];

// Do something with position// (...)

}}

cocos2d basics - actions

Actions are a nice element of cocos2d framework. They allow to easily create uncomplicated animations or repeated logic. Especially with Obj-C blocks.

We can join actions in sequences, adding easing etc.

cocos2d basics - actions

cocos2d basics - actions

Following code will cause that our invader will turn around and move by 50 points. Everything in one second.

-(void) roll {CCMoveBy* move = [CCMoveBy actionWithDuration: 1.0f

position: ccp(50.0f, 0.0f)];

CCRotateBy* rotate = [CCRotateBy actionWithDuration: 1.0f angle: 360.0f];

[invader_ runAction: move];

[invader_ runAction: rotate];

}

cocos2d basics - actions

- creating/destroying all objects should be performed through cpSpaceNew, cpSpaceFree, cpBodyNew, etc.

- to configure and create a space:

cpSpace* space = cpSpaceNew();cpSpaceSetGravity(space, ccp(0.0f, -500.0f));

Chipmunk basics - creating a space

Chipmunk basics - physical objects

Concept of shape and body:

A body is a physical state ( mass, position, rotation... ) and shapes are used for recognizing collisions.

Creating a "floor"// 1

CGSize s = [CCDirector sharedDirector].winSize;

CGPoint lowerLeft = ccp(0, 0);

CGPoint lowerRight = ccp(s.width, 0);

float height = 20.0f;

// 2

cpBody* groundBody = cpBodyNewStatic();

// 3

cpShape* groundShape = cpSegmentShapeNew(groundBody, lowerLeft, lowerRight, height);

cpShapeSetElasticity(groundShape, 0.2f);

cpShapeSetFriction(groundShape, 1.0f);

// 4

cpSpaceAddShape(space, groundShape);

Chipmunk basics - physical objects

Creating and adding a rectangle object:

static const float boxW = 30.0f;static const float boxH = 50.0f;static const float mass = 2.5f;cpBody* body = cpBodyNew(mass, cpMomentForBox(mass, boxW, boxH));cpBodySetPosition(body, ccp(s.width/2, s.height/2));cpSpaceAddBody(space, body);

cpShape* shape = cpBoxShapeNew(body, boxW, boxH);cpShapeSetElasticity(shape, 0.8f);cpShapeSetFriction(shape, 1.0f);cpSpaceAddShape(space, shape);

Chipmunk basics - physical objects

Chipmunk basics - starting a simulation

// Inside a layer 'init' method[self scheduleUpdate];

// 'update' is called every frame-(void) update:(ccTime)dt {

cpSpaceStep(space, dt);}

Summary

Those are only the basics of those two frameworks, more things are waiting to discover!

Official documentation:chipmunk-physics.net/release/ChipmunkLatest-Docs

www.cocos2d-iphone.org/api-ref/latest-stable

Questions?

Konrad Kołakowskikonrad.kolakowski@me.com