Atlas packer

Pack sprites of any size into one or more texture atlases, then download the atlas images and a file with every sprite’s position. Values are copied exactly. Your files stay in your browser and are never uploaded.

How the atlas packer works

Sprites are sorted, then placed one by one into the free space of the atlas. Each sprite goes where it leaves the smallest leftover gap on its shorter side, which keeps the free space in large, useful pieces. With rotation allowed, a sprite can also be turned 90° clockwise if that fits better. The packer tries growing atlas sizes and keeps the smallest one that holds every sprite. Sprites that don’t fit in one atlas of the maximum size go on to more pages.

You can edit the packed layout by hand: drag sprites in the preview, drop one on another to swap them, type exact positions, move a sprite to another page, rotate it or remove it. Moves are only accepted where the sprite stays within the maximum atlas size and keeps the padding to every other sprite, and the page grows when a sprite is moved past its edge. After an edit the layout is manual: positions are kept, and images you add later go into free space without moving anything. Auto-pack discards the manual positions and packs everything again, and so does changing the padding, border padding, extrusion, trim or rotation.

• Load up to 256 images with Choose images or drop them onto the tool.
• Drag a row in the sprite list to change the list order (on touch, press and hold briefly first), or focus a sprite name and use Alt+Up or Alt+Down. The Sort order setting “List order” packs in this order.
• Hover over a sprite in the preview to see its name and rectangle. Select a sprite, in the preview or the list, to edit it in the Selected sprite panel.
• In the preview, drag a sprite to move it or drop it on another sprite to swap them (on touch, press and hold briefly first). With the preview or the Selected sprite panel focused, arrow keys nudge the selected sprite by 1 px (Shift: 8 px), Delete removes it and Escape deselects it. Ctrl+Z undoes and Ctrl+Y or Ctrl+Shift+Z redoes, also with the Undo and Redo buttons.

Trimming removes fully transparent rows and columns around each sprite and records the original size and the offset, so the sprite can be placed back exactly. Textures are read without premultiplying alpha or converting colour profiles, so pixels with an alpha of 0 keep their colour. For a sheet of equal-size frames in a grid, use the flipbook converter instead.

Metadata

The metadata file lists every page and every sprite. The files have fixed names: the pages are atlas.png, or atlas_0.png, atlas_1.png and so on when there are several (atlas.tga and so on for TGA), the metadata is atlas.json, atlas.csv or atlas.xml, and the ZIP is atlas.zip. Each sprite has:

• name: the file name without its extension, with _2, _3 and so on added to repeated names.
• page and file: the page index, from 0, and its image file.
• x, y, width, height: the sprite’s rectangle in the atlas, in pixels from the top-left corner, as placed (after rotation).
• rotated: true if the sprite was turned 90° clockwise to fit.
• offsetX, offsetY, originalWidth, originalHeight: where the trimmed rectangle sits inside the original image, and the original size. Without trimming the offset is 0 and the size matches.
• u0, v0, u1, v1: the same rectangle as UVs from 0 to 1, with v measured from the origin you choose. u0 and v0 are the smaller values.

JSON has a pages list (index, file, width, height), a uvOrigin value and a sprites list. CSV has one header row and one row per sprite. XML has an atlas element with page and sprite elements whose attributes use the same names.