GDC 08: The Illustrative World of Team Fortress 2
Filed Under Articles & GDC 2008 & Conferences
Editor’s Note- Don’t forget to download the audio from this conference below!
At GDC on Friday, Jason Mitchell, one of Valve’s leading graphics engineers, held a workshop entitled “Stylization with a Purpose: The Illustrative World of Team Fortress 2.”
The topics discussed ranged from the team’s overlying theories of the game’s visual design and its inspirations to the technical details of how the designers render the game’s eye-popping visuals.
You can download the slides from Mitchell’s presentation from Valve’s website (PDF).
Mitchell began by talking about the original style of Team Fortress 2, using 1999 screenshots of the game to illustrate the gritty, more realistic art direction the previous team had envisioned. Citing the lack of realism present in TF, including the prevalence of rocket jumping and an over-the-top system for healing teammates on the fly, Mitchell conceded “the gameplay was really fighting against the visual design at the time.”
Another issue was the fact that “you really couldn’t make heads or tails of which characters had which properties.”
“And so we went back to the drawing board.”
The next slide showed the final TF2 style we’ve now grown to love, depicting each member of the Red Team standing together in their base. “We really embraced this 50s or 60s industrial design aesthetic…you can kinda see the Dr. Strangelove ‘Big Board’ world map in the back there…the classes are very distinct, very different from one another…and each with their own attitudes to really match that over-the-top gameplay.”
So why the unique style for Team Fortress 2? The designer cited three major reasons.
From a gameplay standpoint, the distinctive style of each class explicitly communicates to the player what each character is capable of.
“The Heavy weapons guy has more hit-points and can take more damage and is slower by just making him bigger. Compared to the skinny little Scout, who is probably fast, probably a little weaker…and we can communicate these differences very easily to the player.”
Next is readability, meaning the player’s ability to instantly differentiate between classes and teams with only the slightest glance.
Finally, there’s a great deal of branding that goes on. Mitchell correctly noted that it is “impossible to confuse a Team Fortress 2 screenshot with any other game.”
To illustrate the technical aspects of how they accomplish this, Mitchell spoke about the ‘Read Hierarchy’ the designers have followed when designing each class member.
Most significantly, the player must be able to distinguish between friend and foe. The easiest and most obvious way to do this is with color. “Is this other character red or blue? Are they on my team or opponent? Are they friend or foe? What should I do based on that? And we’re really specific about our color palette choices.”
The next level in the ‘Read Hierarchy’ is based on the class. On the most basic level, the artists design silhouettes that are easily recognizable. Mitchell showed only the black outlined forms of all nine characters and everyone in the room could easily determine who was who based solely on that.
Taking it a step further, the artists place the highest level of detail around the character’s chest level, whether it be differences in shape or clothing or weapons, simply because the player is most likely to look there first. In addition, almost all characters have a darker to lighter gradient running from their feet to head. This helps to draw the player’s eyes up and focus again at the chest level.
Turn-of-the-century American illustrator J.C. Leyendecker served as the studios biggest inspiration for the visual conventions of the character design. Mitchell specifically cited Leyendecker’s propensity for warm to cool hue shifts across a body, creating shadows that result in cooler colors, instead of rich blacks.
Mitchell made a point of emphasizing that Team Fortress 2’s art style is not cel-shading; quite the opposite, in fact. Silhouettes are punctuated by “rim highlights,” rather than black outlines. “Heavy black outlines were just never in the cards for us,” the designer revealed. “We like the idea of using rim highlights to emphasize silhouettes.’
The talk shifted to the more technical, coding techniques that create this visual flair. Much of this was over my head, but I came to understand what Valve calls its “half-lambert” technique. While most other games shade characters with what is known as a “full lambertian term” that provide deep, dark black shadows, Valve’s half-lambert applies a more subtle gradient. The slide pictured below illustrates the differences between the techniques when applied to a Heavy.
If you’re curious to see what the equation that governs the character shading technique looks like…
Mitchell then moved onto the environment design present in the game. Creating a compelling, immersive world was paramount for the team, and it accomplished this by creating an “impressionistic, painterly look” inspired in many ways by the worlds of Japanese filmmaker Hayao Miyazaki in his films like Spirited Away.
Whereas other designers often use actual photo-maps to create their in-game textures, the art team painstakingly hand-painted every single texture in the game, whether they were applied to environment structures like roofs and walls…
…or models like turrets and trains, being sure to leave noticeable brushstrokes.
An extra emphasis was placed on contrasting both teams’ properties, with regards to hues, themes, and shapes. Red’s side focuses on “warm colors, natural materials, and angular geometry,” whereas Blue’s is notable for its “cool colors, industrial materials, and orthogonal forms.”
Using the Blue control point on cp_hydro as an example, Mitchell described the three major steps the team takes when designing a map. They begin with a rough shell of the map, placing major buildings and rock structures and skinning them with plain, temporary textures.
Next, screenshots are taken, and artists literally paint over the scenes on a 2D-level.
Finally, using the paintovers as reference, more detail is added to both the layout of the map and its textures.
Next, the discussion shifted to how synonymous the terms ‘class’ and ‘character have become to those working on the game. Each class has its own defined personality and archetype. Each uses its taunts and context-sensitive emotes in an attempt to strike fear into the hearts of their foes. Mitchell touched briefly on the “Meet the Team” shorts, revealing to audiences that the videos are all made in-engine, with nearly all the same in-game assets, save for “rezzed-up hands” and an added number of “facial morph targets.”
Finally, the talk concluded with the future of Team Fortress 2. The team is confident that competitive multiplayer games have incredibly staying power, much like Valve’s own Counter Strike franchise, and the future of TF2 is bright. Mitchell reiterated that the whole purpose of STEAM has always been to facilitate the sharing and application of game updates with its customers.
Mitchell had one final treat in store for the audience, providing us with the first-look at the new ‘Meet the Team’ video. You can read all about it in this separate post.
After showing the video, Mitchell asked the audience for questions.
Instead, an audience member shouted “show it again!” A few of us echoed similar sentiments and Mitchell smiled and obliged
While many of the visual techniques Valve’s creators have bestowed upon the game may seem obvious to those who have played the game for extended periods, it was fascinating to explicitly hear the painstaking efforts the team makes to create a visual style that is an integral part of Team Fortress 2’s gameplay.
Download the Conference Recording
You can download our recording of this entire conference in MP3 format below. Kindly right-click, ‘Save Link As.’
Download the conference ‘The Illustrative World of Team Fortress 2′ (53 minutes, 24.4 MB)
