iOS gaming with cocos2d

Prepared by Ngo Duc Hiep

Copyright 2011 PTT Solution ., JSC. All rights reserved.

Hanoi, May 2011

iOS game engines

Sparrow

Galaxyoolong

cocos2d

iOS game engines

Corona

iTorque

Game salad

Unity

iOS game engines

http://maniacdev.com/2011/01/open-source-and-commercial-ios-game-engine-listings-updated/

http://maniacdev.com/2009/09/the-commercial-iphone-game-engine-comparison-3d-and-2d/

cocos2d games

Tap Pet Hotel: #1 Free

Tap Zoo: #2 Free

Zombie Farm: #6 Free

iStunt 2: #6 Free

cocos2d games

Trainyard: #2 Paid

ZombieSmash: #1 Paid

Air Penguin: #1 Paid

Fishing Frenzy: #7 Paid

cocos2d

App workflow

Loading Home

Leaderboard

Game Play

Settings

App workflow

CCScene

CCDirector: run, push, pop replace scene

[[CCDirector sharedDirector] runWithScene:loading];

[[CCDirector sharedDirector] replaceScene:home];

CCTransition: transition between scenes

CCLayer

CCLayer

Handle event

isTouchEnabled_

isAccelerometerEnabled_

Game controller

Mange game entities - CCNode

CCNode

Renderable item

CCLayer, CCScene are all nodes

Features

Contains another nodes

Schedule timer

Play actions

Position/rotation/scale/contentSize

CCSprite

Sprites

Texture

CCNode: CoordinatecontentSize.width

conte

ntS

ize.h

eig

ht

CCNode: Coordinate

rotation

positio

nanchorPoint

CCNode: Coordinate

CCNode: Transformation

- (CGAffineTransform)nodeToParentTransform;

- (CGAffineTransform)parentToNodeTransform;

- (CGAffineTransform)nodeToWorldTransform;

- (CGAffineTransform)worldToNodeTransform;

- (CGPoint)convertToNodeSpace:(CGPoint)worldPoint;

- (CGPoint)convertToWorldSpace:(CGPoint)nodePoint;

CCNode: Actions

Modify node’s attributes by time

position/rotation/scale/opacity/grid

Interval actions and Instant actions

CCNode: Actions

CCMove_

CCJump_

CCBezier_

CCScale_

CCRotate_

CCFade_

CCNode: Actions

Time alter actions:

• CCEase_

• CCEaseExponential_

• CCEaseSine_

• CCEaseElastic_

• CCEaseBounce_

CCNode: Special actions

CCCallFunc

CCCallBlock

CCPropertyAction

CCFollow

CCSequence

CCSpawn

CCRepeat

CCNode: 3D Effects

CCFlipX3D/CCFlipY3D

CCWaves3D

CCRipple3D

CCSplitRows

…

CCSprite: Animation

CCSprite: Animation

CCNode: Scheduler

-(void) schedule: (SEL) s interval:(ccTime)seconds;

-(void) unschedule: (SEL) s;

-(void) pauseSchedulerAndActions;

-(void) resumeSchedulerAndActions;

Touch Dispathcher

CCTouchDispathcher

-(void) addStandardDelegate:(id) delegate priority:(int)priority;

-(void) addTargetedDelegate:(id) delegate priority:(int)priority swallowsTouches:(BOOL)swallowsTouches;

-(void) removeDelegate:(id) delegate;

Box2D

Features

Rigid body Fixture: rectangle, circle, poligon

Joint

Contact filter

Contact listener

Simulate

world->Step(dt);

cocos2d Box2D

Body, joint, fixture user data

for (b2Body* b = world->GetBodyList(); b; b = b->GetNext())

{

if (b->GetUserData() != NULL) {

CCSprite *actor = (CCSprite*)b->GetUserData();

actor.position = CGPointMake( b->GetPosition().x , b->GetPosition().y);

actor.rotation = -b->GetAngle() * 180 / M_PI;

}

}

Car

Cocos2d

ccCarBody

ccCarWheel1

ccCarWhell2

Box2D

b2CarBody

b2CarWheel1

b2CarWhell2

b2CarJoint1

b2CarJoint2

cocos2d+ext

CCNode+ext

Transform

- (CGAffineTransform) nodeToNodeTransform:

(CCNode *) node;

- (CGAffineTransform) nodeFromNodeTransform:

(CCNode *) node;

CCNode+ext

Transform

Collision

- (CGRect) rect;

- (BOOL) isCollideWithNode:(CCNode *) node;

CCNode+ext

Transform

Collision

Containing

- (BOOL) containsPoint:(CGPoint) loc;

- (BOOL) containsTouch:(UITouch *) touch;

CCSprite+ext - (CCAction *) animateFramesWithKey:(NSString *) key

startIndex:(int) start

endIndex:(int) end

duration:(float) duration

reverse:(BOOL) reverse

forever:(BOOL) forever;

CCComponent

Independent, portable

States control

Data driven

Callbacks

Physics support

Composition

CCComponent

Data

Texture file

Texture def file

Component def fileStatesChilds

CCComponent

States

Animate frames

Rotate

Scale

Fade

CCComponent

Lion_jump_1.png

Lion_jump_4.pngLion_jump_3.png

Lion_jump_2.png

CCComponent

Lion “jump” state:

key=Lion_jump_

type=frame

startframe=1

endframe=4

duration=0.1

forever=NO

lion.state = @”jump”;

CCComponent

- (void) setState:(NSString *) state;

- (void) setState:(NSString *) state target:(NSString *) target selector:(SEL) selector;

- (void) spawnStates:(NSString *) state1,…;

- (void) setStateSequence:(NSString *) state1, …;

CCLayer+ext

Actors group addChild:(CCNode *) child group:(int) gid; removeChild:(CCNode *) child group:(int) gid;

CCLayer+ext

Contacts listener addContactListenerBetweenGroup:(int) g1 andGroup:(int)

g2 selector:(SEL) listener;

- (void) hero:(Hero *) hero collideWith:(Bullet *) bullet{

hero.blood -= bullet.effect;

[bullet explode];

}

CCLayer+ext

Touch helper - (CGPoint) pointForTouches:(NSSet *) touches; - (CGPoint) pointForTouch:(UITouch *) touch; - (CCNode *) getActorAtPoint:(CGPoint) pos; - (CCNode *) getActorAtTouch:(UITouch *) touch;

Tools

Texture: texturetool, TexturePacker, Zwoptex

Tile map editor: Tiled

SVG editor: Inkscape, svg-edit Level design

Particle: Particle Designer

Font editor: Hiero

Audio: Audacity

3D: Blender

Learning resources

http://cs193p.stanford.edu

https://developer.apple.com/itunes/?destination=adc.apple.com.4092414566

http://www.71squared.com/

http://www.raywenderlich.com/

http://iphonedevelopment.blogspot.com/

http://maniacdev.com

http://iphonedev.net/

http://www.learn-cocos2d.com/

http://cocoawithlove.com/

https://github.com/hiepnd

Demo & QA