在pixi v3中加载精灵表

Loading sprite sheet in pixi v3

本文关键字：精灵 加载 pixi v3      更新时间：2023-09-26

我正试图为我想编写的游戏学习Pixi.js，但我在最基本的任务之一上遇到了最困难的时刻：加载精灵表。真正的问题是Pixiv3破坏了与加载精灵的旧方法（显然是PIXI.AssetLoader()）的兼容性。我能找到的所有教程都使用该方法，但当我尝试使用它时，PIXI抛出了一个错误，告诉我使用他们的PIXI.loader.Loader类。我更喜欢使用最新发布的库，所以这很公平。

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

问题是，文档是稀疏的（它甚至没有描述属于该类的方法）。我可以想出如何将单个图像加载为纹理。。。我想。。。但是我想加载精灵表！最令人沮丧的是，主页显著地宣布支持精灵页面加载。你是怎么做到的？

根据我所能收集到的信息，我得到的最好的信息是：

这是我的精灵表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中要做什么吗？或者更好的是，有人知道我在哪里可以找到我需要的信息吗？

您的代码看起来不错。我认为你只需要在"图像"后面加一个斜杠：

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%20动画

相关文章：