在cocos2d-JS中加载动画资源文件

 

准备阶段

用TexturePacker生成你自己的动画 

首先，我们应该把“running.plist” 和 “running.png”添加到 resource.js文件中。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var res = { helloBG_png : "res/helloBG.png", start_n_png : "res/start_n.png", start_s_png : "res/start_s.png", PlayBG_png  : "res/PlayBG.png", runner_png  : "res/running.png", runner_plist : "res/running.plist" };   var g_resources = [ //image res.helloBG_png, res.start_n_png, res.start_s_png, res.PlayBG_png, res.runner_png, res.runner_plist ];

这里我们把变量 runner_ png 的值置成精灵表的文件名"running.png"。稍后，我们会用变量 runner_png 来创建我们的玩家精灵。

创建玩家动画

首先，我们应该在文件AnimationLayer.js中添加下面的成员变量：

1 2 3

spriteSheet:null, runningAction:null, sprite:null,

然后，我们用下面的内容替换玩家的创建方法：

1	this.sprite = cc.Sprite.create("#runner0.png");

我们可以用下面的代码很轻松的创建一个动画：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//1.加载精灵表  cc.spriteFrameCache.addSpriteFrames(res.runner_plist);   //2.创建精灵帧数组 var animFrames = []; for (var i = 0; i < 8; i++) { var str = "runner" + i + ".png"; var frame = cc.spriteFrameCache.getSpriteFrame(str); animFrames.push(frame); } //3.用精灵帧数组和一定的时间间隔创建一个动画 var animation = cc.Animation.create(animFrames, 0.1);   //4.用一个重复持续动作封装这个精灵动作 this.runningAction = cc.RepeatForever.create(cc.Animate.create(animation));

这个动画是用精灵表中一系列小的图片（从runner0.png到runner7.png）构造出来的。

下面是在cocos2d-JS中创建一个动画的完整的处理过程：

1.往SpriteFrameCache类中加载精灵表的plist文件。

2.往数组animFrames中添加动画帧。

3.用动画帧数组和表示每两个精灵帧之间的时间间隔来创建一个cc.Animation的对象。

4.创建最终的cc.Animate对象，并用一个重复的持续性动作封装起来。

这样这个动画就会一直运动下去。

一般来说，如果我们在cocos2d-JS中使用动画，我们经常会用SpriteBatchNode来提高在WebGL模式或cocos2d-X JSB模式下的游戏性能。