Sprite sheet to AnimatedSprite2D

How to animate a sprite sheet in Godot 4

Godot's AnimatedSprite2D uses a SpriteFrames resource to organize animations and playback settings. A zero-gap sheet with known columns and rows can be selected quickly in the SpriteFrames panel and remains easy to revise later.

Reviewed July 20269 minute guide

What you will accomplish

You will export a regular PNG grid, import it into a Godot 4 project, select frames from the sheet in SpriteFrames, name and time the animation, and test the loop in a scene.

Prepare a Godot sprite sheet

Before you start

A Godot 4 project and a scene where an AnimatedSprite2D node can be added.
Animation frames with equal canvas dimensions and a stable character origin.
The exported sheet's column count, row count, frame order, and intended playback speed.

Step-by-step workflow

1
Pack a zero-gap sprite sheet
Use the Godot preset to create a regular grid with 0 px spacing, 0 px outer padding, transparent background, and 1× scale.
- Record the number of horizontal columns and vertical rows shown by the final layout.
- Check that frame order runs left to right and then continues on the next row.
- Export PNG. Godot can select cells directly from a regular sheet, so atlas JSON is not required for this workflow.
2
Add the PNG to the Godot project
Copy the sheet into the project folder and let Godot import it into the FileSystem dock.
- Store related sheets in a clear folder such as res://art/characters/player/.
- Select the texture's Import settings and choose filtering appropriate to the art style; pixel art normally needs nearest-neighbor style filtering rather than smoothing.
- Reimport after changing texture import options so the preview uses the final settings.
3
Create an AnimatedSprite2D and SpriteFrames resource
Add an AnimatedSprite2D node, find Sprite Frames in the Inspector, and create a new SpriteFrames resource.
- Click the new resource to open the SpriteFrames panel at the bottom of the editor.
- Rename the default animation to a meaningful state such as idle, walk, attack, or burst.
- Create separate named animations in the same resource when one character sheet contains multiple states.
4
Add frames from the sprite sheet
In the SpriteFrames panel, choose Add frames from a Sprite Sheet and select the imported PNG.
- Enter the sheet's horizontal and vertical frame counts exactly as recorded during export.
- Select only the cells that belong to the current animation, in playback order, then add those frames.
- Unused grid cells should remain unselected; otherwise they become blank frames in the animation.
5
Set speed, loop mode, and frame duration
Choose the animation FPS and loop behavior in the SpriteFrames panel, then adjust individual frame duration when a pose needs a longer hold.
- Use linear looping for walk and idle cycles, no loop for one-shot attacks, and ping-pong only when reversing the artwork is visually correct.
- SpriteFrames supports a relative duration for each frame, so a duration of 2 lasts twice as long as a duration of 1 at the same animation FPS.
- Enable autoplay only when that animation should begin as soon as the node enters the scene.
6
Run the scene and verify the asset
Place the AnimatedSprite2D at the intended scale, run the scene, and inspect motion, loop timing, transparency, and texture quality.
- Check that the character does not jump between frames; jitter usually comes from inconsistent source alignment.
- Watch the transition from the final frame back to the first and remove any duplicate hold that makes the loop hesitate.
- When controlling states in code, call play with the named animation and keep asset names stable.

Recommended settings

Setting	Recommended value	Why it matters
Generator spacing / padding	0 px / 0 px	Lets Godot divide the texture into equal cells without accounting for gaps.
Horizontal frames	Exported column count	Defines how many selectable cells Godot creates across the sheet.
Vertical frames	Exported row count	Defines how many selectable cells Godot creates down the sheet.
Animation FPS	Match the intended motion	Controls the base playback speed of the SpriteFrames animation.
Per-frame duration	1 by default	Increase it only for poses that should be held longer than the base frame interval.
Loop mode	Linear, none, or ping-pong	Choose behavior that matches the animation rather than enabling every clip to loop.

Check the result

The grid selector divides the PNG into the expected columns and rows with no cropped or combined cells.
Only the intended cells are present in the named animation and they play in the correct order.
The character origin remains stable and transparent pixels render correctly over the scene.
Animation FPS and relative frame durations reproduce the intended pauses and motion.
The loop mode fits the action and the final-to-first transition has no accidental hesitation.

Common mistakes

Entering frame pixel size instead of frame count

Godot's sprite-sheet selection dialog asks for horizontal and vertical frame counts. Use columns and rows, not the width and height in pixels.

Selecting blank cells at the end of the grid

A partially filled final row can contain unused cells. Select only actual frames or the animation will flash transparent frames.

Using one fixed duration for a converted GIF

If the source has pauses, reproduce them with relative frame durations or repeated frames instead of increasing the entire animation's speed.

Correcting jitter with node movement

Moving AnimatedSprite2D per frame makes reuse difficult. Normalize source canvases or correct the artwork alignment before packing.

Official documentation

Frequently asked questions

Should I use AnimatedSprite2D or Sprite2D for a sprite sheet?

AnimatedSprite2D with a SpriteFrames resource is direct for frame animation. Sprite2D can also expose horizontal and vertical frames and be animated with AnimationPlayer when that workflow better fits the scene.

Why does Godot split my sheet into the wrong cells?

Check that horizontal frames equals the number of columns and vertical frames equals the number of rows. A sheet with spacing or padding also needs a different import strategy, so a zero-gap grid is simplest.

Can Godot use different durations for individual frames?

Yes. SpriteFrames supports relative frame duration. At the same animation FPS, a frame duration of 2 lasts twice as long as a frame duration of 1.

Does the generator create a Godot .tres resource?

No. It creates the PNG sheet and optional JSON formats. You create and configure the SpriteFrames resource inside Godot.

Continue with another workflow

How to make a sprite sheet from images

Turn PNG, JPG, or WebP animation frames into a clean sprite sheet. Choose a grid, verify frame order, and export PNG plus atlas metadata.

How to convert a GIF to a sprite sheet

Convert an animated GIF into a PNG sprite sheet in your browser while preserving frame order and checking the original frame timing.

How to import a sprite sheet into Unity 6

Prepare a regular sprite sheet, import it into Unity 6, slice it by cell size, and build a clean 2D animation without blurry pixel art.

Open the free tool

Prepare a Godot sprite sheet

Step-by-step workflow

Pack a zero-gap sprite sheet

Use the Godot preset to create a regular grid with 0 px spacing, 0 px outer padding, transparent background, and 1× scale.

Record the number of horizontal columns and vertical rows shown by the final layout.
Check that frame order runs left to right and then continues on the next row.
Export PNG. Godot can select cells directly from a regular sheet, so atlas JSON is not required for this workflow.

Add the PNG to the Godot project

Copy the sheet into the project folder and let Godot import it into the FileSystem dock.

Store related sheets in a clear folder such as res://art/characters/player/.
Select the texture's Import settings and choose filtering appropriate to the art style; pixel art normally needs nearest-neighbor style filtering rather than smoothing.
Reimport after changing texture import options so the preview uses the final settings.

Create an AnimatedSprite2D and SpriteFrames resource

Add an AnimatedSprite2D node, find Sprite Frames in the Inspector, and create a new SpriteFrames resource.

Click the new resource to open the SpriteFrames panel at the bottom of the editor.
Rename the default animation to a meaningful state such as idle, walk, attack, or burst.
Create separate named animations in the same resource when one character sheet contains multiple states.

Add frames from the sprite sheet

In the SpriteFrames panel, choose Add frames from a Sprite Sheet and select the imported PNG.

Enter the sheet's horizontal and vertical frame counts exactly as recorded during export.
Select only the cells that belong to the current animation, in playback order, then add those frames.
Unused grid cells should remain unselected; otherwise they become blank frames in the animation.

Set speed, loop mode, and frame duration

Choose the animation FPS and loop behavior in the SpriteFrames panel, then adjust individual frame duration when a pose needs a longer hold.

Use linear looping for walk and idle cycles, no loop for one-shot attacks, and ping-pong only when reversing the artwork is visually correct.
SpriteFrames supports a relative duration for each frame, so a duration of 2 lasts twice as long as a duration of 1 at the same animation FPS.
Enable autoplay only when that animation should begin as soon as the node enters the scene.

Run the scene and verify the asset

Place the AnimatedSprite2D at the intended scale, run the scene, and inspect motion, loop timing, transparency, and texture quality.

Check that the character does not jump between frames; jitter usually comes from inconsistent source alignment.
Watch the transition from the final frame back to the first and remove any duplicate hold that makes the loop hesitate.
When controlling states in code, call play with the named animation and keep asset names stable.