Sprite Sheet Generator

About the Sprite Sheet Generator

A sprite sheet puts the frames of an animation, or the images of a game or a web page, into one picture, so they load as one file and draw from one texture. Drop your frames and this generator packs them: tightly, each trimmed of its empty edges, or in a grid of equal cells, with the space between frames, a border, extruded edges and power-of-two sizes that game engines often ask for. It writes the JSON atlas in the widely used TexturePacker layouts (hash or array), which Phaser’s load.atlas and PixiJS read, with animation lists for numbered frames; CSS sprite classes, including for 2× sheets; and the Phaser 3 code that loads the sheet and plays it.

It also works the other way: cut an existing sheet into frames by frame size, by columns and rows, or by its JSON atlas (TexturePacker, Phaser or Aseprite, with rotated and trimmed frames put back), play them as an animation, and get the frames as PNG files, an animated GIF, or a new, tighter sheet. Everything runs in your browser; nothing is uploaded. Without a pass, the free preview shows the sheet at preview size under a watermark and the first lines of each code.

Common uses

• Packing the animation frames of a game character for Phaser, PixiJS or another engine that reads TexturePacker JSON.
• Combining the icons or buttons of a web page into one image with CSS classes.
• Taking apart a sheet bought or downloaded as one picture, to edit single frames or re-pack them tighter.
• Checking an animation’s timing and frames before it goes into a game.
• Turning a sprite sheet into an animated GIF to show the animation in a post or a pull request.

Packed or grid

• Packed places the frames as tightly as it can (a skyline packer tries many sheet widths and keeps the smallest sheet). Each frame is trimmed of its fully transparent edges, and the atlas records where the trimmed part sat in the original frame (spriteSourceSize and sourceSize), so engines draw it at its original place.
• Grid, One row and One column give every frame a cell the size of the largest frame, in order. That is what loaders that take only a frame width and height expect (Phaser’s load.spritesheet, CSS animations with steps()).
• Frames are never rotated on the sheet: rotation saves a little space, but not every engine reads rotated frames.

Space between frames, extrude and power of two

• Space between frames keeps a frame’s neighbours out of it when an engine filters or scales textures; TexturePacker’s own guidance is at least 2 pixels for OpenGL rendering.
• Extrude repeats each frame’s edge pixels around it. The frame keeps its size; the extra pixels are what a filtered texture picks up instead of empty space, which stops thin seams between tiles.
• Power-of-two size rounds the sheet’s width and height up to powers of two (32, 64, 128, 256 … pixels), which some engines need for compressed textures.
• Space around the sheet keeps frames off its edges.

The JSON atlas

Each frame gets frame (its place on the sheet), rotated (always false here), trimmed, spriteSourceSize and sourceSize; meta names the image and its size. Hash lists frames by name, Array in order with a filename; Phaser reads both, and PixiJS reads the frames and the animations lists. Frames whose names end in a number (walk_01.png, walk_02.png) are listed as one animation (walk), in number order.

Cutting a sheet

• Frame size cuts as Phaser does: from the margin at the top left, frame after frame with the spacing between them; Columns and rows divides the sheet evenly.
• JSON atlas cuts exactly where the atlas says. Frames that TexturePacker rotated are turned back, and trimmed frames are put back into their original size, so every frame comes out as it was drawn.
• Fully transparent frames (the empty end of a grid) can be left out. The animation plays the frames from and to the numbers you choose, at your speed or with the atlas’s own frame times (Aseprite writes them).

Rules used

• TexturePacker: texture settings — padding, extrude and power-of-two sizes.
• Phaser: SpriteSheetConfig — frame width and height, margin and spacing of a grid sheet.
• Phaser: the loader — load.atlas reads the JSON Hash and JSON Array layouts.
• PixiJS: Spritesheet — the frames, animations and meta of the JSON.

Limitations

• Up to 1,000 frames of up to 20 MB each and 64 million frame pixels in all, and sheets up to 8,192 × 8,192 pixels, the largest canvas iPhones and iPads can draw.
• Animated GIF and WebP frames give only their first frame; split them into frames first with the GIF Splitter.
• Trimming removes only fully transparent edges; a frame with a faint shadow keeps it.
• A GIF has at most 256 colours and only fully transparent or fully opaque pixels, so soft edges become hard.
• Atlases are read in the TexturePacker JSON layouts (also as written by Phaser’s and Aseprite’s exporters); other formats, such as XML or plist atlases, are not read.

Privacy

On this device: nothing is sent

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.