Pack Sprites Into a Clean Texture Atlas

How trimming, padding, extrusion and duplicate merging produce a compact atlas that renders crisply, plus a quick way to test the result.

October 22, 2026 · 4 min read

A texture atlas puts many sprites on one image, so your engine can draw them in a single batch. A well packed atlas loads faster, uses less memory and keeps frame times steady on phones and laptops alike. A few settings make the difference between an atlas that is merely small and one that also looks crisp.

Trim the empty edges

Most sprites carry transparent margins. Trimming removes them from the atlas and stores the offset in the metadata, so the sprite still appears in the right place. The Sprite Sheet and Atlas Packer keeps both the trimmed rectangle and the original size in its JSON, which Phaser and PixiJS read directly.

Choose padding and extrusion together

When a GPU draws a sprite with filtering, it samples a little beyond the sprite edge. If a neighbouring sprite sits there, its colour can appear as a thin line. Padding keeps neighbours apart, and edge extrusion copies the outermost pixels outward so the sampled colour matches the sprite itself. Two pixels of padding with one pixel of extrusion is a good starting point. Use larger values when you plan to show sprites at reduced sizes, because mipmaps average wider areas. A gutter of 2 pixels covers one mip level, 4 covers two and 8 covers three.

Let duplicates share a slot

Animation sets often repeat frames, such as an idle pose that returns after a walk. The packer detects identical sprites after trimming and stores one copy, then lists every original name in the metadata. The results panel shows how many duplicates were merged.

Try rotation and power of two sizes

Allowing a 90 degree rotation lets tall and wide sprites interlock, which often saves another few percent of area. Power of two page sizes suit older mobile GPUs and some compression formats. Turn each option on and watch the packed area figure to see what suits your set.

Group frames into animations

Name your frames with numbers, for example run_01.png, run_02.png and run_03.png. The packer groups them, plays them in the animation preview at the frame rate you choose, and writes an animations file next to the atlas.

Test the atlas for bleeding

After packing, open the atlas in the Texture Seam and Atlas Checker. Load the JSON from the packer and the checker measures the gap between every pair of sprites, reports how many mip levels are safe, and tells you whether the edges are extruded. It marks the closest sprites on the preview so you can adjust padding with confidence.

Export what your engine needs

Phaser and PixiJS hash JSON for direct loading.
A JSON array for custom loaders.
Unity style sprite rectangles with a bottom left origin.
CSS sprite rules for web interfaces.

The ZIP bundle contains the atlas pages, the metadata and the animations file. Packing and previews are free, and exporting up to 16 sprites on one page is free too. A 30 minute pass unlocks unlimited sprites, pages up to 8192 pixels, several pages and every format.