如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?
PIXI建议我们将素材图片汇总成一个瓦片集(tileset)，然后用纹理地图集(texture atlas，通常是一个json文件)对该瓦片集进行管理。我认为这主要是出于对网络传输速度的考量，因为加载一张图片肯定比加载多张图片效率更高。
那么怎么将素材汇总成tileset呢？通常我们使用的是texturepacker，一个高级功能收费的软件。所谓的高级功能反正我是用不上。
这个软件帮我们将素材拼接，然后输出一张tileset图片和一个json格式的texture atlas文件。因为json文件里包含了输入地图集图片的相对地址，所以在PIXI中我们只要加载这个json，引擎就会自动将对应图片加载并解析。最后我们可以直接根据json里面的别名进行引用。
但是，以上操作的前提是，你的素材本身是分离的图片文件。如果现在我在网上找到了一张tileset图片，然后我想用json对其进行管理该怎么办？使用json显然比在代码里写像素值要便于管理。这个时候texturepacker就帮不了我们的忙了，不过，好在texture atlas文件并不复杂，我们可以手动写一个。下面附上一个简单的例子。
{"frames": {"hasira":{ ???"frame": {"x":0,"y":64,"w":64,"h":128}, ???"rotated": false, ???"trimmed": false, ???"spriteSourceSize": {"x":0,"y":64,"w":64,"h":128}, ???"sourceSize": {"w":64,"h":128}},"sakura":{ ???"frame": {"x":64,"y":64,"w":128,"h":128}, ???"rotated": false, ???"trimmed": false, ???"spriteSourceSize": {"x":64,"y":64,"w":128,"h":128}, ???"sourceSize": {"w":128,"h":128}}},"meta": { ???"image": "200001.png"}}注意事项如下：
- meta.image是图片的相对位置，大概绝对位置也可以吧没试过，一般放在一起就够了
- hasira和sakura就是自己定义的别名
- 在别名对象里面设置图片的位置和大小
最后附上PIXI使用这个json文件的代码片段：
let loader = PIXI.loaderloader ???.add('/assets/200001.json') ???.load(() => { ???????app.stage.addChild(new Sprite(TextureCache['hasira'])) ???})如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?
原文地址：https://www.cnblogs.com/uturobako/p/pixijs-use-json-manage-tileset.html