What Is a Sprite Sheet and How to Use One in Unity and Godot

Sprite sheets and animation strips

A sprite sheet holds the frames of a character or object in a single image. There are two common kinds. The first is a packed atlas: frames are squeezed, trimmed and sometimes rotated to save space, and a separate data file (plist, JSON or XML) says where each frame is. The second is a strip or grid: frames sit in equal-size cells and their positions follow from the cell size.

An atlas saves file size but needs an importer that understands its data; if trimmed frames are not put back in their original place, the animation jitters. An equal-cell strip opens in one go with any engine's built-in slicer. If you want the least work getting art into your engine, strips are easier.

Using a sprite sheet in Unity

Drag the image into your Assets folder and, in the Inspector, set Texture Type to Sprite (2D and UI) and Sprite Mode to Multiple. For pixel art, set Filter Mode to Point (no filter) and Compression to None, then press Apply.

Open the Sprite Editor, choose Grid By Cell Size as the Slice type and enter the width and height of one frame as Pixel Size. After Slice and Apply, the frames appear one by one under the image. Select them and drag them into the scene: Unity creates an animation clip and an Animator. Set the Sample Rate in the Animation window to the animation's frame rate.

Using a sprite sheet in Godot 4

Add an AnimatedSprite2D node to your scene and create a new SpriteFrames resource in its Sprite Frames field. In the SpriteFrames panel at the bottom, use the "add frames from sprite sheet" button and pick the image; for a single-row strip, set Horizontal to the frame count and Vertical to 1, then select and add the frames.

You set each animation's frame rate (FPS) and looping in the same panel. To keep pixel art sharp, set Default Texture Filter to Nearest under Project Settings > Rendering > Textures.

GameMaker and Phaser

In GameMaker, the Import Strip Image command in the sprite editor opens a strip; enter the frame count, frames per row and frame size.

In Phaser, load the image with this.load.spritesheet, passing frameWidth and frameHeight, then call this.anims.create with generateFrameNumbers for the frames and frameRate for the speed. Use repeat: -1 to loop.

Why does pixel art turn blurry?

There are two common causes. The first is texture filtering: the engine smooths pixels when it scales a small image up; Point filtering in Unity and Nearest in Godot prevent this. The second is non-integer scaling: scaling a pixel by 2.5 makes some pixels two and others three screen pixels wide, so lines wobble. Scale characters by whole numbers such as 2, 3 or 4; in Unity, the Pixel Perfect Camera component handles this for you.

Compression can also shift colours. For pixel art, lossless PNG and uncompressed texture settings are the safest choice.

Try it with ready-made characters

If you need animated characters to try these steps with, our free pixel art character pack gives every animation as an equal-cell PNG strip with a JSON listing frame size and frame rate. If you like them, the rest are in the complete collection; you can also play the characters in your browser before you buy.