我想使用 Pixi.js 作为渲染引擎在 Typescript 中创建一个小游戏。一开始我关注的是http://ezelia.com/2013/05/pixi-tutorial/ 。代码中有一些错误,但我设法修复了它们。现在我想用 pixi 加载我的 spritesheet。不幸的是,我在调试控制台中遇到错误:未捕获错误:纹理缓存函数(baseTexture,frame)中不存在frameId 'body.png'
。
这是我加载 Sprite 表的代码:
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$"
}
}
如果有人能够帮助我,我将非常感激。
最佳答案
查看 spritesheet 的示例 here ,正如您在示例中看到的,“frames”是一个对象,而您有数组。修复您的 Spritesheet.json 或者您可以通过数字 ID 访问您的纹理,例如用于 body 的 PIXI.Texture.fromFrame(0),用于 curveBody1 的 PIXI.Texture.fromFrame(1) 等。
关于typescript - 无法使用 pixi.js 加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17622299/