javascript - 用来构建Pixi Spritesheet的数据应采用哪种格式？

我想利用PIXI.Spritesheet来获取某种纹理或精灵的集合，以便在pixi应用程序中使用。

let spritesheetTexture = PIXI.utils.TextureCache["my-spritesheet-image.png"];
let data = ??????
let spritesheet = new PIXI.Spritesheet(spritesheetTexture, data);

不幸的是，除了“对象”和“ Spritesheet图像数据”之外，the pixi documentation没有给出data参数需要采用的格式。我也找不到正在运行的此类的any examples。

最佳答案

data参数应该是类似JSON的对象，列出纹理图集（spritesheet）的所有帧，并且应如下所示：

{
    "meta": {
        "image": "atlas.png"
    },
    "frames": {
        "icon_1.png": {
            "frame": {"x":0, "y":0, "w":32, "h":32},
            "sourceSize": {"w": 32, "h": 32}
        },
        "icon_2.png": {
            "frame": {"x":32, "y":0, "w":64, "h":64},
            "sourceSize":{"w": 64, "h": 64}
        },
        ...
    }
}

但是我认为您不应该手工编写或直接使用PIXI.Spritesheet（除非您正在做一些比仅显示纹理图集中的图像更高级的操作）。该JSON结构应通过将多个图像打包到一个纹理中的软件（例如TexturePacker）导出，并且应使用如下PIJSON的加载器加载此类随附的JSON文件：

PIXI.loader
    .add('atlas', 'atlas.json')
    .load(onAssetsLoaded);

function onAssetsLoaded() {
    ...
}

另请参见this example。

关于javascript - 用来构建Pixi Spritesheet的数据应采用哪种格式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49141867/