Basics cocos2d

iOS Game Developmentwith Cocos2D

Yaron Karasikyaronkarasik@gmail.com @Greenwell

Thursday, June 21, 12

iOS Game Developmentwith 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

Cocos2d-Android (Java)

Cocos2d-XiPhone/Android (C++)

Cocos2d-Mac (Obj-C)

Cocos2d-XNAWindows Phone 7 (C#)

Cocos2d-HTML5Web (Javascript)

Cocos3D (Obj-C)

Proven Success

Great Effort-Flexibility Balance

Effort

Flexibility

Cocos2D/Sparrow

Unity/Corona

Direct OpenGL/CoreGraphics

Cross Device, Cross Resolution

Active Ecosystem

And most importantly..Tons of great features for games

Scene TransitionsSprite Sheets

Effects:Lense, Ripple, Wave..

Actions:Move, Rotate, Scale..

Integrated Physics Engines

Sound Support

Tile Map Support

Text RenderingParticle Systems

Parallax Scrolling

Shaders (v2.0)Ribbons

Part 2: Cocos2D Basics

Basic Cocos2D Concepts

Director

Scenes

Director

Scenes

Layers

Director

Scenes

Layers

Sprites

Director & Scenes

Intro Main Menu Level I Level 2 Victory

Options

High Scores

LossDirector

★ 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 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

Add to Layer

sprite.position = ccp(x, y);

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

winSize.height

winSize.width

(x,y) at anchor point

Sprites in Action

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

ActionsCan 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

★ Implement directly based on CCStandardTouchDelegate

★ Can use UIGestureRecognizer classes

★ Open source implementations of joypad/buttons available

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

Let’s Make a Game!Part 3:

Let’s Make a Game!..but first we need a story, graphics, music and sfx :)

Part 3:

Because he likes to kill paratroopers

Para-Shoot

Graphics

Benjamin Radchek Sprites by The_Protoganist and _Allen_

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

Music & SFX

Explosive Attack by McTricky @ Sakari Infinity

http://www.sakari-infinity.net/author/McTricky

Background music, shoot sound, death sound

Music & SFX

Explosive Attack by McTricky @ Sakari Infinity

http://www.sakari-infinity.net/author/McTricky

Background music, shoot sound, death sound

Sneak Peek

Steps for making Para-ShootApplication 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

@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.h

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 elementsCGSize winSize = [[CCDirector sharedDirector] winSize]; // Add the background imageCCSprite *background = [CCSprite spriteWithFile:@"background.png"];background.position = ccp(winSize.width/2, winSize.height/2);[self addChild:background z:0];

(In init)// Load the sprite sheetCCSpriteBatchNode *batchNode = [CCSpriteBatchNode batchNodeWithFile:@"parashoot.pvr.ccz"];[self addChild:batchNode]; // Load the sprites into the shareSpriteFrameCache[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"parashoot.plist"];

Preload the spritesheet

// Add the player spriteCCSpriteFrame* 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];

Add the hero sprite

(in init)

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

Schedule a new target every second

// 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];

Step 3: Adding Bad Guys (Game Logic)Create a sprite 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;

Generate a random x position for the target

// Create and run the actionsCCMoveTo* 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]];

Create a move action for the target with a callback when reaching 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];}

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

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

Detect the touch

// 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];

Create the bullet

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

(In init)

// Load the animation for playerNSMutableArray *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"];!

Preload the animation from the spritesheet

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

Animate the hero when shooting

(in update)

// Set up actions for animation and target removalCCCallFuncN* 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

Intro Main Menu Level X Victory

Options

High Score

Level X Background Player Bad Guys Joypad/HUD

Scenes:

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

Thank You!Yaron Karasik

yaronkarasik@gmail.com

@Greenwell

Basics cocos2d

Technology

Transcript of Basics cocos2d

Cocos2d game programming 1

Разработка игр с помощью Cocos2d

03 crazy castle meets cocos2d-x

cocos2d for iPhone - WordPress.com · 2009-12-25 · Demo Suite •In addition to the project templates, cocos2d also comes with a project (cocos2d-iphone.xcodeproj) that contains

Extending Cocos2D-x Mobile 2D Framework

Advanced cocos2d

Cocos2d for iPhone 1 Game Development Cookbook

iOS Game Development with Cocos2D

Introduction to-cocos2d

IGRE Z IGRALNIM POGONOM COCOS2D-X · Cocos2d-x game engine Key words: game engine, game development, Cocos2d-x UDK: 004.388.4(043.2) Abstract Video games have been recently covering

Iphone and Ipad development Game with Cocos2D

Under Cocos2D Tree @mdvecon 2013

Cross Platform Game Programming with Cocos2d-js

Using Shader in cocos2d-x

Introduction to Cocos2d

Cocos2d x a to z (하)

Hello cocos2d ios

Создание игр с помощью Cocos2D (Станислав Краснояров)

Company Introduction - QTSCUnity/Cocos2d/Cocos2d-x • Character Design • Game Operating • Fixing bugs • Adding new functions ... Websocket Microservice. CoinPlus+ 27 Project

Resolution in cocos2d family