iOS Game Development with Cocos2D
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

iOS Game Development with Cocos2D

on

  • 19,492 views

Cocos2D is an extensive and popular framework for developing games for iOS devices. In this talk we'll explore iOS app development and Cocos2D, and build a game using the framework.

Cocos2D is an extensive and popular framework for developing games for iOS devices. In this talk we'll explore iOS app development and Cocos2D, and build a game using the framework.

Statistics

Views

Total Views
19,492
Views on SlideShare
17,921
Embed Views
1,571

Actions

Likes
35
Downloads
505
Comments
5

13 Embeds 1,571

http://d.hatena.ne.jp 958
http://www.scoop.it 297
http://gargo.of.by 118
http://www.elobyte.de 83
http://cnkira.com 46
http://elobyte.de 41
http://webcache.googleusercontent.com 13
http://yagimonmon.tumblr.com 7
http://twitter.com 2
https://si0.twimg.com 2
http://translate.googleusercontent.com 2
http://www2.verious.com 1
http://www.tumblr.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

iOS Game Development with Cocos2D Presentation Transcript

  • 1. iOS Game Development with Cocos2D Yaron Karasik yaronkarasik@gmail.com @GreenwellThursday, June 21, 12
  • 2. iOS Game Development with Cocos2D Part 1: Why Cocos2D? Part 2: Cocos2D Basics Part 3: Let’s build a Cocos2D gameThursday, June 21, 12
  • 3. Part 1: Why Cocos2D?Thursday, June 21, 12
  • 4. 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 shippedThursday, June 21, 12
  • 5. 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)Thursday, June 21, 12
  • 6. Proven SuccessThursday, June 21, 12
  • 7. Great Effort-Flexibility Balance Direct OpenGL/ 100 CoreGraphics Effort Cocos2D/Sparrow Unity/Corona 0 FlexibilityThursday, June 21, 12
  • 8. Cross Device, Cross ResolutionThursday, June 21, 12
  • 9. Active EcosystemThursday, June 21, 12
  • 10. 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 SupportThursday, June 21, 12
  • 11. Part 2: Cocos2D BasicsThursday, June 21, 12
  • 12. Basic Cocos2D Concepts DirectorThursday, June 21, 12
  • 13. Basic Cocos2D Concepts Director ScenesThursday, June 21, 12
  • 14. Basic Cocos2D Concepts Director Scenes LayersThursday, June 21, 12
  • 15. Basic Cocos2D Concepts Director Scenes Layers SpritesThursday, June 21, 12
  • 16. 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 ScenesThursday, June 21, 12
  • 17. Layers ★ Each Scene contains several full screen Layers ★ Layers contain Sprites which are the game elements ★ Layers useful for Controls, Background, Labels, Menus.Thursday, June 21, 12
  • 18. Nodes Nodes are anything that gets drawn or contains things that get drawn (= Scene, Layer, Sprite) Can: ★ Contain other Nodes ★ Schedule periodic callbacks ★ Execute ActionsThursday, June 21, 12
  • 19. Sprites in Action Create CCSpriteFrame* spriteFrame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"sprite.png"]; CCSprite* sprite = [CCSprite spriteWithSpriteFrame:spriteFrame];Thursday, June 21, 12
  • 20. 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];Thursday, June 21, 12
  • 21. Sprites in Action Move CCMoveTo *moveToAction = [CCMoveTo actionWithDuration:duration position:newPosition]; [sprite runAction:moveToAction]; Properties can be transformed directly or through actionsThursday, June 21, 12
  • 22. 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];Thursday, June 21, 12
  • 23. Sprites in Action Animate CCAnimation* animation = [[CCAnimationCache sharedAnimationCache] animationByName:@"animation"]; CCAnimate* animateAction = [CCAnimate actionWithAnimation:animation]; [sprite runAction:animateAction];Thursday, June 21, 12
  • 24. Sprites in Action Schedule Updates [scene schedule:@selector(updateSprite:) interval:interval];Thursday, June 21, 12
  • 25. 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..Thursday, June 21, 12
  • 26. Spritesheets ★ Added as a child to the layer ★ Created with TexturePacker or Zwoptex ★ Memory considerations, 16bit images, .pvr.cczThursday, June 21, 12
  • 27. 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 availableThursday, June 21, 12
  • 28. Part 3: Let’s Make a Game!Thursday, June 21, 12
  • 29. Part 3: Let’s Make a Game! ..but first we need a story, graphics, music and sfx :)Thursday, June 21, 12
  • 30. Para-Shoot Because he likes to kill paratroopersThursday, June 21, 12
  • 31. Graphics Benjamin Radchek Sprites by The_Protoganist and _Allen_ http://www.freewebs.com/teh_pro/sprites.htmThursday, June 21, 12
  • 32. Music & SFX Background music, shoot sound, death sound Explosive Attack by McTricky @ Sakari Infinity http://www.sakari-infinity.net/author/McTrickyThursday, June 21, 12
  • 33. Music & SFX Background music, shoot sound, death sound Explosive Attack by McTricky @ Sakari Infinity http://www.sakari-infinity.net/author/McTrickyThursday, June 21, 12
  • 34. Sneak PeekThursday, June 21, 12
  • 35. 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 & MusicThursday, June 21, 12
  • 36. New Cocos2D ProjectThursday, June 21, 12
  • 37. 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; }Thursday, June 21, 12
  • 38. 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; }Thursday, June 21, 12
  • 39. Hello WorldThursday, June 21, 12
  • 40. Step 1: Adding Background (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];Thursday, June 21, 12
  • 41. Step 1: Adding BackgroundThursday, June 21, 12
  • 42. Step 2: Adding Our Hero 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"];Thursday, June 21, 12
  • 43. Step 2: Adding Our Hero 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];Thursday, June 21, 12
  • 44. Step 2: Adding Our HeroThursday, June 21, 12
  • 45. Step 3: Adding Bad Guys (Game Logic) Schedule a new target every second (in init) [self schedule:@selector(addTarget:) interval:1.0f];Thursday, June 21, 12
  • 46. Step 3: Adding Bad Guys (Game Logic) 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];Thursday, June 21, 12
  • 47. Step 3: Adding Bad Guys (Game Logic) 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;Thursday, June 21, 12
  • 48. Step 3: Adding Bad Guys (Game Logic) 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]];Thursday, June 21, 12
  • 49. Step 3: Adding Bad Guys (Game Logic) 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]; }Thursday, June 21, 12
  • 50. Step 3: Adding Bad Guys (Game Logic)Thursday, June 21, 12
  • 51. Step 4: Killing Bad Guys (Adding UI) 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;Thursday, June 21, 12
  • 52. Step 4: Killing Bad Guys (Adding UI) 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];Thursday, June 21, 12
  • 53. Step 4: Killing Bad Guys (Adding UI)Thursday, June 21, 12
  • 54. Step 5: Check for Bad Guy Death -(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 targets 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]; } }Thursday, June 21, 12
  • 55. Step 5: Check for Bad Guy DeathThursday, June 21, 12
  • 56. Step 6: Animating Our Hero 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"];!Thursday, June 21, 12
  • 57. Step 6: Animating Our Hero 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]];Thursday, June 21, 12
  • 58. Step 6: Animating Our HeroThursday, June 21, 12
  • 59. Step 7: Animating Bad Guys Dying (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]];Thursday, June 21, 12
  • 60. Step 7: Animating Bad Guys DyingThursday, June 21, 12
  • 61. Step 8: Adding Body Count (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];Thursday, June 21, 12
  • 62. Step 8: Adding Body CountThursday, June 21, 12
  • 63. Step 9: Adding Sound & Music (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"];Thursday, June 21, 12
  • 64. Step 9: Adding Sound & MusicThursday, June 21, 12
  • 65. Let’s Play!Thursday, June 21, 12
  • 66. 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)Thursday, June 21, 12
  • 67. Refactoring Para-Shoot Scenes: Loss Intro Main Menu Level X Victory Options High Score Layers: Level X Background Player Bad Guys Joypad/HUDThursday, June 21, 12
  • 68. More stuff to explore ★ Physics Engines - Chipmunk and Box2D ★ Particle System ★ Tilemaps ★ Menu InterfaceThursday, June 21, 12
  • 69. 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/sourcesThursday, June 21, 12
  • 70. Thank You! Yaron Karasik yaronkarasik@gmail.com @GreenwellThursday, June 21, 12