javascript – 在pixi v3中加载精灵表

2019-07-02 15:23:12 阅读：325 来源： 互联网

我正在尝试学习Pixi.js以寻找一个我想要编写代码的游戏,但我最困难的时候是完成一项最基本的任务：加载精灵表.
真正的问题是Pixi v3破坏了与加载sprite的旧方法的兼容性,这显然是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);

此外,这不是必需的,但如果您只需要监听一次,则可以使用“一次”代替“on”作为事件处理程序.

loader.once('complete', onAssetLoad);

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

标签：javascript,sprite-sheet,pixi-js
来源： https://codeday.me/bug/20190702/1357275.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 在pixi v3中加载精灵表