PNG Sprite Sheet or JSON Atlas? Choose the Export Your Game Needs

If your engine slices equal-sized cells, a PNG grid may be all you need. If it loads frames by name and rectangle, export the PNG with matching JSON. Check the importer before choosing: JSON formats differ, and you will still set timing and pivots in the engine.

This guide covers existing artwork you want to bring into a game.

When a PNG grid is enough

A regular grid can be read from a small set of known values: cell width and height, frame count, columns, rows, margins and gaps. It is useful when every cell has the same dimensions and the importer can reconstruct the frame rectangles correctly.

For example, six 32 × 48 cells in three columns with no gaps or outer padding make a 96 × 96 image. Reading cell (column 1, row 0), counted from zero, gives rectangle x=32, y=0, width=32, height=48. The coordinates follow from the grid; you still need to check the import in your game.

If the importer assumes no gaps but your export includes them, it will read the wrong pixels. Keep the layout settings with the image. Use the frame-size guide to check cell alignment and the spacing and texture-bleeding guide when margins or sampling matter.

When named rectangle metadata is useful

JSON is useful when the consumer needs explicit frame names and coordinates rather than reconstructing rectangles from a grid. Check the field names and structure your loader reads. Similar-looking JSON files are not necessarily interchangeable.

Export	Suitable starting point	Still your responsibility
PNG grid	An importer configured for uniform cells	Correct cell size, count, gaps, order and timing
PNG plus generic JSON	A custom importer you can adapt to documented rectangle fields	Parsing that schema and mapping frames into your engine
PNG plus Phaser-style JSON	A Phaser workflow expecting a compatible JSON atlas	Correct loading, texture keys, frame names and animation configuration

Phaser's official LoaderPlugin documentation describes loading an atlas image with its JSON data. It is the destination loader's expected format that matters. A generic JSON export is not automatically interchangeable with a Phaser atlas or an engine-native resource.

What Sprite Sheet Tool exports

The texture atlas workflow offers generic and Phaser-style JSON with the PNG image. Generic output includes the image name, sheet dimensions and a list of named rectangles with source dimensions. Phaser output uses a named-frame map, rectangle coordinates, source-size fields and image metadata.

The current exporter sets the Phaser rotated and trimmed flags to false. It does not perform rotated packing or artwork trimming. Set pivots yourself in the art or engine. Check a mixed-size or unusually named input against your destination's expectations before adopting it for a whole project.

A small illustrative geometry record looks like this:

{"name":"walk-02","x":32,"y":0,"w":32,"h":48,"sourceW":32,"sourceH":48}

This record identifies a rectangle and its source dimensions. It says nothing about how long walk-02 should play, what gameplay state uses it, or where its foot should be anchored.

Keep animation data separate

The export contains artwork and rectangles. Add the animation clip, frame durations and pivots in your engine; it does not include a native Unity or Godot project. The animation timing guide explains why a correct sheet can still play with the wrong rhythm.

For Unity or Godot, follow the importer you actually use. Do not select Phaser JSON simply because all three engines can render sprites. If a regular grid matches the engine's slicing workflow, the PNG and recorded layout values may be enough.

Validate one small asset before exporting a library

Use a few clearly named frames with visible differences. Check that the importer finds the image, reads the expected rectangles, resolves the names and displays each frame without clipping. Then define the intended timing and pivot in the engine and inspect the loop at real game scale.

If frames are missing, first check filenames, image references and the schema expected by the loader. If the wrong pixels appear, check coordinates and gaps. If the pixels are correct but the action jumps or runs too quickly, investigate pivot and timing instead of repacking the image blindly.

Start in the browser sprite sheet editor when you need to arrange existing frames, or choose the atlas export workflow when your consumer needs named rectangle metadata. Preserve the source artwork and record the export settings; check the import before packing the rest of your library.