Does It Preserve Different Source Sizes?

Yes. Source dimensions are retained in metadata while every frame is rendered into the configured cell using contain, cover or stretch.

What Does Edge Extrusion Do?

It repeats the outer pixel rows and columns into a reserved transparent gutter, which helps reduce seams when a renderer samples near sprite boundaries.

Can It Produce Power-Of-Two Atlases?

Yes. Choose tight dimensions, independent power-of-two dimensions or a square power-of-two canvas. Safety limits prevent accidentally creating an impractically large browser canvas.

No. Decoding, ordering, animation preview, drawing and export happen in the current browser tab.

Sprite Sheet Generator

Pack up to 100 frames with animation preview, edge extrusion, pivots, atlas diagnostics and implementation-ready image, metadata, PDF and ZIP exports.

Atlas SetupAdd frames to build a sprite atlas.

1. Add Ordered FramesChoose PNG, WebP, or other browser-readable images in playback order.
2. Set The CellApply a preset or match the largest source so every frame uses one size.
3. Verify And ExportCheck the atlas and animation, then download the Atlas Bundle.

Production Presets

Choose Or Drop Sprite FramesUp to 100 images. Processing stays on this device.

ColumnsCell WidthCell HeightCell GapOuter PaddingEdge ExtrusionFrame FitScaling FilterCanvas PackingBackgroundTransparentMatte Color

Sprite Sheet Preview512 × 128px · 0 frames

Outlines

Add frames to build the atlas.

Animation PreviewAdd two or more frames to preview motion

Animation playback appears here.

PlaybackTiming

Current Duration

0 ms

ExportsPNG, WebP and the bundle preserve alpha; JPG uses the selected matte color

Grid4 columns × 1 rows

Content512 × 128px

Canvas512 × 128px

Frame Utilization0.0%

Unused Atlas Area100.0% · 65,536px²

Edge ExtrusionOff

Loading Tool…

What Is the Sprite Sheet Generator?

The Sprite Sheet Generator packs up to 100 local image frames into a configurable atlas. Rename, time and reorder frames; set normalized pivots; preview loop, once or ping-pong animation; reserve validated edge extrusion; inspect frame outlines at Fit, 1x or 2x; compare utilized and unused atlas area; and choose tight or power-of-two packing.

How It Works

Add all frames, arrange and name the frame cards, choose per-frame timing or fixed FPS, then configure cell geometry, padding and optional extrusion. The tool automatically reserves a safe gutter, marks every pivot and blocks unsafe exports. Export PNG, WebP, JPG, PDF, TexturePacker-shaped JSON Hash or Array with pivots, CSS, or a complete ZIP atlas bundle.

When to Use It

Use it for game animation, web icon atlases, CSS sprites, motion frames, texture packing prototypes and other workflows that need one image plus reproducible frame coordinates.

Frequently Asked Questions

Does It Preserve Different Source Sizes?: Yes. Source dimensions are retained in metadata while every frame is rendered into the configured cell using contain, cover or stretch.
What Does Edge Extrusion Do?: It repeats the outer pixel rows and columns into a reserved transparent gutter, which helps reduce seams when a renderer samples near sprite boundaries.
Can It Produce Power-Of-Two Atlases?: Yes. Choose tight dimensions, independent power-of-two dimensions or a square power-of-two canvas. Safety limits prevent accidentally creating an impractically large browser canvas.
Are Files Uploaded?: No. Decoding, ordering, animation preview, drawing and export happen in the current browser tab.

Found an issue? Send Feedback. See our data sources and update policy for tools that depend on changing information.