cocos2d-js 帧序列动画

Posted 2020-06-14

1.resource.js

var res = {
    playerWalk_plist:"res/playerWalk.plist",
    playerWalk_png:"res/playerWalk.png"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

2.app.js

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        this._super();

        var size = cc.winSize;
        //----------------------------------------------------------------------
        cc.spriteFrameCache.addSpriteFrames(res.playerWalk_plist,res.playerWalk_png);

        var sp=cc.Sprite.create();
        sp.setPosition(cc.p(size.width*0.5,size.height*0.5));
        //使用SpriteBatchNode可以让反复加载帧时只渲染一次，只从内存中取出
        var spriteBatchNode= cc.SpriteBatchNode.create(res.playerWalk_png);
        spriteBatchNode.addChild(sp);
        this.addChild(spriteBatchNode);

        var animFrames = [];
        var str = "";
        for (var i = 1; i < 15; i++) {
            str = "playerWalk00" + (i < 10 ? ("0" + i) : i);
            var frame = cc.spriteFrameCache.getSpriteFrame(str);
            animFrames.push(frame);
        }
        var animation = new cc.Animation(animFrames, 1/30);
        sp.runAction(cc.animate(animation).repeatForever());
        //-----------------------------------------------------------------------
        return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});