title: Cannot load images with pixi.js
body: <p>I wanted to create a small game in <b>Typescript</b> using <b>Pixi.js</b> as a rendering engine. At the beginning I was following <a href="http://ezelia.com/2013/05/pixi-tutorial/" rel="nofollow">http://ezelia.com/2013/05/pixi-tutorial/</a>. There were some mistakes in code but I managed to fix them. Now I wanted to load my spritesheet with pixi. Unfortunately I've got an error in the debug console: <code>Uncaught Error: The frameId 'body.png' does not exist in the texture cache function (baseTexture, frame)</code>.</p>
  
  <p>That's my code to load the spritesheet:</p>
  
  <pre><code>var assetsToLoader = ["/pixi/img/Spritesheet.json"],
      loader = new PIXI.AssetLoader(assetsToLoader);
  loader.onComplete = IntroScene.onAssetsLoaded;
  loader.load();
  </code></pre>
  
  <p>Here is mine <code>IntroScene.onAssetsLoaded()</code> method:</p>
  
  <pre><code>private static onAssetsLoaded() {
      for (var i = 0; i &lt; IntroScene.images.length; i++) {
          var frameName = IntroScene.images[i],
              texture = PIXI.Texture.fromFrame(frameName);
          IntroScene.textures.push(texture);
      }
  }
  </code></pre>
  
  <p>That's my <code>IntroScene.images</code>:</p>
  
  <pre><code>private static images: any = [
      "body.png",
      "curvedBody1.png",
      "curvedBody2.png",
      "head.png",
      "tail.png",
      "smallFood.png",
      "bigFood.png",
      "background.png"
  ];
  </code></pre>
  
  <p>And finally <code>Spritesheet.json</code> generated with texture packer (<a href="http://www.codeandweb.com/texturepacker" rel="nofollow">http://www.codeandweb.com/texturepacker</a>):</p>
  
  <pre><code>{"frames": [
  
  {
      "filename": "background.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}
  },
  {
      "filename": "bigFood.png",
      "frame": {"x":68,"y":2,"w":40,"h":40},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
      "sourceSize": {"w":40,"h":40}
  },
  {
      "filename": "body.png",
      "frame": {"x":2,"y":68,"w":40,"h":40},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
      "sourceSize": {"w":40,"h":40}
  },
  {
      "filename": "curvedBody1.png",
      "frame": {"x":44,"y":68,"w":40,"h":40},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
      "sourceSize": {"w":40,"h":40}
  },
  {
      "filename": "curvedBody2.png",
      "frame": {"x":86,"y":68,"w":40,"h":40},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
      "sourceSize": {"w":40,"h":40}
  },
  {
      "filename": "head.png",
      "frame": {"x":2,"y":110,"w":40,"h":40},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
      "sourceSize": {"w":40,"h":40}
  },
  {
      "filename": "smallFood.png",
      "frame": {"x":44,"y":110,"w":40,"h":40},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
      "sourceSize": {"w":40,"h":40}
  },
  {
      "filename": "tail.png",
      "frame": {"x":86,"y":110,"w":40,"h":40},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
      "sourceSize": {"w":40,"h":40}
  }],
  "meta": {
      "app": "http://www.codeandweb.com/texturepacker ",
      "version": "1.0",
      "image": "Spritesheet.png",
      "format": "RGBA8888",
      "size": {"w":128,"h":256},
      "scale": "1",
      "smartupdate": "$TexturePacker:SmartUpdate:a9757ea06ba8b63665a1e5d45be72609$"
  }
  }
  </code></pre>
  
  <p>I would be very grateful if someone managed to help me.</p>