---
title: "Sprite Sheet Guides and Tutorials - Spritesheet Generator"
description: "Practical sprite sheet guides: packing and padding, animation timing, pixel-perfect scaling, palette swaps, and importing into Godot, Unity, and Phaser."
canonical_url: "https://spritesheetgenerator.online/guides"
meta:
author: "Dennis Postma"
"og:description": "Practical sprite sheet guides: packing and padding, animation timing, pixel-perfect scaling, palette swaps, and importing into Godot, Unity, and Phaser."
"og:image": "https://spritesheetgenerator.online/og-image.png"
"og:image:alt": "Spritesheet Generator editor showing sprites arranged on a sheet grid"
"og:title": "Sprite Sheet Guides and Tutorials - Spritesheet Generator"
"twitter:image": "https://spritesheetgenerator.online/og-image.png"
"twitter:image:alt": "Spritesheet Generator editor showing sprites arranged on a sheet grid"
---
> Index of every page on this site: [llms.txt](https://spritesheetgenerator.online/llms.txt)
Guides
# Sprite sheet
guides.
**From your first sheet to a working import in Godot, Unity, Phaser, or Construct. Each guide is written for this editor and shows the steps in screenshots.**
[Start here**Getting Started: Your First Sprite Sheet**
A screen-by-screen walkthrough of the editor: import and slice an image, arrange the grid, preview the animation, fix pixels, recolor, and export.**Read the walkthrough **](https://spritesheetgenerator.online/guides/getting-started)
Start here
**2 guides**
[**Beginner****6 min****Getting Started: Your First Sprite Sheet**
A screen-by-screen walkthrough of the editor: import and slice an image, arrange the grid, preview the animation, fix pixels, recolor, and export.**Read guide **](https://spritesheetgenerator.online/guides/getting-started "Getting Started: Your First Sprite Sheet") [**Beginner****8 min****Sprite Sheet Basics Explained**
What a frame, a grid, and an atlas are, why sprite sheets ship as PNG, which frame and sheet sizes are normal, and four blank grid templates to draw on.**Read guide **](https://spritesheetgenerator.online/guides/sprite-sheet-basics "Sprite Sheet Basics Explained")
Sprite sheets
**4 guides**
[**Beginner****7 min****Character Sprite Sheets: Which Animations Your Game Needs**
Plan a character sprite sheet before drawing it: which animations to make, frames per animation, facing directions and mirroring, cell size, and row layout.**Read guide **](https://spritesheetgenerator.online/guides/character-sprite-sheet "Character Sprite Sheets: Which Animations Your Game Needs") [**Beginner****7 min****Free Sprite Sheets: Where to Find Them, What Licenses Allow**
Where to find free sprite sheets, what CC0, CC BY, CC BY-SA, OGA-BY, GPL and NC licenses require of your game, and how to make art from different packs match.**Read guide **](https://spritesheetgenerator.online/guides/free-sprite-sheets-licenses "Free Sprite Sheets: Where to Find Them, What Licenses Allow") [**Intermediate****7 min****Sprite Sheet Padding: Stop Texture Bleeding**
Thin lines flickering at sprite edges come from texture bleeding. How padding, edge extrusion, trimming and power-of-two atlas sizes prevent it.**Read guide **](https://spritesheetgenerator.online/guides/sprite-sheet-packing-padding "Sprite Sheet Padding: Stop Texture Bleeding") [**Beginner****7 min****Convert GIFs into Sprite Sheets**
Why animated GIFs make poor game assets, how to pull their frames into a PNG sprite sheet, and what to check: frame count, timing, and background transparency.**Read guide **](https://spritesheetgenerator.online/guides/gif-to-sprite-sheet "Convert GIFs into Sprite Sheets")
Pixel art
**2 guides**
[**Intermediate****5 min****Color Palettes & Palette Swaps for Pixel Art**
Why pixel art uses small palettes, how hue shifting and value make shading work, and how to turn one animated sprite into several color variants.**Read guide **](https://spritesheetgenerator.online/guides/color-palettes-palette-swaps "Color Palettes & Palette Swaps for Pixel Art") [**Intermediate****6 min****Pixel Art Animation: Timing, Poses & Walk Cycles**
How a few frames read as motion: key poses, hold frames and easing, squash and anticipation, and a walk cycle you check with onion skinning before export.**Read guide **](https://spritesheetgenerator.online/guides/pixel-art-animation "Pixel Art Animation: Timing, Poses & Walk Cycles")
Engines
**3 guides**
[**Intermediate****7 min****CSS Sprite Sheet Animation with steps()**
Play a sprite sheet on a web page with plain CSS: steps(), the end-position off-by-one, sharp pixel art scaling, and picking an animation row with a class.**Read guide **](https://spritesheetgenerator.online/guides/css-sprite-sheet-animation "CSS Sprite Sheet Animation with steps()") [**Beginner****7 min****Import Sprite Sheets into Godot, Unity, Phaser and Construct**
Slice, configure and animate a sprite sheet in Godot 4, Unity, Phaser and Construct 3, with the exact settings for frame size, spacing and pixel art filtering.**Read guide **](https://spritesheetgenerator.online/guides/import-sprite-sheets-game-engines "Import Sprite Sheets into Godot, Unity, Phaser and Construct") [**Beginner****5 min****Pixel-Perfect Scaling: Fix Blurry Pixel Art**
Why pixel art goes blurry when scaled up, how nearest-neighbor filtering and whole-number scale factors fix it, and what to do about moving cameras.**Read guide **](https://spritesheetgenerator.online/guides/pixel-perfect-scaling "Pixel-Perfect Scaling: Fix Blurry Pixel Art")
In order
**4 stages**
## **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. [**Getting started**](https://spritesheetgenerator.online/guides/getting-started)
2. ### **Understand the sheet**
What a sheet is, why engines want one, and the two decisions that cause most import problems: cell size and the gap between cells. If frames drift or bleed after import, the packing and padding guide is where to look. [**Sprite sheet basics**](https://spritesheetgenerator.online/guides/sprite-sheet-basics) [** Packing and padding**](https://spritesheetgenerator.online/guides/sprite-sheet-packing-padding)
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. [**Pixel art animation**](https://spritesheetgenerator.online/guides/pixel-art-animation) [** GIF to sprite sheet**](https://spritesheetgenerator.online/guides/gif-to-sprite-sheet)
4. ### **Make it look right in engine**
Filtering, integer scaling, and camera snapping, then palette work for variants, then the engine specific import steps. A correct sheet can still look wrong in an engine, and the cause is nearly always a setting, not the art. [**Pixel perfect scaling**](https://spritesheetgenerator.online/guides/pixel-perfect-scaling) [** Palettes and swaps**](https://spritesheetgenerator.online/guides/color-palettes-palette-swaps) [** Engine import**](https://spritesheetgenerator.online/guides/import-sprite-sheets-game-engines)
Straight to the fix
**10 problems**
## **Find the guide by what went wrong**
**Most people show up because something looks wrong on screen. This table lists common symptoms and the guide that fixes each one.**
| **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**](https://spritesheetgenerator.online/guides/sprite-sheet-packing-padding) |
| **Pixel art is blurry in the engine** | Texture filtering is set to linear. Most engines default to it, and each has one setting to switch it to nearest. | [**Open guide**](https://spritesheetgenerator.online/guides/pixel-perfect-scaling) |
| **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**](https://spritesheetgenerator.online/guides/sprite-sheet-packing-padding) |
| **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**](https://spritesheetgenerator.online/guides/sprite-sheet-basics) |
| **The walk cycle plays in a jumbled order** | Files sorted alphabetically rather than numerically. Pad the numbers in the filenames. | [**Open guide**](https://spritesheetgenerator.online/guides/getting-started) |
| **The animation looks stiff at any frame rate** | Even spacing. Good motion holds on the extremes and moves fast through the middle. | [**Open guide**](https://spritesheetgenerator.online/guides/pixel-art-animation) |
| **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**](https://spritesheetgenerator.online/guides/gif-to-sprite-sheet) |
| **A recolored enemy lost its shading** | The hue rotation kept lightness and collapsed the value contrast the sprite relied on. | [**Open guide**](https://spritesheetgenerator.online/guides/color-palettes-palette-swaps) |
| **Pixels shimmer whenever the camera moves** | The camera is at a fractional position. Snap transforms, or scale by whole numbers only. | [**Open guide**](https://spritesheetgenerator.online/guides/pixel-perfect-scaling) |
| **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**](https://spritesheetgenerator.online/guides/import-sprite-sheets-game-engines) |
**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. **
## **Open the editor**
**Open the editor in another tab and follow a guide step by step.**
[Open the editor](https://spritesheetgenerator.online/editor)
```json
{"@context":"https://schema.org","@graph":[{"@id":"https://spritesheetgenerator.online/#website","@type":"WebSite","description":"Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.","name":"Spritesheet Generator","url":"https://spritesheetgenerator.online/","publisher":{"@id":"https://spritesheetgenerator.online/#identity"}},{"@id":"https://spritesheetgenerator.online/guides#webpage","@type":"WebPage","description":"Practical sprite sheet guides: packing and padding, animation timing, pixel-perfect scaling, palette swaps, and importing into Godot, Unity, and Phaser.","name":"Sprite Sheet Guides and Tutorials","url":"https://spritesheetgenerator.online/guides","breadcrumb":{"@id":"https://spritesheetgenerator.online/guides#breadcrumb"},"isPartOf":{"@id":"https://spritesheetgenerator.online/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://spritesheetgenerator.online/guides"]}],"primaryImageOfPage":{"@id":"https://spritesheetgenerator.online/#logo"}},{"@id":"https://spritesheetgenerator.online/#identity","@type":"Organization","description":"A free, browser based sprite sheet generator for 2D game developers and pixel artists.","name":"Spritesheet Generator","url":"https://spritesheetgenerator.online","logo":{"@id":"https://spritesheetgenerator.online/#logo"},"sameAs":["https://discord.gg/2vvfqwn5k7"]},{"@id":"https://spritesheetgenerator.online/guides#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://spritesheetgenerator.online","position":1},{"@type":"ListItem","name":"Guides","item":"https://spritesheetgenerator.online/guides","position":2}]},{"@id":"https://spritesheetgenerator.online/#logo","@type":"ImageObject","caption":"Spritesheet Generator","contentUrl":"https://spritesheetgenerator.online/web-app-manifest-512x512.png","inLanguage":"en","url":"https://spritesheetgenerator.online/web-app-manifest-512x512.png"}]}
```
## Sitemap
See the full [sitemap](https://spritesheetgenerator.online/sitemap.md) for all pages.