准备阶段
用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模式下的游戏性能。