我正在尝试学习 Pixi.js 来编写一个我想编写的游戏,但我在最基本的任务之一上遇到了最困难的时间:加载 sprite 表。
真正的问题是 Pixi v3 破坏了与加载 Sprite 的旧方法的兼容性,这显然是 PIXI.AssetLoader()
。我能找到的所有教程都使用该方法,但是当我尝试使用它时,PIXI 抛出错误告诉我使用他们的 PIXI.loader.Loader
类。我更愿意使用库的最新版本,所以这很公平。
我在这里查看了他们的文档: http://pixijs.github.io/docs/PIXI.loaders.Loader.html
问题是,文档很少(它甚至没有描述属于该类的方法)。我可以弄清楚如何加载单个图像作为纹理......我想......但我想加载 Sprite 表!最令人沮丧的是,首页显着地宣布支持 Sprite 表加载。那你是怎么做到的?
根据我能收集到的最好的是:
这是我的 Sprite 表 JSON:
{
"frames": {
"exampleFrame1.png": {
"frame": {"x":0, "y":0, "w":100, "h":100},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0, "y":0, "w":100, "h":100},
"sourceSize": {"w": 100, "h": 100}
}
},
"meta": {
"image": "./images/example-sprite-sheet.png"
}
}
这是请求 Sprite 的代码:
var sprite;
var loader = new PIXI.loaders.Loader("./images", 5);
loader.add('example-sprites', 'example-sprite-sheet.json');
loader.on('complete', onAssetLoad);
loader.load();
function onAssetLoad(){
sprite = PIXI.Sprite.fromFrame("exampleFrame1.png");
//attach sprite to stage etc...
}
我可能对上面的代码有点偏离基础,但我在 Pixi 的文档中找不到任何东西,甚至他们网站上的所有教程和示例都使用损坏的 PIXI.AssetLoader()
方法。
有人知道如何在 Pixi v3 中做我想做的事吗?或者更好的是,有人知道我在哪里可以找到我需要的信息吗?
最佳答案
您的代码看起来不错。我认为您只需要在“图像”之后加一个正斜杠:
var loader = new PIXI.loaders.Loader("./images/", 5);
此外,这不是必需的,但如果您只想监听一次,则可以对事件处理程序使用“一次”而不是“打开”。
loader.once('complete', onAssetLoad);
这里有一些很好的例子: http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation
关于javascript - 在 pixi v3 中加载 Sprite 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33491041/