How to Import Sprite Sheets into Godot, Unity, Phaser, and Construct

The Gap Between "Exported" and "Working"

Every sprite sheet tutorial ends at the same place: "and now you have your sprite sheet!" Great. The file sits in your downloads folder. The part nobody walks you through is the next twenty minutes — getting the engine to read that grid as discrete frames, play them in order, and not turn your crisp pixels into a blurry smear.

Each engine has its own vocabulary for the same three jobs: slice the sheet into frames, configure filtering and pivot, and animate the frames in sequence. This guide does all three for the four engines indie devs ship with most.

Before You Import: Two Universal Settings

These apply in every engine. Get them wrong and nothing below will look right.

• Filtering: off (point/nearest). Pixel art must use nearest-neighbor sampling or it blurs the instant it scales. Every engine defaults to linear filtering, which is correct for photos and wrong for pixels. This is the single most common "why is my pixel art blurry" cause.
• Frame size must match exactly. If your characters are 32×32 with 2 px padding, the slicer needs to know both numbers. An off-by-one frame width means every frame after the first drifts sideways.

Godot 4

Godot gives you two routes depending on whether you want animation or just a static region.

For animation (AnimatedSprite2D):

1. Add an AnimatedSprite2D node.
2. In the inspector, create a new SpriteFrames resource and open the SpriteFrames panel at the bottom.
3. Click Add frames from Sprite Sheet, select your PNG.
4. Set Horizontal and Vertical to your frame counts. Godot shows a live grid — confirm the blue boxes land on each frame.
5. Select the frames you want, click Add, name the animation, set its FPS, and tick Loop if it cycles.
6. Play it from code with $AnimatedSprite2D.play("walk").

For a static region (AtlasTexture): create an AtlasTexture, assign your sheet as the Atlas, and set the Region rectangle to the single frame you want. Useful for non-animated tiles and UI.

Turn off filtering: Project Settings → Rendering → Textures → Canvas Textures → Default Texture Filter → Nearest. Set this once and it applies project-wide.

Unity

Unity routes everything through the Sprite Editor.

1. Drop the PNG into your project. Select it.
2. In the Inspector set Sprite Mode → Multiple (this is what tells Unity the file holds many frames).
3. Set Filter Mode → Point (no filter) and Compression → None for crisp pixels.
4. Click Sprite Editor. In the top-left Slice dropdown choose Grid By Cell Size, enter your frame width and height, set the Padding to your gutter, and click Slice, then Apply.
5. The sheet now expands into numbered sub-sprites in the Project window.

To animate: select all the sliced frames, drag them together into the Scene. Unity offers to create an Animation Clip and an Animator Controller automatically — accept it, name the clip, and you have a playing animation. Adjust the clip's Samples value to change the frame rate.

Phaser 3

Phaser is code-first — no visual slicer, you describe the grid in the loader.

// In preload()
this.load.spritesheet('hero', 'assets/hero.png', {
  frameWidth: 32,
  frameHeight: 32,
  margin: 0,
  spacing: 2, // your padding/gutter
});

// In create()
this.anims.create({
  key: 'walk',
  frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 7 }),
  frameRate: 12,
  repeat: -1, // loop forever
});

const hero = this.add.sprite(100, 100, 'hero');
hero.play('walk');

spacing is your gutter and margin is the outer border — set both to match your export or the frames will drift. For crisp pixels, set pixelArt: true in your game config; it switches the renderer to nearest-neighbor globally.

Construct 3

Construct is the most visual of the four and aimed at no-code workflows.

1. Add a Sprite object to the layout.
2. The Animations editor opens. Right-click the frames pane and choose Import frames → From sprite strip.
3. Pick your PNG and enter the number of horizontal and vertical cells. Construct splits the strip into individual frames.
4. Set the animation Speed (frames per second) and toggle Loop in the animation properties.
5. For pixel art, go to Project Properties → Sampling → Point to disable smoothing.

Construct's one quirk: it does not read padding on a strip import, so export a Construct-bound sheet with zero gutter and rely on the engine's own bleeding protection, or import frames individually.

The Cross-Engine Cheat Sheet

Job	Godot 4	Unity	Phaser 3	Construct 3
Slice	SpriteFrames panel	Sprite Editor, Multiple	load.spritesheet config	Import from sprite strip
Frame size	Horizontal/Vertical count	Grid By Cell Size	frameWidth/frameHeight	horizontal/vertical cells
Gutter	n/a (use AtlasTexture)	Padding field	spacing	export with 0 gutter
Kill blur	Default Texture Filter → Nearest	Filter Mode → Point	pixelArt: true	Sampling → Point
Animate	play("name")	Animation Clip	anims.create + play	Speed + Loop

The pattern is identical underneath: same grid, same frame size, same nearest-neighbor filtering, just four dialects describing it. Learn the concepts once and any new engine is a thirty-second lookup.

When the Import Goes Wrong

Three failure modes cover almost every "it imported but looks broken" report:

• Frames drift sideways the further you go. Your frame size or gutter is off by a pixel. Recount and re-enter the exact numbers.
• Everything is blurry. Filtering is still on linear. Switch to point/nearest in the engine setting above.
• Faint lines flicker around frames. Texture bleeding — the sheet needs padding and edge extrusion. That is a packing problem, not an import problem; fix it at export time.

Match the numbers, kill the filtering, pad the sheet, and the import is boring in the best way — it just works.