Animation strip combines all frames into one horizontal PNG
FRAMES (0)
1/2/3 = Mode · Ctrl+A = Select All · Ctrl+C/V = Copy/Paste
Ctrl+Z = Undo · Ctrl+D = Duplicate · Del = Delete
Arrows = Nudge (Shift=10px) · Space = Pan
Mouse: 0, 0No image100%
About this sprite sheet mapper
Sprite Sheet Mapper is for the sheets that are not on a neat grid. You draw a box around each frame by hand, name it, and it produces the coordinates your code needs — which is the only practical approach when a sheet was drawn by an artist rather than generated by a packer.
Frames can also be laid out automatically on a rows-and-columns grid, then nudged individually, so a mostly-regular sheet with a couple of odd frames does not force you into doing all of it by hand.
How to use it
Load a sprite sheet from your machine, or paste an image URL.
Choose a drawing mode: draw a new frame by clicking and dragging, select and move or resize an existing one, or generate a whole grid from a row and column count.
Give frames a label prefix so they come out named in sequence, and set a per-frame label and colour to keep long sheets readable.
Fine-tune any frame's X, Y, width and height numerically, or nudge it with the arrow buttons.
Export in the shape your code wants.
Formats and options
Export a JSON array, a JavaScript const object, ready-made drawImage calls, or CSS background-position rules.
Import an existing atlas JSON to edit a map somebody else produced.
Save the selected frame as a PNG, every frame as separate PNGs, or all frames as one horizontal animation strip.
Copy the map straight to the clipboard, or open the sheet in the Sprite Player.