Sprite Sheet Generator

A sprite sheet packs many small images into one large image, with a map that says where each one sits. Games load one texture instead of hundreds of files, which is faster and lets the graphics card draw many sprites in one batch. Websites use the same idea for icons with CSS. This tool builds the sheet, the JSON map and the CSS in one step.

Adding sprites

Drop PNG frames, icons or interface pieces, in any number. Animated GIF and WebP files are expanded into their individual frames automatically, which makes it easy to turn a character animation into a sheet. File names become sprite names in the JSON and CSS, so name files meaningfully, such as hero-run-01.png.

Tight packing or uniform grid

Tight packing arranges sprites of different sizes as compactly as possible, saving texture memory; it suits icon sets, UI atlases and mixed graphics. A uniform grid places every sprite in an equal cell in reading order, which is what simple animation code and many engines expect for frame-by-frame animation. Set the number of columns, or leave it at 0 for a roughly square sheet.

Trimming transparent edges

Sprites exported from animation tools often have large empty margins. Trimming removes fully transparent rows and columns around each sprite before packing, so the sheet gets smaller. The JSON keeps the original size and the offset of the trimmed area, so engines that read the JSON Hash format still draw sprites at the right position.

Padding

Padding adds space between sprites, from 0 to 64 pixels. With texture filtering or mipmaps, colors from neighboring sprites can leak across the edges, creating faint lines. A padding of 2 to 4 pixels avoids that. Pixel-art games rendered without filtering can often use 0 or 1.

Power-of-two sizes

Some engines, older GPUs and certain compressed texture formats work best or only with sheet dimensions like 256, 512, 1024 or 2048 pixels. The power-of-two option enlarges the sheet canvas to the next such size. Sheets larger than 8192 pixels trigger a warning, because many GPUs and engines cannot load them; split such sets into two sheets.

The JSON map

The JSON uses TexturePacker’s widely supported JSON Hash layout. For each frame it stores its position and size on the sheet, whether it was trimmed, and its original source size. Phaser loads it with its atlas loader, PixiJS with its spritesheet loader, and plugins exist for many other engines.

CSS for websites

The generated CSS defines one class per sprite with its width, height and background-position. Set the sheet as the background image of a shared class, add the sprite’s class to an element, and the right icon appears. Copy the JSON or CSS directly, or download the PNG, JSON and CSS together as a .zip.

Privacy

All packing happens in your browser; game assets are never uploaded.

Related tools

To get frames from an existing animation, use the GIF Frame Extractor. For crisp enlarged pixel art, try the Pixel Art Converter. For game textures in DirectX format, convert first with DDS to PNG.