Cocos2D ProgrammingDong Gyu PARK ( dongupak@gmail.com )            June. 2012.   Carnegie Mellon University - MSIT
Introduction• DongGyu PARK(Dennis PARK)  • Associate Professor  • Changwon National University, S. KOREA• Visiting Scholar...
Agenda• Portfolios• Mobile Games• Cocos2d Introduction• Learning Cocos2d• Cocos2d Tools• Cocos2d on iOS vs Android
Portfolios
Shake Series• Shaking App using accelerometer sensor• 4 Players can play• Fun Sounds• Lightweight App• Game Center availab...
Shake Series
Coke Shakehttp://itunes.apple.com/us/app/coke-shake!/id448242537?mt=8
Action Game
Monster Buster
Monster    Busterhttp://itunes.apple.com/us/app/monster-buster/id440886409?l=ko&ls=1&mt=8
Pocket Windmillhttp://itunes.apple.com/us/app/pocket-windmill/id439495371?l=ko&ls=1&mt=8
Mobile Games
Successful Mobile Game
Successful Mobile Game•   The game has to be easy to learn and understand    •   people to not spend much time to learn   ...
Successful Mobile Game• A bright, fun, cartoony, and cute visual style• Very simple storyline• The player is constantly re...
AR Game : AR Defender                                      AR defense - tracking by                                       ...
Look-upTeam play is available       http://www.youtube.com/watch?v=bps3FkX-_cY&feature=player_embedded
Cocos2D Introduction
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• Started as a Python framework, re-written  in Objectiv...
Cocos2d gamesAir Penguin: #1 Paid   ZombieSmash: #1 Paid     Birzzle            Trainyard: #2 Paid
Cocos2d vs OpenGL• You can also make a high level game using  openGL, but ...• You will need an animation of sprits, menus...
and CoreGraphics• C-based API based on Quartz drawing  engine• low-level, lightweight 2D rendering• path-based drawing, tr...
Cocos2dhttp://www.cocos2d-iphone.org/
Installation for iOS
Installation for iOS
Installation(super easy)
Cocos2d for Android  http://code.google.com/p/cocos2d-android-1/
Sample ProgramMany featured sample codes are provided
Cocos2D Package    Tutorial codes for beginners           - easy to start
Tutorial
DemoCocos2D for iPhone
and More
Learning Cocos2d
Features•   Scene Graph Structure•   Flow Control(Scene Management)    •   Flow Control between Scenes•   Sprites and Spri...
Features• Various 2D effect including wave, twirl, lens,  liquid, ripple• Tiled Maps, Transition, Menus, Text Rendering• B...
Features• Basic Menu and Button• Parallax scrolling• Sound Controls, Particle System• High Score server(Cocos live)• Based...
Scene Graph Structure• General data structure used in Vector  based graphics editing application or games.• Acrobat 3D, Au...
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...
Principal Classes•   Cocos2D Class has name space starting with    CC-.•   CCNode - main class•   CCDirector - controls sc...
CCNode Class• The CCNode class is the super class of all  Cocos2d class  • Defines common attributes and methods    that al...
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                                     monste...
CCDirector Class• Similar to a director’s role in movies• Management object for game control thru  scene• OpenGL ES enviro...
CCScene Class• A game is composed of multiple screens• Each scene compose each screen on game• Scene is composed of multip...
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                  ..   remove child                        CCSprite C...
CCLayer Class• CCLayer can handle touch and  accelerometer events• all the sprites and game elements are  contained within...
Sprite Object• Image files are loaded into OpenGL ES  Textures in a format that the GPU can  understand• contains the neces...
CCSprite                       SpritesTexture-Sprite Sheet
Action• Control the movement, transition, and  effects of Cocos2d objects.• All CCNode objects are able to run  actions.• ...
Action• Modify node’s attributes by time• position/rotation/scale/opacity/grid/...• Interval actions and Instant actions• ...
Running an Action
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 frame from sprite cached sheet    Animation contain frames        Spri...
in your code
Tutorial-Birds on Wirehttp://itunes.apple.com/us/app/birds-on-a-wire/id474403193?mt=8
How to use                   ......
Cocos2d Tools
Tools-Font Generator• Many game developers want in-house  bitmap font • Game scene needs an special font effect    and cus...
Font Generatorhttp://www.bmglyph.com/                   http://www.71squared.com/
in your code                                    font file                                 (testFont.png)import meta-data(te...
Sound Editor• Sound Effect is very important in a game
Sound in your code•   SimpleAudioEngine    object is a wrapper to    the CDAudioManager    object•   if you just want to p...
Map Editorhttp://www.mapeditor.org/
Particle Editorhttp://particledesigner.71squared.com/
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 on iOS vs    Android
Cocos2d-android• based on cocos2d-iphone design• uses same API, but instead of using  objective-c, it uses Java• comparing...
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
Android   iOS
Demo
Cocos2d-X• Cocos2d-X is a port of Cocos2d engine  using C++• written in C++ and OpenGL ES 1.1/2.0• run on iOS, Android, Bl...
Cocos2d-html5      •   written in Javascript for          HTML5 compliant          browser      •   derived from Cocos2d- ...
Q &A
Contact dongupak@gmail.comhttp://Cocos2dDev.com/
Upcoming SlideShare
Loading in …5
×

Cocos2d programming

3,148 views

Published on

Cocos2d Game Programming technology for developers.
Basic tutorial for Cocos2d on CMU MSIT course.

Published in: Technology, Art & Photos
1 Comment
8 Likes
Statistics
Notes
  • Hi , Can i have these tutorials in English Language.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,148
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
173
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Cocos2d programming

  1. 1. Cocos2D ProgrammingDong Gyu PARK ( dongupak@gmail.com ) June. 2012. Carnegie Mellon University - MSIT
  2. 2. Introduction• DongGyu PARK(Dennis PARK) • Associate Professor • Changwon National University, S. KOREA• Visiting Scholar at TAMU(2012. Feb-.)• Visiting Researcher at CMU(2007-2008), Pittsburgh, PA• Blog http://Cocos2dDev.com/ (Korean)
  3. 3. Agenda• Portfolios• Mobile Games• Cocos2d Introduction• Learning Cocos2d• Cocos2d Tools• Cocos2d on iOS vs Android
  4. 4. Portfolios
  5. 5. Shake Series• Shaking App using accelerometer sensor• 4 Players can play• Fun Sounds• Lightweight App• Game Center available• Cocos2d game development kit
  6. 6. Shake Series
  7. 7. Coke Shakehttp://itunes.apple.com/us/app/coke-shake!/id448242537?mt=8
  8. 8. Action Game
  9. 9. Monster Buster
  10. 10. Monster Busterhttp://itunes.apple.com/us/app/monster-buster/id440886409?l=ko&ls=1&mt=8
  11. 11. Pocket Windmillhttp://itunes.apple.com/us/app/pocket-windmill/id439495371?l=ko&ls=1&mt=8
  12. 12. Mobile Games
  13. 13. Successful Mobile Game
  14. 14. Successful Mobile Game• The game has to be easy to learn and understand • people to not spend much time to learn mobile games• Little input, Big output • Simple but huge amount of feedbacks• Physics based gameplay • physics give much variations on same input
  15. 15. Successful Mobile Game• A bright, fun, cartoony, and cute visual style• Very simple storyline• The player is constantly rewarded• Huge amount of levels but very short to play• Provides users ranking
  16. 16. AR Game : AR Defender AR defense - tracking by camera and markerhttp://www.youtube.com/watch?v=rB5xUStsUs4&feature=player_embedded
  17. 17. Look-upTeam play is available http://www.youtube.com/watch?v=bps3FkX-_cY&feature=player_embedded
  18. 18. Cocos2D Introduction
  19. 19. 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
  20. 20. Cocos2d• Multi-platform game engine• iOS, Mac OS X, Android ported• Started as a Python framework, re-written in Objective-C in 2008• Cocos2d-x - multi-platform port written in C++
  21. 21. Cocos2d gamesAir Penguin: #1 Paid ZombieSmash: #1 Paid Birzzle Trainyard: #2 Paid
  22. 22. Cocos2d vs OpenGL• You can also make a high level game using openGL, but ...• 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...
  23. 23. and CoreGraphics• C-based API based on Quartz drawing engine• low-level, lightweight 2D rendering• path-based drawing, transformation, color management, offscreen rendering, patterns, image data management, image creation, masking• low-level drawing apps
  24. 24. Cocos2dhttp://www.cocos2d-iphone.org/
  25. 25. Installation for iOS
  26. 26. Installation for iOS
  27. 27. Installation(super easy)
  28. 28. Cocos2d for Android http://code.google.com/p/cocos2d-android-1/
  29. 29. Sample ProgramMany featured sample codes are provided
  30. 30. Cocos2D Package Tutorial codes for beginners - easy to start
  31. 31. Tutorial
  32. 32. DemoCocos2D for iPhone
  33. 33. and More
  34. 34. Learning Cocos2d
  35. 35. Features• Scene Graph Structure• Flow Control(Scene Management) • Flow Control between Scenes• Sprites and Sprite Sheets • Easy and powerful way of Sprite Usage• Actions are most powerful features • Supports many actions including move, rotate, scale, sequence, spawn, and manipulate objects with ease.
  36. 36. Features• Various 2D effect including wave, twirl, lens, liquid, ripple• Tiled Maps, Transition, Menus, Text Rendering• Built-in Font Support • Embedded TrueType fonts and bitmap font• Physics Engine : Chipmunk, Box2d, Particle System
  37. 37. 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
  38. 38. Scene Graph Structure• General data structure used in Vector based graphics editing application or games.• Acrobat 3D, AutoCAD,VRML, Open Inventor, X3D, OpenSG,..• Collection of nodes in a graph or tree structure
  39. 39. 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
  40. 40. Scene Graph CCScene CCLayer CCLayer CCLayerCCSprite CCMenu CCSprite
  41. 41. Principal Classes• Cocos2D Class has name space starting with CC-.• CCNode - main class• CCDirector - controls scenes• CCSprite - logic to hold and manipulate game image• CCScene• CCLayer
  42. 42. CCNode Class• The CCNode class is the super class of all Cocos2d class • Defines common attributes and methods that all Cocos2d object must have • contains the logic to enable it to schedule events on itself as well as to perform Cocos2d actions
  43. 43. 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
  44. 44. CCNode Class• Attributes • rotation, scaleX_, scaleY_,position, visible_, anchorPointInPixels_, anchorPoint_, isRelativeAnchorPoint_, contentSize_, transform_, inverse_, vertexZ_, camera_, grid, zOrder_, children_, ...
  45. 45. 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, ...(Attributes) ion sitpo
  46. 46. CCDirector Class• Similar to a director’s role in movies• Management object for game control thru scene• OpenGL ES environment setting• Running the game loop
  47. 47. CCScene Class• A game is composed of multiple screens• Each scene compose each screen on game• Scene is composed of multiple layers (hierarchical structure)• Scene contains CCLayer and other graphical objects on screen
  48. 48. Scene & Director CCDirector .. CCScene CCScene .. CCScene
  49. 49. CCScene Class CCScene CCLayer CCLayer (game layer) (touch handling layer)
  50. 50. 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
  51. 51. CCLayer CCLayerScore: 210 LIFE : 3 .. CCSprite CCLabel .. CCNode CCSprite CCSprite ..
  52. 52. CCLayer CCLayerScore: 210 LIFE : 3 .. remove child CCSprite CCLabel .. CCNode CCSprite CCSprite ..
  53. 53. CCLayer Class• CCLayer can handle touch and accelerometer events• all the sprites and game elements are contained within layers• Game controller• Manage game entities
  54. 54. Sprite Object• Image files are loaded into OpenGL ES Textures in a format that the GPU can understand• contains the necessary logic to hold and manipulate your image.• Sprites may be animated, by cycling through a number of different images
  55. 55. CCSprite SpritesTexture-Sprite Sheet
  56. 56. 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,...
  57. 57. Action• Modify node’s attributes by time• position/rotation/scale/opacity/grid/...• Interval actions and Instant actions• Actions that let you compose actions • Sequence action, Spawn action, Repeat action, RepeatForever action
  58. 58. Running an Action
  59. 59. Running an Action high level action description
  60. 60. 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
  61. 61. Sprite ImagesMB_01.png MB_02.png MB_03.png MB_03.png ...
  62. 62. Making a big Sprite Sheet
  63. 63. Meta data
  64. 64. in your code Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Sprite fileAnimate frames repeats animation forever
  65. 65. in your code
  66. 66. Tutorial-Birds on Wirehttp://itunes.apple.com/us/app/birds-on-a-wire/id474403193?mt=8
  67. 67. How to use ......
  68. 68. Cocos2d Tools
  69. 69. Tools-Font Generator• Many game developers want in-house bitmap font • Game scene needs an special font effect and customized fonts
  70. 70. Font Generatorhttp://www.bmglyph.com/ http://www.71squared.com/
  71. 71. in your code font file (testFont.png)import meta-data(testFont.fnt)
  72. 72. Sound Editor• Sound Effect is very important in a game
  73. 73. Sound in your code• SimpleAudioEngine object is a wrapper to the CDAudioManager object• if you just want to play some sound fx without knowing lower level working, this is the interface to use
  74. 74. Map Editorhttp://www.mapeditor.org/
  75. 75. Particle Editorhttp://particledesigner.71squared.com/
  76. 76. More game toolshttp://www.learn-cocos2d.com/2011/06/complete-list-cocos2d-tools/
  77. 77. 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
  78. 78. Cocos2d on iOS vs Android
  79. 79. Cocos2d-android• based on cocos2d-iphone design• uses same API, but instead of using objective-c, it uses Java• comparing to iOS design, it goes slow updating(latest follow-up cocos2d-iphone version is 0.99.4-June, 2012)
  80. 80. Android Codehttp://dan.clarke.name/2011/04/how-to-make-a-simple-android-game-with-cocos2d/
  81. 81. iOS codehttp://www.raywenderlich.com/352/how-to-make-a-simple-iphone-game-with- cocos2d-tutorial
  82. 82. Android
  83. 83. Android code
  84. 84. iOS
  85. 85. iOS code
  86. 86. Android iOS
  87. 87. Demo
  88. 88. Cocos2d-X• Cocos2d-X is a port of Cocos2d engine using C++• written in C++ and OpenGL ES 1.1/2.0• run on iOS, Android, BlackBerry, Bada(Samsung phone), Marmalade, Windows, Linux and more
  89. 89. Cocos2d-html5 • written in Javascript for HTML5 compliant browser • derived from Cocos2d- X • Available Cocos2d game on your web browserhttp://www.gamefromscratch.com/post/2012/06/03/Cocos2D-HTML-release-a-tech-demo-Moon-Warriors.aspx
  90. 90. Q &A
  91. 91. Contact dongupak@gmail.comhttp://Cocos2dDev.com/

×