slides - Cocos2D Book

INTRO TO COCOS2D
360iDev 2011
ABOUT US
Ray: @rwenderlich
Rod: @rodstrougo
•
Founder of Razeware www.razeware.com
•
Founder of Prop Group www.prop.gr
•
Writes iOS tutorials at
www.raywenderlich.com
•
Background in enterprise software, now
iPhone+iPad games!
•
6 apps in App Store (3 w/ Cocos2D!)
•
2D physics game, Payload in the AppStore
CATJUMP
• Gives
us an hour and...
• Learn
about Cocos2D
• See
how to build the CatJump
Minigame
• Walk
away with the source code
and more....
GIVEAWAYS!
• Books
to Giveaway!
• Game
Dev Tools USBs to Giveaway!
• LevelHelper
• Physics
• Glyph
• To
& SpriteHelper
Editor & Texture Packer
Designer & Particle Designer
enter: Send any tweet including the tags #cocos2d and
#360idev before end of talk!
GETTING STARTED
• What
is Cocos2D?
• Getting
and Installing Cocos2D
• Cocos2D
• Sprites
Basics
& Positioning
• Actions
•A
Game in 5 Steps
WHAT IS COCOS2D?
• Popular
Objective-C framework
for 2D games
• Sprites, Actions, Scenes, Audio,
Tile Maps, and more!
• OpenGL
ES rendering and
optimizations
• Integrated
with Physics Engines
(Box2D, Chipmunk)
BONUS REASON!
• Several
top games use
Cocos2D, Chipmunk, or
Box2D
• Feed
Me Oil (Cocos2D,
Chipmunk)
• Trainyard
• Angry
(Cocos2D)
Birds (Box2D)
GETTING COCOS2D - EASY
INSTALLING TEMPLATES
COCOS2D TEMPLATES
ESSENTIALS: SCENES AND LAYERS
CCScene
HelloWorld Scene
CCLayer
CCLayer
HelloWorld Layer
HUD Layer
Lives: N
Dodges: N
PLAYER INPUT
Touch
CCLayer
CCLayer
Accelerometer
•Touches and Accelerometer events
are passed to CCLayers
•CCLayers can subscribe to touch,
accelerometer, both, or neither
CCLayer
SPRITES
• An
image you can move independently from other images
• To
get your image from Flash to GPU it is loaded/
uncompressed/converted in memory to a texture
• CCSprite
is an object to reference both the texture allow you
to control the position of the texture on screen
SPRITES
• Adding
the background
CCSprite *bg = [CCSprite spriteWithFile:@"bg.png"];
[self addChild:bg];
• Inherits
from CCNode, so it can render itself (or be
rendered), and it can run Actions
ESSENTIALS: POSITIONING
• Can
position any CCNode
• Positions
are relative to their parent
• Default: (0,0)
of a scene/layer is bottom left corner of screen
// Middle of the screen
[bg setPosition:CGPointMake(winSize.width/2, winSize.height/2)];
// at x=100, y=100 (Points not Pixels)
[bg setPosition:CGPointMake(100.0f, 100.0f)];
ESSENTIALS: ANCHOR POINTS
(1,1)
(0,1)
(0.5,0.5)
(0,0)
• Default
• All
(1,0)
is the center
of the positioning and some of the effects (rotation) are
based off the anchor point
COCOS2D ACTIONS
• Actions
are an easy way to apply transitions, effects, and
animations to your sprites
• MoveTo, MoveBy, ScaleBy, ScaleTo, FadeIn, FadeOut
CCAction *moveAction = [CCMoveBy actionWithDuration:2.0f
position:CGPointMake(50.0f,0.0f)];
[vehicleSprite runAction:moveAction];
2 seconds
...
MOST IMPORTANT ACTIONS
• Actions
are named after what you want it to do:
• CCMoveTo
and CCMoveBy
• CCRotateTo
• CCScaleTo
• To
and CCRotateBy
and CCScaleBy
see all actions: run ActionsTest sample
JUMP ACTION
• CCJumpBy/CCJumpTo
is an action that provides a parabolic
jump for your CCSprite
• To
make the cat do a 1 second, 200 point jump:
CCJumpBy *jumpAction =
[CCJumpBy actionWithDuration:1.0 position:ccp(0,0) height:200 jumps:1];
![cat runAction:jumpAction];
MULTIPLE ACTIONS
• What
if you want to run several actions in a sequence?
• CCSequence
action
[cat runAction:[CCSequence actions:jumpAction, doneJumpAction, nil]];
• What
if you want to run several actions at the same time?
• CCSpawn
action
[cat runAction:[CCSpawn actions:jumpAction,otherAction, nil]];
CALLING FROM AN ACTION
• You
can call your own methods as actions by wrapping them
inside a CCCallFunc action
• For
example, calling the doneJump method
CCCallFunc *doneJumpAction = [CCCallFunc actionWithTarget:self
selector:@selector(doneJump)];
CALLING FROM AN ACTION
• CCCallFuncN
• Passes
the CCNode (CCSprite that was running the action)
as the only parameter
• CCCallFuncND
• Passes
the CCNode as the first parameter and a pointer to
any other object as the data (D) parameter
A GAME IN 5 STEPS
STEP 1
Adding Background and Cat, Positioning, Actions
STEP 2
Player Input
STANDARD TOUCH
DELEGATE
• Standard Touch
•
•
Delegate
Inform Cocos2D that the CCLayer wants to receive touch events (add this to init method)
self.isTouchEnabled = YES;
• Add
a ccTouches method for the type of events you want to
receive
•
ccTouchesBegan, ccTouchesMoved, ccTouchesEnded, ccTouchesCancelled
•
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
STEP 3
Pumping up the Volume
COCOSDENSHION
SOUND ENGINE
•Wrapper for AVAudioPlayer and OpenAL
•Simple to use, for background + sound effects.
•Supports sync or async loading
PLAYING SOUND EFFECTS
•Three Steps:
•Import SimpleAudioEngine
•
#import "SimpleAudioEngine.h"
•Pre-load the sound effect
•
[[SimpleAudioEngine sharedEngine] preloadEffect:@"meow.wav"];
•Play it
•
[[SimpleAudioEngine sharedEngine] playEffect:@"meow.wav"];
STEP 4
Update loop, Spawning Enemies
WHAT IS THE COCOS2D
SCHEDULER?
• Better
then NSTimer
• Automatically
stopped and restarted if your game is paused/
resumed (via Cocos2D Director)
• Only
called if your object is part of an active Scene
• Delta Time
included
SCHEDULER CHOICES
• scheduleUpdate
•
[self scheduleUpdate];
•
Runs on every Frame, callback to - (void)update:(ccTime)dt method
• scheduleSelector
•
[self schedule:@selector(updateObjs:) interval:0.5f];
• Calls
your method with a rough given interval (in seconds)
STEP 5
Collision Detection
BASIC COLLISION
DETECTION
•How do you tell when the cat is in contact with the cars or
dogs?
•Each CCSprite has a bounding box, a rectangle matching the
exact size of the image.
•Use CGRectIntersectsRect
BASIC COLLISION
DETECTION
•What about the transparent space?
•Adjust your bounding box rectangles or use several
rectangles
WHERE TO GO FROM HERE?
• Please
• Rod
stay in touch!
Strougo
• @rodstrougo
• cocos2dbook.com
• Ray Wenderlich
• @rwenderlich
• raywenderlich.com
WHERE TO GO
FROM HERE?
• Upcoming
Cocos2D
Weekend Workshop...
•
Here in Denver, CO!
•
Oct 15-16
•
iphonegamedev.eventbrite.com
•
$75 off with code: 360IDEV
• Giveaways!
ADDITIONAL INFO
ESSENTIALS: CCDIRECTOR
• Cocos2D
• Class
manages your game loop for you
that handles this: CCDirector (a singleton)
• Methods
to set running scene
• Templates
• Method
run HelloWorldScene by default
to get window size
CGSize size = [[CCDirector sharedDirector] winSize];
ESSENTIALS: NODES
• Anything
drawn to the screen (or contains things to
draw) derives from CCNode
• Examples: CCScene, CCLayer, CCSprite, CCLabelTTF
• Can
position nodes, and run actions on them
ESSENTIALS: POINT HELPERS
• Comes
with handy functions to work with CGPoints:
ccp(...) becomes CGPointMake(...)
ccpAdd, ccpSub, ccpMult, ccpLength, etc.
libs\cocos2D\Support\CGPointExtension.h