在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模式下的游戏性能。

你可能感兴趣的:(cocos2d-js)