Introduction to-cocos2d

ThomasV. Frauenhofer
Beret 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

Overview
• Motivation - Why Cocos2D?
• Deﬁnition of simple project (BlockGame)
• Building the project
• We won’t ﬁnish, 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 signiﬁcant
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 workﬂow
source: 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 deﬁned
• 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 ﬁles)
• 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)

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

My Contact Information
• Email: tvf@beret.com
• Our company: http://beret.com
• Web: http://tomfrauenhofer.com
• Twitter: @tvf

Thank you!
(and don’t forget the Game Jam!)
http://gamejam.360idev.com

Introduction to-cocos2d

More Related Content

Viewers also liked

Similar to Introduction to-cocos2d

More from sagaroceanic11

Recently uploaded

Introduction to-cocos2d