Post on 30-Nov-2014
description
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