iOS Game Development with Cocos2D

iOS Game Development
with Cocos2D

Yaron Karasik
yaronkarasik@gmail.com @Greenwell
Thursday, June 21, 12

iOS Game Development
with Cocos2D

Part 1: Why Cocos2D?
Part 2: Cocos2D Basics
Part 3: Let’s build a Cocos2D game


Part 1:
Why Cocos2D?


Meet Cocos2D for iPhone
★ Open source iOS game development framework
★ Developed by Ricardo Quesada, acqui-hired by
Zynga (2011)
★ Stable v1.1 Based on OpenGL ES 1.1
★ Beta v2.0 Based on OpenGL ES 2.0
★ 3,500+ iOS games shipped


The Cocos2D Family

Cocos3D
(Obj-C)

Cocos2d-Android
(Java)
Cocos2d-Mac
Cocos2d-X (Obj-C)
iPhone/Android (C++)

Cocos2d-XNA Cocos2d-HTML5
Windows Phone 7 (C#) Web (Javascript)


Proven Success


Great Effort-Flexibility Balance

Direct OpenGL/
100 CoreGraphics
Effort

Cocos2D/Sparrow

Unity/Corona
0
Flexibility


Cross Device, Cross Resolution


Active Ecosystem


And most importantly..
Tons of great features for games

Sprite Sheets Scene Transitions Parallax Scrolling

Effects: Actions:
Tile Map Support
Lense, Ripple, Wave.. Move, Rotate, Scale..

Particle Systems Integrated Physics Engines Text Rendering

Ribbons Shaders (v2.0) Sound Support


Part 2:
Cocos2D Basics


Basic Cocos2D Concepts
Director


Director

Scenes


Director

Scenes

Layers


Director

Scenes

Layers

Sprites


Director & Scenes
Director Loss

Intro Main Menu Level I Level 2 Victory

Options

High Scores

★ Game made up of “game screens” called Scenes
★ Each Scene can be considered a separate app
★ Director handles main window and executes Scenes


Layers

★ Each Scene contains several full screen Layers
★ Layers contain Sprites which are the game elements
★ Layers useful for Controls, Background, Labels, Menus.


Nodes

Nodes are anything that gets drawn or contains
things that get drawn (= Scene, Layer, Sprite)
Can: ★ Contain other Nodes
★ Schedule periodic callbacks
★ Execute Actions


Sprites in Action

Create

CCSpriteFrame* spriteFrame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:@"sprite.png"];

CCSprite* sprite = [CCSprite spriteWithSpriteFrame:spriteFrame];


Sprites in Action
winSize.height

Add to Layer

(x,y) at anchor point

winSize.width
(0,0)
sprite.position = ccp(x, y);

[layer addChild:sprite z:5 tag:666];


Sprites in Action

Move

CCMoveTo *moveToAction = [CCMoveTo actionWithDuration:duration
position:newPosition];

[sprite runAction:moveToAction];

Properties can be transformed directly or through actions

Sprites in Action

Scale/Rotate

CCScaleTo *scaleToAction = [CCScaleTo actionWithDuration:duration scale:scale];
CCRotateBy *rotateByAction = [CCRotateBy actionWithDuration:duration angle:angle];

CCSequence *sequence = [CCSequence actions:scaleToAction, rotateByAction, nil];

[sprite runAction:sequence];


Sprites in Action

Animate

CCAnimation* animation = [[CCAnimationCache sharedAnimationCache]
animationByName:@"animation"];
CCAnimate* animateAction = [CCAnimate actionWithAnimation:animation];

[sprite runAction:animateAction];


Sprites in Action

Schedule Updates

[scene schedule:@selector(updateSprite:) interval:interval];


Actions
Can be performed on Sprites or any Node

Basic Move, Scale, Rotate, Bezier, Hide, Fade, Tint..

Composition Sequence, Repeat, Spawn, RepeatForever..

Ease Ease, EaseExponential, EaseBounce..

Effects Lens, Liquid, Ripple, Shaky, Twirl, Waves..

Special CallFunc, Follow..


Spritesheets

★ Added as a child to the layer
★ Created with TexturePacker or Zwoptex
★ Memory considerations, 16bit images, .pvr.ccz


Controls

- (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;

★ Implement directly based on CCStandardTouchDelegate
★ Can use UIGestureRecognizer classes
★ Open source implementations of joypad/buttons available


Part 3:
Let’s Make a Game!


Part 3:
Let’s Make a Game!
..but ﬁrst we need a story, graphics, music and sfx :)


Para-Shoot

Because he likes to kill paratroopers


Graphics

Benjamin Radchek Sprites by The_Protoganist and _Allen_
http://www.freewebs.com/teh_pro/sprites.htm


Music & SFX

Background music, shoot sound, death sound

Explosive Attack by McTricky @ Sakari Inﬁnity
http://www.sakari-inﬁnity.net/author/McTricky


Sneak Peek


Steps for making Para-Shoot
Application Setup
Step 1: Adding Background
Step 2: Adding Our Hero
Step 3: Adding Bad Guys (Game Logic)
Step 4: Killing Bad Guys (Adding UI)
Step 5: Check for Bad Guy Death
Step 6: Animating Our Hero
Step 7: Animating Bad Guys Dying
Step 8: Adding Body Count
Step 9: Adding Sound & Music


New Cocos2D Project


HelloWorldScene.h
@interface HelloWorldLayer : CCLayer
{
! // Player sprite
! CCSprite *_player;

// Target and bullet sprite arrays
! NSMutableArray *_targets;
NSMutableArray *_bullets;

! // Body count counter and isShooting flag
int _bodyCount;
BOOL _isShooting;
!
! // For body count label
! CCLabelTTF *_labelTitle;
! CCLabelTTF *_labelCount;
}


HelloWorldScene.m

// Create the new scene including this layer
+(id) scene
{
! // Create the scene
! CCScene *scene = [CCScene node];
!
! // Create the layer
! HelloWorldLayer *layer = [HelloWorldLayer node];
!
! // add layer as a child to scene
! [scene addChild: layer];
!
! // return the scene
! return scene;
}


Hello World



(In init)

// Get the window size to place elements
CGSize winSize = [[CCDirector sharedDirector] winSize];

// Add the background image
CCSprite *background = [CCSprite spriteWithFile:@"background.png"];
background.position = ccp(winSize.width/2, winSize.height/2);
[self addChild:background z:0];


Preload the spritesheet

(In init)
// Load the sprite sheet
CCSpriteBatchNode *batchNode = [CCSpriteBatchNode
batchNodeWithFile:@"parashoot.pvr.ccz"];
[self addChild:batchNode];

// Load the sprites into the shareSpriteFrameCache
[[CCSpriteFrameCache sharedSpriteFrameCache]
addSpriteFramesWithFile:@"parashoot.plist"];


Add the hero sprite

// Add the player sprite
CCSpriteFrame* playerFrame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:@"player_01.png"];

_player = [CCSprite spriteWithSpriteFrame:playerFrame];
_player.position = ccp(_player.contentSize.width/2 + 10, winSize.height/2);

[self addChild:_player z:1];


Schedule a new target every second

(in init)

[self schedule:@selector(addTarget:) interval:1.0f];


Create a sprite for the target

// Create a new enemy
-(void)addTarget:(ccTime)dt {

// Create the target sprite
CCSpriteFrame *targetFrame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:@"target.png"];
!CCSprite *target = [CCSprite spriteWithSpriteFrame:targetFrame];

// Add the target to the layer and the array
! [self addChild:target];
! [_targets addObject:target];


Generate a random x position for the target

! // Determine where to spawn the target along the X axis
! CGSize winSize = [[CCDirector sharedDirector] winSize];

// Find a random X for the target in the right half of the screen
! int minX = winSize.width/2;
! int maxX = winSize.width - target.contentSize.width;
! int rangeX = maxX - minX;
! int actualX = (arc4random() % rangeX) + minX;
target.position = ccp(actualX, 320);
target.anchorPoint = ccp(0, 0);

! // Determine speed of the target
! int minDuration = 2.0;
! int maxDuration = 4.0;
! int rangeDuration = maxDuration - minDuration;
! int actualDuration = (arc4random() % rangeDuration) + minDuration;


Create a move action for the target with a
callback when reaching the bottom

// Create and run the actions
CCMoveTo* moveTarget = [CCMoveTo actionWithDuration:actualDuration
! ! ! position:ccp(actualX, -target.contentSize.height/2)];
CCCallFuncN* actionForTargetMoveDidFinish = [CCCallFuncN
actionWithTarget:self selector:@selector(targetMoveFinished:)];

[target runAction:[CCSequence actions:moveTarget, actionForTargetMoveDidFinish, nil]];


Add the callback method for a target that
dies or reaches the bottom

// Method for removing a target that has died or reached the
bottom

-(void)targetMoveFinished:(id)sender {
! CCSprite *target = (CCSprite *)sender;
[self removeChild:target cleanup:YES];
! [_targets removeObject:target];
}


Detect the touch

- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
! // Choose one of the touches to work with
! UITouch *touch = [touches anyObject];
! CGPoint location = [touch locationInView:[touch view]];
! location = [[CCDirector sharedDirector] convertToGL:location];
!
if (!_isShooting) {
_isShooting = YES;


Create the bullet

// Create the bullet
CCSpriteFrame* bulletFrame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:@"bullet.png"];
CCSprite* bulletSprite = [CCSprite spriteWithSpriteFrame:bulletFrame];
bulletSprite.position = _player.position;

// Bullet actions
CCCallFuncN* actionForRemoveBullet = [CCCallFuncN actionWithTarget:self
selector:@selector(removeBullet:)];
CCMoveBy* bulletMoveBy = [CCMoveBy actionWithDuration:1.0f
position:ccp(winSize.width, 0)];
[bulletSprite runAction:[CCSequence actionOne:bulletMoveBy
two:actionForRemoveBullet]];

// Add bullet to layer and array
[self addChild:bulletSprite];
[_bullets addObject:bulletSprite];



-(void)update:(ccTime)dt {
CCSprite* bulletToRemove = nil;

for (CCSprite *bullet in _bullets) {
for (CCSprite* target in _targets) {
CGRect targetBox = CGRectMake(target.position.x, target.position.y,
[target boundingBox].size.width, [target boundingBox].size.height);

// Check if bullet is in the target's bounding box
if (CGRectContainsPoint(targetBox, bullet.position)) {

// Animate target death and remove target

bulletToRemove = bullet;
}
}
}

// Remove bullet if target was hit
if (bulletToRemove != nil) {
[self removeChild:bulletToRemove cleanup:YES];
[_bullets removeObject:bulletToRemove];
}
}


Preload the animation from the spritesheet

(In init)

// Load the animation for player
NSMutableArray *animFrames1 = [NSMutableArray array];
for (int i = 1; i < 12; i++) {
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:
[NSString stringWithFormat:@"player_%02d.png",i]];
! [animFrames1 addObject:frame];
}

[[CCAnimationCache sharedAnimationCache] addAnimation:[CCAnimation
animationWithFrames:animFrames1 delay:FRAME_DELAY] name:@"player"];!


Animate the hero when shooting

(In ccTouchesEnded)

// Actions for shooting animation
CCCallFunc* actionForShootDidEnd = [CCCallFunc actionWithTarget:self
selector:@selector(shootDidEnd)];

CCAnimation* playerShootAnimation = [[CCAnimationCache sharedAnimationCache]
animationByName:@"player"];
CCAnimate* shootAnimate = [CCAnimate actionWithAnimation:playerShootAnimation];

[_player runAction:[CCSequence actionOne:shootAnimate two:actionForShootDidEnd]];



(in update)

// Set up actions for animation and target removal
CCCallFuncN* actionForDeathDidFinish = [CCCallFuncN actionWithTarget:self
selector:@selector(targetMoveFinished:)];

CCAnimate* deathAnimation = [CCAnimate actionWithAnimation:[[CCAnimationCache
sharedAnimationCache] animationByName:@"death"] restoreOriginalFrame:NO];

[target runAction:[CCSequence actionOne:deathAnimation two:actionForDeathDidFinish]];



(In init)

NSString* bodyCountString = [NSString stringWithFormat:@"%d", _bodyCount];
_labelCount = [CCLabelTTF labelWithString:bodyCountString fontName:@"Arial"
fontSize:16];
_labelCount.color = ccc3(0,0,0);
_labelCount.position = ccp(110, winSize.height - 16);
[self addChild:_labelCount z:2];

(In ccTouchesEnded)

_bodyCount++;
NSString* bodyCountString = [NSString stringWithFormat:@"%d", _bodyCount];!
[_labelCount setString:bodyCountString];



(In init)

! // Start background music, set lower volume

! SimpleAudioEngine.sharedEngine.backgroundMusicVolume = 0.4f;
! [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"explosive_attack.mp3"];

(In ccTouchesEnded)

! // Play sound effect on every shot and on death

! [[SimpleAudioEngine sharedEngine] playEffect:@"shot.wav"];
! [[SimpleAudioEngine sharedEngine] playEffect:@"death.wav"];


Let’s Play!


Para-Shoot 2.0

Enemies can move and attack
Joypad + HUD
Move our hero
Different weapons, power ups and health
Game menu and high scores
Levels
Save/Load Game
Refactor code (More scenes and layers)


Refactoring Para-Shoot

Scenes: Loss

Intro Main Menu Level X Victory

Options

High Score

Layers:
Level X Background Player Bad Guys Joypad/HUD


More stuff to explore

★ Physics Engines - Chipmunk and Box2D
★ Particle System
★ Tilemaps
★ Menu Interface


Where can you learn more

Cocos2D Demo Library (Comes with Cocos)

Wiki: http://cocos2d-iphone.org/wiki

Ray Wenderlich: http://www.raywenderlich.com

Steffen Itterheim: http://learn-cocos2d.com

Sapus Tongue Source Code: http://www.sapusmedia.com/sources


Thank You!
Yaron Karasik
yaronkarasik@gmail.com
@Greenwell


iOS Game Development with Cocos2D

Recommended

More Related Content

Viewers also liked (20)

Similar to iOS Game Development with Cocos2D (20)

Recently uploaded (20)

iOS Game Development with Cocos2D