Matte painting for games

A matte painting for games is a painted image of distant scenery, such as sky, mountains or a city, placed behind the playable space so the world seems to continue. Phillip Zhang, an environment artist on World of Warcraft, notes that a vista that would be expensive to model "can be achieved by creating a matte painting on a single 2048×2048 pixel canvas with a couple weeks of work" (80 Level: How to Create Skies for 3D Games).

Matte paintings are one layer of a skybox or backdrop; this page covers how the painting is made and mapped into the scene.

#2D, 2.5D and projected backdrops

Painted backdrops come in three broad forms, from cheapest to most convincing when the camera moves.

• 2D: one image on the sky. The painting is wrapped onto a skybox cube or dome, with no parallax. This suits skies and very distant ranges. Zhang's Shadows of Argus skies for World of Warcraft were painted this way, and he says the process "isn't too different from a regular skybox" (80 Level: How to Create Skies for 3D Games).
• 2.5D: layers on cards. The painting is split into layers (sky, far mountains, hills, cloud banks), each on its own card or simple mesh at a different distance, so the layers shift against each other as the player moves. Mukul Soman, skybox artist on Halo 4 and Halo 5, extracts clouds from photos and maps them "onto a card geo", then adds "cards with scrolling UVs to have moving clouds and fog elements" (80 Level: Creating Skyboxes for AAA Games).
• Projected paintings. The image is painted over a render from one camera position and then projected from that same position onto rough geometry. From the projection point the result looks exactly like the painting; nearby viewpoints get real parallax because the geometry has depth. Garrett Fry's Projection Types for Matte Painters compares the projection types used in film matte work (YouTube: Projection Types for Matte Painters), and Sam Gebhardt shows a camera projection set up inside Unreal Engine (YouTube: Camera Projection Unreal Engine 01).

The further the player moves from the projection point, the more stretched pixels show, so projections suit vistas seen from a fixed path or a cutscene.

#Painting from photos and renders

Game matte painters rarely paint from a blank canvas. Soman starts with "making a base sky in Vue or Terragen", adds photographic elements and finishes by "painting onto them in photoshop" (80 Level: Creating Skyboxes for AAA Games). Tony Arechiga, a sky and background artist on Destiny 2, takes "thousands of pictures of clouds and landscape shots throughout the year" and uses them "as an asset database to cobble together panoramas" (80 Level: Creating Breathtaking Game Backgrounds). He makes cloud cards by compositing cloud photos over black, removing the blue channel with Photoshop's Blend If, and saving "the diffuse and the alpha textures" (80 Level: Creating Breathtaking Game Backgrounds). See photo-sourced and scanned materials for the general approach and gathering and using reference for building a photo library.

The painting has to agree with the 3D scene in front of it. Zhang's rules: "The lighting in a skybox should match the lighting of the scene", and "the use of color and shapes in a skybox should always echo the elements in the foreground" (80 Level: How to Create Skies for 3D Games). Distance is painted with value and contrast: "Things that are further away from a person usually have less contrast" (80 Level: How to Create Skies for 3D Games). See fog and atmosphere.

#How to make one

The steps below build a 2.5D painted vista. They follow the workflows of Soman, Arechiga and Zhang; engine steps use Unity's skybox settings as the example.

1. Block the scene and pick the viewpoints. Work out where the player will look at the vista from. Soman starts from the sky "and then work[s] my way closer and closer to the level" (80 Level: Creating Skyboxes for AAA Games).
2. Make a base. Render a base sky in Terragen or Vue, or assemble a panorama from your own photos (80 Level: Creating Skyboxes for AAA Games; 80 Level: Creating Breathtaking Game Backgrounds). A single 2048 × 2048 px canvas was enough for Zhang's World of Warcraft skies (80 Level: How to Create Skies for 3D Games); a game with a more detailed art style may need more.
3. Paint over it. Add photo elements and paint them together in Photoshop (80 Level: Creating Skyboxes for AAA Games). Match the direction and colour of the sun in your level, and lower contrast with distance (80 Level: How to Create Skies for 3D Games).
4. Split it into layers. Save the sky as one image and each distant layer (mountain range, city skyline, cloud bank) with its own alpha, as Arechiga does with "the diffuse and the alpha textures" for cloud cards (80 Level: Creating Breathtaking Game Backgrounds).
5. Map the layers. Put the sky on the skybox. In Unity, create a material with a skybox shader and assign it under Window > Rendering > Lighting > Environment > Skybox Material (Unity 6 Manual: Using skyboxes). Place the other layers on large cards or simple meshes beyond the playable boundary, furthest first.
6. Add slow movement. Scroll the UVs of cloud and fog cards, as Soman and Arechiga do (80 Level: Creating Skyboxes for AAA Games; 80 Level: Creating Breathtaking Game Backgrounds). Keep it slow; huge distant objects that move quickly read as small.
7. Reduce the cost. "Delete out unseen polygons and crunch your textures down with MIPs", and place alpha cards "sparingly" (80 Level: Creating Breathtaking Game Backgrounds). See mipmaps and overdraw.

#Video tutorials

#Use in recent games

• Destiny 2 (Bungie, 2017). Arechiga describes "doing matte paintings of a sort based on photographs I've taken while on hikes" for the game's skies (80 Level: Creating Breathtaking Game Backgrounds). On Trials of the Nine the horizon is an additive fog card and the planets are spheres baked to alpha cards (80 Level: Creating Breathtaking Game Backgrounds). His ArtStation caption: "Created layout, set up sun, planets, atmosphere, fog, and terrain" (ArtStation: Destiny 2- Trials of the Nine).
• World of Warcraft: Legion, Shadows of Argus (Blizzard Entertainment, 2017). Zhang painted the skyboxes as matte paintings, and notes that a mountain with pine trees from the foreground "could stretch for hundreds of miles in the matte painting of your skybox" (80 Level: How to Create Skies for 3D Games).
• Halo 5: Guardians (343 Industries, 2015). Soman's skies combine Vue or Terragen bases, photo elements and Photoshop paintover, with scrolling cloud and fog cards in front (80 Level: Creating Skyboxes for AAA Games).
• The Last of Us (Naughty Dog, 2013). Cloud motion on a single matte painting, driven by vector fields and flow (GDC Vault: Moving the Heavens: An Artistic and Technical…).

#In different tools

#Further reading and watching

Related pages: skyboxes and background vistas, sightlines and vistas, sky, clouds and volumetrics, fog and atmosphere, impostors and billboards, forced perspective, landmarks.