Godot: How to create sprite sheets the easy way

Create sprite sheets

TexturePacker makes it easy to create optimized sprite sheets for Godot.

Download TexturePacker, which is available for macOS, Windows, and Linux. You can test it with a 7-day free trial before purchasing a license:

Start TexturePacker and drop the sprites you want to pack into a sprite sheet onto TexturePacker's main window. You can also drop entire folders, TexturePacker will automatically scan them for image files and add them to the sheet.

Click the Framework button at the top of the right sidebar and select Godot SpriteSheet as the data format. The sprite sheet data file contains each sprite's coordinates and size on the sheet, which is used later to automatically extract individual sprites from the sheet.

Use the Sprite sheet file field (below the framework button) to select the location and file name for the data file. The .tpsheet file extension is added automatically. The Texture file name can be left empty, TexturePacker will save the PNG sprite sheet image next to the data file.

When you save both the data and texture files in your Godot project directory, Godot will automatically reimport the sprite sheet whenever you update it with TexturePacker. No manual copying is required.

Press the Publish sprite sheet button in the toolbar. This will save both the sprite sheet image and a .tpsheet file containing the sprite coordinates.

Install TexturePacker importer

Now switch to your Godot project. To import a sprite sheet not just as one large atlas image, but to also create a set of AtlasTextures for all individual sprites, you need to install the TexturePacker Importer plugin:

• Open the AssetLib view
• Search for "texturepacker"

The TexturePacker Importer plugin is available for Godot 3.5 LTS as well as for Godot 4.1 and newer. In this tutorial we use Godot 4.4.

• Click on the plugin
• Download it
• Install it

After installation, the plugin is still inactive. Press the Plugins... button in the AssetLib to open the project settings. There you can enable the TexturePacker Importer:

Import sprite sheets in Godot

As soon as you enable the TexturePacker Importer plugin, *.tpsheet files are automatically imported and the corresponding sprite sheet images are split. For each sprite, an AtlasTexture resource is generated. These can be found in a new folder with the .sprites suffix:

Drag and drop an AtlasTexture from the FileSystem view into your scene to create a Sprite2D node.

(If you started with an empty project, create a Node2D as the root node for the scene first.)

Create an animation

To add an animated sprite to the scene, use the + button on top of the Scene tree view to add an AnimatedSprite2D node.

• Select the AnimatedSprite2D node
• In the Inspector, click on the Sprite Frames property
• Choose New SpriteFrames

Now click again on the Sprite Frames property. At the bottom of the editor, a new "Animation Frames" panel opens. You can drag and drop sprites from the FileSystem tab to the frame list:

With the Autoplay on Load button checked, the animation starts playing when your game is launched. Use the FPS field to configure the animation speed. For a preview of the animation in the scene viewport press the Play button:

If the animation should only play when a key is pressed, you can attach a script to the AnimatedSprite2D node:

extends AnimatedSprite2D

func _process(delta):
	# Play animation while right cursor key is pressed
	if Input.is_action_pressed("ui_right"):
		play()
	else:
		stop()

Using sprites with normal maps

The TexturePacker Importer plugin also supports sprites with normal maps, enabling dynamic lighting effects for your 2D sprites in Godot.

Creating normal maps

If you don't have normal maps for your sprites yet, here are two helpful resources:

• Learn how to create normal maps using SpriteIlluminator in this tutorial:
  Normal map painting with SpriteIlluminator

• Once you have normal maps, pack them into sprite sheets alongside your diffuse textures:
  Packing normal map sprite sheets with TexturePacker

Automatic CanvasTexture creation

When your .tpsheet file links to a normal map, the TexturePacker Importer plugin automatically:

1. Loads the normal map sprite sheet
2. Creates a CanvasTexture for the sprite sheet that combines the diffuse texture with its corresponding normal map
3. Saves this CanvasTexture resource in a subdirectory named CanvasTexture
4. Uses the CanvasTexture instead of the diffuse texture when importing the sprite sheet and creating the sprite resources

Using sprites with normal maps

Using sprites with normal maps is just as simple as using regular sprites:

• Drag and drop the sprites from the FileSystem view into your scene or animation
• No additional configuration is needed

To see the effect of the normal maps, add a DirectionalLight2D to your scene:

You might notice that the sprite appears quite bright. This is because the global light illuminates the sprite, making it look like a sprite in a scene without additional light sources. The light from the additional light source is added to this global light.

To fix this, add a CanvasModulate node to the scene and set its color to black (or a dark color that you want to use for ambient light). This makes the sprite unlit by default, allowing you to clearly see the effect of the directional light.

To configure the direction of the light, change the Rotation property in the Transform section of the DirectionalLight2D node.