首先需要将精灵动作帧动画图片使用TexturePacker创建plist,创建好后,将生成的plist和png图片(所有帧动画图片集成的一张大图);
1、进行预加载操作
cc.spriteFrameCache.addSpriteFrames(res.Mario_plist);
预加载后,可在工程中加载使用plist中的任何一个动作图片,使用方式:
cc.spriteFrameCache.getSpriteFrame("mario_14_01.png");
2、精灵需要自身动作,如跑动或者击打等动作,执行代码如下:
addFrames:function(){
for(var i=1;i<21;i++){
if(i<10){
this.spriteFames.push(cc.spriteFrameCache.getSpriteFrame("mario_14_0"+i+".png"));
}else{
this.spriteFames.push(cc.spriteFrameCache.getSpriteFrame("mario_14_"+i+".png"));
}
}
},
runSelf:function(){
var animation = new cc.Animation(this.spriteFames);
animation.setDelayPerUnit(1/30);
animation.setRestoreOriginalFrame(true);
animation.setLoops(-1);
var animate = cc.Animate(animation);
this.mario.runAction(animate);
}
如上代码,在addFrames函数中,将plist的动作图片加入spriteFrames数组中,在runSelf函数中,定义动画,最后让马里奥执行动画,如没有什么差错,此时应该能看到一个拼命在跑动的马里奥,虽然只是在原地踏步。