PixiJS

Class: Spritesheet

PIXI.Spritesheet

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');

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!');

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

Sprite sheets can be packed using tools like TexturePacker, Shoebox or Spritesheet.js. Default anchor points (see PIXI.Texture#defaultAnchor) and grouping of animation sprites are currently only supported by TexturePacker.

new PIXI.Spritesheet (texture, data, resolutionFilename)

Spritesheet.ts:132
Name Type Default Description
texture PIXI.BaseTexture | PIXI.Texture

Reference to the source BaseTexture object.
data object

Spritesheet image data.
resolutionFilename string undefined

The filename to consider when determining the resolution of the spritesheet. If not provided, the imageUrl will be used on the BaseTexture.

Members

PIXI.Spritesheet.BATCH_SIZE number staticreadonly

The maximum number of Textures to build per process.

Default Value:
  • 1000

animations utils.Dict<PIXI.Texture[]>

A map containing the textures for each animation. Can be used to create an AnimatedSprite:

Example

 import { AnimatedSprite } from 'pixi.js';

 new AnimatedSprite(sheet.animations['anim_name']);

baseTexture PIXI.BaseTexture

Reference to ths source texture.

data object

Reference to the original JSON data.

linkedSheets PIXI.Spritesheet[]

For multi-packed spritesheets, this contains a reference to all the other spritesheets it depends on.

resolution number

The resolution of the spritesheet.

textures utils.Dict<PIXI.Texture>

A map containing all textures of the sprite sheet. Can be used to create a Sprite:

Example

 import { Sprite } from 'pixi.js';

 new Sprite(sheet.textures['image.png']);

Methods

destroy (destroyBase) void

Spritesheet.ts:333

Destroy Spritesheet and don't use after this.

Name Type Attributes Default Description
destroyBase boolean <optional>
 false

Whether to destroy the base texture as well

parse () Promise<PIXI.Texture<utils.Dict>>

Spritesheet.ts:186

Parser spritesheet from loaded data. This is done asynchronously to prevent creating too many Texture within a single process.

Returns:
Type Description
Promise<PIXI.Texture<utils.Dict>>