I would like to take advantage of PIXI.Spritesheet to get some kind of collection of textures or sprites to use in a pixi application.

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

Unfortunately the pixi documentation gives no indication of what format the data parameter needs to be in, besides "object" and "Spritesheet image data". I also cannot find any examples of this class in action.

I would like to take advantage of PIXI.Spritesheet to get some kind of collection of textures or sprites to use in a pixi application.

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

Unfortunately the pixi documentation gives no indication of what format the data parameter needs to be in, besides "object" and "Spritesheet image data". I also cannot find any examples of this class in action.

• javascript
• pixi.js

2 Answers 2

For anyone still looking for an official answer to this, the typescript defs in the current (Oct., 2020) Pixi.js repository (see Spritesheet.ts) contains the plete schema. These typedefs do not make it into node_modules when you import the package, but if you look through the code, it does look like this describes all of the data pixijs looks for when parsing a spritesheet object.

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;
    };
}

The data argument should be a JSON-like object listing all frames of a texture atlas (spritesheet) and should look like this:

{
    "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}
        },
        ...
    }
}

But I don't think you should write that by hand nor use PIXI.Spritesheet directly (unless you are doing something more advanced than just display images from a texture atlas). This JSON structure should be exported by a software that packs multiple images to a single texture (e.g. TexturePacker) and such acpanying JSON file which then should be loaded using PIXI's loader like this:

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

function onAssetsLoaded() {
    ...
}

See also this example.