用于构建 Pixi Spritesheet 的数据需要什么格式？

Question

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

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

不幸的是，除了“对象”和“Spritesheet 图像数据”之外， pixi 文档没有给出参数需要采用什么格式的指示data。我也找不到此类的任何实际例子。

Answer 1

对于仍在寻找官方答案的人，当前（2020 年 10 月）Pixi.js 存储库中的 typescript defs（请参阅Spritesheet.ts）包含完整的架构。当您导入包时，这些 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;
    };
}

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

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

function onAssetsLoaded() {
    ...
}

另请参见此示例。