Game Dev – Preproduction Phase

The phase in game development before production. In this phase, the game idea is finalized, the game design is established, a visual style is determined, and visual elements such as characters, environments, items and moods are concepted.

“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.”
– Abraham Lincoln

Scope

Before (pre)production of a game, the scope should be defined. The scope describes which elements should be present in a prototype build and a production build in order to be considered ‘ready’.

In a lot of game studios, scope definition is part of the scrum methodology (or a similar project management methodology). The game devs formulate user stories together with the client. These become epics, subdivided in possible features of the game. Note that this part of scope definition often starts after a brainstorm, and might happen again in the production phase.

Brainstorm

In a brainstorm, we try to determine the game concept. Depending on the kind of project and participants, we use a wide range of brainstorming techniques. A brainstorm could also be held for other game elements, such as game environments, story, et cetera.

miro brainstorm board for (canned) game rg-x
A virtual whiteboard for brainstorming.

Game Design Document (GDD)

A GDD is a living document outlining all aspects of the game: the game’s concept, scope, gameplay design and rules, art design and assets. Note that we use an agile project approach, so we do not describe the whole game into the smallest detail. That way, we can change the document quickly if things about the game change, and there is a better chance the document will be read and used. A GDD is rarely ‘final’, but one can agree on the contents at a given point in time.

If such a document only describes the functionality of the prototype, it is often called a Prototype Design Document (PDD). A GDD might evolve from it, or it can be a separate document.

GDD for the first Grand Theft Auto. Source: Rockstar Games.
GDD for the first Grand Theft Auto. Source: Rockstar Games.

Moodboard

A collection of existing references (images and concepts) that try to convey the intended visual style and/or design of a project. Separate moodboards can be made for different aspects if necessary.

Simple moodboard for one game environment.

Concept Sketch

The first big step in creating (3D) characters or environments is creating (2D) concept sketches. Such a sketch explores the silhouette, character traits and workings of an asset. That way, we can apply any feedback on these quickly. It also serves to make a coherent game world where all stakeholders agree on. More developed sketches often evolve into concept illustrations.

Concept sketches are also used to convey game ideas and visualize them.

An early concept for a monster bird.
early concept of vr-kuub game totems
Visualization of a game concept.

Concept Illustration

In the final stage of concepting, concept sketches evolve into concept illustrations. These are often ready to be used by 3D artists to create the ‘real’ game assets. Concept illustrations may still use existing images to clarify details. If multiple existing images are combined, it is called photobashing.

concept illustration of Danny the Illusionist
A more advanced concept illustration with photobashed elements and annotations for the character artist.

Flow

The flow of a game is a low-level outline of (part of) a game. It describes the processes and phases a player can go through. Often, a simple flowchart is used. A flow can often be annotated by developers to help structuring their code.

dummy flowchart for a game menu
A simple flowchart.

Wireframe

A wireframe of a game is a schematic outline of (part of) a game. It visualizes the game flow and shows the relations between parts and functions of a game. Wireframes are often structured in ‘game screens’, but their layout and design is not present yet.

A wireframe could evolve into a functional wireframe.

wireframe from the menu of a canceled racing game
Wireframe of a racing game menu.

Functional Wireframe

An interactive, digital version of a wireframe. The user can click or tap on the wireframed elements to navigate through the flow.

This wireframe could consist of just images of different states of the game. Alternatively, tools like Balsamiq, Adobe XD or proto.io could be used to quickly create a functional wireframe.

A functional wireframe could overlap with a (paper) prototype.

An example of functional wireframes shown on different devices. Source: Balsamiq.

Mockup

A mockup is usually an advanced version of a wireframe in which often final quality visuals are showcased. Its purpose is to give you an idea of how the product will look.

Mockup of the card shop in Rise of Humanity
Mockup of the card shop in Rise of Humanity.

Functional Mockup

An interactive, digital version of a mockup. The user can click or tap on certain elements to navigate through the flow. A functional mockup is often a great tool to show off a simple game idea to investors.

Example of a functional mockup for a Fortnite Tracker app. Source: Caler Edwards.

After the preproduction phase, we continue to the actual prototyping. Note, however, that prototyping is most often part of preproduction, and vice versa. Testing ideas and their resulting feedback often change whole wireframes and mockups.