2

我想使用Pixi.js作为渲染引擎在Typescript中创建一个小游戏。一开始我关注的是http://ezela.com/2013/05/pixi-tutorial/。代码中有一些错误，但我设法修复了它们。现在我想用 pixi 加载我的 spritesheet。不幸的是，我在调试控制台中有一个错误：.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$"
}
}

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

4

3 回答 3

2

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

于 2013-08-22T23:41:56.937 回答
1

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

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

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

和

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

于 2013-10-27T05:19:26.057 回答
0

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

于 2013-07-12T19:48:15.587 回答