pixi

import Pixi from 'pixi.js';

class Application {
  constructor() {
    this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb});
    document.body.appendChild(this.app.view);
    this.initializeFunia = this.initializeFunia.bind(this);
    this.run = this.run.bind(this);
    this.gameLoop = this.gameLoop.bind(this);
    this.initializeFunia();
  }

  initializeFunia() {
    PIXI.loader.
      add("assets/images/funia/funia.json").
      load(this.initializeFuniaFrames.bind(this));
  }

  initializeFuniaFrames(){
    this.texture = PIXI.utils.TextureCache["assets/images/funia/cat3.png"];
    this.resourceFrames = PIXI.loader.resources["assets/images/funia/funia.json"].data.frames;
    this.runningFrames = [];
    for(let i = 0; i < 6; i++) {
      let word = "walk" + i;
      let frame = this.resourceFrames[word];
      let rectangle = new PIXI.Rectangle(frame.x, frame.y, frame.w, frame.h);
      this.runningFrames.push(rectangle);
    }
    const stance = new PIXI.Rectangle(21, 0, 18, 14);
    this.texture.frame = stance;
    this.funia = new PIXI.Sprite(this.texture);
    this.funia.anchor.set(0.5);
    this.funia.scale.x = 4;
    this.funia.scale.y = 4;
    this.funia.x = this.app.renderer.width / 2;
    this.funia.y = this.app.renderer.height / 2;
    this.app.stage.addChild(this.funia);
  }

  gameLoop(funia, runningFrames) {
    requestAnimationFrame(this.gameLoop);

    funia.x -= 1;
    //xture.frame = this.runningFrames[this.funia.x % 6];
    this.app.renderer.render(this.app.stage);
  }

  run() {
    debugger;
    this.gameLoop(this.funia, this.runningFrames);
  }
}

new Application().run();