Class Spritesheet<S>

Utility class for maintaining reference to a collection of Textures on a single Spritesheet.

To access a sprite sheet from your code you may pass its JSON data file to Pixi's loader:

import { Assets } from 'pixi.js';

const sheet = await Assets.load('images/spritesheet.json');
Copy

Alternately, you may circumvent the loader by instantiating the Spritesheet directly:

import { Spritesheet } from 'pixi.js';

const sheet = new Spritesheet(texture, spritesheetData);
await sheet.parse();
console.log('Spritesheet ready to use!');
Copy

With the sheet.textures you can create Sprite objects, and sheet.animations can be used to create an AnimatedSprite.

Here's an example of a sprite sheet JSON data file:

{
    "frames": {
        "enemy1.png":
        {
            "frame": {"x":103,"y":1,"w":32,"h":32},
            "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
            "sourceSize": {"w":32,"h":32},
            "anchor": {"x":16,"y":16}
        },
        "enemy2.png":
        {
            "frame": {"x":103,"y":35,"w":32,"h":32},
            "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
            "sourceSize": {"w":32,"h":32},
            "anchor": {"x":16,"y":16}
        },
        "button.png":
        {
            "frame": {"x":1,"y":1,"w":100,"h":100},
            "spriteSourceSize": {"x":0,"y":0,"w":100,"h":100},
            "sourceSize": {"w":100,"h":100},
            "anchor": {"x":0,"y":0},
            "borders": {"left":35,"top":35,"right":35,"bottom":35}
        }
    },

    "animations": {
        "enemy": ["enemy1.png","enemy2.png"]
    },

    "meta": {
        "image": "sheet.png",
        "format": "RGBA8888",
        "size": {"w":136,"h":102},
        "scale": "1"
    }
}
Copy

Sprite sheets can be packed using tools like https://codeandweb.com/texturepacker|TexturePacker, https://renderhjs.net/shoebox/|Shoebox or https://github.com/krzysztof-o/spritesheet.js|Spritesheet.js. Default anchor points (see PIXI.Texture#defaultAnchor), default 9-slice borders (see PIXI.Texture#defaultBorders) and grouping of animation sprites are currently only supported by TexturePacker.

Alternative ways for loading spritesheet image if you need more control:

import { Assets } from 'pixi.js';

const sheetTexture = await Assets.load('images/spritesheet.png');
Assets.add({
    alias: 'atlas',
    src: 'images/spritesheet.json'
    data: {texture: sheetTexture} // using of preloaded texture
});
const sheet = await Assets.load('atlas')
Copy

or:

import { Assets } from 'pixi.js';

Assets.add({
    alias: 'atlas',
    src: 'images/spritesheet.json'
    data: {imageFilename: 'my-spritesheet.2x.avif'} // using of custom filename located in "images/my-spritesheet.2x.avif"
});
const sheet = await Assets.load('atlas')
Copy

Memberof

PIXI