Sprite Sheet Export Formats Explained

6 min read · Updated October 2026

SpritePilot’s Export & Download tool offers seven metadata formats plus image options, and picking the right one saves you glue code on the other side. Here’s what each format contains, which engines read it, and what the packing options — trim, padding, extrude, pivot — actually change.

Open Export & Download — free, in your browser, no signup.

The seven metadata formats

Tick "Export metadata file", pick a format, and "Download Sprite Sheet" saves the sheet image with one metadata file next to it. TexturePacker (sprite-sheet.json) is the widely used JSON Hash layout, a dictionary keyed by frame name, which Phaser and PixiJS read directly. Phaser 3 (sprite-sheet.phaser.json) is the same data as a JSON Array; Phaser’s load.atlas reads either one. Godot JSON (sprite-sheet.godot.json) is a clean region list you can parse in a few lines of GDScript. SpriteFrames (sprite-frames.tres) is a ready-made Godot 4 resource you assign to an AnimatedSprite2D — no parsing at all; it points at the sheet as res://sprite-sheet.png, so keep the file name and put both in the project’s root folder (or edit that path in the .tres).

Aseprite JSON (sprite-sheet.aseprite.json) follows the layout of Aseprite’s export, including frameTags, with your frame names and 100 ms for every frame; importers that look frames up by name read it, but some expect Aseprite’s own numbered names — Phaser’s createFromAseprite does, so in Phaser load it with load.atlas instead. Basic JSON (sprite-metadata.json) is a minimal generic list for custom pipelines. CSS Sprites (sprite-sheet.css) generates a stylesheet of background-position classes for websites — no JavaScript needed.

Note: Unity reads none of these metadata files. Its free TexturePacker Importer only reads the .tpsheet files that the TexturePacker app writes, which SpritePilot can’t produce. For Unity, export a grid sheet of same-size frames with Trim transparency off and slice it in the Sprite Editor with Grid By Cell Size (with extrude and padding: Offset = Extrude, Padding = 2 × Extrude + Padding), or use "Download as ZIP" and import the sprites one by one. How to Export Sprites from SpritePilot for Unity walks through both.

Image options

The sheet itself downloads as PNG, WebP, or JPG. PNG is lossless with full transparency and is right for almost all game work. WebP is saved at the highest quality, which Chrome and Edge write as lossless WebP, usually smaller than the PNG — good for games that run in a browser; the button is disabled in browsers that can’t write WebP, such as Safari. JPG has no transparency, so transparent areas are filled with white; only use it for opaque artwork. "Sprite Sheet Layout" can be "Grid Layout" (square-ish), "Horizontal Strip", or "Vertical Strip". Every cell is the size of the largest sprite, with smaller sprites centered in their cells, so very mixed sizes leave empty space. Strips suit classic engines and quick visual inspection; grids keep large sets compact.

Trim, padding, and extrude — the anti-artifact trio

"Trim transparency" crops the empty border off each sprite before packing, shrinking the atlas. The metadata records where each trimmed frame sat in its original box, so loaders that read those offsets — Phaser, PixiJS, Godot through the SpriteFrames .tres — put every frame back in place; anything that slices the sheet as a plain grid ignores them. "Padding" (0–32 px) inserts empty space between sprites. "Extrude" (0–16 px) repeats each sprite’s outermost edge pixels outward into its cell — and this one deserves a moment of respect.

When a GPU samples a texture with bilinear filtering or generates mipmaps, it blends each pixel with its neighbors. At a sprite’s edge, "neighbor" can mean the next sprite over, producing faint colored lines around tiles and sprites in-engine — texture bleeding. A pixel of extrude gives the sampler the sprite’s own pixels to blend into instead. The exported frame coordinates always point at the real sprite, never the extruded gutter, so nothing changes in your code.

Pivot, names, order, and tags

The 3×3 "Pivot Point" picker writes an anchor point (0,0 = top-left, 0.5,0.5 = center, 1,1 = bottom-right) into the formats that carry one — TexturePacker, Phaser 3, and Godot JSON — and only appears when one of them is selected. "Rename & Reorder Sprites" lets you give every frame a real name (walk_0001 beats sprite_0007) and move frames into animation order with the up and down arrows; the Sort buttons above the preview order them by Position or Size, or Reverse the current order. Names and order flow into every metadata format and the ZIP. Spaces become underscores, and a repeated name gets _2, _3 added so no frame is lost.

"Animation Tags" label frame ranges, counted from 0 (idle: 0–3, walk: 4–9), with a direction: forward, reverse, or ping-pong. Every format except CSS carries them: as frameTags in TexturePacker, Phaser 3, Aseprite, and Basic JSON, as an animations list in Godot JSON, and as named animations in the SpriteFrames .tres, which plays each one at 12 FPS, looping, and leaves out the direction.

/* CSS Sprites output (sprite-sheet.css) — use any sprite with two classes: */
.sprite { display: inline-block; box-sizing: content-box; background-image: url('sprite-sheet.png'); background-repeat: no-repeat; background-origin: content-box; background-clip: content-box; }
.sprite-walk_0001 { background-position: -0px -0px; width: 64px; height: 64px; }

<div class="sprite sprite-walk_0001"></div>

Tips

Rule of thumb: for pixel art, nearest (point) filtering and whole-number zoom fix most lines between sprites on their own; if lines still show, pad and extrude the sheet (Padding 2, Extrude 1). For smooth or painted art, start at Padding 2 and Extrude 1, and extrude more if you use mipmaps.
"Download as ZIP" gives you every sprite as an individual file using your custom names, plus a metadata.json with sizes and trim offsets when "Export metadata file" is ticked — handy for engines that prefer loose files.
The preview at the bottom re-renders live as you change layout, trim, padding, or extrude, over a checkerboard so you can see exactly what’s transparent.
Image format, layout, trim, padding, extrude, pivot, and metadata format are remembered for next time. Frame names, order, and tags are kept with your session in this browser: they come back when you return to Export & Download or reload, and go when you clear the session or replace it with new sprites.

Go deeper

Sprite Sheet vs. Texture Atlas: What’s the Difference? — What each field of an atlas entry means, and when a packed atlas beats a plain grid.
Trimming Transparent Pixels From Sprites: Smaller Sheets Without Jitter — Which engines apply the trim offsets, and how to check that yours does.
Why Lines Appear Between Your Tiles (and How to Get Rid of Them) — Padding and extrude in practice, plus the margin and spacing to give a grid loader.
PNG, WebP or JPG for Game Sprites? File Size, Quality and Memory Compared — Measured file sizes for the three image options, and what JPG does to pixel art.