Cocos2D
Cocos2d• Open Source 2D Game Framework • Built upon the OpenGL API’s • 2D Game, Graphic, Interactive    Application Progra...
Cocos2d• Multi-platform game engine• iOS, Mac OS X, Android ported• Cocos2d-x multi-platform port written in  C++
iOS game engines            (non-commercial)   Sparrow                       Cocos2d(open source)                  (open s...
iOS game engines            (commercial)Unreal                          Game saladDev Kit                                 ...
iOS game engines• http://maniacdev.com/2011/01/open-source-  and-commercial-ios-game-engine-listings-  updated/• http://ma...
Cocos2d gamesTap Pet Hotel: #1 Free   Zombie Farm: #6 Free  Tap Zoo: #2 Free          iStunt 2: #6 Free
Cocos2d games  Air Penguin: #1 Paid    ZombieSmash: #1 PaidFishing Frenzy: #7 Paid     Trainyard: #2 Paid
Cocos2d for Mac App
Cocos2d vs OpenGL• You can make a high level game using openGL• You will need an animation of sprits, menus  for the game,...
Cocos2dhttp://www.cocos2d-iphone.org/
Installation for iOS
Installation for iOS
Installation(super easy)
Cocos2d for Android
Sample ProgramMany featured sample codes are provided
Cocos2D Package  Tutorial codes for beginners-easy to                  start
Tutorial
DemoCocos2D for iPhone
and More
Features•   Scene Graph Structure•   Flow Control(Scene Management)    •   Flow Control between Scenes•   Sprites and Spri...
Features• Effect • Various 2D effect including wave, twirl,    lens, liquid, ripple• Tiled Maps, Transition, Menus, Text  ...
Features• Basic Menu and Button• Parallax scrolling• Sound Controls, Particle System• High Score server(Cocos live)• Based...
Scene Graph• Hierarchy of every Cocos2d NODE thats  currently active.• Every node has exactly one parent node,  except the...
Scene Graph                               CCScene             CCLayer              CCLayer   CCLayerCCSprite   CCMenu   CC...
Scene Graph Structure• General data structure used in Vector  based graphics editing application or games.• Acrobat 3D, Ja...
Object class in Java• The Object class is the super class for all  classes in Java  • Defines the basic states and behavior...
CCNode in Cocos2d• The CCNode class is the super class of all  Cocos2d class  • Defines common attributes and methods    th...
CCNode Class• Most important Cocos2D class, most  object in Cocos2d inherits from CCNode• CCScene, CCLayer, CCSprite, CCMe...
CCNode Class• Attributes • rotation, scaleX_, scaleY_,position,    visible_, anchorPointInPixels_,    anchorPoint_, isRela...
CCNode: Attributes                                      • If you want to draw a                                      monst...
CCDirector Class• Cocos2D Class has name space starting  with CCxxx.• Director(CCDirector) • Management object for game co...
CCScene Class• Scene • A game is composed of multiple screens • Each scene compose each screen on    game • Scene is compo...
Scene & Director              CCDirector                     ..      CCScene CCScene .. CCScene
CCScene Class              CCScene      CCLayer          CCLayer     (game layer)   (touch handling                       ...
CCLayer Class• One Game scene can contain many layers• and each layer contains more than one  sprite or menu• Capture user...
CCLayer                  CCLayerScore: 210   LIFE : 3                  ..                        CCSprite CCLabel .. CCNod...
CCLayer                  CCLayerScore: 210   LIFE : 3                  ..                        CCSprite CCLabel .. CCNod...
CCLayer• CCLayer can handle events • isTouchEnabled_ • isAccelerometerEnabled_• Game controller• Manage game entities
Sprite Object• Image files are loaded into OpenGL ES  Textures in a format that the GPU can  understand• Sprites can move w...
CCSprite                       SpritesTexture-Sprite Sheet
Action• Control the movement, transition, and  effects of Cocos2d objects.• All CCNode objects are able to run  actions.• ...
CCNode: Actions• Modify node’s attributes by time• position/rotation/scale/opacity/grid/...• Interval actions and Instant ...
Running an Action high level action description
Tools - TexturePacker• Loading a sprite requires much system  resources• In a game scene many sprites are required • each ...
Sprite ImagesMB_01.png   MB_02.png   MB_03.png   MB_03.png              ...
Making a big Sprite Sheet
Meta data
in your code     Sprite Sheet file                        Sprite file
Tools-Font Generator• Many game developers want in-house  bitmap font • Game scene needs an special font effect    and cus...
Font Generator
in your code                                    font file                                 (testFont.png)import meta-data(te...
Sound Editor• Sound Effect is very important in a game
Map Editor
Particle Editor
More game toolshttp://www.learn-cocos2d.com/2011/06/complete-list-cocos2d-tools/
Game Tools• Many 3rd party game tools for Cocos2d  are available • Enrich your game effect • Minimize your programming eff...
Cocos2d for Android
Download• Unzip downloaded file • “ZhouWeikuan-cocos2d-1d79d40” folder   will be generated.
Android Codehttp://dan.clarke.name/2011/04/how-to-make-a-simple-android-game-with-cocos2d/
iOS codehttp://www.raywenderlich.com/352/how-to-make-a-simple-iphone-game-with-                            cocos2d-tutorial
Android
Android code
iOS
iOS code
Demo
Q &A
Upcoming SlideShare
Loading in …5
×

Cocos2d game programming 2

3,668 views

Published on

Texas A&M University의 Android Programming Class의 Guest Talk 자료입니다.

Published in: Technology, Art & Photos
  • Be the first to comment

Cocos2d game programming 2

  1. 1. Cocos2D
  2. 2. Cocos2d• Open Source 2D Game Framework • Built upon the OpenGL API’s • 2D Game, Graphic, Interactive Application Programs• Sep. 2008 - 0.3.0 version released• Used in thousands of apps• Active developer community
  3. 3. Cocos2d• Multi-platform game engine• iOS, Mac OS X, Android ported• Cocos2d-x multi-platform port written in C++
  4. 4. iOS game engines (non-commercial) Sparrow Cocos2d(open source) (open source)oolong engine Galaxy(MIT License) (New BSD License)
  5. 5. iOS game engines (commercial)Unreal Game saladDev Kit Unity SIO2 And much more...
  6. 6. iOS game engines• http://maniacdev.com/2011/01/open-source- and-commercial-ios-game-engine-listings- updated/• http://maniacdev.com/2009/09/the- commercial-iphone-game-engine- comparison-3d-and-2d/
  7. 7. Cocos2d gamesTap Pet Hotel: #1 Free Zombie Farm: #6 Free Tap Zoo: #2 Free iStunt 2: #6 Free
  8. 8. Cocos2d games Air Penguin: #1 Paid ZombieSmash: #1 PaidFishing Frenzy: #7 Paid Trainyard: #2 Paid
  9. 9. Cocos2d for Mac App
  10. 10. Cocos2d vs OpenGL• You can make a high level game using openGL• You will need an animation of sprits, menus for the game, actions for game objects, sound effects, and much more...• Cocos2d supports a wrapper class of OpenGL• Also sound control class, menu class, sprites...
  11. 11. Cocos2dhttp://www.cocos2d-iphone.org/
  12. 12. Installation for iOS
  13. 13. Installation for iOS
  14. 14. Installation(super easy)
  15. 15. Cocos2d for Android
  16. 16. Sample ProgramMany featured sample codes are provided
  17. 17. Cocos2D Package Tutorial codes for beginners-easy to start
  18. 18. Tutorial
  19. 19. DemoCocos2D for iPhone
  20. 20. and More
  21. 21. Features• Scene Graph Structure• Flow Control(Scene Management) • Flow Control between Scenes• Sprites and Sprite Sheets • Easy and powerful way of Sprite Usage• Action • Supports many actions including move, rotate, scale, sequence, spawn,...
  22. 22. Features• Effect • Various 2D effect including wave, twirl, lens, liquid, ripple• Tiled Maps, Transition, Menus, Text Rendering• Physics Engine : Chipmunk, Box2d, Particle System
  23. 23. Features• Basic Menu and Button• Parallax scrolling• Sound Controls, Particle System• High Score server(Cocos live)• Based on OpenGL ES 1.1 - for iOS• Based on OpenGL 1.5 - for Mac
  24. 24. Scene Graph• Hierarchy of every Cocos2d NODE thats currently active.• Every node has exactly one parent node, except the scene itself, and can have any number of child nodes.• General technique on high level graphics system or game programming
  25. 25. Scene Graph CCScene CCLayer CCLayer CCLayerCCSprite CCMenu CCSprite
  26. 26. Scene Graph Structure• General data structure used in Vector based graphics editing application or games.• Acrobat 3D, Java 3D, AutoCAD,VRML, Open Inventor,..• Collection of nodes in a graph or tree structure
  27. 27. Object class in Java• The Object class is the super class for all classes in Java • Defines the basic states and behavior that all objects must have • equals, getClass, toString, ...
  28. 28. CCNode in Cocos2d• The CCNode class is the super class of all Cocos2d class • Defines common attributes and methods that all Cocos2d object must have
  29. 29. CCNode Class• Most important Cocos2D class, most object in Cocos2d inherits from CCNode• CCScene, CCLayer, CCSprite, CCMenu classes are children of CCNode class• Can include another CCNode object.• Can schedule periodic callbacks• Can run all actions
  30. 30. CCNode Class• Attributes • rotation, scaleX_, scaleY_,position, visible_, anchorPointInPixels_, anchorPoint_, isRelativeAnchorPoint_, contentSize_, transform_, inverse_, vertexZ_, camera_, grid, zOrder_, children_
  31. 31. CCNode: Attributes • If you want to draw a monster in your game anchorPoint scene • You will need an image( CCSprite ) rotation • And its position, size, rotation angle, anchor point, ... ion sit po
  32. 32. CCDirector Class• Cocos2D Class has name space starting with CCxxx.• Director(CCDirector) • Management object for game control thru scene • OpenGL ES environment setting • Running the game loop
  33. 33. CCScene Class• Scene • A game is composed of multiple screens • Each scene compose each screen on game • Scene is composed of multiple layers(hierarchical structure)
  34. 34. Scene & Director CCDirector .. CCScene CCScene .. CCScene
  35. 35. CCScene Class CCScene CCLayer CCLayer (game layer) (touch handling layer)
  36. 36. CCLayer Class• One Game scene can contain many layers• and each layer contains more than one sprite or menu• Capture user interaction or accelerometer• Layer consists a scene
  37. 37. CCLayer CCLayerScore: 210 LIFE : 3 .. CCSprite CCLabel .. CCNode CCSprite CCSprite ..
  38. 38. CCLayer CCLayerScore: 210 LIFE : 3 .. CCSprite CCLabel .. CCNode CCSprite CCSprite ..
  39. 39. CCLayer• CCLayer can handle events • isTouchEnabled_ • isAccelerometerEnabled_• Game controller• Manage game entities
  40. 40. Sprite Object• Image files are loaded into OpenGL ES Textures in a format that the GPU can understand• Sprites can move within a scene or a layer• Sprites may be animated, by cycling through a number of different images
  41. 41. CCSprite SpritesTexture-Sprite Sheet
  42. 42. Action• Control the movement, transition, and effects of Cocos2d objects.• All CCNode objects are able to run actions.• CCAnimate, CCJumpBy, CCRepeatForever, CCSequence, CCSpawn, CCMoveTo, CCFadeTo,...
  43. 43. CCNode: Actions• Modify node’s attributes by time• position/rotation/scale/opacity/grid/...• Interval actions and Instant actions
  44. 44. Running an Action high level action description
  45. 45. Tools - TexturePacker• Loading a sprite requires much system resources• In a game scene many sprites are required • each sprite contains many animation images • packaging each image into a big sprite sheet
  46. 46. Sprite ImagesMB_01.png MB_02.png MB_03.png MB_03.png ...
  47. 47. Making a big Sprite Sheet
  48. 48. Meta data
  49. 49. in your code Sprite Sheet file Sprite file
  50. 50. Tools-Font Generator• Many game developers want in-house bitmap font • Game scene needs an special font effect and customized fonts
  51. 51. Font Generator
  52. 52. in your code font file (testFont.png)import meta-data(testFont.fnt)
  53. 53. Sound Editor• Sound Effect is very important in a game
  54. 54. Map Editor
  55. 55. Particle Editor
  56. 56. More game toolshttp://www.learn-cocos2d.com/2011/06/complete-list-cocos2d-tools/
  57. 57. Game Tools• Many 3rd party game tools for Cocos2d are available • Enrich your game effect • Minimize your programming efforts • More efficient way of memory management
  58. 58. Cocos2d for Android
  59. 59. Download• Unzip downloaded file • “ZhouWeikuan-cocos2d-1d79d40” folder will be generated.
  60. 60. Android Codehttp://dan.clarke.name/2011/04/how-to-make-a-simple-android-game-with-cocos2d/
  61. 61. iOS codehttp://www.raywenderlich.com/352/how-to-make-a-simple-iphone-game-with- cocos2d-tutorial
  62. 62. Android
  63. 63. Android code
  64. 64. iOS
  65. 65. iOS code
  66. 66. Demo
  67. 67. Q &A

×