Question

我想使用 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"
];

最后使用纹理打包器（http://www.codeandweb.com/texturepacker）生成Spritesheet.json：

{"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 here的示例，正如您在示例中看到的那样“frames”是一个对象，而您拥有数组。修复你的 Spritesheet.json ，或者你可以通过数字id访问你的纹理，例如用于body的PIXI.Texture.fromFrame（0），用于curvedBody1等的PIXI.Texture.fromFrame（1）。

Answer 2

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

我通过替换

来解决这个问题

var tile = PIXI.Sprite.fromFrame（filename）;

与

var tile = PIXI.Sprite.fromImage（filename）;

Answer 3

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

无法使用pixi.js加载图像

3 个答案: