A sprite sheet is only half the job. The engine also needs to know where each frame is, and how long it lasts. This maker packs your frames into a grid, a strip or a tight atlas, and writes that data in the formats engines actually import: TexturePacker/Phaser JSON, Aseprite JSON, a Godot 4 SpriteFrames resource, CSS, and Unity slicing settings. Frames are sorted the way you would number them, so walk_10 comes after walk_9.
How to use the Sprite Sheet Maker
- Drop all your frame PNGs at once. They are sorted by name in natural order. Add more at any time.
- Reorder with the arrows, remove stray frames, or reverse the order.
- Pick a layout: Grid (auto or fixed columns), a single Row, a single Column, or Tight pack with transparent edges trimmed.
- Set padding between frames, an outer margin, and edge extrusion. Turn on power-of-two if your target needs 64, 128, 256 px textures.
- Check the animation in the preview and set its FPS.
- Download the PNG and one data file, or a ZIP with the PNG and every format.
What you get
- PNG sheet with transparency, exactly as previewed.
- Phaser / TexturePacker JSON (hash and array), including trimmed offsets so tight-packed frames still line up.
- Aseprite JSON with a frame tag and durations.
- Godot 4 SpriteFrames .tres using AtlasTextures, ready for AnimatedSprite2D.
- CSS sprites with one class per frame and a stepped animation, plus Unity import and slice settings.
Which engines it fits
- Phaser 3:
this.load.atlas(key, 'sheet.png', 'sheet.json'), then create the animation from the frame names. - Godot 4: put the .tres next to the PNG and assign it to an AnimatedSprite2D's Sprite Frames.
- Unity: grid layouts slice with Grid By Cell Size using the values in the settings file. Use Point filtering and no compression.
- PixiJS, Defold, Cocos, Construct: read TexturePacker JSON (hash) directly or through their importers.
Tips from making games with it
- Use Grid with uniform frames for character animation. Engines' grid slicers and onion-skin tools expect it.
- Use Tight pack with trim for item and UI atlases with many differently sized images.
- Add 1–2 px of extrusion when the sheet is scaled by a non-integer factor or mipmapped. It stops neighbouring frames from bleeding in at the edges.
- Keep frame names meaningful (hero_walk_00…). They become the frame keys in the JSON.
Use cases
- Packing frames exported from Aseprite, Blender or Spine into a single texture.
- Building a UI or item atlas for a web game.
- Turning AI-generated frames into a sheet your engine can animate.
- Making a CSS sprite animation for a landing page.
FAQ
Which data formats does it export?
TexturePacker JSON in hash and array form (read by Phaser, PixiJS and many engines), Aseprite JSON, a Godot 4 SpriteFrames .tres, CSS sprite classes with keyframes, and a text file with Unity import and slicing settings.
What does tight packing do?
It trims the transparent border of each frame and packs the trimmed frames into rows sorted by height, trying several widths and keeping the smallest sheet. The JSON records each frame's original size and offset so it renders in the right place.
What is edge extrusion?
Extrusion copies each frame's outer row of pixels outward by 1–4 px. When a GPU samples slightly outside a frame (filtering, mipmaps, non-integer zoom), it reads the frame's own edge instead of a neighbour.
My frames are different sizes. What happens?
In Grid, Row and Column layouts every cell is as big as the largest frame and smaller frames are aligned bottom-centre, centre or top-left. Tight pack keeps each frame at its own size.
Is there a limit on frames?
No fixed limit. Everything runs in your browser, so the practical limit is your device's memory. Hundreds of 64 px frames are no problem.
Are my images uploaded?
No. Frames are read and packed locally. Nothing is sent to a server.