Embedded Spritesheet PNG Standard

spritesheet from Kenney.nl

How it works

Instead of distributing a PNG image and a separate JSON/XML file for the spritesheet coordinates, the metadata is embedded directly inside the PNG file itself.

The metadata is stored in a standard iTXt PNG chunk.
The chunk uses a keyword like Spritesheet.TextureAtlas.XML to identify the format.
When loading the image, the client extracts this text chunk and parses it to get the sprite coordinates and animations.

You can embed any format like Spritesheet.TexturePacker.JSON or Spritesheet.Aseprite.JSON. This allows for multiple animations to be stored and specified in a single PNG spritesheet.

See bundle.js for a Node.js example of how to embed this metadata programmatically, or use the tool below.

Extracted XML Example

The following XML was extracted directly from the Spritesheet.TextureAtlas.XML text chunk inside spritesheet.png:

Loading XML...

Spritesheet Embedding Tool

Use this tool to embed one or more spritesheet metadata files in your spritesheet's PNG file.

1. Select base PNG Image: 2. Select Metadata File (JSON, XML, etc.): 3. Select Metadata Key:

Download PNG