Topic hub
Pixel art for games
How to make and adapt sprites, animation, tilesets, and backgrounds for games, from the color and light basics up to a finished sprite sheet.
The problem
You have a game that needs art, and either a purchased asset library that almost fits or a blank canvas. Pixel art looks simple because every mark is a visible square, and that is exactly what makes it hard: there is nowhere to hide. A misplaced pixel reads as a mistake, a color one step too bright breaks a form, and a walk cycle with one bad frame limps forever.
This cluster teaches pixel art the way a game needs it: sprites that read at one-times scale on a phone, animations that loop, tiles that repeat without showing their seams, backgrounds with depth, and export that survives the trip into a game engine. Underneath every technique is a small set of first-year ideas about color, light, projection, and timing, and each of those has its own page. Follow the "Before this" links downward until you land on something you already know, then read back up.
The pipeline
Every page points back to this picture of how a piece of pixel art gets made and shipped.
| Stage | Question it answers | Techniques that live here |
|---|---|---|
| 1. Decide the rules | What resolution, palette, view, and light direction does this game use? | Pixel art fundamentals, Palettes and ramps, Projections and views |
| 2. Draw the still | How does one sprite, tile, or background layer get drawn so it reads? | Shading and lighting, Dithering, Anti-aliasing in pixel art, Character design for sprites, Isometric pixel art |
| 3. Make it move | How many frames, which poses, what timing? | Sprite animation, VFX and particles |
| 4. Build the world | How do tiles repeat and backgrounds gain depth? | Tileable textures and tilesets, Backgrounds and parallax, UI and text in pixel art |
| 5. Ship it | How does the art get into the game intact? | Sprite sheets and export, Adapting purchased packs |
Stages 1 and 5 are where most avoidable damage happens. A game that never wrote down its rules ends up mixing 16-pixel and 32-pixel characters on the same screen. A game that exports carelessly ends up with blurry sprites and seams between tiles, and the art itself was never at fault.
Which page for which job
You are starting from nothing. Read Pixel art fundamentals, then Palettes and ramps, then Shading and lighting. Those three cover the decisions you cannot undo later: canvas size, color count, and where the light comes from. Character design for sprites is next if your game has a character; Tileable textures and tilesets if it has a world.
You have a purchased pack and it almost fits. Go straight to Adapting purchased packs. It sends you back to Palettes and ramps for recoloring and to Tileable textures for extending a tileset in the pack's own style. The running example across this cluster is a library with two families: side-scroller packs (layered backgrounds plus platform tiles and decor) and top-down tilesets (ground, forest, town, dungeon), some with palette variants for seasons.
Something looks wrong and you do not know why. The usual suspects, in order: mixed pixel sizes (Pixel art fundamentals), pillow shading or banding (Shading and lighting), a palette with no value contrast (Color basics, then Palettes and ramps), and non-integer scaling in the engine (Sprite sheets and export).
Animation feels stiff. Animation timing basics first, then Sprite animation. Almost every stiff walk cycle is a timing problem, not a drawing problem.
Backgrounds look flat. Backgrounds and parallax, which leans on Light and form for atmospheric perspective and on Projections and views for the horizon.
The basics underneath
None of these needs anything beyond first-year college material, and most need less.
| You need | For |
|---|---|
| Raster images and pixels | What a pixel, an alpha channel, and an indexed palette actually are, and why scaling by 1.5 shimmers. |
| Color basics | Hue, saturation, value, and why value alone decides whether a sprite reads. |
| Light and form | Highlight, midtone, core shadow, reflected light, cast shadow. Every shading page assumes this vocabulary. |
| Animation timing basics | Frames per second, holds, spacing, and the handful of animation principles that pixel art can actually use. |
| Projections and views | Side view, top-down, three-quarter, isometric: what each shows, what each hides. |
| Tile grids for artists | Tile sizes, the grid as a constraint, and what an autotile set asks you to draw. |
Conventions used across this cluster
So the pages agree with each other:
- Light comes from the upper left unless a page says otherwise. Highlights face it, cast shadows fall down and to the right.
- Sizes are in pixels at one-times scale. A "16-pixel character" is 16 pixels tall on the canvas, however large it is displayed.
- Scale is always an integer when displayed: 2x, 3x, 4x. The pages say why.
- A ramp is an ordered list of colors from dark to light used to shade one material. Palettes are made of ramps.
- Frame timing is given in milliseconds per frame, with the equivalent at 60 frames per second in parentheses where it helps.
- The running example asset library is the same one the Dynamic map generation cluster uses, so a tile drawn here can be placed by a generator described there.
How to read this cluster
The learning path below is sorted so that each row depends only on the rows above it. If you already draw, skip the foundations and start at Pixel art fundamentals. If you are here to fix a specific pack, start at Adapting purchased packs and follow its links back only as far as you need.
Learning path
Each row depends only on rows above it. Read top to bottom, or jump to a technique and follow its "Before this" links downward.
- prerequisiteAnimation timing basicsFrames per second, drawing on ones and twos, holds, keyframes, the difference between timing and spacing, and the six animation principles that fit inside a 16-pixel sprite.
- prerequisiteColor basicsHue, saturation, and value, how they relate to red, green, and blue, why value alone decides whether a sprite reads, and how to keep colors safe for players who cannot tell red from green.
- prerequisiteProjections and viewsOrthographic versus perspective, the four camera angles 2D games actually use, what each one shows and hides, and why isometric pixel art runs on a 2 to 1 line instead of true 30 degrees.
- prerequisiteRaster images and pixelsWhat a bitmap, a color channel, an alpha value, and an indexed palette actually are, why JPG ruins pixel art, and why scaling by anything but a whole number makes sprites shimmer.
- prerequisiteLight and formThe zones of light on a sphere and a cube, why shadows are never black, and how a 9 by 9 sphere in four values shows form while the same sphere pillow-shaded does not.
- prerequisiteTile grids for artistsWhat 8, 16, and 32 pixel tiles each buy, how a tile id finds its pixels on a sheet, why a one-pixel seam repeats across the whole map, and exactly which tiles an autotile set asks you to draw.
- techniquePixel art fundamentalsPick one canvas resolution and one pixel size for the whole game, then place every pixel on purpose so lines, curves, and clusters read cleanly at 1x.
- techniquePalettes and rampsBuild each material's colors as a short dark-to-light ramp that shifts hue and saturation as it climbs, share the darkest steps across ramps, and keep the whole palette small enough to swap.
- techniqueSprite animationHow many frames each standard cycle needs, which poses carry a walk, how to time idle and attack animations, and the small tricks that make a handful of frames read as motion.
- techniqueIsometric pixel artHow to draw on the 2:1 pixel line, build the diamond tile and the three-face cube, place and sort tiles from their map coordinates, and keep line angle and light consistent.
- techniqueUI and text in pixel artHow to draw menus, fonts, panels, icons, and gauges that share the game's pixel size, stay readable on a phone in sunlight, and survive translation.
- techniqueShading and lightingChoose the light direction once, then place highlight, midtone, and shadow on every form so the pixels describe volume instead of tracing the outline or glowing from the center.
- techniqueAnti-aliasing in pixel artSoften the stair steps on a diagonal or curve by placing one intermediate ramp color at the corner of each step, on the inside of the shape, and never against a transparent background.
- techniqueBackgrounds and parallaxHow to stack background layers that scroll at different speeds, tile each one without an obvious repeat, and push the far ones back with color so a flat screen reads as deep.
- techniqueDitheringMix two neighboring ramp colors in a fixed pattern so a large area reads as a smooth gradient without adding a single color to the palette.
- techniqueSprite sheets and exportHow frames are packed into one PNG with a data file, why padding and pivots and integer camera positions matter, and the pre-flight checklist that keeps pixel art crisp once it is inside the engine.
- techniqueVFX and particlesHow hit sparks, explosions, smoke, dust, and fire are built as short frame sequences from a shared bright-to-dark ramp, and when to hand the work to a code-driven particle instead.
- techniqueTileable textures and tilesetsHow to draw tiles whose edges continue into their neighbors, hide the repeat, and build a full transition set from one base tile without rework.
- techniqueCharacter design for spritesHow to proportion, color, and silhouette a character so it reads at 1x on a phone, how many facing directions each view demands, and what a cast of characters costs in frames.