【Cocos2d-html5游戏引擎学习笔记(10)】自定义精灵动画

上篇说到在这次要把自定义动画补上来，所以这篇就介绍这个了，由于Cocos2d-html5这个引擎我在之前把以前的游戏重新覆写了一遍之后就没继续深究了，不过基本的常用类都用到了，所以现在回头来写学习笔记可能介绍的顺序有点乱，如果觉得介绍顺序不是很得当，还请跳转列表跳着看哈

http://blog.csdn.net/column/details/wangdi.html

虽然是回头来写，不过确实是很好的一种复习，技术这东西常时间不用，尤其用的不是很多次的情况下，很容易就生疏，忘了一些方法怎么用，回头再来看看学过的知识，还是有所提高的。

精灵是游戏中很重要的元素，但是光靠静止的精灵是远远不够的，只有活动的才会感觉游戏很生动。

精灵的自定义动画比较常用的有这么3种，其实原理都是一样，利用帧图片，快速的进行播放，就会感觉精灵是在动了，这里也正好可以回顾一下精灵的创建。

第一种：

在一整张图片中切出每一帧的图片，然后依次播放，采用这种的需要美工比较精确的把每一帧图片区域均等分

比如有这样的图片

var texture = cc.TextureCache.getInstance().addImage("res/dragon_animation.png");    //读取我们需要的图片
var frame0 = cc.SpriteFrame.createWithTexture(texture, cc.rect(132 * 0, 132 * 0, 132, 132));  //将图片中每一帧利用rect切出来保存到精灵帧中
var frame1 = cc.SpriteFrame.createWithTexture(texture, cc.rect(132 * 1, 132 * 0, 132, 132));
var frame2 = cc.SpriteFrame.createWithTexture(texture, cc.rect(132 * 2, 132 * 0, 132, 132));
var frame3 = cc.SpriteFrame.createWithTexture(texture, cc.rect(132 * 3, 132 * 0, 132, 132));
var frame4 = cc.SpriteFrame.createWithTexture(texture, cc.rect(132 * 0, 132 * 1, 132, 132));
var frame5 = cc.SpriteFrame.createWithTexture(texture, cc.rect(132 * 1, 132 * 1, 132, 132));

var sprite = cc.Sprite.createWithSpriteFrame(frame0);    //从图片帧中创建一个精灵
sprite.setPosition(cc.p(size.width / 2, size.height / 2));
this.addChild(sprite);

var animFrames = [];     //将之前的每一帧保存到数组中
animFrames.push(frame0);
animFrames.push(frame1);
animFrames.push(frame2);
animFrames.push(frame3);
animFrames.push(frame4);
animFrames.push(frame5);

var animation = cc.Animation.create(animFrames, 0.2);  创建动画， 第一个参数帧数组， 第二个参数是延迟时间，即每帧图片间隔多少播放
var animate = cc.Animate.create(animation);  创建动画动作
sprite.runAction(cc.RepeatForever.create(animate));

效果如下：

第二种：

直接从每一帧图片中创建精灵动画

比如图片资源是这样的

var coinBmp = cc.Sprite.create("res/coin/coin1.png");
coinBmp.setPosition(cc.p(size.width * 0.2, size.height * 0.5));
this.addChild(coinBmp);
        
var coinAnima = cc.Animation.create();  //利用动画保存每一帧的图片
coinAnima.addSpriteFrameWithFile(s_coin1);
coinAnima.addSpriteFrameWithFile(s_coin2);
coinAnima.addSpriteFrameWithFile(s_coin3);
coinAnima.addSpriteFrameWithFile(s_coin4);
coinAnima.addSpriteFrameWithFile(s_coin5);
coinAnima.addSpriteFrameWithFile(s_coin6);
coinAnima.addSpriteFrameWithFile(s_coin7);
coinAnima.addSpriteFrameWithFile(s_coin8);
coinAnima.addSpriteFrameWithFile(s_coin9);
coinAnima.addSpriteFrameWithFile(s_coin10);
coinAnima.addSpriteFrameWithFile(s_coin11);
coinAnima.addSpriteFrameWithFile(s_coin12);
coinAnima.addSpriteFrameWithFile(s_coin13);
coinAnima.addSpriteFrameWithFile(s_coin14);
        
coinAnima.setDelayPerUnit(0.05);  //每一帧播放的间隔
coinAnima.setRestoreOriginalFrame(true);  //是否回到第一帧播放
coinBmp.runAction(cc.RepeatForever.create(cc.Animate.create(coinAnima)));

效果如下：

第三种：

这种是最方面也是效率最好的一种，利用图片打包工具创建出plist文件，然后读取每一帧图片创建动画

比如图片资源是这样的，不要以为和第一种一样（原理是一样，读取每一块区域图片），它是有对应的plist文件

cc.SpriteFrameCache.getInstance().addSpriteFrames(s_grossiniPlist, s_grossini);

var frame;
frame = cc.SpriteFrameCache.getInstance().getSpriteFrame("grossini_dance_01.png");
var sprite = cc.Sprite.createWithSpriteFrame(frame);  //利用图片帧来创建精灵
sprite.setPosition(cc.p(size.width*0.8, size.height / 2));
this.addChild(sprite);

var animFrames = [];
var str = "";
for (var i = 1; i < 15; i++) {  //利用循环加入图片帧，比前面两种要方便很多
    str = "grossini_dance_" + (i < 10 ? ("0" + i) : i) + ".png";  //这里用三目运算符是因为图片资源前10张是 xx01，xx02这样命名的，所以要添加 0 进去
    frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
    animFrames.push(frame); //放入帧数组
}

var animation = cc.Animation.create(animFrames, 0.2);
var animate = cc.Animate.create(animation);
sprite.runAction(cc.RepeatForever.create(animate));

效果如下：

以上就是常用的三种自定义动画了，如果帧图片比较少可以使用第二种方式，当然推荐第三种。