What is a sprite sheet?

A sprite sheet (or texture atlas) is one large image that packs many smaller images — animation frames, tiles or UI icons — into a single file. Games and websites load one sheet instead of dozens of separate requests, which is faster and uses GPU memory more efficiently. A companion data file lists the x, y, width and height of every frame so code can crop the right region.

What does the JSON atlas contain?

It lists every frame by name with its pixel rectangle (x, y, w, h), the original source size, and sheet metadata (image filename and total size). The TexturePacker JSON-hash format loads directly into Phaser, PixiJS and many other engines; the array variant matches Phaser 3's atlas loader. CSS export instead gives you background-position rules for web sprites.

Does this tool upload my images anywhere?

No. Every frame is decoded and composited onto a canvas entirely inside your browser. Nothing is sent to a server, so you can safely pack unreleased game art or private icons.

What is the difference between uniform grid and tight pack?

Uniform grid gives every frame the same cell size (the largest frame's dimensions) and centres each image — ideal for animation frames that must stay aligned. Tight pack uses a shelf algorithm to nest frames of different sizes with minimal wasted space, which is better for mixed UI icons where alignment does not matter.

Why would I enable power-of-two dimensions?

Older GPUs and some mobile engines require texture dimensions that are powers of two (256, 512, 1024 and so on). Enabling the option rounds the final sheet up to the next power of two on each axis. The packing efficiency readout shows how much of the sheet is actually used.

What image formats can I import and export?

You can import any format the browser can decode — PNG, JPG, GIF, WebP and usually AVIF. The exported sheet is always a lossless PNG so transparency is preserved. The atlas is plain JSON or CSS text you can open in any editor.

Sprite Sheet Maker — Gera Tools

A browser-based sprite sheet maker that turns a pile of loose image frames into one combined sheet PNG plus a matching coordinate atlas. Drop your frames, choose how they pack, reorder them by dragging, and export everything a game engine or a website needs to slice the sheet back apart. It is built for game developers assembling animation strips, web developers bundling icon sets into a single CSS sprite, and pixel artists who want a clean, reproducible export without installing desktop software.

How it works

Every image you drop is decoded into an in-memory bitmap — none of it ever leaves your browser. The tool then runs a layout pass over your frames. In uniform grid mode it measures the largest frame, makes every cell that size, and centres each image inside its cell so animation frames line up perfectly across rows and columns. In tight pack mode a shelf-packing algorithm walks the frames left to right, starting a new row when the current one fills up, nesting frames of different heights to minimise wasted space.

Once the layout is computed, all frames are composited onto a single HTML canvas with nearest-neighbour scaling so pixel art stays crisp. The same layout data drives the atlas: each frame’s name, x, y, width and height are written into your chosen format. You get a live readout of the final sheet size and the packing efficiency — the share of the sheet occupied by actual pixels rather than padding — so you can tune columns and spacing.

You control the column count, inter-frame padding, a transparent or solid background, and an optional power-of-two sheet size for GPUs that require it. Reordering is as simple as dragging the frame thumbnails; renaming a frame updates the key used in the exported atlas.

Example

Suppose you have eight 32×32 walk-cycle frames named walk_0 through walk_7. Drop them in, choose Uniform grid, set columns to 4 and padding to 2. The tool builds a 136×68 sheet (4 columns and 2 rows of 32px cells plus 2px gutters) and a JSON atlas whose walk_0 entry reads roughly frame: x 2, y 2, w 32, h 32. Load the PNG and JSON into Phaser with this.load.atlas('hero', 'spritesheet.png', 'spritesheet.json') and play the animation by referencing the frame names. Switch the export to CSS sprites instead and you get one .sprite-walk_0 rule per frame using background-position, ready to drop into a stylesheet for an icon set.

Setting	Effect
Uniform grid	Equal cells, frames centred — best for animations
Tight pack	Shelf nesting — best for mixed-size icons
Padding	Pixel gutter between frames to avoid texture bleed
Power-of-two	Rounds sheet up to 256, 512, 1024 for older GPUs

Everything runs locally, so even unreleased artwork stays private on your machine.