Download as PDF, PPTX
Uploaded byChangwon National University
Cocos2d programming
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.
More Related Content
![[Gdc2012] 디아블로3 ragdolls](https://cdn.slidesharecdn.com/ss_thumbnails/gdc20123ragdolls-120320234652-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Cocos2d programming
- 1. Cocos2D Programming Dong GyuPARK ( dongupak@gmail.com ) June. 2012. Carnegie Mellon University - MSIT
- 2. Introduction • DongGyu PARK(DennisPARK) • 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 • MobileGames • Cocos2d Introduction • Learning Cocos2d • Cocos2d Tools • Cocos2d on iOS vs Android
- 4.
- 5. Shake Series • ShakingApp using accelerometer sensor • 4 Players can play • Fun Sounds • Lightweight App • Game Center available • Cocos2d game development kit
- 6.
- 7.
- 8.
- 9.
- 10. Monster Buster http://itunes.apple.com/us/app/monster-buster/id440886409?l=ko&ls=1&mt=8
- 11.
- 12.
- 13.
- 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 isavailable http://www.youtube.com/watch?v=bps3FkX-_cY&feature=player_embedded
- 18.
- 19. Cocos2d • Open Source2D 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 gameengine • 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-basedAPI 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.
- 25.
- 26.
- 27.
- 28. Cocos2d for Android http://code.google.com/p/cocos2d-android-1/
- 29. Sample Program Many featuredsample codes are provided
- 30. Cocos2D Package Tutorial codes for beginners - easy to start
- 31.
- 32.
- 33.
- 34.
- 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 2Deffect 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 Menuand 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 • Hierarchyof 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 • TheCCNode 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 • Mostimportant 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 • Similarto a director’s role in movies • Management object for game control thru scene • OpenGL ES environment setting • Running the game loop
- 47. CCScene Class • Agame 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 • OneGame 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 • CCLayercan handle touch and accelerometer events • all the sprites and game elements are contained within layers • Game controller • Manage game entities
- 54. Sprite Object • Imagefiles 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 themovement, 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’sattributes 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.
- 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 bigSprite Sheet
- 63.
- 64. in your code Sprite sheet file Sprite frame from sprite cached sheet Animation contain frames Sprite file Animate frames repeats animation forever
- 65.
- 66.
- 67. How to use ... ...
- 68.
- 69. Tools-Font Generator • Manygame 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 • SoundEffect is very important in a game
- 73. Sound in yourcode • 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.
- 75.
- 76.
- 77. Game Tools • Many3rd party game tools for Cocos2d are available • Enrich your game effect • Minimize your programming efforts • More efficient way of memory management
- 78. Cocos2d on iOSvs Android
- 79. Cocos2d-android • based oncocos2d-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.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86. Android iOS
- 87.
- 88. Cocos2d-X • Cocos2d-X isa 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.
- 91.