CVP认证学习笔记--李天宇019实现帧动画处理

来源:互联网 发布:linux终端界面 编辑:程序博客网 时间:2024/06/05 05:23

    首先先总结一下帧动画的步骤:①spriteanimationanimatesprite.runAction

    下面让我们来看一下具体的实现步骤:

var HelloWorldLayer = cc.Layer.extend({

    ctor:function(){

        this._super();

        var size = cc.winSize;

        var bg = new cc.Sprite(res.bg_jpg);

        this.addChild(bg);

        bg.setPosition(size.width/2,size.height/2);

        //添加动画

        var sp = new cc.Sprite();

        sp.setTag(100);

        var animation = new cc.Animation();

        for(var i=1;i<=5;i++){

            var frameName = "res/"+"walk0"+i+".png";

            animation.addSpriteFrameWithFile(frameName);

        }

        animation.setDelayPerUnit(0.1);

        var animate = cc.animate(animation);

        this.addChild(sp);

        sp.runAction(cc.repeatForever(animate));

        sp.setPosition(200,200);

        return true;

}

可以看出我们通过一组for循环通过字符串连接的形式将每一帧的精灵进行添加操作。设置帧率(帧率越高,播放的越慢),然后按照步骤即可播放帧动画,如果需要循环播放则需要用到cc.repeatforever

最后附上作业链接:

http://www.cocoscvp.com/usercode/2016_04_24/b903c70568416cbe3f1136a8c593b889b4443e1f/

0 0