Sprite sheet
guides.
Everything from cutting your first sheet to shipping it into an engine. Written around the tool, with screenshots of every step.
Getting Started: Build Your First Sprite Sheet in 5 Minutes
A screen-by-screen walkthrough: import an image, slice it into frames, arrange the grid, preview the animation, recolor, and export for your engine.
Getting Started: Build Your First Sprite Sheet in 5 Minutes
A screen-by-screen walkthrough: import an image, slice it into frames, arrange the grid, preview the animation, recolor, and export for your engine.
Sprite Sheet Basics Explained
What a frame is, how a sprite sheet grid works, what an atlas file does, which format to use, and normal sprite sizes. Includes free blank templates.
Sprite Sheet Padding: Stop Texture Bleeding
Those flickering lines around your sprites are texture bleeding from how the sheet is packed. How padding, trimming, and power-of-two sizing work.
Convert GIFs into Sprite Sheets
Animated GIFs are great for sharing and bad for game engines. How converting to sprite sheets cuts file size, lifts performance, and unlocks alpha.
Color Palettes & Palette Swaps for Pixel Art
Why pixel art lives on a limited palette, how hue shifting and value make a palette look good, and how to turn one set of frames into many color variants with a palette swap.
Pixel Art Animation: Timing, Poses & Walk Cycles
The craft of making a handful of frames read as motion: timing and hold frames, squash and stretch, anticipation, and how to build a walk cycle you can check frame by frame.
Import Sprite Sheets into Godot, Unity, Phaser, and Construct
An engine-by-engine guide to slicing, configuring, and animating sprite sheets in Godot, Unity, Phaser, and Construct, the engines indies ship with.
Pixel-Perfect Scaling: Fix Blurry Pixel Art
Why pixel art turns blurry when scaled: nearest-neighbor versus bilinear filtering, why integer scaling matters, and the settings that keep pixels crisp.
A path through all of it
The cards above are grouped by topic. This is the order to read them in if you are starting from nothing and want to end with a sheet that behaves in your engine.
- 1
Get something exported
One walkthrough from an empty canvas to a file your engine opens. Read this first even if you already know what a sprite sheet is, because it names the panels the other guides refer to.
- 2
Understand the artefact
What a sheet is, why engines want one, and the two decisions that cause most import problems: cell size and the gap between cells. Packing and padding is the guide people wish they had read before their first bug.
- 3
Make it move
Timing, spacing, and the frame counts that read well at small sizes, then the practical route from an animated GIF into frames you can pack. Animation is the half of sprite work a static grid tells you nothing about.
- 4
Make it look right in engine
Filtering, integer scaling, and camera snapping, then palette work for variants, then the engine specific import steps. This is the stage where a correct sheet can still look wrong, and every cause is a setting rather than the art.
Find the guide by what went wrong
Nobody arrives looking for a topic. They arrive because something looks wrong on screen, so here is the same library indexed by symptom.
| What you are seeing | Usually because | Read |
|---|---|---|
| Frames drift sideways as the animation plays | Cell size or padding does not match what the sheet was exported with. | Open guide |
| Pixel art is blurry in the engine | Texture filtering is linear. Every engine defaults to it, and every engine has one setting to change it. | Open guide |
| A thin line of the next frame shows at the edges | Texture bleeding. Add a gutter, or let the engine extrude the frame borders. | Open guide |
| The character bobs up and down while walking | Trimmed frames are aligned to their own bounding box instead of to a common pivot. | Open guide |
| The walk cycle plays in a jumbled order | Files sorted alphabetically rather than numerically. Pad the numbers in the filenames. | Open guide |
| The animation looks stiff at any frame rate | Even spacing. Good motion holds on the extremes and moves fast through the middle. | Open guide |
| A GIF became a sheet full of duplicate cells | GIFs repeat frames to fake timing. Drop the repeats and let the engine hold frames instead. | Open guide |
| A recolored enemy lost its shading | The hue rotation kept lightness and collapsed the value contrast the sprite relied on. | Open guide |
| Pixels shimmer whenever the camera moves | The camera is at a fractional position. Snap transforms, or scale by whole numbers only. | Open guide |
| The engine will not read the exported data file | The wrong format for that loader. Each engine has one it reads without a plugin. | Open guide |
Every guide here was written against the editor as it currently behaves, with screenshots taken from it rather than from an older release. Engine steps name the exact menu path and the exact field, because a guide that says configure your import settings is a guide that helps nobody. Where a version changed a dialog, the guide says which version.
The level badge on each card is about assumed knowledge rather than difficulty. Beginner means nothing is taken for granted, not that the material is trivial, and advanced means the guide expects you to already know what a cell size is. Reading times are measured, not estimated, so a twelve minute guide is twelve minutes of reading and rather longer if you follow along in the editor with your own frames, which is the way to read all of them.
Read less. Build more.
Every guide here was written against the editor. Open it and follow along.
Open the editor