Cocos2d programming
9 likes2,211 views
This document provides an overview of Cocos2D, an open source framework for building 2D games and other interactive applications. It discusses Cocos2D's scene graph structure, principal classes like CCNode and CCDirector, use of sprites and actions, and tools for working with Cocos2D like TexturePacker. It also compares building games with Cocos2D on iOS versus Android and introduces Cocos2D-X for cross-platform development and Cocos2D-HTML5 for web games.
![[Gdc2012] 디아블로3 ragdolls](https://cdn.slidesharecdn.com/ss_thumbnails/gdc20123ragdolls-120320234652-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Cocos2d programming (20)
Ad
More from Changwon National University (20)
Ad
Recently uploaded (20)
Cocos2d programming
- 1. Cocos2D Programming Dong Gyu PARK ( [email protected] ) June. 2012. Carnegie Mellon University - MSIT
- 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. Agenda • Portfolios • Mobile Games • Cocos2d Introduction • Learning Cocos2d • Cocos2d Tools • Cocos2d on iOS vs Android
- 4. Portfolios
- 5. Shake Series • Shaking App using accelerometer sensor • 4 Players can play • Fun Sounds • Lightweight App • Game Center available • Cocos2d game development kit
- 6. Shake Series
- 7. Coke Shake http://itunes.apple.com/us/app/coke-shake!/id448242537?mt=8
- 8. Action Game
- 10. Monster Buster http://itunes.apple.com/us/app/monster-buster/id440886409?l=ko&ls=1&mt=8
- 12. Mobile Games
- 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. 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. AR Game : AR Defender AR defense - tracking by camera and marker http://www.youtube.com/watch?v=rB5xUStsUs4&feature=player_embedded
- 17. Look-up Team play is available http://www.youtube.com/watch?v=bps3FkX-_cY&feature=player_embedded
- 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. 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. Cocos2d games Air Penguin: #1 Paid ZombieSmash: #1 Paid Birzzle Trainyard: #2 Paid
- 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. 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
- 28. Cocos2d for Android http://code.google.com/p/cocos2d-android-1/
- 29. Sample Program Many featured sample codes are provided
- 30. Cocos2D Package Tutorial codes for beginners - easy to start
- 31. Tutorial
- 33. and More
- 34. Learning Cocos2d
- 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. 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. 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. 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. Scene Graph • Hierarchy of every Cocos2d NODE that's 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. Scene Graph CCScene CCLayer CCLayer CCLayer CCSprite CCMenu CCSprite
- 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. 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. 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. CCNode Class • Attributes • rotation, scaleX_, scaleY_,position, visible_, anchorPointInPixels_, anchorPoint_, isRelativeAnchorPoint_, contentSize_, transform_, inverse_, vertexZ_, camera_, grid, zOrder_, children_, ...
- 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 sit po
- 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. 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. Scene & Director CCDirector .. CCScene CCScene .. CCScene
- 49. CCScene Class CCScene CCLayer CCLayer (game layer) (touch handling layer)
- 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. CCLayer CCLayer Score: 210 LIFE : 3 .. CCSprite CCLabel .. CCNode CCSprite CCSprite ..
- 52. CCLayer CCLayer Score: 210 LIFE : 3 .. remove child CCSprite CCLabel .. CCNode CCSprite CCSprite ..
- 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. 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. CCSprite Sprites Texture-Sprite Sheet
- 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. 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
- 59. Running an Action high level action description
- 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. Sprite Images MB_01.png MB_02.png MB_03.png MB_03.png ...
- 62. Making a big Sprite Sheet
- 63. Meta data
- 64. in your code Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Sprite file Animate frames repeats animation forever
- 65. in your code
- 67. How to use ... ...
- 68. Cocos2d Tools
- 69. Tools-Font Generator • Many game developers want in-house bitmap font • Game scene needs an special font effect and customized fonts
- 70. Font Generator http://www.bmglyph.com/ http://www.71squared.com/
- 71. in your code font file (testFont.png) import meta-data(testFont.fnt)
- 72. Sound Editor • Sound Effect is very important in a game
- 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
- 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. Cocos2d on iOS vs Android
- 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)
- 81. iOS code http://www.raywenderlich.com/352/how-to-make-a-simple-iphone-game-with- cocos2d-tutorial
- 82. Android
- 83. Android code
- 84. iOS
- 85. iOS code
- 86. Android iOS
- 87. Demo
- 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. Cocos2d-html5 • written in Javascript for HTML5 compliant browser • derived from Cocos2d- X • Available Cocos2d game on your web browser http://www.gamefromscratch.com/post/2012/06/03/Cocos2D-HTML-release-a-tech-demo-Moon-Warriors.aspx
- 90. Q &A