typescript - Kan inte ladda bilder med pixi.js

Jag ville skapa ett litet spel i Typescript med Pixi.js som renderingsmotor. I början följde jag http://ezelia.com/2013/05/pixi-tutorial/. Det fanns några fel i koden men jag lyckades fixa dem. Nu ville jag ladda min spritesheet med Pixi. Tyvärr fick jag ett fel i debugkonsolen: Uncaught Error: The frameId 'body.png' does not exist in the texture cache function (baseTexture, frame).

Det är min kod för att ladda spritesheeten:

var assetsToLoader = ["/pixi/img/Spritesheet.json"],
    loader = new PIXI.AssetLoader(assetsToLoader);
loader.onComplete = IntroScene.onAssetsLoaded;
loader.load();

Här är min IntroScene.onAssetsLoaded()-metod:

private static onAssetsLoaded() {
    for (var i = 0; i < IntroScene.images.length; i++) {
        var frameName = IntroScene.images[i],
            texture = PIXI.Texture.fromFrame(frameName);
        IntroScene.textures.push(texture);
    }
}

Det där är min IntroScene.images:

private static images: any = [
    "body.png",
    "curvedBody1.png",
    "curvedBody2.png",
    "head.png",
    "tail.png",
    "smallFood.png",
    "bigFood.png",
    "background.png"
];

Och slutligen Spritesheet.json genererat med texture packer (http://www.codeandweb.com/texturepacker):

{"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$"
}
}

Jag skulle vara mycket tacksam om någon lyckades hjälpa mig.

Svar #1

Titta på exemplet på spritesheet här, som du ser i exemplet är "frames" ett objekt, och du har en array istället. Korrigera din Spritesheet.json eller så kan du komma åt dina texturer via numeriskt id, till exempel PIXI.Texture.fromFrame(0) för kroppen, PIXI.Texture.fromFrame(1) för curvedBody1 osv.

Svar #2

Jag fick samma fel när jag gjorde handledningen på http://peepsquest.com/tutorials/isometric-tiles-with-height.html

Jag fixade detta genom att ersätta

var tile=PIXI.Sprite.fromFrame(filnamn);

med

var bricka=PIXI.Sprite.fromImage(filnamn);