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

1. Cocos2D Programming
Dong Gyu PARK ( dongupak@gmail.com )
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

9. Monster Buster

10. Monster
Buster
http://itunes.apple.com/us/app/monster-buster/id440886409?l=ko&ls=1&mt=8

11. Pocket Windmill
http://itunes.apple.com/us/app/pocket-windmill/id439495371?l=ko&ls=1&mt=8

12. Mobile Games

13. Successful Mobile Game

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

18. Cocos2D Introduction

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

24. Cocos2d
http://www.cocos2d-iphone.org/

25. Installation for iOS

26. Installation for iOS

27. Installation(super easy)

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

32. Demo
Cocos2D for iPhone

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

58. Running an 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

66. Tutorial-Birds on Wire
http://itunes.apple.com/us/app/birds-on-a-wire/id474403193?mt=8

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

74. Map Editor
http://www.mapeditor.org/

75. Particle Editor
http://particledesigner.71squared.com/

76. More game tools
http://www.learn-cocos2d.com/2011/06/complete-list-cocos2d-tools/

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)

80. Android Code
http://dan.clarke.name/2011/04/how-to-make-a-simple-android-game-with-cocos2d/

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

91. Contact
dongupak@gmail.com
http://Cocos2dDev.com/