title: How do I create an animated tile in pixi.js with good performance?
body: <p>How can I use PIXI js to animate from spritesheets using TiledSprites? I need to animate a tiled sprite background from a sprite sheet.</p>
  
  <p>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.</p>
  
  <pre><code>/////////////////////////////////////////////////////////////////////////////
  /// 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 &gt;= 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);
  </code></pre>
  
  <p>This code is however highly inefficient because it calculates a new TiledTexture each time a new frame is entered. How can I optimize this?</p>