Game development with Cocos2d

iOS Game Development
with Cocos2D

SaalisUmer
saalis.umer@vinsol.com

iOS Game Development
with Cocos2D

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

Anatomy of a simple game
CPU & GPU

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)

Great Effort-Flexibility Balance

Direct OpenGL/
100 CoreGraphics

Cocos2D/Sparrow

Unity/Corona
0
Flexibility

Cross Device, Cross Resolution

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

Basic Cocos2D Concepts
Class that creates and handle the main Window
Director and manages how and when to execute the Scenes.

Creates and handle the main Window

A scene (implemented with the CCScene object) is more
Scenes or less an independent piece of the app workflow. .



A CCLayer has a size of the whole drawable Layers
area, and knows how to draw itself.



A layer has a size of the whole drawable
Layers
area, and knows how to draw itself.

It is a 2D image that can be moved, Sprites
rotated, scaled, animated, etc.

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 = [[CCSpriteFrameCachesharedSpriteFrameCache]
spriteFrameByName:@"sprite.png”];
CCSprite* sprite = [CCSpritespriteWithSpriteFrame: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 = [CCMoveToactionWithDuration:duration
position:newPosition];

[sprite runAction:moveToAction];

Properties can be transformed directly or through actions

Sprites in Action

Scale/Rotate

CCScaleTo *scaleToAction = [CCScaleToactionWithDuration:durationscale:scale];
CCRotateBy *rotateByAction = [CCRotateByactionWithDuration:durationangle:angle];

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

[sprite runAction:sequence];

Sprites in Action

Animate

CCAnimation* animation = [[CCAnimationCachesharedAnimationCache]
animationByName:@"animation"];
CCAnimate* animateAction = [CCAnimateactionWithAnimation: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!
..but first we need a story, graphics, music and sfx :)

KillTime

Because he likes to kill paratroopers

Graphics

http://www.freewebs.com/teh_pro/sprites.htm

Music & SFX

Background music, shoot sound, death sound

Steps for making KillTime
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

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

Step 1: Adding Background

(In init)

// Get the window size to place elements
CGSizewinSize = [[CCDirectorsharedDirector] winSize];
// Add the background image
CCSprite *background = [CCSpritespriteWithFile:@"background.png"];
background.position = ccp(winSize.width/2, winSize.height/2);
[self addChild:background z:0];
self.isTouchEnabled = YES; _bullets = [[NSMutableArrayalloc]init];
_targets = [[NSMutableArrayalloc]init];

Preload the spritesheet

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

// Load the sprites into the shareSpriteFrameCache
[[CCSpriteFrameCachesharedSpriteFrameCache]
addSpriteFramesWithFile:@”spritesheet.plist"];

Add the hero sprite

// Add the player sprite
CCSpriteFrame* playerFrame = [[CCSpriteFrameCachesharedSpriteFrameCache]
spriteFrameByName:@"player1.png"];

_player = [CCSpritespriteWithSpriteFrame: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 = [[CCSpriteFrameCachesharedSpriteFrameCache]
spriteFrameByName:@"target.png”];
CCSprite *target = [CCSpritespriteWithSpriteFrame: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
CGSizewinSize = [[CCDirectorsharedDirector] winSize];

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

// Determine speed of the target
intminDuration = 2.0;
intmaxDuration = 4.0;
intrangeDuration = maxDuration - minDuration;
intactualDuration = (arc4random() % rangeDuration) + minDuration;

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

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

[target runAction:[CCSequenceactions: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 = [[CCDirectorsharedDirector] convertToGL:location];

if (!_isShooting) {
_isShooting = YES;

Create the bullet

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

// Bullet actions
CCCallFuncN* actionForRemoveBullet = [CCCallFuncNactionWithTarget:self
selector:@selector(removeBullet:)];
CCMoveBy* bulletMoveBy = [CCMoveBy actionWithDuration:1.0f
position:ccp(winSize.width, 0)];
[bulletSpriterunAction:[CCSequenceactionOne:bulletMoveBy
two:actionForRemoveBullet]];
// Add bullet to layer and array
[self addChild:bulletSprite];
[_bullets addObject:bulletSprite];
_isShooting = NO;


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

for (CCSprite *bullet in _bullets) {
for (CCSprite* target in _targets) {
CGRecttargetBox = 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:bulletToRemovecleanup:YES];
[ _bullets removeObject :bulletToRemove];
}
}

Preload the animation from the spritesheet

Adding Player animation in init
(In init)

// Load the animation for player
NSMutableArray *animFrames1 = [NSMutableArray array];
for (inti = 1; i< 11; i++) {
CCSpriteFrame *frame = [[CCSpriteFrameCachesharedSpriteFrameCache] spriteFrameByName:
[NSStringstringWithFormat:@"player%d.png”,i]];
[animFrames1 addObject:frame];
}

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

Preload the animation from the spritesheet

Adding Kill animation in init
(In init)

//// Load the animation for villain kill
NSMutableArray *animFrames2 = [NSMutableArray array];
for (inti = 1; i< 8; i++) {
CCSpriteFrame *frame2 = [[CCSpriteFrameCachesharedSpriteFrameCache] spriteFrameByName:
[NSStringstringWithFormat:@"kill%d.png",i]];
[animFrames2 addObject:frame2];
}
[[CCAnimationCachesharedAnimationCache] addAnimation:[CCAnimation
animationWithFrames:animFrames2 delay:FRAME_DELAY*5] name:@"kill"];

Animate the hero when shooting

(In ccTouchesEnded)

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

CCAnimation* playerShootAnimation = [[CCAnimationCachesharedAnimationCache]
animationByName:@"player"];
CCAnimate* shootAnimate = [CCAnimateactionWithAnimation:playerShootAnimation];

[_player runAction:[CCSequenceactionOne:shootAnimatetwo:actionForShootDidEnd]];


(in update)

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

CCAnimate* deathAnimation = [CCAnimateactionWithAnimation:[[CCAnimationCache
sharedAnimationCache] animationByName:@”kill"] restoreOriginalFrame:NO];

[target runAction:[CCSequenceactionOne:deathAnimationtwo:actionForDeathDidFinish]];

Step 8: Adding Body Count

(In init)

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

(In update:)

_bodyCount++;
NSString* bodyCountString = [NSStringstringWithFormat:@"%d", _bodyCount];!
[_labelCountsetString:bodyCountString];

Step 9: Adding Sound & Music

(In init)

! // Start background music, set lower volume

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

(In ccTouchesEnded)
// Play sound effect on every shot and on death
!
[[SimpleAudioEnginesharedEngine] playEffect:@"shot.mp3"];
!(In update: where the target is killed)
! [[SimpleAudioEnginesharedEngine] playEffect:@"death.mp3"];

KillTime 2.0

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

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/source

Game development with Cocos2d

Recommended

More Related Content

What's hot (20)

Similar to Game development with Cocos2d (20)

Recently uploaded (20)

Game development with Cocos2d