Cocos2D Programming

Dong 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 at TAMU(2012. Feb-.)

• Visiting Researcher at CMU(2007-2008), Pittsburgh, PA

• Blog http://Cocos2dDev.com/ (Korean)

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 available

• Cocos2d game development kit

Shake Series

Coke Shake

http://itunes.apple.com/us/app/coke-shake!/id448242537?mt=8

Action Game

Monster Buster

Monster Buster

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

Pocket Windmill

http://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 mobile games

• Little input, Big output

• Simple but huge amount of feedbacks

• Physics based gameplay

• physics give much variations on same input

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

AR Game : AR Defender

http://www.youtube.com/watch?v=rB5xUStsUs4&feature=player_embedded

AR defense - tracking by camera and marker

Look-up

http://www.youtube.com/watch?v=bps3FkX-_cY&feature=player_embedded

Team play is available

Cocos2D Introduction

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

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++

Trainyard: #2 Paid

ZombieSmash: #1 PaidAir Penguin: #1 Paid

Birzzle

Cocos2d games

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...

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

Cocos2d

http://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 Program

Many featured sample codes are provided

Cocos2D Package

Tutorial codes for beginners- easy to start

Tutorial

Demo

Cocos2D for iPhone

and More

Learning Cocos2d

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.

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

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

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

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

Scene GraphCCScene

CCLayer CCLayer CCLayer

CCSprite CCMenu CCSprite

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

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

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

CCNode Class

• Attributes

• rotation, scaleX_, scaleY_,position, visible_, anchorPointInPixels_, anchorPoint_, isRelativeAnchorPoint_, contentSize_, transform_, inverse_, vertexZ_, camera_, grid, zOrder_, children_, ...

rotation

posit

ion

anchorPoint

• If you want to draw a monster in your game scene• You will need an image( CCSprite )• And its position, size, rotation angle, anchor point, ...(Attributes)

CCNode : Attributes

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

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

Scene & Director

CCDirector

CCScene CCScene CCScene..

..

CCScene ClassCCScene

CCLayer CCLayer

(game layer) (touch handling layer)

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

CCLayerScore: 210 LIFE : 3

CCLayer

CCSprite CCLabel CCNode..

CCSprite CCSprite ..

..

CCLayerScore: 210 LIFE : 3

CCLayer

CCSprite CCLabel CCNode..

CCSprite CCSprite ..

.. remove child

• CCLayer can handle touch and accelerometer events

• all the sprites and game elements are contained within layers

• Game controller

• Manage game entities

CCLayer Class

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

CCSprite

Texture-Sprite Sheet

Sprites

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,...

• 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

Action

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 contains many animation images

• packaging each image into a big sprite sheet

Sprite Images

...

MB_01.png MB_02.png MB_03.png MB_03.png

Making a big Sprite Sheet

Meta data

in your codeSprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

Animate framesrepeats animation forever

in your code

Tutorial-Birds on Wire

http://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 customized fonts

Font Generator

http://www.bmglyph.com/http://www.71squared.com/

in your code

font file(testFont.png)

import meta-data(testFont.fnt)

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 play some sound fx without knowing lower level working, this is the interface to use

Map Editor

http://www.mapeditor.org/

Particle Editor

http://particledesigner.71squared.com/

More game tools

http://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 efforts

• More efficient way of memory management

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 to iOS design, it goes slow updating(latest follow-up cocos2d-iphone version is 0.99.4-June, 2012)

Android Code

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

iOS code

http://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, BlackBerry, Bada(Samsung phone), Marmalade, Windows, Linux and more

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

Q & A

Contact

dongupak@gmail.comhttp://Cocos2dDev.com/