无法使用pixi.js加载图像

Question

我想在Typescript中使用Pixi.js作为渲染引擎创建一个小游戏。一开始我是跟随http://ezelia.com/2013/05/pixi-tutorial/.代码中有一些错误，但我设法解决了。现在我想用pixi加载我的精灵表。不幸的是，我在调试控制台中遇到了一个错误：Uncaught Error: The frameId 'body.png' does not exist in the texture cache function (baseTexture, frame)。

这是我加载精灵表的代码：

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

这里是我的IntroScene.onAssetsLoaded()方法：

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);
    }
}

那是我的IntroScene.images:

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

最后用纹理打包器生成Spritesheet.json(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$"
}
}

如果有人能帮助我，我将不胜感激。

Answer 1

看看这里的spritesheet示例，正如您在示例中看到的那样，"frames"是一个对象，而您有一个数组。修复Spritesheet.json，或者您可以通过数字id访问纹理，例如PIXI.Tructure.fromFrame（0）用于body，PIXI.Trasture.fromFrame（1）用于curvedBody1等。

Answer 2

我在http://peepsquest.com/tutorials/isometric-tiles-with-height.html

我通过更换解决了这个问题

var tile=PIXI.Sprite.fromFrame（文件名）；

带有

var tile=PIXI.Sprite.fromImage（文件名）；

Answer 3

您试图调用Texture.fromFrame，就好像它是一个静态方法一样，但它实际上是一个实例方法。你可能是想打电话给Texture.fromImage？