Sprite Sheet Generator

Drop image frames, reorder them, preview animation, and export a game-ready PNG sprite sheet with JSON or CSS metadata — all locally in your browser.

Quick sprite sheet builder

Drop frames. Arrange them. Export the sheet.

Build a game-ready atlas without digging through editor panels. Frame files stay in this browser tab.

100% local

1 · Add and order frames

PNG, JPG or WebP · up to 256 frames. Drag rows to reorder.

Drop frames here or choose imagesBatch-select an animation, icon set or tiles.

Frame order0 / 256 frames

Drop two or more frames to start. They stay in this browser tab.

2 · Pack the atlas

LayoutColumnsFitGapOuter padding Power-of-twoBackgroundColor

Cell widthCell height

3 · Preview and export

The sheet updates as you change layout or frame order.

engine-ready

—frames

—grid

—atlas size

—texture occupancy

Preview FPS Ping-pong

Atlas coordinates appear here after frames load.

Add frames to build an atlas.

Advanced sprite studio Slice existing sheets · nearest-neighbor resize · Phaser/Pixi · SCSS · project settings

Browser-local sprite production workspace

Pack, slice, preview and hand off sprite atlases

Build frame atlases for games and CSS, split an existing sheet into numbered PNG frames, or enlarge pixel art with nearest-neighbor scaling. Source files stay on this device.

Pack + reorder framesSlice sheet → PNG ZIPAnimation previewPNG · JSON · CSS · SCSS

Source frames

Choose PNG/JPG/WebP frames.

LayoutColumnsFitCell widthCell heightGapOuter paddingBackgroundColor

Round atlas texture to next power of two

—frames

—grid

—atlas

—occupancy

—RGBA memory

Choose frames to build an atlas.

Atlas + animation preview

FPSCSS prefix Ping-pong

—

Frame	x	y	Cell

What this studio does — and does not do

The packer uses deterministic grid/strip cells so exported coordinates exactly match the PNG. It does not claim MaxRects/bin-packing, sprite rotation, automatic transparent-edge trimming, edge extrusion, AI frame generation, GIF/APNG timeline extraction or engine-side compression. The slicer assumes a regular rows/columns sheet. Use TexturePacker-class software when you need trim/rotate/extrude heuristics.

Production guidance

Choose cell geometry, fitting, padding and gaps, then export both the image and frame map for downstream use.

Privacy

Your selected images are processed in the browser by this tool unless the page explicitly says otherwise.