如何在pixi.js中创建具有良好性能的动画磁贴？

Question

如何使用TiledSprites使用PIXI js从spritesheets制作动画？我需要从精灵表中为平铺的精灵背景设置动画。

目前有一些API调用可以在PIXI.js API中设置平铺精灵的动画。我创建了以下类来帮助我加载和动画平铺背景。

/////////////////////////////////////////////////////////////////////////////
/// Tiling Sprite Animation
/////////////////////////////////////////////////////////////////////////////
(function() {
    PIXI.TilingSpriteAnimation = function(texture, frames, rows, frametime, loop)  {
          PIXI.TilingSprite.call(
            this, texture,
            VIEWPORTWIDTH,
            this._texture.baseTexture.height);

        this._stop = true;
        this._texture = new PIXI.Texture(texture);
        this.frameTime = frametime;
        this.loop = loop || true;
        this.curX = 0;
        this.curY = 0;
        this.fh = this._texture.height / rows;
        this.fw = this._texture.width / frames;
        this.ticks = 0;
        this.maxFrames = frames;
        this.maxRows = rows;
        this.done = false;

        this.calculateFrame();
    };

    PIXI.TilingSpriteAnimation.prototype = Object.create( PIXI.TilingSprite.prototype );
    PIXI.TilingSpriteAnimation.prototype.constructor = PIXI.TilingSpriteAnimation;

    Object.defineProperty(PIXI.TilingSpriteAnimation.prototype, 'texture', {
        get: function() {
            return this._texture;
        }
    });

    PIXI.TilingSpriteAnimation.prototype.update = function() {

        console.log(this.ticks);
        if(!this._stop) {
          this.ticks += 1;
        }

        if (this.done == false) {
            if (this.ticks >= this.frameTime) {
                this.curX++;
                this.ticks = 0;

                if (this.curX == this.maxFrames) {
                    this.curX = 0;

                    this.curY++;

                    if (this.curY == this.maxRows) {
                        this.curY = 0;

                        if (!this.loop)
                            this.done = true;
                    }
                }
                this.calculateFrame();
            }
        }
    };

    PIXI.TilingSpriteAnimation.prototype.goto = function(frame, row) {
        this.curX = frame;
        this.curY = row || 0;
    };

    PIXI.TilingSpriteAnimation.prototype.stop = function() {
        this._stop = true;
    };

    PIXI.TilingSpriteAnimation.prototype.play = function() {
        this._stop = false;
    };

    PIXI.TilingSpriteAnimation.prototype.calculateFrame = function() {
        this.texture.frame.x = this.curX * this.fw;
        this.texture.frame.y = this.curY * this.fh;
        this.texture.frame.width = this.fw;
        this.texture.frame.height = this.fh;
        this.texture.setFrame(this.texture.frame);
        this.generateTilingTexture(this.texture);
    };

}).call(this);

但是，此代码的效率非常低，因为每次输入新帧时，它都会计算新的TiledTexture。我该如何优化呢？

Answer 1

我在这方面花了一些时间，但想出了以下内容。我希望它有所帮助

/////////////////////////////////////////////////////////////////////////////
/// Tiling Sprite Animation
/////////////////////////////////////////////////////////////////////////////
(function() {
    PIXI.TilingSpriteAnimation = function(texture, frames, frametime, loop)  {
          PIXI.TilingSprite.call(
            this, texture,
            VIEWPORTWIDTH,
            VIEWPORTHEIGHT);

        this._stop = true;
        this._texture = new PIXI.Texture(texture);
        this.frameTime = frametime;
        this.loop = loop || true;
        this.curX = 0;
        this.fh = this._texture.height;
        this.fw = this._texture.width / frames;
        this.ticks = 0;
        this.maxFrames = frames;

        for (var i=0;i<frames;i++){
          this.preLoadFrame(i);
        }

        this.calculateFrame();
    };

    PIXI.TilingSpriteAnimation.prototype = Object.create( PIXI.TilingSprite.prototype );
    PIXI.TilingSpriteAnimation.prototype.constructor = PIXI.TilingSpriteAnimation;

    Object.defineProperty(PIXI.TilingSpriteAnimation.prototype, 'texture', {
        get: function() {
            return this._texture;
        }
    });

    PIXI.TilingSpriteAnimation.prototype.update = function() {

        if (this._stop == false) {
            this.ticks += 1;
            if (this.ticks >= this.frameTime) {
                this.curX++;
                this.ticks = 0;

                if (this.curX == this.maxFrames) {
                    this.curX = 0;

                    if (!this.loop) {
                        this._stop = true;
                    }
                }
                this.calculateFrame();
            }
        }
    };

    PIXI.TilingSpriteAnimation.prototype.goto = function(frame) {
        this.curX = frame;
    };

    PIXI.TilingSpriteAnimation.prototype.stop = function() {
        this._stop = true;
    };

    PIXI.TilingSpriteAnimation.prototype.play = function() {
        this._stop = false;
    };

    PIXI.TilingSpriteAnimation.prototype.calculateFrame = function() {
      this.tilingTexture = PIXI.Texture.fromFrame("texture" + this.curX);
    };

    PIXI.TilingSpriteAnimation.prototype.preLoadFrame = function(frame) {
        var text = new PIXI.TilingSprite(this.texture);
        text.texture.frame.x = frame * this.fw;
        text.texture.frame.y = 0;
        text.texture.frame.width = this.fw;
        text.texture.frame.height = this.fh;
        text.texture.setFrame(text.texture.frame);  
        text.generateTilingTexture(text);

        PIXI.Texture.addTextureToCache(text.tilingTexture, "texture" + frame)
    };
}).call(this);