Coinciding with the launch of Left 4 Dead
, Valve’s Jason Mitchell gave a Gamasutra-attended talk at the Montreal Game Summit which offered an illuminating session on the ways in which L4D
's art direction follows the blueprint laid out by their discoveries developing Team Fortress 2
’s striking visual design.
Mitchell opened by exploring the needs that led them to begin the artistic process for Team Fortress 2
. After a disastrous attempt to create a "realistic" visual style for that title, they realized the "visual hierarchy" that defines the way in which a player observes the characters within the world.
Team Fortress 2's Visual Hierarchy
"The first level is their color - are they on my team, or another team?" he explained, showing that the developers used a defined set of "mirroring" color swatches for blue and red to define each team without variation.
The next level is, "what class am I looking at?" -- defined most obviously by the example of the character silhouettes, where developers went as far as differentiating clothing folds.
The third tier is "what weapon are they holding?" Valve worked to ensure the player’s eyes were held at the chest area (where the weapon is held), with a gradient from dark colors at the feet to light in the chest. "The Pyro is the most obvious example of that," Mitchell established, pointing out his blackened and scorched legs.
To ensure the silhouette was always clear, influences were drawn from the work of J.C. Leyendecker
, particularly the use of clothing folds to define character shapes. In addition, his use of shading to define shape was an influence, since Leyendecker often uses "rim highlights," where characters look as though they are lit from behind.
After a few tests overlaying hand-drawn rim highlights on renders, Mitchell claims the team "immediately knew this was what we wanted, and began writing shader code."
Making It Pop
The silhouette was considered so important to Team Fortress 2
, in fact, that it is where the team started their design. They modeled characters not in a "generic T-shape," but in clear but character-specific poses.
Visibility was always key, so even the backgrounds were taken into account. "We tended to desaturate the world around the characters to make sure that they ‘popped off’ the background -- even when it was a red team member standing in their red base."
This informed the design of the game, leading to warm colors and natural materials for red bases, and cool colors and technological themes for blue.
Valve used the same techniques to help design the art direction of Left 4 Dead
, -- and Mitchell laughingly urged attendees to "please stay to the end of the talk," even though the game just shipped.
On Left 4 Dead's Art Direction
Mitchell said with Left 4 Dead
, the decision was to create a cinematic, rather than illustration-led, art direction.
As a result, just like current cinema, the majority of the style was created with a system of post-processing on the image the viewer sees.
This started with color correction to desaturate the environment (as seen in Team Fortress 2
), then the application of a film grain, which not only emphasizes the "filmic" feeling, but adds ambiguity to the darker areas of the screen.
The next filter applied is a "vignette," the darkening of the edges of the screen. In this case, it was largely applied to the top of the screen in order to focus the player`s vision to ground level and to add "a touch of claustrophobia."
"You see these kind of effects used in film -- there's not a ton of new stuff there," admitted Mitchell. But he reminded the audience that "games are not films, because the developer and software can know far more about what is going on dynamically in the environments, adding: "In a movie you might rely on the score or your choice of film stock to convey emotion, but we can do other things."
Evolving The Post-Processing
He revealed that when the situation for the player changes, so does the post-processing effects. When a player is under stress, the contrast is heightened to give edges "more pop," adding tension and "juiciness".
"Beyond post-processing, we did several other things," continued Mitchell -- for example, "we were very intentional with our lighting design."
The team chose to include lighting which "supported the fiction" of a zombie apocalypse -- lights from abandoned cars, for example, which have the added bonus of "long, streaky, horror film shadows".
This kind of "cinematic thinking" led to the inclusion of other classic film tropes, such as "smoke on the set," where matter in the air adds additional depth cues and emphasizes silhouettes. The Left 4 Dead
team added, among other objects, steaming manhole covers, and copied the "just-rained" look that is used when shooting at night.
"It`s really great visually, because you see the scene as 'dark,' but you can still see what you need to in enough detail," he said, showing footage of the game`s wet-look levels.
Ready, Set, Launch!
In closing, Mitchell explained that these techniques not only affected Valve's art direction, but also their technical direction.
The company developed self-shadowing normal mapping to add more richness and depth to their shadows and increase the importance of the game's flashlights.
"I missed the launch party because I was here," said Mitchell. "We take launch pretty seriously. As we have a specific time where they're unlocked on Steam -- and hitting an 'enter' key is not epic enough."
He grinned: "starting with The Orange Box,
we invented the 'shipping machine,' a huge and mysterious device
where you have to throw a bunch of switches before Gabe [Newell] can hit the big red button -- which actually just sends an enter key code to some guy's PC."