Sprite Sheet Export Formats Explained

6 min read · Updated August 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

TexturePacker (hash) is the industry-standard dictionary keyed by frame name — the safest pick for Unity importer plugins, Cocos2d, and most third-party loaders. Phaser 3 is the same data as an array, which is what Phaser’s load.atlas expects. Godot JSON is a clean region list you can parse in a few lines of GDScript. SpriteFrames exports a ready-made Godot 4 .tres resource you can drop straight onto an AnimatedSprite2D — no parsing at all. Aseprite JSON mimics Aseprite’s export, including frameTags, so anything that imports Aseprite data (many engine plugins do) accepts it. Basic JSON is a minimal generic list for custom pipelines. CSS Sprites generates a stylesheet of background-position classes for websites — no JavaScript needed.

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 smaller for web delivery; JPG has no transparency at all, so only use it for opaque artwork. Layout can be a square-ish grid, one horizontal strip, or one vertical column — 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. "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 neighbours. At a sprite’s edge, "neighbour" can mean the next sprite over, producing faint colored lines around tiles and sprites in-engine — texture bleeding. One or two pixels of extrude give the sampler its 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 picker writes an anchor point (0,0 = top-left, 0.5,0.5 = center, 1,1 = bottom-right) into formats that support one: TexturePacker, Phaser, and Godot JSON. "Rename & Reorder Sprites" lets you give every frame a real name (walk_0001 beats sprite_0007) and drag frames into animation order with the arrow buttons — names and order flow into every metadata format and the ZIP. "Animation Tags" label frame ranges (idle: 0–3, walk: 4–9) with a direction, and export into TexturePacker meta, Aseprite frameTags, and as named animations in the SpriteFrames .tres.

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

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

Tips

Rule of thumb: pixel-art game with point filtering → padding 2, extrude 0. Anything with smooth scaling, camera zoom, or mipmaps → padding 2, extrude 2.
"Download as ZIP" gives you every sprite as an individual file using your custom names — 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.