Pixel art fundamentals

Why you need this

Every later page in this cluster assumes a game that has already made three decisions: how many pixels the screen holds, how big one art pixel is when displayed, and what a clean pixel looks like. Those are stage 1 of the pipeline, "decide the rules", and they are the decisions you cannot undo after the first hundred sprites. This page covers the decisions and the handful of drawing rules that separate deliberate pixel art from a small blurry picture.

The idea

A pixel is one square of color on the canvas. In pixel art every pixel is placed on purpose, so the art has a native resolution: the canvas size at which one art pixel is one canvas pixel, called 1x. The game then displays that canvas at an integer display scale (2x, 3x, 4x) so each art pixel becomes a crisp square block of screen pixels. Two rules follow from this.

One canvas resolution. The canvas is small, and it is chosen so that it scales to common screens by a whole number. A 1920 by 1080 monitor is 1080 pixels tall, so a canvas 180 pixels tall fits 6 times, a 270-pixel canvas fits 4 times, and a 360-pixel canvas fits 3 times. A 200-pixel-tall canvas fits 5.4 times, which means either a black border or non-integer scaling, and non-integer scaling makes some art pixels one screen pixel wider than their neighbors. The Raster images and pixels page shows what that shimmer looks like.

Canvas (1x)	Scale to 720p	Scale to 1080p	Scale to 4K	16-px tiles visible	32-px tiles visible	Feels like
320 x 180	4x	6x	12x	20 x 11.25	10 x 5.6	Tiny, chunky, a 16-pixel hero is big on screen
384 x 216	not integer	5x	10x	24 x 13.5	12 x 6.75	Chunky, a little more room
480 x 270	not integer	4x	8x	30 x 16.9	15 x 8.4	The common middle; 16-pixel characters read as small people
640 x 360	2x	3x	6x	40 x 22.5	20 x 11.25	Roomy; 32-pixel characters fit comfortably
960 x 540	not integer	2x	4x	60 x 33.75	30 x 16.9	Almost high resolution; pixels stop reading as a style

The fractional tile counts are real: a 320 by 180 canvas shows 11 full rows of 16-pixel tiles plus a quarter row, so the camera will always be showing part of a tile at one edge. That is normal. What matters is that the total is a whole number of screen pixels.

Phones complicate the height rule because their aspect ratios vary (about 19.5:9 or 20:9 rather than 16:9) and their pixel densities vary more. The workable approach: fix the canvas height, compute the largest integer scale that fits the screen height, and let the canvas width grow to fill whatever width is left. A 180-pixel-tall canvas on a 2400 by 1080 phone held sideways scales 6x and shows 400 pixels of width instead of 320. Design the world so that seeing 80 extra pixels does not spoil anything.

One pixel size. Once the canvas is set, every pixel of art on it must be the same size. The failure has a name, mixels: a screen where some art was drawn at 1x and some at 2x, so one sprite's pixels are twice as big as the tile it stands on. The usual causes are a purchased 32-pixel character pack dropped into a 16-pixel-tile world and scaled to fit, or the engine rotating a sprite by 30 degrees, or a sprite scaled to 1.5x for a "big" enemy. Rotation and non-integer scaling break the grid: pixels land between grid cells and get resampled into slivers and smears. The symptom is that the eye keeps snagging on the odd-sized object, because pixel art's whole promise is that every square on screen is the same size.

Worked example

Four drawing rules, each shown as a grid. In all of them . is transparent and 1 is the line or shape color unless the legend says otherwise.

Pixel-perfect lines. A diagonal line is a sequence of short horizontal runs stepping down. It looks straight when the runs are all the same length. A 2:1 line (two across, one down) is the cleanest shallow diagonal there is:

1 1 . . . . . .
. . 1 1 . . . .
. . . . 1 1 . .
. . . . . . 1 1

. transparent, 1 line. Runs of 2, 2, 2, 2.

The same line with uneven runs looks bent even though it starts and ends in the same places:

1 1 1 . . . . .
. . . 1 . . . .
. . . . 1 1 . .
. . . . . . 1 1

Runs of 3, 1, 2, 2. The single pixel in the second row reads as a kink. These uneven steps are called jaggies.

Doubles. A double is a corner pixel that touches the line on two sides, making an L. It thickens the line at that one spot and the eye reads it as a bump:

1 . . . .
1 1 . . .
. . 1 . .
. . . 1 .

The pixel at column 0, row 1 is the double. Remove it and the 1:1 diagonal is clean:

1 . . . .
. 1 . . .
. . 1 . .
. . . 1 .

Curves. A curve is a line whose run lengths change. It looks round when the runs change monotonically: going from the top of a circle toward its side, the horizontal runs get shorter and shorter, then the vertical runs get longer and longer, with no reversal. Here is a 9-pixel circle that follows that rule:

. . . 1 1 1 . . .
. . 1 . . . 1 . .
. 1 . . . . . 1 .
1 . . . . . . . 1
1 . . . . . . . 1
1 . . . . . . . 1
. 1 . . . . . 1 .
. . 1 . . . 1 . .
. . . 1 1 1 . . .

From the top: a run of 3, then 1, then 1, then a vertical run of 3. Shorter, shorter, then longer. Compare a lumpy one:

. . . 1 1 1 . . .
. . 1 . . . 1 . .
. 1 . . . . . 1 .
. 1 . . . . . 1 .
1 . . . . . . . 1
. 1 . . . . . 1 .
. 1 . . . . . 1 .
. . 1 . . . 1 . .
. . . 1 1 1 . . .

Going down the left side the vertical runs go 1, 2, 1, 2. The reversal makes the sides look pinched into points. Both grids are 9 pixels wide and 9 tall; only the run order differs.

Clusters. A cluster is a group of touching pixels of the same color. Big, simply shaped clusters read as a surface. Scattered single pixels read as noise, static, or dirt. Here is the same two-tone patch drawn both ways:

2 3 2 2 3 2      2 2 2 3 3 3
3 2 3 2 2 3      2 2 3 3 3 3
2 2 3 3 2 2      2 2 2 3 3 2
3 2 2 3 2 3      2 2 2 2 2 2

2 midtone, 3 highlight. Left: noise, the eye cannot decide what it is. Right: a lit upper-right area on a rock. Same two colors, same 24 pixels each.

Silhouette first, detail last. Before any of the above, fill the sprite's shape with one flat color and look at it at 1x. If you cannot tell what it is from the outline alone, no amount of shading will save it. Only then block in flat colors for each material, then shade, then decide on outlines (see Shading and lighting), then clean up doubles and jaggies.

Work zoomed, judge at 1x. You place pixels at 8x or more because you cannot hit a single pixel otherwise. You judge the result at 1x, or at the game's display scale, because that is what the player sees. Every editor has a second view or a preview window for this. Keep it open. A sprite that looks fine at 8x and muddy at 1x has too many colors or too many small clusters.

A tool-agnostic workflow, in order: sketch the silhouette in one color; block in one flat color per material; shade each material with its ramp (see Palettes and ramps); choose an outline style; clean up doubles, jaggies, and stray single pixels; check at 1x.

In a game's art pipeline

This page is stage 1, "decide the rules." Write the answers down in the project once: canvas resolution, display scale per target screen, tile size, and the statement "all art is drawn at 1x, never rotated or scaled in the engine except by integers." Every sprite in stage 2, every tile in stage 4, and every purchased pack in stage 5 gets checked against that page. The line and curve rules apply to every still from here on, and Anti-aliasing in pixel art builds on the stair steps this page teaches you to see.

Common mistakes

• Mixels from a purchased pack. A 32-pixel character in a 16-pixel-tile world, scaled to half size. Symptom: the character has pixels smaller than the ground it walks on, and its outline has gray half-pixels from the downscale.
• Engine rotation. A sword swing implemented by rotating the sprite. Symptom: the blade grows jagged slivers and sub-pixel gaps at every angle except 0, 90, 180, 270. Draw the rotated frames instead.
• Non-integer camera zoom. A smooth zoom from 3x to 4x. Symptom: during the zoom, vertical lines are alternately 3 and 4 screen pixels wide and everything shimmers. Snap zoom to integers.
• Judging at 8x. Symptom: sprites look detailed in the editor and turn into speckled blobs in the game. Too many small clusters, too many colors.
• Doubles on every outline. Symptom: outlines look bumpy and slightly too thick, especially on 1:1 diagonals. Walk the outline and delete each L-shaped corner.
• Uneven steps on a long line. Symptom: a sword or spear that is supposed to be straight looks slightly bent. Make every run the same length, or alternate two lengths in a strict pattern (3, 2, 3, 2).

Cost

Artist time per sprite grows roughly with pixel count, and pixel count grows with the square of the sprite's height. A 16-pixel sprite has 256 pixels; a 32-pixel sprite has 1024, four times as many. In practice 32-pixel sprites cost more than four times the effort, because the larger canvas exposes things a 16-pixel sprite can skip: two-tone shading that reads as flat, outlines that need anti-aliasing, faces that need features instead of a dot, and walk cycles that need more frames because a one-pixel movement per frame that looked smooth at 16 pixels now covers half the distance. File size is rarely the constraint; a 480 by 270 canvas of indexed color is under 130 kilobytes uncompressed. Time is. Choose the smallest canvas at which your game's objects still read, and hold the line on one pixel size.

Going further

• Palettes and ramps, for choosing the colors those clusters will be made of.
• Shading and lighting, for placing tones on the silhouette you just drew.
• Anti-aliasing in pixel art, for softening the stair steps once the line itself is clean.
• Sprite sheets and export, for the integer-scaling and nearest-neighbor settings that keep the pixel grid intact in the engine.