Summary
Composition is the arrangement of elements within a frame so that the most important information lands in the most visible places. Tonality is the management of lightness and darkness across that frame so that planes separate and the eye can parse the image. Both are inherited from classical painting, illustration, and film, and both transfer to games whenever the designer can anticipate the camera angles a player is likely to see.
Key ideas
- Rule of thirds. Divide the frame into a 3×3 grid and place important subjects at the intersections of the grid lines. Treated as a guideline, not a law — it nudges the eye toward where the information should be.
- Golden triangles. Another classical device: diagonals drawn across the frame define triangular regions in which objects can be arranged so that lines and shapes lead the eye toward the intended focal point.
- Planes. Deliberately separating foreground, middle ground, and background (via value, contrast, colour temperature, or fog) prevents objects from merging into one silhouette. Without this separation, a scene reads as flat.
- Zebra lighting. Alternating bands of bright and dark in a scene create strong silhouette contrast. A character standing in front of a bright band reads as dark; standing in front of a dark band they read as bright. Either way, they read.
- Value/tone primacy. Tone governs readability more than hue. Two regions with similar values blur together regardless of how different their colours are; two regions with contrasting values stay separate even in monochrome.
- Tone key. The overall range of values the image lives in. A high key image is predominantly light, reading as airy, calm, or hopeful. A low key image is predominantly dark, reading as tense, mysterious, or threatening. Choice of tone key is driven by the location’s purpose, emotional intent, and art direction.
In practice
For any game scene, ask:
- What is the canonical angle? The camera positions the player is most likely to view this scene from. Compose for those first.
- Where is the focal point? What must the player notice — door, enemy, objective, exit? That is what the composition and tonality should serve.
- Does the scene have plane separation? Squint (or desaturate the image): does the foreground visually detach from the middle ground and background? If not, value or colour needs adjusting.
- What tone key is this location in? A safe hub in high key, a tense dungeon in low key, and so on — consistently across the location, not frame by frame.
- Where are the zebra bands? In any scene with important characters or interactables, alternating light and dark bands help silhouettes read.
Unity specifics:
- Use the scene camera’s “Shaded wireframe” and “Lit/Unlit” overlays to check shape and value separately.
- Post-processing Volumes (Colour Adjustments → Saturation to 0) give a quick monochrome check of tonal composition without recolouring assets.
- Cinemachine virtual cameras can be pre-placed at canonical framings to enforce composition across gameplay states (see cinemachine-overview).
Evidence
“This is a classic rule of composition, widely used, and which states that the most interesting and important parts of the frame that you want to display should be located at the intersection of some imaginary lines within this frame.” (Sharov, Using Light and Color in Game Development, see source-light-and-color-game-dev)
“In terms of perception, tone is always more important than color. It’s tone that primarily creates volume and visually divides a picture.” (Sharov, see source-light-and-color-game-dev)
“A higher color key can create an atmosphere of calmness and hope, while a lower one conveys an atmosphere of tension, intrigue, danger.” (Sharov, see source-light-and-color-game-dev)
Implications
- Composition must be planned with the game’s camera system, not as a static painting. Designers should identify the angles the player will see most and protect those framings with level layout, prop placement, and lighting.
- Tone checks should be part of the scene review loop. If a scene fails in desaturated view, it fails for players too — particularly those with colour-vision differences.
- Tone key is a communication tool as well as an aesthetic one: shifting a location from high key to low key re-signals its narrative or mechanical meaning, even without changing geometry.
Open questions
- How should composition be handled in genres where the player controls the camera freely (open-world third-person, VR)? Canonical framings still exist at objectives, but the rules loosen elsewhere.
- How do compositional tools adapt to procedurally generated spaces, where the artist cannot pre-frame each view?