Cocos2d 2.0 Animation

To do animation under cocos2d 2.0 you need to create sprite frame cache, sprite sheet, animation frames, animation, sprite, action, and start the animation.

Create Sprite Frame Cache

    [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"role.plist"];

Create Sprite Sheet

    CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNode batchNodeWithFile:@"role.png"];

    [self addChild:spriteSheet];

Create Animation Frames

    NSMutableArray *danceAnimationFrames = [NSMutableArray array];

    for(int i=1; i <= 14; i++) {

        [danceAnimationFrames addObject:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"role%02d.png", i]]];

    }

Create Animation

    CCAnimation *danceAnimation = [CCAnimation animationWithSpriteFrames:danceAnimationFrames delay:0.1f];

Add Animation to Animation Cache

    [[CCAnimationCache sharedAnimationCache] addAnimation:danceAnimation name:@"danceAnimation"];

Get Animation from Animation Cache

    danceAnimation = [[CCAnimationCache sharedAnimationCache] animationByName:@"danceAnimation"];

Create Sprite

    self.role = [mySprite spriteWithSpriteFrameName:@"role01.png"];

Create Action

    self.danceAction = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:danceAnimation]];

Sample Code for AniEgg.h

#import "cocos2d.h"

#import "mySprite.h"

@interface AniEgg : CCLayer {

    mySprite *_role;

    CCAction *_danceAction;

}

+(CCScene *)scene;

@property (nonatomic, retain) mySprite *role;

@property (nonatomic, retain) CCAction *danceAction;

@end

Sample Code for AniEgg.m

#import "AniEgg.h"

BOOL paused;

int pausedCount;

@implementation AniEgg

@synthesize role = _role;

@synthesize danceAction = _danceAction;

+(CCScene *) scene {

    // 'scene' is an autorelease object.

    CCScene *scene = [CCScene node];

    // 'layer' is an autorelease object.

    AniEgg *layer = [AniEgg node];

    // add layer as a child to scene

    [scene addChild: layer];

    // return the scene

    return scene;

}

-(id) init {

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

        [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"role.plist"];

        CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNode batchNodeWithFile:@"role.png"];

        [self addChild:spriteSheet];

        NSMutableArray *danceAnimationFrames = [NSMutableArray array];

        for(int i=1; i <= 14; i++) {

            [danceAnimationFrames addObject:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"role%02d.png", i]]];

        }

        CCAnimation *danceAnimation = [CCAnimation animationWithSpriteFrames:danceAnimationFrames delay:0.1f];

        CGSize winSize = [[CCDirector sharedDirector] winSize];

        self.role = [mySprite spriteWithSpriteFrameName:@"role01.png"];

        _role.position = ccp(winSize.width / 2, winSize.height / 2);

        self.danceAction = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:danceAnimation]];

        [spriteSheet addChild:_role];

        [_role runAction:_danceAction];

        paused = NO;

        [self schedule:@selector(nextFrame:) interval:0.1f];

        self.isTouchEnabled = YES;

    }

    return self;

}

- (void) nextFrame:(ccTime)dt {

    if ([_role isTouched]) {

        if (paused) {

            paused = NO;

            [[[CCDirector sharedDirector] actionManager] resumeTarget:_role];

            pausedCount = 0;

        } else {

            paused = YES;

            [[[CCDirector sharedDirector] actionManager] pauseTarget:_role];

            pausedCount = 0;

        }

        [_role setUnTouched];

    }

    if (paused) {

        pausedCount++;

        if (pausedCount >= 20) {

            paused = NO;

            [[[CCDirector sharedDirector] actionManager] resumeTarget:_role];

            pausedCount = 0;            

        }

    }

}

- (void) dealloc

{

    self.role = nil;

    self.danceAction = nil;

}

@end

Cocos2d 2.0 Basic Concepts

There are some basic concepts introduced in Cocos2d that you will need to know when developing a cocos2d application.

• Scenes
• Director
• Layers
• Sprites

Scenes

A scene is more or less an independent piece of the app workflow. Your app can have many scenes, but only one of them is active at a given time.

Sample Workflow using Scenes

A cocos2d CCScene is composed of one or more layers (CCLayer), all of them piled up. Layers give the scene an appearance and behavior; the normal use case is to just make instances of Scene with the layers that you want.

There is also a family of CCScene classes called transitions (CCTransitionScene) which allow you to make transitions between two scenes.


Since scenes are subclasses of CCNode, they can be transformed manually or by using actions.

Director

The CCDirector is the component which takes care of going back and forth between scenes. 

The CCDirector is a shared (singleton) object. It knows which scene is currently active, and it handles a stack of scenes. The CCDirector is the one who will actually change the CCScene, after a CCLayer has asked for push, replacement or end of the current scene.

Layers

A CCLayer has a size of the whole drawable area, and knows how to draw itself. It can be semi transparent, allowing to see other layers behind it. Layers are the ones defining appearance and behavior, so most of your programming time will be spent coding CCLayer subclasses that do what you need. 


The CCLayer is where you define event handlers. Events are propagated to layers until some layer catches the event and accepts it.


Cocos2d provides a library of useful predefined layers such as CCMenu, CCColorLayer, CCMultiplexLayer.


Layers can contain CCSprite objects, CCLabel objects and even other CCLayer objects as children.


Since layers are subclass of CCNode, they can be transformed manually or by using actions.

Sprites

A cocos2d' sprite is like any other computer sprite. It is a 2D image that can be moved, rotated, scaled, animated, etc.

Sprites (CCSprite) can have other sprites as children. When a parent is transformed, all its children are transformed as well.

Since sprites are subclass of CCNode, they can be transformed manually or by using actions.

Cocos2d 2.0 Menu Item

Menus

Menus provide one way for users to interact with your game using a familiar GUI concept, “buttons.

Menu Item to choose from:

• CCMenuItemAtlasFont
• CCMenuItemFont
• CCMenuItemImage
• CCMenuItemLabel
• CCMenuItemSprite
• CCMenuItemToggle

Create Menu Item

CCMenuItemImage *menuItemNormal = 
                     [CCMenuItemImage           
                         itemWithNormalImage:@"normal.png"

                         selectedImage:@"normal_selected.png"

                         block:^(id sender) {

                             [[CCDirector sharedDirector] replaceScene:[NormalScene scene]];

                         }];

CCMenuItemImage *menuItemSlim = 
                     [CCMenuItemImage 
                         itemWithNormalImage:@"slim.png"

                         selectedImage:@"slim_selected.png"

                         block:^(id sender) {

                             [[CCDirector sharedDirector] replaceScene:[SlimScene scene]];

                         }];

CCMenuItemImage *menuItemFat = 
                     [CCMenuItemImage
                         itemWithNormalImage:@"fat.png"

                         selectedImage:@"fat_selected.png"

                         block:^(id sender) {

                             [[CCDirector sharedDirector] replaceScene:[FatScene scene]];

                         }];

Create Menu and add Menu Items

CCMenu *myMenu = [CCMenu menuWithItems:menuItemNormal, 
                                       menuItemSlim, 
                                       menuItemFat, 
                                       nil];

Add Menu to Scene

[self addChild:myMenu];