Sprite Sheet Generator: Pack Frames for Godot

Drop in your animation frames and get one packed sprite sheet PNG, a JSON file with every frame's position, and a Godot 4 SpriteFrames resource that plays the animation in an AnimatedSprite2D. It all runs in your browser, so your frames are never uploaded.

Step 1 of 3: Frames

How to use it

  1. Press Choose images, or drop all your frames on the box at once. Use the arrows to reorder frames and the cross to remove one, then press Next.
  2. Pick Auto (near square), One row or Custom columns, set the padding and, if you need it, a custom frame size, then press Next.
  3. Type the animation name, the frames per second and the Godot folder where you will save the PNG.
  4. Press Pack sprite sheet.
  5. Press Download PNG, Download JSON or Download Godot .tres.

What the sprite sheet maker exports

The PNG holds every frame in a grid, left to right and top to bottom. Each cell is the size of the largest frame, or your custom size, and smaller frames are centered in their cell so the character does not jump around between frames. Padding adds empty pixels between cells only, not around the outside.

The JSON lists the sheet's size, the animation name, the FPS and each frame's file name with its x, y, width and height in pixels, so any engine or script can cut the sheet back into frames.

The .tres file is a Godot 4 SpriteFrames resource. It contains one AtlasTexture per frame whose region is that frame's rectangle on the sheet, and one looping animation with your name and FPS as its speed.

Where to save the files in your Godot project

The .tres file finds the sheet by its res:// path, and res:// is your project folder. With the Godot folder set to res://sprites/ and the animation called walk, save walk_sheet.png into the sprites folder of your project, so its path is res://sprites/walk_sheet.png. Then save walk_frames.tres anywhere in the project.

Add an AnimatedSprite2D, drag the .tres file from the FileSystem dock onto its Sprite Frames property and press play in the SpriteFrames panel to preview it. From a script, call play("walk") on the node.

Layout tips

Name frames with numbers, such as walk_1.png to walk_12.png. The generator sorts them in number order, so walk_2 comes before walk_10, and uses the shared name as the animation name.

To play the sheet on a Sprite2D with Hframes and Vframes instead, keep the padding at 0: Godot splits the texture into equal parts, so padding would shift the frames. Add 1 or 2 px of padding when you use the .tres file and see thin lines from neighboring frames at the edges.

Frequently asked questions

Is the sprite sheet generator free?
Yes. It runs in your browser with no account, and your frames never leave your computer.
What order are the frames packed in?
By file name in natural number order, so frame_2 comes before frame_10. You can move any frame up or down, or remove it, before packing.
Can my frames be different sizes?
Yes. Every cell takes the size of the largest frame and smaller frames are centered in it. You can also set a custom frame size; frames larger than it are cropped evenly from both sides.
Which Godot version does the .tres file work with?
Godot 4. It uses the Godot 4 text resource format with AtlasTexture frames. Godot 3 uses a different format, so use the PNG and the JSON there.
Can I use the sprite sheet in other engines?
Yes. The PNG and the JSON frame rectangles work in any engine or framework that can slice a texture by pixel coordinates.

See all tools