Introduction to Cocos2d

Thomas V. FrauenhoferBeret Applications LLC

360iDev Austin, November, 2010

Introduction to Cocos2d:Learning from Examples

Monday, November 8, 2010

Who am I?

• Software developer for 28+ years

• IBM’er by day, mobile developer at night

• 10 years in Palm OS mobile development

• (May it rest in peace)


Chromatic Cosmos

• Cocos2d-Based Tower defense game released last August

• FREE on iTunes this week!

http://beret.com


http://beret.com

http://beret.com

Overview

• Motivation - Why Cocos2D?

• Definition of simple project (BlockGame)

• Building the project

• We won’t finish, but you’ll get all the code


Why Cocos2D?


Why Cocos2D?

• Simple 2D Gaming SDK

• Built upon the OpenGL API’s

• Rich Objective-C API

• Used in thousands of apps

• Very active developer community


Even more Why Cocos2D

• Integrates with some very useful libraries

• Physics (Chimpunk, Box2D)

• Sound (CocosDension)

• Game boards (cocoslive)

• And others...


Things to Consider• Cocos2D is an open-source project

• Read the licenses carefully

• Cocos2D has changed A LOT over the past year

• Support for newer iOS versions/features

• Changes in names and abstractions used

• Adopting a new version may be a significant amount of work


A brief overview of Cocos2D


High-level Cocos2d• The Director (CCDirector) is the boss

• Manages the window and the scenes

• Manages the interactions with the underlying OpenGL environment

• A game has one or more scenes (CCScene)

• Think of a scene in the thematic sense


Sample Scene workflow

source: http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:basic_concepts


http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:basic_concepts


It all started with a (CC)Node...• CCNode is the base class of (almost) all Cocos2D

classes

• Many attributes are defined

• Position

• Size

• z-order

• etc...


• The origin is the lower left-hand corner of the screen

• The position of an object is the center of the object

image source: http://www.anima-entertainment.de

A quick note on coordinates


Layers in Cocos2d

source: http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:basic_concepts




Layers

• A layer (CCLayer) is where a user interacts with Cocos2d objects

• A layer handles touch and accelerometer events

• A layer contains other layers and sprites


Sprites

• A sprite (CCSprite) is an active object in your game

• 2 dimensional object

• Has an image (not generated)

• Can be animated, touched, moved, etc.


Animated Sprites

• Use of Batch Sprites/Sprite Sheets/Atlas Sprites (versus individual image files)

• Depending on your version/history with Cocos2d

• Uses OpenGL Texture Atlas to provide higher animation performance


Actions and Animation• You animate a sprite using the CCAnimation

class

• You make a sprite move using derivatives of the CCAction class

• You can specify sequences of actions (CCSequence) and actions done in parallel (CCSpawn)


Block Game - a simple game to introduce you

to Cocos2d


Commentary• It is important to know what you are building

before you build it...

• Design, look, interaction

• Cheaper and faster to design than to code

• ...but don’t go overboard

• Avoid “analysis paralysis”

• Iterate - design, code, test, rinse, repeat


In short...

• Make it work

• Next, make it good

• Next, make it GREAT!


Block Game

• Teach you about:

• Sprites

• Actions

• Collision detection


Game Elements

Piece user drags to remove...

...one of the boxes moving

across the bottom of

the screen...


Game Elements

...while avoiding the

blockers who are

protecting the boxes


Additional Notes

• Single-color background

• I chose yellow, but you could pick another color

• You can use either color squares or dice images for UserSprite/boxes

• Both are included in basic sample project

• Using Cocos2d version 0.99.5 beta 3


Game Items

• The piece the user moves around is a sprite (UserSprite)

• The boxes are sprites (BoxSprite)

• Blockers that move back and forth above and below the conveyor belt


Game Actions• Touch and move UserSprite

• Boxes just move right-to-left

• New boxes are periodically added on right

• Blockers move back and forth

• UserSprite can collide with boxes and blockers


Miscellanous

• Using XCode 3.2.5

• Using cocos2d-iphone-0.99.5-beta3

• Requires iOS 4.0+ (4.2 for iPad versions)


Building the project


Setting the scene

• Set orientation to portrait (Example 01)

• Set background color yellow (Example 02)


Add the UserSprite

• Example 03


Make UserSprite move

• Example 04


Add the Boxes

• Example 05


Collisions between UserSprite and Boxes

• Example 06


Add the Blockers

• Example 07


Miscellaneous changes

• Random start values - Example 08

• CocosDension (Sound) - Example 09

• iPad support - Example 10


Miscellaneous


For more information• http://cocos2d-iphone.org - Cocos2d for iOS information

• New book: Learn iPhone and iPad Cocos2D Game Development (Apress)

• Previous 360iDev Presentations, including:

• “Introduction to 2d Game Programming Using cocos2d” (360iDev Denver 2009)

• “Cocos2D + Box2D” (360iDev San Jose)

• Blogs (Ray Wenderlich’s is especially good)


http://cocos2d-iphone.org

http://cocos2d-iphone.org

From this presentation

• Slides:

• http://dl.dropbox.com/u/5375467/Introduction%20to%20Cocos2d.key

• http://dl.dropbox.com/u/5375467/Introduction%20to%20Cocos2d.pdf

• Sample code:

• http://dl.dropbox.com/u/5375467/IntroToCocos2DSamples.zip


http://dl.dropbox.com/u/5375467/Introduction%20to%20Cocos2d.key

http://dl.dropbox.com/u/5375467/Introduction%20to%20Cocos2d.key

http://dl.dropbox.com/u/5375467/IntroToCocos2DSamples.zip

http://dl.dropbox.com/u/5375467/IntroToCocos2DSamples.zip

My Contact Information

• Email: [email protected]

• Our company: http://beret.com

• Web: http://tomfrauenhofer.com

• Twitter: @tvf


mailto:[email protected]

mailto:[email protected]

http://beret.com

http://beret.com

http://tomfrauenhofer.com

http://tomfrauenhofer.com

Thank you!

(and don’t forget the Game Jam!)

http://gamejam.360idev.com




Introduction to Cocos2d

Technology

Transcript of Introduction to Cocos2d