Game assets / Free browser tool

Sprite Atlas Workbench

Give every frame a place. Pack PNG sprites, keep companion maps aligned, and inspect the pixels and pivots before your atlas goes into a game.

One offline HTMLMatching map layoutsPNG + JSON + ZIP

8 sprites · 3 maps · no files needed

Start with your PNGs, or use the built-in scout example.

1. Sources & shared pivots

Select individual PNGs together. A sprite is a name plus its matching maps.

Import PNG sources

PNG files · multiple selection

walk_01.png or walk_01.diffuse.png, with walk_01.normal.png and walk_01.emission.png. Names are case-insensitive; maps must share original dimensions.

Resume local work

Load project JSON, then relink original PNGsReopen this Kit's ZIP to reconstruct sources

Project JSON contains settings and fingerprints only. ZIP reopening retains frame geometry; trimmed-away pixels and original PNG encoding are not recoverable.

Imported sprites and linked companion maps
Sprite / animation group	Maps	Original → trim	Packed allocation

2. Layout & texture budget

Every selected map uses the same frame positions. Rotation is always off.

Maximum page edge Transparent padding / side Edge extrusion / side Maximum pages Total RGBA texture budget Export filename prefix

Trim transparent diffuse bordersShare identical selected-map pixelsCrop pages to power-of-two bounds

Maps:Diffuse always includedNormalEmission

Companion maps activate when first imported. Every sprite must have each selected map. Trim follows diffuse alpha > 0; companion pixels outside that crop are discarded. Padding + extrusion reserve space on every side. The texture budget counts all pages × maps × 4 bytes per pixel, not browser RAM.

3. Inspect & export

Pack the sources to create a checked layout.

Your atlas, pixel by pixel.Pack sources to preview pages and inspect their gutters.

Bleed inspection

Magnification

Pink marks the sampled pixel; amber marks the selected content rectangle. Click the atlas to move the sample. Outlines and checkerboards are preview aids only.

Animation & origin

GroupFPS

Pack an atlas and choose a group.

One package, matching coordinates.

The ZIP contains PNGs, a generic manifest, per-page Phaser JSON-hash and Pixi spritesheet metadata, and a README. Load each page separately. Cross-page animation references are in the generic manifest. Normal/emission shader setup stays in your game.

A small atlas pipeline, with visible decisions

For indie game sprites, UI art and frame animations that need a repeatable local export.

From PNGs to game assets

Import diffuse sprites with optional matching normal/emission files. Correct missing maps, dimension mismatches and name conflicts before packing.
Select each sprite to set its animation group and pivot. “Use pivot for this group” copies the selected numeric pivot to the saved group.
Choose page size, transparent padding and border extrusion. Start with the defaults; cropped pages avoid reserving unused full sheets.
Pack, select rows to inspect their top-left crop corners, and click the atlas to check any border. Preview animation to spot pivot drift.
Download the ZIP and test it with your renderer's filtering and mipmap settings. Save project JSON and keep original PNGs for edits later.

Try the example

The scout example makes seven walk frames (one duplicate), one fully transparent sprite, and all three maps. Pack it to see shared allocations, trim offsets, replicated edge pixels and the same crop on every map.

Frames sort naturally by filename: walk_2 before walk_10. A trailing number supplies the initial animation group; other names start in “stills.” Animation preview supports 128 frames per group at 1–30 FPS.

What gets exported

Frame rectangles exclude gutters. spriteSourceSize gives trim offsets; sourceSize retains original dimensions. Pivots use original-space coordinates even when a sprite is trimmed. Duplicate allocations retain separate frame names, pivots and animation entries.

Phaser 3.90.0 and Pixi 8.1.2 are the pinned import targets for this release. Other engine versions and rendering paths need their own check. No engine library is required by this HTML.

Limits & pixel behavior

Up to 256 sprites / 768 files; 16 MiB per PNG, 64 MiB total source files, 67,108,864 source pixels across all maps; 4096 px maximum source/page edge; up to 16 pages; 128 MiB ZIP and 2 MiB project JSON. A job cancels after four minutes.

Supports non-interlaced 8-bit RGB, RGBA and gray-alpha, plus 1/2/4/8-bit gray or indexed PNG. Rejects 16-bit, interlaced and animated PNGs. Numeric samples inside the crop are preserved; color-profile/gamma metadata is ignored and omitted. Preview color can differ from a color-managed image editor.

Fully transparent trimmed sprites occupy 1 × 1. Rotation, resampling, lossy alpha thresholds, optimal packing guarantees and mipmap generation are outside this tool. Padding/extrusion reduce bleed; they cannot guarantee every filtering setup.

Pages process sequentially. Browser RAM can exceed the texture budget by several hundred MiB for 4K work. Use small batches, and avoid other heavy tabs. Smaller screens are suitable for inspection; desktop is recommended for large source sets.

Release checks: Chrome 154 on Windows, opening this HTML alone offline; five 256px pages with three maps, a full 2K three-map atlas and a full 4K diffuse atlas. Other browsers and devices have not been verified. Hard limits are safety caps, not a promise that every maximum-size combination fits your available RAM.

Local files & privacy

All source parsing, packing and downloads run in this tab. This file includes its CSS, JavaScript and logo. Its security policy blocks outgoing connections; offline browser tests check that no HTTP requests or sockets are initiated. There are no analytics, uploads, storage, accounts, external fonts or ad scripts.

Source files are read without modification. Reloading or closing the tab clears the in-memory project. Download a project or ZIP before leaving. Your browser and installed extensions remain outside this file's control.

Resume, relink, reconstruct

A project JSON stores settings, names, pivots, trim metadata and SHA-256 fingerprints. Reselect the same original PNG bytes to relink. A changed PNG or mismatched descriptor is rejected; remove that sprite and import the replacement deliberately.

“Reopen Kit ZIP” accepts this tool's stored-entry ZIPs and reconstructs sources using original dimensions and trim offsets. Outside the diffuse crop, every map becomes transparent. Reconstructed PNGs get new fingerprints and may hit input limits even when the packed ZIP is smaller. Keep originals for full fidelity.

Troubleshooting

Missing map? Import matching companions or deselect that map for the whole export. There are no automatic placeholder normals.

Too large? Reduce input size or batch count, increase the explicit page limit, or enable cropped pages. A sprite plus both gutters must fit a page.

Name conflict? Rename the source or remove the existing sprite. Spaces and Unicode names work; unsafe path characters and reserved object keys do not.

Cancelled? Import and packing commit only complete results. Keep the tab open while cancellation finishes; native compression may take a moment to yield.

Browser unsupported? Use a current desktop Chrome or Edge with CompressionStream, DecompressionStream and Web Crypto. Start with the example. No network connection is needed.