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

Question

How can I use PIXI js to animate from spritesheets using TiledSprites? I need to animate a tiled sprite background from a sprite sheet.

Currently there is API calls to animate a tiled sprite in the PIXI.js API. I have created the following class to help me load and animate tiled backgrounds.

/////////////////////////////////////////////////////////////////////////////
/// 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);

This code is however highly inefficient because it calculates a new TiledTexture each time a new frame is entered. How can I optimize this?

Answer 1

I struggeled some time with this but came up with the following. I hope it helps

/////////////////////////////////////////////////////////////////////////////
/// 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);