Sprite Sheet Generator

The Sprite Sheet Generator runs two distinct modes that the rest of the page only half-covers. In Generate mode it composites multiple uploaded images onto a single canvas: it measures the widest and tallest sprite in your set and lays every frame into a uniform cell of those maximum dimensions, so a sheet of mixed-size art ends up on a regular grid. You control the layout with a Columns slider (1-10) and a Padding slider (0-20px) that inserts gutters between cells, and a Background dropdown offering Transparent, Black, White, or 'Magenta (debug)' (#ff00ff) - the magenta option is the classic trick for spotting stray edge pixels against a high-contrast fill. Each smaller sprite is centered inside its cell rather than pinned to a corner, and you can reorder the input list with up/down buttons before generating so frame order in the sheet matches your animation sequence.

Alongside the PNG (exported via the canvas as image/png), Generate mode emits a JSON sidecar in a TexturePacker-style hash format: a 'frames' object keyed by each source filename with its extension stripped, where every entry stores x, y, w, and h, plus a 'meta' block declaring format 'RGBA8888', scale 1, the output image name 'spritesheet.png', and the full sheet size. Note that the frame width and height written to JSON are the uniform cell size (max dimensions), not each sprite's original size, and the format is the flat per-frame variant - it does not include TexturePacker's spriteSourceSize, rotated, or trimmed fields, and there is no CSS background-position export. You can copy the JSON to the clipboard or download it next to the PNG, and the hash-keyed structure loads directly in atlas loaders that accept this shape.

Slice mode does the inverse: upload an existing sprite sheet and the tool cuts it into individual frames. You set Columns and Rows (1-20 each) plus a Frame Width and Frame Height; on upload it auto-fills the frame size by integer-dividing the source dimensions by your column/row counts (Math.floor of width/columns and height/rows), and a live grid overlay drawn with CSS linear-gradients previews the cut lines on the source. Slicing draws each cell onto its own temporary canvas and exports it as a PNG, producing exactly columns x rows frames regardless of the actual image content. Because the cut is a fixed-step grid, it assumes evenly spaced tiles - irregular or trimmed atlases won't line up. You can download any single frame, or bundle them all into a ZIP (built with a lazily-imported jszip) where files are named frame_000.png, frame_001.png, and so on, zero-padded to three digits. Everything happens in the browser canvas, so images are never uploaded to a server.