title: Loading a json file using PIXI js
body: <p>I've just recently started using PIXIjs and I'm failing to understand why when I am trying to load some .png files using a json, it doesn't work the way I expect it to work. This is an example of my .json file </p>
  
  <pre><code>"autoplay_counter.png":
  {
  "frame": {"x":983,"y":1093,"w":264,"h":147},
  "rotated": false,
  "trimmed": true,
  "spriteSourceSize": {"x":3,"y":1,"w":264,"h":147},
  "sourceSize": {"w":270,"h":150}
  },
  </code></pre>
  
  <p>And here is my PIXI.js code that I am using to load the files:</p>
  
  <pre><code>const game = new PIXI.Application(2017, 1256);
  document.body.appendChild(game.view);
  
  var loader = PIXI.loader;
  loader.add("reels.json");
  loader.load(func);
  
  function func () {
     var frames= [];
     frames.push(PIXI.Texture.fromFrame('Reels_Logo.png'));
     frames.push(PIXI.Texture.fromFrame('Reels_Frame.png'));
     frames.push(PIXI.Texture.fromFrame('Symbol_Cargo.png'));
     var x = frames.pop();
     while ( x != null) {
       var anim = new PIXI.Sprite(x);
       game.stage.addChild(anim);
       x = frames.pop();
     }
  }
  </code></pre>
  
  <p>The problem I am having is that in spite of the fact that it's loading the png files, it is not positioning them accordingly. I am not quite familiar with json files but as far as I can understand, in the meta it should say the size o the window? That for me is <code>"size": {"w":1256,"h":2017},</code> and as you can see in my PIXI file, it's the size I used for creating the app. That being said, my 2 questions are:</p>
  
  <p>How can I place the png files on the screen accordingly?
  Is there any better way to parse the json file with PIXI so that I may not manually insert/hard code the names of the files from the json into the code?</p>
  
  <p>Thank you very much, any help is highly appreciated</p>