为构建 Pixi Spritesheet 提供的数据应采用什么格式？答案

【问题标题】：What format is expected for data provided to build a Pixi Spritesheet?为构建 Pixi Spritesheet 提供的数据应采用什么格式？
【发布时间】：2018-08-14 23:05:30
【问题描述】：

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

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

不幸的是，the pixi documentation 除了“对象”和“Spritesheet 图像数据”之外，没有指明data 参数需要采用什么格式。我也找不到这个类的any examples。

【问题讨论】：

标签： javascript pixi.js

【解决方案1】：

对于仍在寻找官方答案的任何人，当前（2020 年 10 月）Pixi.js 存储库（参见 Spritesheet.ts）中的 typescript defs 包含完整的架构。这些 typedef 不会在您导入包时进入 node_modules，但如果您查看代码，它看起来确实描述了 pixjs 在解析 spritesheet 对象时查找的所有数据。

export interface ISpritesheetFrameData {
    frame: {
        x: number;
        y: number;
        w: number;
        h: number;
    };
    trimmed?: boolean;
    rotated?: boolean;
    sourceSize?: {
        w: number;
        h: number;
    };
    spriteSourceSize?: {
        x: number;
        y: number;
    };
    anchor?: IPointData;
}

/**
 * Atlas format.
 */
export interface ISpritesheetData {
    frames: Dict<ISpritesheetFrameData>;
    animations?: Dict<string[]>;
    meta: {
        scale: string;
    };
}

【讨论】：

【解决方案2】：

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）的软件导出，然后应使用 PIXI 的加载器加载此类随附的 JSON 文件，如下所示：

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

function onAssetsLoaded() {
    ...
}

另见this example。

【讨论】：