Exporting sprites to your game engine

Every job can be exported in several formats from the Export button in the generator or your dashboard. Pick the one your engine reads best; they all contain the same frames.

Export formats

You can also scale exports up by whole numbers (2×, 3×, 4×…) with nearest-neighbour scaling, which keeps pixels square. Most engines are better off importing at 1× and scaling the camera instead.

How sheets are laid out

• All frames are the same size (for example 64 × 64) with no padding between them.
• One row per direction, in the order listed in the JSON directions array. For 4 directions that’s usually down, left, right, up.
• Frames run left to right in playback order. Looping motions loop from the last frame back to the first.
• The character’s feet sit on the same baseline in every frame, near the bottom edge. Put your sprite’s origin or pivot at bottom centre and the character won’t bob when you switch animations.

The JSON metadata looks like this (trimmed):

{
  "frames": 8, "columns": 8, "rows": 4, "fps": 10,
  "frame_w": 64, "frame_h": 64,
  "directions": ["down", "left", "right", "up"]
}

Editor plugins

If you’d rather not export by hand, the free Godot 4 addon, Unity package and Aseprite extension generate and import from inside the editor, with the settings below already applied.

Godot 4

Choose Godot 4 (.tres), unzip into your project, and drag the .tres onto an AnimatedSprite2D’s Sprite Frames property. Set the project’s default texture filter to Nearest. Full walkthrough with code: Using our sheets in Godot and How to import a sprite sheet in Godot 4.

Unity

Import the PNG sheet, then in the Inspector set Texture Type to Sprite (2D and UI), Sprite Mode to Multiple, Pixels Per Unit to your frame size or tile size, Filter Mode to Point (no filter) and Compression to None. Open the Sprite Editor and slice with Grid By Cell Size using the frame size, pivot Bottom Center. Drag a row of frames into the scene to create the animation. Step by step: Sprite sheets in Unity.

Phaser 3

With a plain sheet:

this.load.spritesheet("hero", "hero_walk.png", { frameWidth: 64, frameHeight: 64 });

With the Aseprite JSON export, one call creates an animation per direction:

this.load.aseprite("hero", "hero_walk.png", "hero_walk.aseprite.json");
// in create():
this.anims.createFromAseprite("hero");

Set pixelArt: true in your game config. More in Phaser 3 sprite sheet animation.

GameMaker

GameMaker can split a strip automatically if the filename ends in _stripN, where N is the frame count. Export Frames ZIP or a PNG sheet, crop one direction’s row into its own file named for example spr_hero_walk_down_strip8.png, and import it. Alternatively, open the sprite editor, choose Image → Import Strip Image, and set the frame width, height and count. Set the sprite origin to Bottom Centre, and turn off Interpolate colours between pixels in Game Options → Graphics.

Aseprite

File → Import Sprite Sheet, Type By Rows, width and height = frame size. Each row becomes a run of frames; tag them per direction. See Aseprite workflow.

Defold, PixiJS, Construct and others

• Defold: add the PNG to a Tile Source with the frame size as tile width and height, then define animations by frame range per row.
• PixiJS: load the PNG + JSON export with Assets.load() and build an AnimatedSprite from the frame textures.
• Construct 3: in the Animations editor, right-click the frame strip and choose Import frames → From sprite strip, then enter the columns and rows.
• Tiled / RPG Maker / anything else: the PNG sheet and frame size are all you need.

Keep pixels sharp everywhere

Pixel art blurs when the engine filters textures or scales by non-whole numbers. In every engine: use nearest / point filtering, disable texture compression for sprites, and scale your game by integer factors (2×, 3×, 4×). The Pixel Art Upscaler does clean integer scaling if you need bigger files for a store page.

Related: Sprite sheet formats explained · Fixing jitter and sliding feet