const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 512,
  height: 512,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

const animals = {
  "frames": {
    "cat.png": {
      "frame": {
        "x": 2,
        "y": 2,
        "w": 64,
        "h": 64
      },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {
        "x": 0,
        "y": 0,
        "w": 64,
        "h": 64
      },
      "sourceSize": {
        "w": 64,
        "h": 64
      },
      "pivot": {
        "x": 0.5,
        "y": 0.5
      },
      "position": {"x": 200, "y": 100}
    },
    "hedgehog.png": {
      "frame": {
        "x": 68,
        "y": 2,
        "w": 64,
        "h": 64
      },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {
        "x": 0,
        "y": 0,
        "w": 64,
        "h": 64
      },
      "sourceSize": {
        "w": 64,
        "h": 64
      },
      "pivot": {
        "x": 0.5,
        "y": 0.5
      },
      "position": {"x": 100, "y": 50}
    },
    "tiger.png": {
      "frame": {
        "x": 134,
        "y": 2,
        "w": 64,
        "h": 64
      },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {
        "x": 0,
        "y": 0,
        "w": 64,
        "h": 64
      },
      "sourceSize": {
        "w": 64,
        "h": 64
      },
      "pivot": {
        "x": 0.5,
        "y": 0.5
      },
      "position": {"x": 250, "y": 200}
    }
  },
  "meta": {
    "app": "http://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "https://i.imgur.com/b3rJy4y.png",
    "format": "RGBA8888",
    "size": {
      "w": 200,
      "h": 68
    },
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:52586866875309c357a59ef94cc3e344:67b70cfeefc06c04b551ab33c8f1fc7a:b00d48b51f56eb7c81e25100fcce2828$"
  }
}

const loader = new PIXI.Loader();
loader
  .add('fakeimg',animals.meta.image)
  .load((loader, resource)=> {
  init(resource);
})

function init(resource) {
  for(let item in animals.frames) {
    let rectangle = new PIXI.Rectangle(animals.frames[item].frame.x, animals.frames[item].frame.y, animals.frames[item].frame.w, animals.frames[item].frame.h);
    let newTex = new PIXI.Texture(resource.fakeimg.texture, rectangle);
    const sprite = new PIXI.Sprite(newTex);
    sprite.x = animals.frames[item].position.x;
    sprite.y = animals.frames[item].position.y;
    app.stage.addChild(sprite);
  }
}