16 | Cocos2D-JS | How create an animation

[Gurigraphics]

16 | How create a animation

Game.resources.js

Game.res = {
    HelloWorld_png : "res/HelloWorld.png",
    map_png : "res/tileset.png",
    map_tmx : "res/map.tmx",
    sprites_png : "res/sprites.png",
    sprites_plist : "res/sprites.plist"
};

Game.g_resources = []; 

for ( var i in Game.res ) {
    Game.g_resources.push( Game.res[i] );
}  

Game.vars.js

Game.player = {};
Game.player.addSprite = {};
Game.player.addAnimation = {};
Game.player.runAnimation = {};

Game.layers.js

Create layer

Game.layers[1].extend = cc.Layer.extend({
    init: function () {      
        this._super(); 
        var game = this;
        Game.layers[1].start( game );  
    }
});    

Game.layers[1].start = function( game ){
 
	layer = cc.LayerColor.create(new cc.Color(0,0,0,0), 960, 640); // R+G+B+Opacity+X+Y
	game.addChild(layer); // add layer to game

	Game.player.addSprite( layer );  
}; 

Create player

Game.player.addSprite = function( layer ){

    spriteSheet = null;
    runningAction = null;
    sprite = null;
    animSpeed = 0.2;

    cc.spriteFrameCache.addSpriteFrames( Game.res.sprites_plist );
    layer.spriteSheet = new cc.SpriteBatchNode( Game.res.sprites_png );
    layer.addChild( layer.spriteSheet );
    layer.sprite = new cc.Sprite( "#1.png" );
    layer.sprite.attr( { x:180, y:85 } );           
    layer.spriteSheet.addChild( layer.sprite );

    Game.player.addAnimation[ "right" ]( layer );

    Game.player.runAnimation[ "right" ](); 
}

Create animation right

Game.player.addAnimation[ "right" ] = function( layer ){
   
    animFrames = [];
   
    var str = "1.png";
    var frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);

    var str = "2.png";
    var frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);

    var str = "3.png";
    var frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);  

    animationRight = new cc.Animation( animFrames, animSpeed );
    layer.runAnimationRight = new cc.RepeatForever( new cc.Animate( animationRight ) );
}

Run animation right

Game.player.runAnimation[ "right" ] = function(){
   layer.sprite.flippedX = false; 
   layer.sprite.stopAllActions();
   layer.sprite.runAction( layer.runAnimationRight ); 
}