Breaking Down Testing Chamber 16, part 3: Visual Language
One major goal of any game is establishing and maintaining a cohesive visual language with the rest of the game so that players can understand the gameplay constraints of the space they inhabit at a glance. Languages are comprised of terms (things) and grammar (the rules that govern the things) and visual languages are no different. Whenever we show a player something gameplay related, there should be a clear understanding of what the thing is and what it does when interacted with. Here are some examples of terms from Super Mario Bros:
Each of these types of blocks are visual terms, abide by specific rules when you interact with them, and exhibit different behaviors when interacted with. For example, in the case of the second (multi-brick) block, here are the rules associated:
- Like all blocks, Mario may stand on it
- Small Mario cannot break the block, but can bump them and damage any enemy walking on the block
- Large Mario will break the block when jumping into the block from below
- The block may contain coins, a power up, a vine, or be completely broken to be displayed to the player when bumped from below
- Once the contents of a non-breakable block have been exhausted, it visually changes to the four-dot inert block on the far left
One way Portal does this is through the clearly displayed wall materials. Within the world of Portal, metallic/dark grey tile walls and floor do not allow portals to be placed on them. Light grey concrete allows portals. Like so:
Similarly, Portal’s visual language draws a clear distinction between the objects placed within the space and the rest of the world, which is comprised of the walls, ceilings, and floors:
The rules up to this point have taught the player that the objects can move (or be moved) and can be affected by the player in various ways. The player cannot place portals on objects, only on certain elements in the geometry. The player can pick up (certain) objects and move them about the level. Movable objects share certain qualities – they stay where they are placed and they are often used to solve puzzles.
As you can see, there are often a lot of rules (the grammar) associated with these visual language terms that must all be taught to the player so that the player can interact with these terms appropriately when they are presented. Let’s get into how Testing Chamber 16 introduces the player to a new visual language term and its associated grammar – the Turret:
Observe how clearly the grammar rules are implied by the first turret’s placement. The targeting laser beam is clearly visible on the dark background, the shadow cast beneath its spindly legs indicate it is probably an object the player can pick up. The player can immediately grasp the major visually important elements of the turret just by where it is placed and what it looks like when observed. A large, bulky turret would give a different visual impression than a small, spindly turret for example:
It would certainly look a lot more imposing, but would also likely cause some cognitive dissonance trying to lift something so enormous up.
Upon picking the turret up, it responds by wiggling and looking around:
Once it is dropped, it fires its guns for long enough to teach the player that these weird little things are potentially dangerous:
And then it deactivates, going inert and no longer dangerous:
In this very first encounter with the turret, the player has learned these associated rules:
- The turret can be picked up
- The turret can be deactivated by dropping it on the ground
- The turret has guns and is therefore dangerous
- The turret has a laser beam
Most people who have any understanding of modern guns will immediately associate the laser beam with the gunfire and assume it is a targeting laser. For those who aren’t sure, the immediate next step is to prove out that case:
This adds most of the in-game rules the player needs to know regarding how turrets behave in game. From here on out, placing a turret brings all associated rules to the player without further need of explanation. If you observe the rest of the level, you can see that most of the gameplay is there to teach the player more nuanced rules regarding the turrets (e.g. the deactivation of the turret is tied to knocking it over).
The most important thing when establishing a visual language is consistency. When we establish visual language terms with the player, it encourages them to hypothesize “reasonable” connections based on the rules involved. When their hypotheses prove correct, it reinforces the visual language’s grammar and makes the world feel more coherent. If their hypotheses prove wrong, players usually both learn something about how the game rules and experience a bit of cognitive dissonance from the incongruity in how they thought the rules worked and the way the rules actually work.
Building and maintaining this sense of coherence is extremely important for a good player experience! If design breaks the rules they’ve established too often, it breaks player immersion and can cause a lot of frustration. Take a look at this environment from Uncharted 4:
There’s a very clearly established visual language at work here to broadcast the environment’s traversible areas to the player at a glance. If there are environments where the traversible areas are hard to differentiate, the player can get confused and frustrated. The easiest example of this is with jump distances, especially in platformer games.
One of the biggest visual language terms in games like this is the maximum distance a player can jump. If the gap is significantly longer than the maximum jump distance, the player can understand that this is not a traversible path (yet). If the gap is visibly shorter than the jump distance, the player can make the jump. But if the gap is just a little bit further than the jump distance, it’s unclear and the only way to tell is by the frustrating process of trial and error:
To recap, our takeaways from today’s post on breaking down Testing Chamber 16 are:
- Each game establishes a visual language and it is up to design to add to and maintain that visual language
- Visual language is made up of terms (specific visual things) and grammar (game rules that govern those things)
- Teaching the player the grammar for the terms is super important to establish for the rest of the game.
- Consistency between visual language and gameplay is super important to keep players engaged. Ambiguity makes them feel bad
When next you play through Portal, observe how the visual language terms like the turrets are both established and then subsequently used. Whenever a new language term is introduced, note what the level design does to teach you how the rules work. Then, in subsequent encounters with those terms, see what they assume you already know and what else they expand on with those terms.
The FANTa Project is being rebooted. [What is the FANTa project?]
Got a burning question you want answered?
- Short questions: Ask a Game Dev on Twitter
- Long questions: Ask a Game Dev on Tumblr
- Frequent Questions: The FAQ
Breaking Down Testing Chamber 16, part 3: Visual Language
Yoga Booking APP Source Code
FullStack Android Tutorial
Learning Java – Get a job as Android Developer