游戏中常常用到一些动画,若是比较简单的动画则可通过Flash导出动画的所有序列帧。
项目中则可用这些序列帧创建出动画。
js代码示例:
cc.spriteFrameCache.addSpriteFrames(frame.plist); //plist包含所有帧序列
var frameAni = new cc.Sprite();
frameAni.setPosition(cc.p(frameAni.width / 2, frameAni.height / 2));
frameAni.initWithSpriteFrameName("frame_01.png"); //设置初始状态
//添加帧序列
var animation = new cc.Animation();
for (var i = 1; i <= 4; i++) {
var frameName = "frame_0" + i + ".png";
var spriteFrame = cc.spriteFrameCache.getSpriteFrame(frameName);
animation.addSpriteFrame(spriteFrame);
}
animation.setDelayPerUnit(0.05); //设置两个帧播放时间(单位:秒)
animation.setRestoreOriginalFrame(true); //动画执行后还原初始状态
var action = cc.animate(animation);
frameAni.runAction(cc.repeatForever(action));
可以不难看出,就是先用Animation装载所有帧序列,然后通过sprite去执行这个动作。而动作的实质就是
每隔一个时间间隔就去换这个帧,sprite就会渲染出相对应的帧。
需要注意的是这里需要预加载plist文件(代码第一行),如果你是散的碎图的话,加载所有对应的png即可。