Tag: foreground midground background

Creating Game Environments: Layout, Composition, Colour and Foreground–Midground–Background Layers

Aven BrisailLeave a comment

A game environment is the world or space in which a game takes place. Designing an environment relevant to the game concept means the setting must support the story, the mood and – above all – the gameplay. Three important skills are layout and composition (arranging elements for play and for the eye), colour (setting mood and making important things readable), and designing separate foreground, midground and background layers to create depth.

Unit 1 covered perspective and layers in Environment Layers and Perspective Drawing, colour and composition in Colour Theory, Texture, Composition and Layout, and concept work in Conceptualising Environments: Layers and Depth of Field. Here we apply those skills to playable spaces.

Start from the game concept

Before drawing, answer: What does the player do here (jump, sneak, explore, race)? What mood should they feel? Where does it sit in the story? What camera view will show it? An environment for a calm farming game and one for a tense escape sequence can use the same forest, but their layout, lighting and colour will be completely different.

1. Layout and composition

Layout for play

  • Paths and flow: plan the route through the space – main path, optional areas, shortcuts.
  • Readability: the player must instantly tell what is solid ground, what is dangerous and what is decoration.
  • Landmarks: a tall tower, a big tree or a lighthouse helps players orient themselves.
  • Pacing: alternate open, calm areas with tight, challenging ones.

Composition for the eye

  • Focal point: each view should have one main point of interest, often the goal or next area.
  • Leading lines: paths, rivers, fences and rooftops can point towards the focal point.
  • Rule of thirds: placing key features on the thirds of the screen feels balanced and natural.
  • Framing: trees, arches or cliffs at the edges of the view frame the scene and guide attention inward.
Painted forest scene with glowing pink and orange mushrooms in the foreground
Figure 1 – Concept art from the Blender Studio film Sprite Fright. Mushrooms in the foreground, a forest floor in the midground and soft trees behind create depth and a magical mood. Image: Andy Goralczyk / Blender Foundation, CC BY 4.0, via Wikimedia Commons.

2. Colour

Colour sets mood and guides play:

  • Choose a palette for each area that matches its mood (warm sunset for a peaceful village, cold blue-greys for a mountain pass).
  • Use atmospheric perspective: distant objects become lighter, less saturated and bluer, which pushes them back in space.
  • Keep playable surfaces clearly separated in value and colour from the background, so players never jump at scenery by mistake.
  • Reserve the brightest, most saturated colours for important things: collectables, hazards and goals.
Painting of a wooden house on a snowy mountain slope with pale mountains behind
Figure 2 – Concept art from the Blender Studio film Spring. The warm, detailed house stands out against cooler, paler mountains that fade into the distance. Image: Blender Foundation (Spring open movie; uploaded by David Revoy), CC BY 4.0, via Wikimedia Commons.

3. Foreground, midground and background

LayerContentsDesign tips
ForegroundObjects closest to the camera: leaves, rocks, posts; sometimes in front of the player.Darker and more detailed; use sparingly so it never hides the action.
MidgroundThe playable layer: ground, platforms, characters, items and enemies.Highest clarity and contrast; this is where gameplay happens.
BackgroundDistant scenery: sky, hills, city skyline.Lighter, softer and less saturated; simpler shapes; can use parallax scrolling.
Animated cartoon jungle path with sky, clouds, tall orange plant shapes and ground drawn as separate layers
Figure 3 – A scene built from separate layers. When the layers move at different speeds (parallax scrolling), a flat 2D game gains a strong sense of depth. Image: OhSqueezy, CC BY-SA 3.0, via Wikimedia Commons.

This Pixel Overload tutorial shows how to design and paint background layers for parallax scrolling:

Test the environment in play

An environment is only finished when it works in the game. Drop your character into the scene and check it at real screen size and real speed. Can you see the character clearly against every part of the background? Do players notice the landmark and head towards the goal? Does any foreground object hide an enemy or a gap? Take a screenshot and blur it or convert it to greyscale: the playable midground should still stand out. Adjust values, colours and layer detail until the answer to every question is yes.

Example

Game concept: Mangrove Rescue, a side-scrolling game where a young ranger frees trapped birds. Layout: a boardwalk as the main path, with roots and branches as platforms, a tall lookout tower as a landmark and an optional hidden lagoon. Colour: warm greens and golden late-afternoon light for hope; hazards (tangled fishing line) are bright orange so they read clearly. Layers: dark mangrove leaves in the foreground at the screen edges, the boardwalk and roots in the midground at full contrast, and a pale blue-green coastline and sky in the background, scrolling slowly for depth.

Exercise

  1. Write a short game concept and list what the player does, the mood and the camera view for one environment.
  2. Sketch a top-down layout of the environment showing the main path, a landmark, an optional area and hazards.
  3. Paint or draw one side-view scene with separate foreground, midground and background layers. Explain your colour choices.
  4. Turn your layers into a parallax scene in Scratch or another tool and test whether the playable layer remains easy to read.

Next: 3D Modelling for Beginners: Create Game Props and Assets With the Extrude Tool

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 2: Interactive Design and Game Development, Module 3: Animation for Games – Specific Objective 4 (“employ design skills to create environments relevant to the game concept”).

Attributions to media used in this post:

Sprite Fright-concept art-nature 02.png – Andy Goralczyk / Blender Foundation – CC BY 4.0 (via Wikimedia Commons)

Spring-concept art-house.jpg – Blender Foundation (Spring open movie; uploaded by David Revoy) – CC BY 4.0 (via Wikimedia Commons)

Parallax scrolling example scene.gif – OhSqueezy – CC BY-SA 3.0 (via Wikimedia Commons)

© 2026 Vedesh Kungebeharry. All rights reserved.

Conceptualising Environments: Layers, Depth of Field and Design Theory for Different Genres

Aven BrisailLeave a comment

To conceptualise an environment means to develop the idea of a place before building it: who is there, what happens there and how it should feel. Once the idea is clear, artists build the environment in layers (foreground, midground and background), use depth of field to guide the eye, and apply design theory so the place suits its genre.

This lesson builds on three earlier posts, so it stays short: Layers of an Environment and Perspective Drawing, Colour Theory, Texture, Composition and Layout and Environment Design for Game Genres and Creating Digital Artwork.

Step 1: Write an environment brief

Answer these questions in a few lines before you draw:

  • Purpose – what happens here in the story or gameplay?
  • Inhabitants – who lives here or passes through?
  • Time and weather – dawn or midnight, dry season or storm?
  • Mood – safe, tense, magical, lonely?
  • Focus – what should the viewer notice first?
  • Genre and audience – who is it for?
  • References – photos, sketches and research from real places and cultures.

Then draw several small, quick thumbnails and choose the strongest before starting a final piece.

Step 2: Create the layers

Draw the foreground, midground and background on separate layers or in separate files so they can be moved independently for parallax scrolling, camera moves or compositing. Two useful rules:

  • Atmospheric perspective – distant objects look lighter, bluer and less detailed because of the air between us and them.
  • Value separation – give each layer its own range of light and dark so the layers do not blend together. Keep the strongest contrast where the action is, usually in the midground.
Painted forest scene with dark trees in front, silhouetted characters on a log bridge and a glowing sky behind
Figure 1 – Concept art for Sprite Fright. Dark trees frame the foreground, the characters cross a log bridge in the midground, and a bright sky fills the background.
Layers of mountain ridges fading into a hazy sunset sky
Figure 2 – Atmospheric perspective in real life: each ridge of the Great Smoky Mountains looks paler and bluer the further away it is.

Step 3: Use depth of field

Depth of field is the range of distances in an image that appear sharp. A shallow depth of field keeps only one distance in focus and blurs the rest; a deep depth of field keeps almost everything sharp. In 3D animation, a virtual camera can blur objects that are out of focus. In 2D, artists blur the foreground or background layers by hand. Many games add depth-of-field blur in cutscenes and menus. In every case the goal is the same: guide the viewer’s eye to what matters.

Row of wooden alphabet blocks with only the front blocks in sharp focus
Figure 3 – Shallow depth of field: only the nearest letter blocks are sharp, so they grab our attention.
Row of wooden alphabet blocks all in sharp focus
Figure 4 – Deep depth of field: the same blocks with the whole row in focus.

Step 4: Apply design theory for the genre

Design elementFriendly (pre-school, cosy)Tense (horror, thriller)Epic (fantasy, sci-fi)
ShapesRound, soft, chunkySharp, broken, leaningTall verticals, huge scale, strong geometry
ColourWarm, bright, saturatedDark, desaturated, one sickly accentRich contrasts, glowing accents
LightSoft, even daylightLow light, deep shadows, flickerDramatic light shafts and silhouettes
CompositionOpen, clear pathsNarrow, blocked viewsWide vistas with a distant landmark

Example

Game concept: Mangrove Rescue, a friendly adventure set in a mangrove swamp inspired by Trinidad’s Caroni Swamp, home of the scarlet ibis. Brief: the player paddles a small boat to free trapped animals before sunset. Foreground: dark, slightly blurred mangrove roots and leaves frame the view. Midground: the water channel and the player’s boat, sharp and with the most contrast. Background: pale hills and a flock of scarlet ibis in a warm orange sky, softened by haze. Round leaf shapes and warm colours keep it welcoming for young players.

In this Pixar in a Box video, members of Pixar’s camera team show how the choice of lens changes what is in focus, and how their virtual cameras copy real ones:

Exercise

  1. Watch an animation or play a game. Identify the foreground, midground and background in one scene, and say whether depth of field is used.
  2. In a group, choose a theme and write an environment brief for a game concept.
  3. Draw three thumbnails, choose one, and create the final environment with the foreground, midground and background on separate layers.
  4. Show depth of field by blurring or simplifying the layers that are not the focus.
  5. Redesign the same place for a different genre by changing the shapes, colours and lighting.

Next: What Is Concept Art? How to Create Concept Art for Your Animation or Game Project

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 1: Fundamentals of Animation and Game Design, Module 3: Story and Character Development – Specific Objective 7 (“conceptualise an environment”); Specific Objective 8 (“create environmental layers for backgrounds, midgrounds and foregrounds”); Specific Objective 9 (“apply design theory to create environments for particular genres”).

Attributions to media used in this post:

Sprite Fright-concept art-group.png – Vivien Lulkowski / Blender Foundation – CC BY 4.0 (via Wikimedia Commons)

Clifftops4-7-07.jpg – Aviator31 – Public domain (via Wikimedia Commons)

Dof blocks f1 4.jpg – Alex1ruff – CC BY-SA 4.0 (via Wikimedia Commons)

Dof blocks f22.jpg – Alex1ruff – CC BY-SA 4.0 (via Wikimedia Commons)

© 2026 Vedesh Kungebeharry. All rights reserved.

Layers of an Environment and Perspective Drawing: Foreground, Midground, Background and 1-, 2- and 3-Point Perspective

Aven Brisail1 Comment

Every scene in an animation or game takes place in an environment: the world around the characters. To make a flat screen feel deep, artists split the environment into layers and draw it using perspective, a set of rules that makes objects look smaller and closer together as they get further away.

The layers of an environment

Most scenes can be split into three main layers:

  • Foreground – the layer closest to the viewer. It may hold grass, rocks, railings or branches that frame the scene. Objects here are large and detailed.
  • Midground (middle ground) – where the main action usually happens. Characters, platforms and important props are often placed here.
  • Background – the layer furthest away, such as the sky, mountains, the sea or a city skyline. It sets the location and mood but has less detail.

Artists show depth between the layers by using overlap (near objects cover far ones), size (far objects are smaller), detail (far objects are simpler) and atmospheric perspective (far objects look lighter, bluer and have less contrast).

Parallax scrolling

In 2D games and animations, the layers are often drawn separately and moved at different speeds. The background moves slowly and the foreground moves quickly, which makes the scene feel three-dimensional. This is called parallax scrolling.

Animated city skyline with three layers scrolling at different speeds
Figure 1 – Parallax scrolling with three 2D layers. The nearest layer moves fastest and the furthest layer moves slowest.

Try the Scratch project below. Use the arrow keys and watch how the layers move at different speeds:

Observational drawing

Observational drawing means drawing what you actually see in front of you – a street, a classroom, a still life of objects on a table – rather than what you think things look like. It trains your eye to notice shapes, proportions, light and shadow. Environment artists often sketch real places first and then change them to fit an animated or game world.

Perspective drawing

Linear perspective uses a few key terms:

  • Horizon line (eye level) – a horizontal line across the picture at the height of the viewer’s eyes.
  • Vanishing point – a point where parallel lines (such as the two edges of a road) appear to meet.
  • Orthogonal lines – lines that run from the corners of objects towards a vanishing point.

One-point perspective

One-point perspective has a single vanishing point on the horizon line. It is used when you look straight down a road, a corridor, a railway line or a room. Fronts of objects face you as flat shapes, while their sides go back to the one point.

Labelled diagram of one-point perspective with boxes
Figure 2 – One-point perspective: the horizon line, the single vanishing point and the orthogonal lines.

Two-point perspective

Two-point perspective has two vanishing points, one on each side of the horizon line. It is used when you look at the corner of an object, such as a building on a street corner. Vertical lines stay vertical.

Diagram of a building drawn in two-point perspective
Figure 3 – Two-point perspective: the sides of the building go back towards two vanishing points on the horizon line.

Three-point perspective

Three-point perspective adds a third vanishing point above or below the horizon line. It is used for dramatic views, such as looking up at a tall tower (a “worm’s-eye view”) or down from a rooftop (a “bird’s-eye view”). Game and film artists use it to make things look huge or dizzying.

Cube drawn in three-point perspective
Figure 4 – A cube in three-point perspective: even the vertical edges lean towards a third vanishing point.

Example

Imagine a side-scrolling game set in a fishing village at sunset:

  • Foreground: a wooden jetty post and some fishing nets that pass quickly across the screen.
  • Midground: the beach and boats where the player runs and jumps.
  • Background: the sea, distant hills and an orange sky, drawn lighter and with less detail, moving slowly.

For the village’s title screen you could draw the main street in one-point perspective, with the vanishing point where the street meets the sea.

Watch the video below to see how games use parallax layers to create depth:

Exercise

  1. Name the three layers of an environment and describe what might be found in each layer of a forest scene.
  2. Do an observational drawing of a corridor or road using one-point perspective. Mark the horizon line and vanishing point.
  3. Draw a simple building on a street corner in two-point perspective.
  4. Draw a tall tower from a worm’s-eye view using three-point perspective.

Next: Colour Theory, Texture, Composition and Layout for Animation and Game Scenes

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 1: Fundamentals of Animation and Game Design, Module 2: Drawing and Layout – Specific Objective 3 (“identify layers of an environment”); Specific Objective 4 (“apply knowledge of design principles for environmental design”).

Attributions to media used in this post:

Parallax scroll.gif – NuclearDuckie – CC0 (via Wikimedia Commons)

One Point Perspective Example.jpg – Maura Valentino – CC BY 4.0 (via Wikimedia Commons)

TwoPointPerspective.png – Mmroberts – CC BY 3.0 (via Wikimedia Commons)

Perspective cube.png – MrNoble.xyz – CC0 (via Wikimedia Commons)

© 2026 Vedesh Kungebeharry. All rights reserved.