在pixi v3中加载精灵图片

问题描述：

我正在尝试学习Pixi.js的游戏编码，但我最难的时间是最基本的任务之一：加载精灵图纸。真正的问题是，Pixi v3打破了旧的加载精灵的方式，显然是PIXI.AssetLoader()。我可以找到的所有教程都使用该方法，但是当我尝试使用它时，PIXI抛出一个错误，告诉我使用它们的PIXI.loader.Loader类。我更喜欢使用最近版本的库，所以这很公平。在pixi v3中加载精灵图片

我抬头一看这里的文档： 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);

此外，这是没有必要的，但你可以使用“一次”而不是“对”的事件处理程序，如果你只是想需要倾听为它一次。

loader.once('complete', onAssetLoad);

去这里的一些伟大的例子： http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation

谢谢！我不知何故错过了那个例子页面。结果是，我只是不太清楚Sprite Sheets是如何通过TexturePacker这样的工具生成的，诚实地说。 – Cappielung

在pixi v3中加载精灵图片

相关推荐