在 pixi v3 中加载精灵 sheet

Question

我正在尝试学习 Pixi.js 来编写一个我想编写的游戏，但我在最基本的任务之一上遇到了最困难的时间：加载精灵 sheet . 真正的问题是 Pixi v3 破坏了与加载精灵的旧方法的兼容性，这显然是 PIXI.AssetLoader()。我能找到的所有教程都使用该方法，但是当我尝试使用它时，PIXI 抛出错误告诉我使用他们的 PIXI.loader.Loader class。我更愿意使用最新版本的库，这样就足够了。

我在这里查看了他们的文档： http://pixijs.github.io/docs/PIXI.loaders.Loader.html

问题是，文档很少（它甚至没有描述属于 class 的方法）。我可以弄清楚如何将单个图像作为纹理加载...我想...但我想加载 sprite sheets！而且最郁闷的是首页显眼的宣布支持sprite sheet加载。那你是怎么做到的呢？

根据我能收集到的最好的是：

这是我的精灵sheet 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() 方法.

有谁知道如何在 Pixi v3 中做我想做的事情？或者更好的是，有人知道我在哪里可以找到我需要的信息吗？

Answer 1

您的代码看起来不错。我想你只需要在 "images":

之后加一个正斜杠

var loader = new PIXI.loaders.Loader("./images/", 5);

此外，这不是必需的，但如果您只想监听一次，则可以使用 'once' 而不是 'on' 作为事件处理程序。

loader.once('complete', onAssetLoad);

到这里查看一些很好的例子： http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation

在 pixi v3 中加载精灵 sheet

Loading sprite sheet in pixi v3

javascript

sprite-sheet

pixi.js