无法使用 pixi.js 加载图像答案

【问题标题】：Cannot load images with pixi.js无法使用 pixi.js 加载图像
【发布时间】：2013-07-11 10:22:13
【问题描述】：

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

这是我加载 spritesheet 的代码：

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

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

【问题讨论】：

标签： typescript sprite-sheet pixi.js

【解决方案1】：

我在做教程时遇到了同样的错误 http://peepsquest.com/tutorials/isometric-tiles-with-height.html

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

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

与

var tile = PIXI.Sprite.fromImage(filename);

【讨论】：

【解决方案2】：

查看 spritesheet here 的示例，正如您在示例中看到的那样，“frames”是一个对象，而您有数组。修复您的 Spritesheet.json 或者您可以通过数字 id 访问您的纹理，例如 PIXI.Texture.fromFrame(0) 用于 body，PIXI.Texture.fromFrame(1) 用于curdBody1 等。

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢。我认为Texture.fromFrame 是一种静态方法，但文档正在确认您的话。我明天会尝试修复我的代码并写下事情的进展情况。
很遗憾我没能完成这项工作，所以最后我决定加载易于实现的分离图像。