About Sprite Sheet Maker
Generate sprite sheets from individual frame images. Arrange frames in a grid, configure spacing and layout, then export a single optimized PNG for game engines.
How to use
- Drop animation frames onto the upload zone or click Add Frames to browse. The tool accepts PNG, JPG, and GIF — PNG with a transparent background is strongly preferred for game sprites because it composites cleanly over any tilemap or HUD. Export each frame from your pixel editor (Aseprite, Piskel, GraphicsGale, LibreSprite, Photoshop) at the exact same canvas size, since the sheet packer assumes uniform frame dimensions. Mismatched sizes get padded with transparent space, which wastes texture memory.
- Name your source files sequentially before uploading so they sort correctly: walk_01.png, walk_02.png, walk_03.png. Files are read in alphanumeric order, which means walk_1.png, walk_10.png, walk_2.png will import out of sequence. Pad single digits with a leading zero (walk_01, walk_02 … walk_10) to keep the order intact. You can also reorder frames manually after upload by dragging thumbnails in the frame strip.
- Use the frame strip to refine the sequence: drag a thumbnail to a new position to rearrange playback, click the × on a frame to delete a bad capture, or duplicate a frame to hold a pose longer (useful for idle anticipation, attack windups, or recoil holds). Most engines read sprite sheets left-to-right then top-to-bottom, so the order in the strip is exactly the playback order. The preview canvas updates in real time as you make changes.
- Configure the grid layout in the settings panel: pick the number of columns to control how the sheet wraps. A walk cycle of 8 frames at 32×32 fits cleanly in 1 row × 8 columns (256×32 sheet). For larger animation sets — idle (4) + walk (8) + run (8) + attack (6) + jump (4) — pack each animation into its own row, all at 8 columns wide, so animation rows align predictably for engine slicing.
- Set frame dimensions to match your in-engine sprite size: 16×16 for top-down RPG tiles, 32×32 for classic platformer characters, 48×48 or 64×64 for modern indie pixel art, and 128×128+ for HD 2D games. If your source frames are a different size, the tool will scale them with nearest-neighbor to preserve hard edges. For power-of-two GPU efficiency on web targets like Phaser or PixiJS, design the final sheet to land on 256×256, 512×512, 1024×1024, or 2048×2048.
- Decide on padding (also called extrusion or border) between frames based on your engine's texture filtering. Set padding to 0 for pure pixel art using point/nearest-neighbor sampling — Unity Filter Mode = Point, Godot import preset = 2D Pixel. Set padding to 1–2 transparent pixels if the engine uses bilinear filtering, if sprites get rotated or scaled at runtime, or if you mip-map the atlas, since adjacent frames can otherwise bleed colored pixels into each other.
- Click Export PNG to download the packed sheet. The output is a single lossless PNG with transparent gutters and no compression artifacts, ready to drop into Unity (Sprite Mode = Multiple, Grid by Cell Size), Godot 4 (AnimatedSprite2D + SpriteFrames sheet import), Phaser (this.load.spritesheet with frameWidth/frameHeight), GameMaker (Create Sprite from Strip), or RPG Maker. If your source art is not yet pixelated, run it through the Image to Pixel Art Converter first to lock a consistent palette across every frame.
Frequently asked questions
What is a sprite sheet?
A sprite sheet (also called a texture atlas or sprite strip) is a single image file that packs multiple animation frames into a grid. Instead of loading dozens of separate image files at runtime, game engines load one sprite sheet and slice it into individual frames using UV coordinates. This dramatically reduces GPU draw calls, speeds up load times, and simplifies asset management. Virtually every 2D game engine — Unity, Godot, Phaser, GameMaker, Construct, and RPG Maker — natively supports sprite sheets as the standard format for character animations, UI elements, and tile sets.
What frame formats are supported?
You can upload PNG, JPG, and GIF images as individual frames. PNG is strongly recommended because it supports transparency and lossless compression, which preserves crisp pixel edges without introducing compression artifacts. JPG works for photographic frames but does not support transparency and introduces slight color blurring at edges. If you upload GIF files, the tool extracts each frame at full quality. For pixel art sprites, always use PNG — the transparent background means your characters and objects will composite correctly over any game background.
Can I reorder frames after uploading?
Yes. The frame strip at the bottom shows every uploaded frame as a thumbnail. Drag any frame to a new position to rearrange the animation sequence. You can also click the delete button on a frame to remove it, or use the Clear All button to start fresh. The sprite sheet preview updates in real time as you make changes, so you can immediately see how the final grid will look. This makes it easy to experiment with animation timing — try duplicating a frame to create a brief pause, or removing in-between frames for a snappier, more stylized motion.
What grid size should I use for my game engine?
The optimal grid depends on your sprite dimensions and animation length. For a character with 8 frames of walk animation using 32x32 sprites, a single row of 8 columns works well — the sheet will be 256x32 pixels. For larger animation sets (idle, walk, run, attack, jump), pack related animations into separate rows: 8 columns is a common standard that keeps sheets organized. Unity's Sprite Editor and Godot's AnimatedSprite2D both let you define frame size and row count when importing. If you are building for the web with Phaser or PixiJS, power-of-two sheet dimensions (256x256, 512x512, 1024x1024) can improve GPU texture sampling performance.
How much padding should I add between frames?
For pixel art games that use nearest-neighbor (point) filtering, zero padding is usually fine because there is no texture interpolation to bleed adjacent pixels. However, if your engine uses bilinear or trilinear filtering (common in 3D games or when sprites are scaled or rotated), add 1-2 pixels of transparent padding between frames to prevent color bleeding at the edges. Some engines call this extrusion or border padding. When in doubt, 1 pixel of padding is a safe default that works across all engines without wasting significant texture space.
Can I create sprite sheets for UI elements and tilesets too?
Absolutely. Sprite sheets are not limited to character animations — they are the standard format for any collection of related graphics. Upload your UI icons (hearts, coins, buttons, status effects) and pack them into a single atlas to reduce draw calls in your game's HUD. For tilesets, arrange your terrain tiles (grass, water, stone, paths) in a grid where each cell matches your tile size. Tools like Tiled and LDtk can import the resulting PNG directly as a tileset. You can also use this tool to combine particle effect frames, weapon animations, or environmental decorations into unified sheets.
What is the maximum number of frames I can add?
There is no hard limit on the number of frames. The practical limit depends on your browser's available memory and the dimensions of each frame. For typical pixel art sprites (32x32 or 64x64 pixels), you can easily pack hundreds of frames into a single sheet. For larger frames like HD character animations (256x256 or bigger), keep the total sheet dimensions under 4096x4096 pixels — this is the maximum texture size supported by most mobile GPUs and older integrated graphics. Desktop GPUs typically support 8192x8192 or larger.
How do I import the sprite sheet into Unity or Godot?
In Unity, drag the PNG into your Assets folder, select it in the Inspector, set Texture Type to Sprite, Sprite Mode to Multiple, and Filter Mode to Point (for pixel art). Open the Sprite Editor and use the automatic or grid slicer to cut frames. In Godot 4, create an AnimatedSprite2D node, add a SpriteFrames resource, and use the sheet import button to load your PNG — set the grid dimensions to match your frame size and Godot will automatically slice the frames. Both engines support setting frame rate and loop mode directly in their animation editors.
Part of ToolFluency’s library of free online tools for Creative. No account needed, no data leaves your device.