Introduction to Cocos2D

DongGyu PARK ( dongupak@gmail.com )Nov. 11. 2014

Korea Linux Forum 2014

Introduction• Dong Gyu PARK

• Associate Professor

• Changwon National University, KOREA

• Visiting Scholar at TAMU(2012. Feb-.), TX

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

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

• Game Developer - Cocos2d, Unity

Agenda

• Cocos2d Introduction

• Learning Cocos2d

• Cocos2d Tools

• Cocos2d-x

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

Developer

• Ricardo Quesada

• Cocos2d main author

• Now he is an developer at Chukong Technologies(2013. Sep - Now)

• Fulltime cocos2d-x developer

Supported PlatformsBranch Target Platform API Language

Cocos2d iOS, Mac OS X, LinuxPython 2.6, 2.7 or

3.3+,

Cocos2d-x

iOS, Mac OS X , Android, Windows 8, Windows Phone 8, Linux,

C++, Lua, Javascript

Cocos2d-Swift

iOS, Mac OS X Objective-C, Swift

Cocos2d-html5

HTML5-ready browsers Javascript

Cocos2d-xna

Windows Phone 7&8, Windows 7&8, Xbox 360

C#

http://en.wikipedia.org/wiki/Cocos2d

Various porting

• ShinyCocos in Ruby

• Cocos2d-Android in Java for Android

• Cocos2d-Windows

• CocosNet

• Cocos2d-javascript

• …

Trainyard: #2 Paid

ZombieSmash: #1 PaidAir Penguin: #1 Paid

Birzzle

Cocos2d Contents

Cocos2d vs OpenGL

• You can also make a high level game using openGL, but ...

• You will need an animation of sprites, menus for the game, actions for game objects, sound effects, and much more...

• Cocos2d supports a wrapper class of OpenGL

• Supports sound control class, menu class, sprites…

• Also supports many development tools

Cocos2d

http://www.cocos2d-swift.org/

Download for iOS

Changes in Cocos2d v3• Major changes comparing to v2

• Many class name are changed

• CCMoveTo ⇒ CCActionMoveTo

• Tutorial XYZ won’t work with v3

• v2 provides many tutorials for beginners

• Send messages directly instead of CCCallFunc

• Touch input and accelerometer could be enabled on CCNode( CCLayer in v2 is deprecated )

Changes in Cocos2d v3

• Menu API changed

• CCMenu and CCMenuItem are replaced by CCButton

• Audio API changed

• CocosDenshion and SimpleAudioEngine are replaced by OpenAL/OALSimpleAudio

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, Menu button, Text Rendering

• Built-in Font Support

• Embedded TrueType fonts and bitmap font

• Physics Engine : Particle System, Chipmunk, Box 2d(before v3)

Features

• Basic Menu Button

• Parallax scrolling

• Sound Controls, Particle System

• Spritebuilder

• Drag & Drop game layout design

• CCParticleSystem class provides

• Cocos3d for 3D Game.

Scene Graph• General data structure used in vector based graphics

editing application or games.

• Acrobat 3D, AutoCAD, VRML, Open Inventor, X3D, OpenSG,..

• 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

CCNode CCSprite CCSprite

CCLabel CCMenuCCSprit

Principal Classes

• Cocos2D Class has name space starting with CC-.

• CCDirector - how and when to execute scene

• CCNode - base class for all objects displayed by Cocos2d

• CCSprite - logic to hold and manipulate game image

• CCScene - parent of all nodes in the scene(CCLayer was used to group nodes before v3)

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, CCSprite, CCMenu classes are children of CCNode class

• Can include another CCNode object.

• Can schedule periodic callbacks

• Can run all actions

• Can add and remove child Node

rotation

posit

ionAnchor point

• 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, zOrder, visibility…(Attributes in CCSprite)

CCNode - Attributes

CCNode - addChild

CCSprite *bgSprite = [CCSprite spriteWithImageNamed:”bg.png”]; bgSprite.position = ccp(100,100);[self addChild:bgSprite z:0 tag:kTagGameBackground];……CCSprite *monster = [CCSprite spriteWithImageNamed:”mon.png”]; bgSprite.position = ccp(100,100);[self addChild:bgSprite z:1 tag:kTagMonster];

CCNodeScore: 210 LIFE : 3

CCNode

CCSprite CCLabel CCNode..

CCSprite CCSprite ..

..add child

CCNodeScore: 210 LIFE : 3

CCNode

CCSprite CCLabel CCNode..

CCSprite CCSprite ..

.. remove child

• CCNode can also handle touch and accelerometer events

• All the sprites and game elements are contained within nodes

• Game controller

• Manage game entities

CCNode Class

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

CCDirector Class

[[CCDirector sharedDirector] pushScene : menuScene]

CCDirector Class

[[CCDirector sharedDirector] replaceScene : gameScene]

Scene & Director

CCDirector

CCScene CCScene CCScene..

..

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 CCNode and other graphical objects on screen

CCScene ClassCCScene

CCNode CCSprite

@interface GameScene : CCScene … self.userInteractionEnabled = YES;

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

• Sprites may be animated, by cycling through a number of different images

CCSprite

CCNode

CCSprite ..CCSprite CCSprite

bg.png monster.png shuriken.png

CCSprite

Texture-Sprite Sheet

Sprites

Sprite can be generated from one Texture Sprite Sheet

Action Class

• Control the movement, transition, and effects of Cocos2d objects.

• All CCNode objects are able to run actions.

• CCActionEaseIn, CCActionJumpBy, CCActionRepeatForever, CCActionSequence, CCActionSpawn, CCActionMoveTo, CCActionFadeTo,...

• 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 monster = [CCSprite spriteWithImageNamed:@"monster.png"]; monster.position = ccp(100, 200); [self addChild:monster]; CCActionMoveBy *actionMove = [CCActionMoveBy actionWithDuration:1.0 position:ccp(300, 0)];

[monster runAction:actionMove];

Running an Action CCActionMoveBy *actionMove = [CCActionMoveBy actionWithDuration:1.0 position:ccp(300, 0)];

CCActionRotateBy *actionSpin = [CCActionRotateBy actionWithDuration:1.0f angle:360];

[monster runAction:[ actions: , , nil]];

CCActionSequence actionMoveactionSpin

Reversing an Action CCActionMoveBy *actionMove = [CCActionMoveBy actionWithDuration:1.0 position:ccp(300, 0)];

[monster runAction:[ actions: , , nil]];

CCActionSequence actionMove[actionMove reverse]

Multiple Action CCActionMoveBy *actionMove = [CCActionMoveBy actionWithDuration:1.0 position:ccp(300, 0)];

CCActionRotateBy *actionSpin = [CCActionRotateBy actionWithDuration:1.0f angle:360];

[monster runAction:[ actions: , , nil]];

CCActionSpawn actionMoveactionSpin

Sprite Images

...

BB_01.png BB_02.png BB_03.png BB_03.png

Sprite Animation NSMutableArray *animationFrames = [NSMutableArray array]; for(int i = 0; i < 4; ++i){ NSString *spriteName =[NSString stringWithFormat:@"BB_%02d.png", i]; CCSpriteFrame *spriteFrame = [CCSpriteFrame frameWithImageNamed:spriteName]; [animationFrames addObject:spriteFrame]; } //Create an animation from the set of frames you created earlier CCAnimation *animation = [CCAnimation animationWithSpriteFrames:animationFrames delay:0.1f]; //Create an action with the animation that can then be assigned to a sprite CCActionAnimate *animationAction = [CCActionAnimate actionWithAnimation:animation]; CCActionRepeatForever *repeatingAnimation = [CCActionRepeatForever actionWithAction:animationAction]; [monster runAction:repeatingAnimation];

Results

animationFrames CCAnimation CCAnimate

NSArray objectfor animationFrame

Set animation delayand sprite frames

Set animation to an action object

Sequential images could represent a series ofanimation stills

Sprite Sheet

Sprite sheet is more efficient than separate sprites.- 1 draw call vs 40 draw call

Meta data

in your code

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"monsterSheet.plist"];

NSMutableArray *animationFrames = [NSMutableArray array]; for(int i = 0; i < 4; ++i){ NSString *spriteName =[NSString stringWithFormat:@"BB_%02d.png", i]; //CCSpriteFrame *spriteFrame = [CCSpriteFrame fr:spriteName]; CCSpriteFrame *spriteFrame = [[CCSpriteFrameCache sharedSpriteFrameCache]

spriteFrameByName:spriteName]; [animationFrames addObject:spriteFrame]; }

Sprite frame

in your code

Audio

#import “OALAudioActions.h"…

// play background sound

…

// play simple sound effect

[[OALSimpleAudio sharedInstance] playBg:@"bg_sound.m4a" loop:YES];

[[OALSimpleAudio sharedInstance] playEffect:@"shook.m4a"];

•Easy APIs to handle background and effect are supported

Touch handling// enable user interactionself.userInteractionEnabled = YES;…

- (void)touchBegan:(UITouch *)touch withEvent:(UIEvent *)event{ CGPoint touchLocation = [touch locationInNode:self]; // create a 'monster' sprite CCSprite *monster = [CCSprite spriteWithImageNamed:@"monster.png"]; [self addChild:monster];

// place the sprite at the touch location monster.position = touchLocation;}

Touch handling

Particle Programming- (void)touchBegan:(UITouch *)touch withEvent:(UIEvent *)event { CGPoint touchLocation = [touch locationInNode:self]; CCParticleSystem *fireEmitter; fireEmitter = [CCParticleFire node]; // setting fireEmitter size, life, emission, etc [fireEmitter setStartSize:20.0f]; [fireEmitter setStartSizeVar:10.0f]; [fireEmitter setLife:4.0f]; [fireEmitter setEmissionRate:1000.0f]; [fireEmitter setGravity:ccp(0, 20)]; [self addChild:fireEmitter]; fireEmitter.position = touchLocation; }

Particle

Cocos2d Tools

Font Generator

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

in your code

font file(testFont.png)

import meta-data(testFont.fnt)

Map Editor

http://www.mapeditor.org/

Particle Editor

http://particledesigner.71squared.com/

Game tools

• Texture tools - Texture packer, Zwoptx

• Many 3rd party game tools for Cocos2d are available

• Enrich your game effect

• Minimize your programming efforts

• More efficient way of memory management

Cocos2d-x

Developer

• Wang Zhe

• Cocos2d-x main developer

• Chukong Technologies(merged Xiamen Coco Software)

Cocos2d-x

• Cocos2d-x is an open source game framework written in C++, with thin platform dependent layer.(x means a multiplatform)

• Port of Cocos2d engine using C++.

• Cocos2d-x renderer is optimized for 2d graphics with OpenGL.

• Run on iOS 5+, Android 2.3+, Mac OS X 10.7+, Windows 7+, Windows Phone 8+, Linux Ubuntu 12.04+

• 25% of world mobile games are developed using Cocos2-x

Supporting Features

• Skeletal Animation

• Sprite Sheet Animation

• Coordinate Systems

• Effects

• Multi resolution devices

• Textures, Tilemaps and Particles

Cocos2d-x

http://www.cocos2d-x.org/

Tools• CocoStudio

• WYSIWYG toolkit based on Cocos2d-x

• UI Editor, Animation Editor, Scene Editor and Data Editor

• closed source project developed by Chucking Technologies

• Code IDE

• Cocos2d-x IDE for Lua and JavaScript Coding

Issues

• Has many bugs

• Compatibility problems between version 1,2,3( API changes )

• Difficult environment setting - Android development requires huge setting

• Poor documentation supporting

Q & A