Craft·5 min read

Parallax, and How a Painting Becomes a Place

Three ways to put a character into a painted scene. Only one of them is parallax, and choosing between them is a per-room decision.

A painted Georgian terrace from the Edward and B Bear adventure, with railings and a pavement running across the foreground.

The usual explanation of parallax is a diagram of three layers sliding at different speeds, and it is accurate and it teaches you almost nothing about how to use it.

The useful question is not how parallax works. It is when a scene should get it, and what the alternatives are, because a game full of parallax looks as wrong as a game with none.

Our painted adventure decides this per room, and the decision is written into the level data as one of three modes.

The problem, stated properly

You have a painting. It is a single image of a street, a station concourse, a park. You have a character who needs to walk around inside it.

The character is not in the painting. The painting has no idea the character exists. So something has to reconcile a flat picture with a body that moves, and there are only so many ways to do it.

The naive approach is to draw the character on top and let them walk left and right until they reach the edge. It works, and it makes every scene feel like a diorama in a shoebox: a small stage with a photograph at the back.

Mode one: direct

The first mode is to accept the diorama and make it deliberate.

The painting fills the screen and barely moves. The character walks across a floor the painting already contains: the tiles of a station, the flagstones of a courtyard, the boards of a room. There is no separate foreground, because there does not need to be one. The picture is complete.

This is right for interiors and for anywhere intimate and enclosed. A room is a room. It has walls you can see all of, and pretending otherwise by sliding it around would be worse than leaving it still.

The trade is that the scene is exactly as wide as the painting, so it is a short scene. That is usually fine, because a room should be a short scene.

Mode two: parallax

The second mode is the one this article is named after, and its job in our game is not depth. It is length.

The painting sits back and drifts slowly. In front of it runs a consistent foreground: pavement, kerb, railings, a low wall. That foreground moves at full speed and, crucially, it repeats.

Because the foreground repeats, the scene can be any length at all. The character can walk for as long as the story needs, with the painting drifting behind and the pavement running past in front, and the whole thing was produced from one painting and one strip of foreground.

The depth comes free. Two speeds is all the eye needs to decide there is space between the near thing and the far thing. But the reason to reach for it is that it extends a scene without inventing artwork that does not exist. The comment in our own level data puts it exactly that way: this is how a scene gets extended without inventing anything.

That is the honest version of parallax in a hand-painted game. It is a technique for making a finite amount of artwork go further, and the depth is a very welcome side effect.

A painted Georgian terrace from the Edward and B Bear adventure, with railings and pavement running across the foreground.
The terrace drifts. The railings and pavement run past at full speed. That difference is the entire effect.

Mode three: depth

The third mode exists because some paintings are not views and are not rooms. They are scenes with a specific walkable region that has an awkward shape.

A canal lock where the only standing ground is a stone quay on the right, and the middle of the picture is a chamber full of water. A fountain fenced off across the full width, where walking forward would mean walking through railings. A boathouse that is almost entirely water, with a towpath in front.

For these, the room carries a small set of numbers describing where the floor actually is: the near and far edges of the walkable band, and how the character scales between them. The character walks into and out of the scene rather than only across it, getting smaller as they go back, and the floor is shaped to the painting rather than assumed.

This is the most work per scene and it is used sparingly, on the rooms where the alternative was to cut the painting or to let a bear walk on water.

Why it is a per-room field

All three modes live in the same level data, and each room names the one it uses. Some rooms carry a short comment saying why, written at the time by whoever made the call: the lock, because the middle is water; the boathouse, because there is nothing to stand on; the fountain, because it is fenced across its whole width.

That is the actual craft. Not knowing what parallax is, which takes five minutes, but looking at each painting and deciding what kind of space it is. A game that applies one answer everywhere reads as mechanical, and players feel it without being able to name it.

It also means the artwork can be judged on its own terms. A painting does not have to be produced to fit a system; the system is chosen to suit the painting. That is the opposite of how most engines work, and it is only affordable because the scenes are hand-painted in the first place, which is a large part of why that build is 20MB.

What this means for a commission

Parallax is a budget technique before it is a beauty technique. It buys length from artwork you already have. That is why it appears where a journey needs to feel long and not in a room that only needs to feel like a room.

The foreground is the expensive half. It has to be produced separately, it has to tile without a visible seam, and it has to sit believably in front of every painting it is used with. That constrains the palette of the whole chapter.

And it is a scope conversation, not a style one. How many distinct scenes a game has is the single biggest driver of what it costs to make. The full build this comes from is described in how we built a painted London adventure, and how a character is made to move convincingly across these scenes is in how to make a character walk without it looking wrong.

◆ Questions

Common questions

What is a parallax background?+

A background split into layers that move at different speeds as the view scrolls. Things meant to be far away move slowly, things nearby move quickly, and the difference is what the eye reads as depth. It is the same effect as looking out of a train window at distant hills.

Why does parallax make a scene feel deeper?+

Because it is what real depth does. When you move, nearby objects sweep past your field of view faster than distant ones. Reproducing that difference is enough to convince the eye there is space in a flat picture, without any 3D.

How many layers does a parallax background need?+

Two is enough to read as depth. Ours uses two: the painting drifting slowly behind, and a consistent foreground of pavement or railings running at full speed in front. More layers are not automatically better, and each one is more artwork to produce.

When should a scene not use parallax?+

When the painting is a room rather than a view. An interior that already contains its own floor should be presented whole and walked across, not slid behind a foreground. Using parallax there makes the room feel like a photograph on a wall.

Is this expensive to produce?+

It is more artwork than a single flat image, because the foreground has to exist separately and has to work in front of every scene it is used with. It is much less than painting every scene at full width.

  • craft
  • art
  • adventure
  • behind the scenes
◆ Keep reading

Related from the journal.