Import Sprite Sheets into Godot, Unity, Phaser and Construct

Exported Is Not the Same as Working

Exporting the sheet takes a click. Getting the engine to treat that image as separate frames, play them in order, and keep the pixels sharp is where the time goes.

The engines use different names for the same three jobs: slice the sheet into frames, configure filtering and pivot, and animate the frames. This guide walks through all three in Godot 4, Unity, Phaser and Construct 3.

Two Settings That Apply Everywhere

Filtering: nearest (also called point). Pixel art needs nearest-neighbor sampling, or it blurs as soon as it is drawn at any size other than 1:1. Linear filtering is a common engine default because it suits photos and high-resolution art. It is the usual answer to "why is my pixel art blurry".

Frame size: exact. If the slicer is one pixel off, the first frame looks right and every following frame drifts a little further sideways.

Skip the Slicer: Export an Atlas File

Slicing by hand is the fallback. If your engine reads an atlas file, export one instead and the frame rectangles come from the file. The Format button in the editor's Export panel writes these:

Export	Use it with	What you get
Phaser / PixiJS	Phaser 3, PixiJS	TexturePacker-compatible JSON atlas
Godot	Godot 4	SpriteFrames resource (.tres)
Aseprite	Tools that read Aseprite JSON	Aseprite-compatible JSON atlas with one frame tag
Tiled	Tiled	JSON tileset (.tsj)
CSS Sprites	Web pages	One CSS class per frame
Sparrow / Starling XML	Sparrow, Starling, HaxeFlixel/FNF	TextureAtlas XML, frames named from a prefix you choose

Unity does not read any of these out of the box, so for Unity you export the PNG and slice it in the Sprite Editor, as described below.

Godot 4

Godot has two routes, depending on whether you need animation or a single region.

Animation with AnimatedSprite2D:

1. Add an AnimatedSprite2D node.
2. In the Inspector, create a new SpriteFrames resource in the Sprite Frames property and click it to open the SpriteFrames panel at the bottom of the editor.
3. Click the Add frames from sprite sheet button and choose your PNG.
4. Set Horizontal and Vertical to the number of columns and rows. Leave Separation and Offset at 0 for sheets from this editor. Check that the grid overlay lines up with each frame.
5. Select the frames, click Add, name the animation, set its FPS, and turn on looping if it should repeat.
6. Play it from a script with $AnimatedSprite2D.play("walk").

A single region with AtlasTexture: create an AtlasTexture, set the sheet as its Atlas, and set Region to the frame's rectangle. This suits static tiles and UI pieces.

Turn off filtering: Project Settings -> Rendering -> Textures -> Canvas Textures -> Default Texture Filter -> Nearest. This applies to the whole project; individual nodes can still override it with their own Texture Filter property.

Unity

In Unity everything goes through the Sprite Editor.

1. Drag the PNG into the Project window and select it.
2. In the Inspector, set Sprite Mode to Multiple. That tells Unity the file holds more than one sprite.
3. Set Filter Mode to Point (no filter) and Compression to None, then click Apply.
4. Set Pixels Per Unit to the number of pixels that should equal one world unit in your game, often your tile or frame size.
5. Open the Sprite Editor. In the Slice menu set Type to Grid By Cell Size, enter the frame size, leave Offset and Padding at 0 for sheets from this editor, then click Slice and Apply.

The sheet now expands into numbered sprites in the Project window.

To animate: select the sliced sprites and drag them into the Scene view together. Unity asks where to save a new Animation Clip and creates an Animator Controller for it. To change the frame rate, open the clip in the Animation window and set its sample rate; if the Samples field is hidden, enable Show Sample Rate from the window's options menu.

Phaser 3 / 4

Phaser has no visual slicer. You describe the grid in the loader:

// In preload()
this.load.spritesheet('hero', 'assets/hero.png', {
  frameWidth: 36,
  frameHeight: 36,
  margin: 0,
  spacing: 0,
});

// 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');

frameWidth and frameHeight are the cell size from the editor (36 here, for 32x32 art with 2 px padding). spacing is the gap between cells and margin the border around the whole image; both are 0 for this editor's sheets, but a sheet from another tool may need them.

If you exported the Phaser / PixiJS JSON, load it as an atlas instead and refer to frames by name:

this.load.atlas('hero', 'assets/hero.png', 'assets/hero.json');

For pixel art, set pixelArt: true in the game config. It switches texture filtering to nearest for the whole game.

Construct 3

Construct does this through its animation editor.

1. Add a Sprite object to the layout. The Animations editor opens.
2. Right-click in the animation frames bar and choose Import frames -> From sprite strip.
3. Pick the PNG and enter the number of horizontal and vertical cells. Construct cuts the image into equal frames.
4. In the animation's properties, set Speed (frames per second) and Loop.
5. For pixel art, set Sampling in the Project Properties to nearest (point) sampling.

The strip import only asks for cell counts, so it assumes the image is an even grid with no gaps. Sheets from this editor meet that, padding included, because the padding sits inside each cell. A sheet from another tool with gaps between frames needs re-exporting without them, or importing as separate frames.

Side by Side

Job	Godot 4	Unity	Phaser	Construct 3
Slice	Add frames from sprite sheet	Sprite Editor, Multiple	load.spritesheet	Import frames from strip
Frame size	Horizontal / Vertical counts	Grid By Cell Size	frameWidth/frameHeight	Horizontal / vertical cells
Gaps	Separation, Offset	Padding, Offset	spacing, margin	Not supported (even grid)
Filtering	Default Texture Filter -> Nearest	Filter Mode -> Point	pixelArt: true	Sampling (project setting)
Animate	SpriteFrames panel + play("name")	Animation Clip + Animator	anims.create + play	Speed + Loop
Atlas file	.tres from the Godot export	None built in	JSON via load.atlas	None built in

When the Import Looks Wrong

• Frames drift further sideways the later they are. The frame size or spacing is off. Check the cell size in the editor's top bar, not the size of the original art.
• Everything is blurry. Filtering is still linear. Switch it to nearest or point as described for your engine.
• Thin lines flicker at frame edges. That is texture bleeding, which comes from how the sheet is packed and filtered. The padding guide covers the fix.
• The animation plays at the wrong speed. The atlas files carry frame rectangles, not your intended timing (the Godot export uses 12 FPS). Set the frame rate in the engine.