Pixel art history and techniques: hardware limits, color and deliberate design

In 1957, Russell A. Kirsch and colleagues at the US National Bureau of Standards, now NIST, digitized photographs with a scanner connected to SEAC, the Standards Electronic Automatic Computer. The well-known image of his son Walden measures 176×176 pixels. NIST presents it as the first digital image; that does not make it the invention of hand-drawn pixel art.

The scanner produced binary pixel arrays, and the team also experimented with combining scans made at different thresholds. A tightly packed 176×176 binary image, at one bit per pixel, requires 176×176÷8 = 3,872 bytes, or about 3.78 KiB. This is a calculated pixel payload, not the size of a complete historical file.

An image grid is not a display device

A raster image can be represented as rows and columns of pixels, but a CRT’s light output and scan lines do not map directly to square LCD cells. Separate a game’s internal resolution from its video signal and displayed aspect ratio. Enlarging square pixels on a modern display does not necessarily reproduce how the game looked on a television.

Likewise, a framebuffer that stores a value for each screen pixel differs from a system that combines tiles and sprites. Retro consoles did not all use the same memory architecture.

The specifications of the Famicom—the Japanese console related to the NES—and the Game Boy are not rules for all pixel art today. Work intended to run on original hardware must meet its constraints. Work inspired by its appearance can choose which limits to adopt.

Table sources: NESdev Wiki: PPU; gbdev.io: Foreword - Pan Docs; SNESdev Wiki: PPU registers.

Here, a tile is a small reusable graphic, and a palette is a set of colors used for rendering. A hardware sprite, called an object on the Game Boy, is a rendering unit with its own position and other attributes. One visible game character need not correspond to one hardware sprite.

Too many sprites do not automatically mean flicker

The NES stores information for 64 sprites and normally selects at most eight for a scan line. Omitting excess sprites is different from flickering between frames. If a game changes sprite ordering each frame, different sprites can take turns appearing instead of one staying invisible. The number of hardware sprites needed for a character depends on its size and pose.

SNES color math uses addition or subtraction of color components, with an option to halve the result. It can produce translucent-looking effects, but it is not equivalent to general alpha blending with an arbitrary, continuously adjustable opacity.

A cluster is a shape formed by neighboring pixels of the same color, rather than a scattering of isolated dots. A color ramp is a sequence of palette colors, for example from shadow to highlight. Grouping colors in a palette and arranging pixels into shapes are different decisions.

Choosing dark, middle and light blues for a coat designs a ramp. Arranging each color into connected shadow or highlight shapes designs clusters.

Anti-aliasing and outlines

Manual anti-aliasing places intermediate colors along stepped edges. It does not subdivide the grid, and a high-resolution display does not automatically apply it. Colors chosen for one background can become conspicuous fringes on another.

Colored outlines and selective outlining, or sel-out, are related but not necessarily synonymous. Sel-out can weaken or break parts of an outline; terminology varies. Check dark and light backgrounds so that broken edges do not obscure the shape.

Hue shifts can help describe light and shade, but shadows need not always be blue or highlights yellow. Choose colors for the lighting, material, background and overall palette.

Dithering arranges a limited set of colors spatially to suggest intermediate tones. A fine black-and-white pattern may look gray from a distance, but the stored pixels have not become gray. Pattern size, display scale, background and viewing distance affect the result.

Bayer ordered dithering uses position-dependent thresholds; Floyd–Steinberg dithering passes quantization error to later pixels. Whether the latter can run in real time depends on image size, implementation and hardware. Artists can also place dither patterns manually, which is a different workflow from automatically converting an image. See our dithering explanation for the calculations.

What does tile reuse save?

For an NES background, 32×30 = 960 tile indices plus 64 attribute bytes make a 1,024-byte nametable. That stores the background layout; the tile patterns need separate storage. An 8×8 tile at two bits per pixel uses 16 bytes, so 256 patterns use 4,096 bytes. Palette and sprite information are separate too.

It would therefore be misleading to say that an entire 256×240 background, including its artwork, fits into 1 KiB. Reusing patterns is the advantage. When comparing this arrangement with a framebuffer, count the same categories of data on both sides.

This is a suggested exercise, not an industry standard or a rule for hardware compatibility. A small subject on a 16×16 or 32×32 canvas, using roughly four to eight colors, makes it easier to compare shapes and palettes.

1. Establish the silhouette. Draw a solid shape and check whether it reads at native size, not just while zoomed in.
2. Choose the lighting and broad values. Light from the upper left is one possible exercise. Consistent direction and shadows matter more than that particular choice.
3. Add necessary details. Decide whether isolated dots create useful texture or distracting noise. Not every pixel must join a larger group.
4. Test display conditions. Integer-factor nearest-neighbor enlargement helps preserve the original pixel blocks. Check uneven scaling at non-integer sizes, interpolation blur and outlines against other backgrounds.
5. Keep working files as well as exports. Exporting a PNG or another delivery format may not preserve editable layers and animation information.

Movement and straight lines

Effects called subpixel animation can alter colors and shapes around an edge between frames to suggest movement of less than one pixel. Splitting color between two neighboring pixels does not physically move a pixel halfway across the grid. Halving encoded RGB values is not the same as halving light output, either.

Bresenham’s line algorithm is known for selecting grid positions using integer arithmetic. The explanation that advances x by one and increments y according to an error term applies to a restricted direction, such as increasing x and y with a slope between zero and one. Steeper slopes and reversed directions require appropriate handling of axes and signs. Line rasterization is a useful tool, not a universal rule for attractive contours.

Deluxe Paint, developed by Dan Silva at Electronic Arts for the Amiga, appeared in 1985. The Computer History Museum makes early source code available. Features from later releases or other platform versions should not all be attributed to the original release.

Modern Aseprite supports working with frames and layers and exporting sprite sheets. A sheet arranges frames into an image; exporting it does not automatically complete a game engine’s import and animation setup.

Describing current Aseprite releases as GPLv2 software is inaccurate. According to its official FAQ, Aseprite has used its own EULA since August 2016. Its source is viewable, and compiling it for yourself is permitted, but redistribution and other uses remain subject to its license. Distinguish distribution rights for the software from rights to use the artwork you make.

Lospec provides palettes and tutorials. Use palettes as starting points, then check whether they suit your subject’s lighting and background. No particular editor is a prerequisite for making pixel art.

Working in a browser

Editors using Canvas and similar technologies can make it easy to start without installing software. Saving, browser support, touch input and keyboard access still depend on the implementation. Running in a browser does not by itself guarantee support on every device or good accessibility. Test saving and reopening a small piece before beginning a larger one.

A retro-looking game does not necessarily follow an old console’s specifications. Shovel Knight developer Yacht Club Games describes adopting an NES-inspired appearance while relaxing limits on screen dimensions and colors and avoiding sprite flicker. A game that runs on original hardware is different from one inspired by that hardware’s visual language.

Square Enix’s HD-2D works combine pixel-based imagery with three-dimensional spaces and effects. This is more than simply enlarging old sprites. Reproducing technical constraints and using modern lighting or cameras are different production goals.

CryptoPunks and digital artwork

Larva Labs introduced CryptoPunks in 2017: a collection of 10,000 characters, each 24×24 pixels. It is one example of pixel-based imagery, not evidence that NFTs as a whole are pixel art. Nor does the 24×24 size establish that blockchain storage capacity was the reason for choosing those dimensions.

Upscaling does not necessarily recover intent

Enlargement through interpolation or a learned model can change original edges and patterns. Decide whether you want to show the existing pixel arrangement or reinterpret it at a higher resolution. A small image cannot uniquely reveal the correct details that its artist never drew.

Digital imaging research, console graphics specifications and hand-drawing techniques are connected, but they are not one history or one set of rules. Pixel art involves deliberate choices about pixel groups, color sequences and contrast against a background.

• For original hardware, check palette-sharing regions, transparent colors and scan-line limits, not just total color counts.
• Distinguish clusters from color ramps, and dithering from adding new stored colors.
• Review native size, intended display scale, different backgrounds and animation playback, not just the zoomed editing view.
• Check the editor’s license and export formats, and keep editable working files.

A small canvas is a convenient place to compare and revise ideas. Low resolution does not necessarily mean a short production time, however. Choosing what to leave out and what to convey with a single pixel is part of the work itself.