Cocos2d for beginners

Uploaded on

Cocos2d iPhone game development given for the iOS Dev Scout on 22nd Dec 2012 conducted at Blk 71 Plug-in. Yummy food courtesy of IDA

Cocos2d iPhone game development given for the iOS Dev Scout on 22nd Dec 2012 conducted at Blk 71 Plug-in. Yummy food courtesy of IDA

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • The github code is available here
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Cocos2Dfor iOSByGibson TangAzukisoft Pte Ltd22 – 12 - 2012(The day after the Mayan prediction of the end of the world)
  • 2. Binary size max is 64 kb, not 64 MBWho Am I?Mobile Developer since 2004Ex Nokia SymbianEx J2ME developerCurrently Android and iPhonedeveloper
  • 3. What is Cocos2DPopular Objective-C game engineEasy to useTons of supportOpen source and free (Very important)
  • 4. Cocos2DUsed in thousands of gamesCreator of Cocos2D was acqui-hired byZyngaYes, the Zynga whose stock is tanking now
  • 5. What is Cocos2DHas a lot of portsCocos2d-x for Android and cross platformCocos2d html5Cocos2d for Blackberry etc
  • 6. What is Cocos2D download it now
  • 7. Cocos2DDirector – The guy that calls the shotsScenes – Director manages scenesLayers – Scenes can comprise of 1 or morelayersIt is a game engine based on concept ofnodes
  • 8. Cocos2D
  • 9. ScenesThink of a scene as a screenSo in a game, you may have a• Starting scene• Gameplay scene• Results sceneetc
  • 10. LayersA scene can have > 1 layersThink of a layer in the same vein as a layer ina Photoshop PSD fileSame concept 
  • 11. CCNodeCCNode is the base class that almost allCocos2D classes inherit fromThis has common properties such as- Position- Z order- Tag- etc
  • 12. OriginThe coordinate system starts from bottomleft of screen Y Hope you still remember your Cartesian Math 0,0 X
  • 13. Cocos2DAll classes and objects have the prefix ‘CC’• CCSprite• CCAction• CCMoveByetc
  • 14. CCSpriteAn image object that loads in a png fileCCSprite *sprite = [CCSpritespriteWithFile:@”man.png”];
  • 15. Sprite MovementCocos2d has a vast array of actions• Movement• Scaling• Fading• Rotation• etc• ref/2.1.0/interface_c_c_action.html
  • 16. Sprite• After loading a sprite• Need call the ‘add’ method• To add the sprite to another sprite• Or add to a scene• Then the game engine handles the rendering for you• Easy as Pie
  • 17. Sprite BasicsCCSprite *sprite = [CCSpritespriteWithFile:@”man.png”];• [self addChild:sprite];• [sprite runAction:[CCMoveTo actionWithDuration: 2.0f position:ccp(240, 320)]]; This moves man.png to position 240, 320 using 2 seconds
  • 18. UIKitSo what happens if you want to integrate UIKitelement?• Textfield• Alertview• WebviewCan you do that with Cocos2D?
  • 19. UIKitYes, you can. Most common way is to add themin using codeUIAlertView* alert_view = [[UIAlertViewalloc] initWithTitle:@”Title"message:@"Your Message" delegate:nilcancelButtonTitle:@"OK"otherButtonTitles:nil];[alert_view setDelegate:self];[alert_view show];[alert_view autorelease];
  • 20. UIKit
  • 21. UIKitYes, you can. Most common way is to addthem in using code UIView *myView = (UIView*) [[CCDirectorsharedDirector] openGLView];//get the view textField = [[UITextField alloc]initWithFrame:CGRectMake(40, 168, 250, 40)]; [myView addSubview:textField]; [[[[CCDirector sharedDirector]openGLView]window]addSubview:myView];[myView setDelegate:self];
  • 22. UIKit
  • 23. UIKitYes, you can also add your xibs into Cocos2D
  • 24. Audio• To play audio is very simple• Just #import “SimpleAudioEngine.h”• Then call the methods to play the audio • Background music • Effect• mp3, wav, caf (Core Audio Format) files can be used
  • 25. Audio• [[SimpleAudioEngine sharedEngine] preloadEffect:@"sfx.wav"]; //sfx.wav is the name of the sound file• [[SimpleAudioEngine sharedEngine] playEffect:@"sfx.wav"]; //play the audio file sfx.wav• [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"bgm.mp3"]; //play the bgm.mp3 background music
  • 26. It’s Demo TimeI am going to show you how to create asimple game- Game mechanics is simple- Tap the snails to squash them- Before they reach the end of the screen- It won’t be the next Angry Birds- But it’s a start
  • 27. Download Code•