在iOS平台上用Cocos2D做开发 | iOS独立开发者秦春林

iOS DevCamp
Produced by CSDN
Website: http://devcamp.csdn.net
Weibo: http://weibo.com/cmdnclub

Thursday, August 2, 12

怎样灵活使用Cocos2D

秦春林


Don’t reinvent the wheel


“In the summer of 2008, several "pythoneros" went to a camp
program called PyCamp: Python outdoors. This camp
held in Cordoba, in the town of Los Cocos. We were about
50 people. It covered different topics, one of which was seeking
way of not having to "reinvent the wheel" in each jurisdiction
Pyweek.
In this way a group of friends and I decided to put together a
framework to make games. We call cocos2d, since the framework
is designed to make 2D games, and the word "coconut" emulates
the place where the camp took place.”

Ricardo Quesada


4,000＋ games


It is free!
Without having to learn OpenGL ES to get
started
Active community & tests
Lots of tools
It is Simple

Why Cocos2d?


How simple?


sprite: player

Action: CCMoveTo

layer: GameLayer

scene: GameScene
UIView:EAGLView


Game has Scenes
Each Scene has some number of Layers
Layers capture user interaction and contain
sprites
Director manages the scenes

Cocos2d Basics

Anything thats gets drawn
or contains things that get
drawn is a CCNode


CCLayer CCMenu

CCMenuItemLabel

CCMenuItem CCMenuItemSprite

CCMenuItemToggle
CCParticleSystem

CCNode

CCScene CCTransitionScene

CCSprite CCLabelTTF

CCLabelBMFont
CCSpriteBatchNode
CCTMXLayer


Just like UIView


They can contain other CCNode nodes
(addChild, getChildByTag, removeChild, etc)

They can schedule periodic callback
(schedule, unschedule, etc)

They can execute actions (runAction,
stopAction, etc)

main features


Features of CCNode:

- position
- scale (x, y)
- rotation (in degrees, clockwise)
- CCCamera (an interface to gluLookAt )
- CCGridBase (to do mesh transformations)
- anchor point
- size
- visible
- z-order
- openGL z position


- (CGAffineTransform)nodeToParentTransform;
- (CGAffineTransform)parentToNodeTransform;

- (CGAffineTransform)nodeToWorldTransform;
- (CGAffineTransform)worldToNodeTransform;

- (CGPoint)convertToNodeSpace:(CGPoint)worldPoint;
- (CGPoint)convertToWorldSpace:(CGPoint)nodePoint;

- (CGPoint)convertTouchToNodeSpace:(UITouch *)touch;

transformation

CCLayer
GamePlay
CCScene

CCLayer GamePlayScene

Background


CCLayer is a subclass of CCNode that
implements:

- UIAccelerometerDelegate
- CCStandardTouchDelegate
- CCTargetedTouchDelegate


(NSSet*)touches

NO
targetedHandlersCount>o
standardHandlersCount>o
YES

foreach...in touches YES

foreach...in
mutablesTouches
foreach...in handlers

ccTouchesBegan/Move/
End
NO
ccTouchBegan

YES

ccTouchMove/End
NO
End
swallowsTouches NO

YES

remove from
mutableTouches


! //
! // process the target handlers 1st
! //
! if( targetedHandlersCount > 0 ) {
! ! for( UITouch *touch in touches ) {
! ! ! for(CCTargetedTouchHandler *handler in targetedHandlers) {

! ! ! ! BOOL claimed = NO;
! ! ! ! if( idx == kCCTouchBegan ) {
! ! ! ! ! claimed = [handler.delegate ccTouchBegan:touch withEvent:event];
! ! ! ! ! if( claimed )
! ! ! ! ! ! [handler.claimedTouches addObject:touch];
! ! ! ! }

! ! ! ! // else (moved, ended, cancelled)
! ! ! ! else if( [handler.claimedTouches containsObject:touch] ) {
! ! ! ! ! claimed = YES;
! ! ! ! ! if( handler.enabledSelectors & helper.type )
! ! ! ! ! ! [handler.delegate performSelector:helper.touchSel withObject:touch
withObject:event];

! ! ! ! ! if( helper.type & (kCCTouchSelectorCancelledBit |
kCCTouchSelectorEndedBit) )
! ! ! ! ! ! [handler.claimedTouches removeObject:touch];
! ! ! ! }

! ! ! ! if( claimed && handler.swallowsTouches ) {
! ! ! ! ! if( needsMutableSet )
! ! ! ! ! ! [mutableTouches removeObject:touch];
! ! ! ! ! break;
! ! ! ! }
! ! ! }
! ! }
! }


You must register as a targeted touch delegate
ccTouchBegan be invoked separately for each of the
available touches
The ccTouchBegan method return YES to indicate
a touch you care about
The swallowsTouches property return YES to
indicate only this layer handle the touch

Targeted Touch Delegate

A sample:
How dose CCMenu work?


-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
......
! selectedItem_ = [self itemForTouch:touch];
! [selectedItem_ selected];

! if( selectedItem_ ) {
! ! state_ = kCCMenuStateTrackingTouch;
! ! return YES;
! }
! return NO;
}

-(void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
! CCMenuItem *currentItem = [self itemForTouch:touch];

! if (currentItem != selectedItem_) {
! ! [selectedItem_ unselected];
! ! selectedItem_ = currentItem;
! ! [selectedItem_ selected];
! }
}

-(void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event
{
! [selectedItem_ unselected];
! [selectedItem_ activate];
}

CCMenu : CCLayer

Which item is clicked?


-(CCMenuItem *) itemForTouch: (UITouch *) touch
{
! CGPoint touchLocation = [touch locationInView: [touch view]];
! touchLocation = [[CCDirector sharedDirector] convertToGL:
touchLocation];

! CCMenuItem* item;
! CCARRAY_FOREACH(children_, item){
! ! // ignore invisible and disabled items: issue #779, #866
! ! if ( [item visible] && [item isEnabled] ) {

! ! ! CGPoint local = [item
convertToNodeSpace:touchLocation];
! ! ! CGRect r = [item rect];
! ! ! r.origin = CGPointZero;

! ! ! if( CGRectContainsPoint( r, local ) )
! ! ! ! return item;
! ! }
! }
! return nil;
}
You will like this method

Priority = 2
GameLayer

Priority = 1

Priority = 0

Which Layer handle touch events?


Return YES to claim the touch.
-(BOOL)ccTouchBegan

! //* priority used by the menu for the event handler
! kCCMenuHandlerPriority = -128,


CCSprite is a 2d image


+(id) spriteWithTexture:(CCTexture2D*)texture;

+(id) spriteWithTexture:(CCTexture2D*)texture rect:(CGRect)rect;

+(id) spriteWithSpriteFrame:(CCSpriteFrame*)spriteFrame;

+(id) spriteWithSpriteFrameName:(NSString*)spriteFrameName;

+(id) spriteWithFile:(NSString*)filename;

+(id) spriteWithFile:(NSString*)filename rect:(CGRect)rect;

+(id) spriteWithCGImage: (CGImageRef)image key:(NSString*)key;


CCTexture

frame

0 1

2 3
(setDisplayFrame)

CCSprite CCSpriteFrame CCSpriteFrameCache


CCSpriteSheet

All CCSprites added to a CCSpriteBatchNode are drawn in one
OpenGL ES draw call.

CCLabelBMFont

CCTMXLayer

CCSpriteBatchNode

CCLayer
CCScene
CCLayer
GamePlay
Scene CCDirector
CCLayer

.....
CCLayer startScene
CCScene GameOlayScene

CCLayer CompleteScene
LevelCompleted .....
Scene
CCLayer


-(CGSize) winSize;
-(CGPoint) convertToGL: (CGPoint) p;
-(CGPoint) convertToUI:(CGPoint)p;
200

-(void) runWithScene:(CCScene*) scene; 200

100

-(void) pushScene:(CCScene*) scene;
220

-(void) popScene;

-(void) popToRootScene;
200

-(void) replaceScene: (CCScene*) scene;

-(void) pause;
-(void) resume;
CCDirector

How does CCAction
work?


@property (nonatomic,readonly,assign) id target;

+(id) action;

-(BOOL) isDone;

-(void) startWithTarget:(id)target;

-(void) stop;

-(void) step: (ccTime) dt;

-(void) update: (ccTime) time;


CCNode CCAction CCActionManager
+(id)actionWithDuration:(ccTime)d

-(CCAction*)runAction:(CCAction*)action addAction:action target:self

-(void) update: (ccTime) dt

-(void) update: (ccTime) t

[target_ setPosition: ccp(

-(void) stopAction: (CCAction*) action;

#pragma mark CCNode - Init & cleanup
-(id) init
{

if ((self=[super init]) ) {

self.actionManager = [director actionManager];

}

return self;
}


Simple,but powerful


Position/rotation/scale/visible/z-order/opacity/ﬂip/color
CCActionInterval && CCActionInstant
CCSequence && CCSpawn && CCRepeat
effect && 3D Action
CCDelayTime
CCAnimate
CCCallFun && CCPropertyAction
Camera
CCActionEase
CCActionProgressTimer

Box2D is C++

2D rigid physics simulation engine with continuous collision
detection

All you ﬁles thats touch C++ or include it must be Objective-
C++(.mm)
Tuned for 1 meter sized objects

Box2D v2.2.0 User Manual

COCOS2D+BOX2D


A game in 6 steps


what have the template done for us?
initPhysics
createMenu
draw
addNewSpriteAtPosition
update
ccTouchesEnded


! b2Vec2 gravity;
! gravity.Set(0.0f, -10.0f);
! world = new b2World(gravity);
!
! // Do we want to let bodies sleep?
! world->SetAllowSleeping(true);
!
! world->SetContinuousPhysics(true);
!
! m_debugDraw = new GLESDebugDraw( PTM_RATIO );
! world->SetDebugDraw(m_debugDraw);
!
! uint32 flags = 0;
! flags += b2Draw::e_shapeBit;
! m_debugDraw->SetFlags(flags);! !
!
! // Define the ground body.
! b2BodyDef groundBodyDef;
! groundBodyDef.position.Set(0, 0); // bottom-left corner
!
! // Call the body factory which allocates memory for the ground body
! // from a pool and creates the ground box shape (also from a pool).
! // The body is also added to the world.
! b2Body* groundBody = world->CreateBody(&groundBodyDef);
!
! // Define the ground box shape.
! b2EdgeShape groundBox;! !
!
! // bottom
! groundBox.Set(b2Vec2(0,0), b2Vec2(s.width/PTM_RATIO,0));
! groundBody->CreateFixture(&groundBox,0);


Create the dynamic blocks

setp 2

sprite = [CCSprite spriteWithFile:spriteFileName];
[sprite setPosition:ccp(p.x,p.y)]; // Remember ccp() is macro for
CGPointMake()
[self addChild:sprite];
}
! }
!
! // Define the dynamic body.
! b2BodyDef bodyDef;
! bodyDef.type = b2_dynamicBody;

! bodyDef.position.Set(p.x/PTM_RATIO, p.y/PTM_RATIO);
! bodyDef.userData = sprite;
!
! // Tell the physics world to create the body
! b2Body *body = world->CreateBody(&bodyDef);
!
! // Define another box shape for our dynamic body.
! b2PolygonShape dynamicBox;

! dynamicBox.SetAsBox(boxDimensions.x, boxDimensions.y);
! // Define the dynamic body fixture.
! b2FixtureDef fixtureDef;
! fixtureDef.shape = &dynamicBox;!
! fixtureDef.density = boxDensity;
! fixtureDef.friction = 0.3f;
! fixtureDef.restitution = 0.5f; // 0 is a lead ball, 1 is a super bouncy ball
! body->CreateFixture(&fixtureDef);


-(void) update: (ccTime) dt
{
! //It is recommended that a fixed time step is used with Box2D for stability
! //of the simulation, however, we are using a variable time step here.
! //You need to make an informed choice, the following URL is useful
! //http://gafferongames.com/game-physics/fix-your-timestep/
!
! int32 velocityIterations = 8;
! int32 positionIterations = 1; Simulating the world(of Box2D)
!
! // Instruct the world to perform a single step of simulation. It is
! // generally best to keep the time step and iterations fixed.
! world->Step(1.0f/60.0f, velocityIterations, positionIterations);

! //Iterate over the bodies in the physics world
! for (b2Body* b = world->GetBodyList(); b; b = b->GetNext())
! {
! ! if (b->GetUserData() != NULL) {
! ! ! //Synchronize the AtlasSprites position and rotation with the
corresponding body
! ! ! CCSprite *myActor = (CCSprite*)b->GetUserData();
! ! ! myActor.position = CGPointMake( b->GetPosition().x * PTM_RATIO, b-
>GetPosition().y * PTM_RATIO);
! ! ! myActor.rotation = -1 * CC_RADIANS_TO_DEGREES(b->GetAngle());
! ! }!
! }!
}


Touch events

setp 3

- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
!
! !
1
for( UITouch *touch in touches ) {
if (dist > 10.0f) {
! ! ! // Create the object and add impulse
!
!
!
2
! CCSprite *sprite = [CCSprite spriteWithFile:SNOWBALL_FILENAME];

! ! ! b2CircleShape circleShape;
! ! ! b2FixtureDef fd;
! ! ! b2Vec2 initVel;
! ! ! b2BodyDef circleBodyDefinition;
!
!
!
!
3
! circleBodyDefinition.type = b2_dynamicBody;
! circleBodyDefinition.position.Set(startPoint.x/PTM_RATIO, startPoint.y/PTM_RATIO);
!
!
!
!
4
! circleBodyDefinition.angle = 0.000000f;
! circleBodyDefinition.userData = sprite;
! ! ! b2Body *body = world->CreateBody(&circleBodyDefinition);
!
!
!
!
5
! initVel.Set(0.000000f, 0.000000f);
! body->SetLinearVelocity(initVel);
! ! !
! ! ! circleShape.m_radius = 0.5f;
! ! ! fd.shape = &circleShape;
! ! ! fd.userData = sprite;
! ! ! body->CreateFixture(&fd);
! ! !
! ! ! // 2. Add an impulse on the direction of the flick and with the flick force
! ! ! CGPoint forceVector = CGPointMake((endPoint.x-startPoint.x)/PTM_RATIO,(endPoint.y-
! ! ! forceVector = CGPointMake(forceVector.x*2, forceVector.y*2);
!
!
!
!
!
6
! b2Vec2 blockImpulse = b2Vec2(forceVector.x,forceVector.y);
! ! ! body->ApplyLinearImpulse(blockImpulse, body->GetPosition());
! ! } else {
! ! ! //NSLog(@"No Flick occured");
! ! }
! }
}

Penguin animation

setp 4

CCSpriteFrame *frame0 = [CCSpriteFrame frameWithTextureFilename:@"penguino1.png" rect:CGRectMake(0, 0, 64, 64)];

sprite = [CCSprite spriteWithSpriteFrame:frame1];
[sprite setPosition:ccp(p.x,p.y)]; // Remember ccp() is macro for CGPointMake()
[self addChild:sprite];

NSMutableArray *animFrames = [NSMutableArray array];
[animFrames addObject:frame0];

CCAnimation *animation = [CCAnimation animationWithSpriteFrames:animFrames delay:0.2f];
CCAnimate *animate = [CCAnimate actionWithAnimation:animation];
CCCallFunc *actionCall = [CCCallFunc actionWithTarget:self selector:@selector(playRandomArcticSqueakSound:)];
CCSequence *seq = [CCSequence actions: animate,actionCall,nil];

[sprite stopAllActions];
[sprite runAction:[CCRepeatForever actionWithAction:seq]];


Fun with Particle Systems

setp 5

music & effect

[[SimpleAudioEngine sharedEngine]
playBackgroundMusic:@"Penguino.mp3"];

[[SimpleAudioEngine sharedEngine]
playEffect:@"PenguinSqueak3.mp3"];

setp 6

Labels and Fonts
Particle system
Tiled maps
Draw & update
Effects & Grid & Camera
Transitions
DrawingPrimitives
RenderTexture
Shader (2.0)
......

more features

THANK YOU

ElvisQin@me.com
weibo.com/hielvis

Now, how about
this game?


在iOS平台上用Cocos2D做开发 | iOS独立开发者秦春林

Recommandé

Recommandé

Contenu connexe

Similaire à 在iOS平台上用Cocos2D做开发 | iOS独立开发者秦春林

Similaire à 在iOS平台上用Cocos2D做开发 | iOS独立开发者秦春林 (18)

Plus de imShining @DevCamp

Plus de imShining @DevCamp (16)

Dernier

Dernier (20)