Post on 07-Jul-2015
description
transcript
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
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)
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
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