Parallax Scrolling
Depth through motion
Parallax scrolling moved background layers at different speeds to create an illusion of depth, transforming flat 2D games into seemingly three-dimensional spaces.
Overview
Parallax scrolling exploits a simple perceptual truth: distant objects appear to move more slowly than near ones. By scrolling multiple background layers at different speeds, games created convincing depth on hardware that could only display flat 2D graphics. Moon Patrol pioneered the technique in 1982; by the 16-bit era, games like Sonic the Hedgehog used it as standard.
The principle
Real-world parallax
When you look out of a moving car:
- Nearby trees rush past quickly
- Distant hills move slowly
- The moon appears stationary
Game implementation
| Layer | Scroll speed | Typical content |
|---|---|---|
| Foreground | 1:1 with player | Platforms, obstacles |
| Middle | 1:2 | Trees, buildings |
| Background | 1:4 | Mountains, clouds |
| Far background | 1:8 or static | Sky, horizon |
Implementation approaches
Software scrolling
Redraw each layer at its speed:
update_parallax:
scroll_layer_0(player_x)
scroll_layer_1(player_x / 2)
scroll_layer_2(player_x / 4)Hardware scrolling
Some systems supported multiple scroll registers:
- SNES: Mode 7 + multiple backgrounds
- Mega Drive: Two scroll planes + window
- Amiga: Dual playfield mode
Colour cycling tricks
On limited hardware, animate palette entries to simulate motion without actually scrolling data.
Platform specifics
Commodore 64
- Single hardware scroll register
- Software-based layer rendering
- VSP (Variable Screen Position) tricks
- Character-based scrolling efficient
Amiga
- Dual playfield mode enables two independent layers
- Copper can change scroll values mid-screen
- Blitter enables fast layer compositing
NES
- Single background layer (nametable)
- Parallax via CHR bank switching
- Sprite-based parallax for extra layers
- Scanline tricks for fake layers
Mega Drive
- Two background planes (A and B)
- Per-line scroll values
- Window plane for HUD
Performance considerations
| Approach | CPU cost | Memory cost |
|---|---|---|
| Single layer | Low | Low |
| Software multi-layer | High | Medium |
| Hardware multi-layer | Low | High |
| Colour cycling | Very low | Very low |
Notable examples
| Game | Year | Layers |
|---|---|---|
| Moon Patrol | 1982 | 3 |
| Shadow of the Beast | 1989 | 13 |
| Sonic the Hedgehog | 1991 | 4+ |
| Castlevania: Rondo | 1993 | Multiple |
Modern use
Parallax remains common:
- 2D indie games
- Website design (CSS parallax)
- Mobile games
- Retro-styled titles