Javascript 在pixi v3中加载sprite表
我正试图学习Pixi.js来编写一个游戏,但我最困难的任务之一是加载一张精灵表。 真正的问题是Pixiv3破坏了与加载精灵的旧方法的兼容性,这显然是Javascript 在pixi v3中加载sprite表,javascript,sprite-sheet,pixi.js,Javascript,Sprite Sheet,Pixi.js,我正试图学习Pixi.js来编写一个游戏,但我最困难的任务之一是加载一张精灵表。 真正的问题是Pixiv3破坏了与加载精灵的旧方法的兼容性,这显然是Pixi.AssetLoader()。我能找到的所有教程都使用该方法,但当我尝试使用它时,PIXI抛出了一个错误,告诉我使用他们的PIXI.loader.loader类。我更喜欢使用库的最新版本,所以这很公平 我在这里查阅了他们的文档: 问题是,文档很少(它甚至没有描述属于该类的方法)。我可以想出如何加载一个单一的图像作为纹理…我想。。。但我想装雪
Pixi.AssetLoader()
。我能找到的所有教程都使用该方法,但当我尝试使用它时,PIXI抛出了一个错误,告诉我使用他们的PIXI.loader.loader
类。我更喜欢使用库的最新版本,所以这很公平
我在这里查阅了他们的文档:
问题是,文档很少(它甚至没有描述属于该类的方法)。我可以想出如何加载一个单一的图像作为纹理…我想。。。但我想装雪碧床单!最令人沮丧的是,主页上显著地宣布支持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"
}
}
这是请求精灵的代码:
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()
方法
有人知道我在Pixiv3中要做什么吗?或者更好的是,有人知道我在哪里可以找到我需要的信息吗?您的代码看起来不错。我想你只需要在“图像”后面加一个正斜杠: 此外,这不是必需的,但如果您只需要侦听一次,则可以对事件处理程序使用“once”而不是“on”
loader.once('complete', onAssetLoad);
下面是一些很好的例子:
谢谢!不知怎的,我错过了那个示例页面。归根结底,老实说,我对Sprite床单是如何通过TexturePacker等工具生成的还不够了解。
loader.once('complete', onAssetLoad);