Character Readability in Team Fortress 2 and Overwatch
This is an expanded essay based on a series of tweets I wrote back in 2017 comparing Overwatch and its predecessor from the same multiplayer shooter space, Team Fortress 2.
It’s late and I’m drinking wine, so let’s talk about art direction in reference to Team Fortress 2 and Overwatch.
This is just going to be regarding vanilla TF2, mind you. The hats and goofy costumes are another topic.
So what makes TF2 good, and Overwatch, at least from a visual gameplay design standpoint, not quite as good? Easy. TF2 is consistent through and through.
Let’s start with a simple visual example. Take a look at this comparison image of TF heads and think about what you see:
Really break down these heads, and you’ll find a ton of little nuances that keep everything within a consistent style.
For example, compare the angles of every nose to every forehead. With only minor tweaks and variations, the angles always match. With small choices like nose-forehead angle consistency, the artists build a consistent style which they can easily replicate.
Similarly, look at the color palette. Top is skin, primary team colors, secondary colors, and tertiary colors, while the bottom is metals from guns and other objects.
With this tightly restricted palette, the artists build patterns and variation while maintaining strict control to keep consistency. These colors stretch not just across characters and weapons, but across the environment as well:
Limiting the palette of colors and materials forces the artists to use shape language and materials to define different areas of the map. As a direct result, the two teams end up having distinct identities despite being functionally identical. Additionally, this identity makes gameplay more fluid by ensuring players always know where they are by distinct, team-colored and team-themed landmarks.
This environmental design also pulls double duty by accentuating the identities of each team member. If we look at this early screenshot, we can easily determine who is on which team at a glance.
The cool tones of the Heavy in the foreground contrast with the colors of the red base and the red team members. It’s all instantly readable. This means you’re always going to know when the person in your base is on your team or the enemy team. The colors of the characters and environments ALWAYS have contrast.
The shape language example from earlier also plays into character design by making silhouettes recognizable, even when partially obscured. With distinct character silhouettes, you get instant readability.
Take the heavy, for example. Even mostly cut off like he might be when peeking out from behind cover, he’s still recognizable.
Now, with those things in mind, let’s look at some stuff from Overwatch.
What does Overwatch do well? Material reads, silhouettes, character recognizability. Even with different skins, they’re distinct and have a strong brand, as it were:
However, we quickly run into problems! For example, ask yourself which team the characters in this screenshot are on:
In the above screenshot, is Genji throwing stuff AT Sombra because he’s on a different team, or is he throwing PAST her?
By contrast, what happens if we shift some colors? Suddenly we get a better understanding of what’s happening in the image:
This same principle seems to apply to most screenshots, marketing or no. Even with good silhouettes, team readability is tough. In this screenshot, two very similarly colored characters are fighting each other, and they also happen to be blending into the same-colored environment as well.
Part of the problem stems from not having distinct teams, despite OW’s built in fiction of Overwatch vs… everybody else. Considering the roots of Overwatch’s visual style AND gameplay, it’s odd to me that things as simple as team colors are not standard.
“But wait,” you say, “Overwatch HAS team colors!”
Does it though? What happens when we switch the HUD colors?
Which team is Pharah on now? Who’s capturing the point? Is the player supposed to shoot Mercy or Pharah? What happens if I’m color blind and a lot of this is starting to blend together?
This highlights a fundamental principle of team-based games. Specifically, who’s on your team and who’s not. In this case, Overwatch’s main theme — two teams battling for control of a map — becomes muddled.
Despite the fact that these characters are all instantly recognizable by their silhouettes, they become unreadable next to each other.
Their overall designs, while solid and displaying fundamentally good character design principles, fall apart in a group.
Contrast the above with the almost exact same image, at MUCH lower resolution, from TF2:
Some areas become muddy because of similar values, such as the scout/sniper/soldier, but the rest remains reasonably crisp. This shows something interesting:
Even with an extremely limited palette, TF designs remain distinct. Why?
The cause is twofold:
- TF2 designs have larger areas of visual rest.
- TF characters have a much stricter value/color hierarchy.
This value hierarchy shows itself in the use of illustrative rendering and by specifically painting color gradients into characters.
While the OW designs are clean, they rarely show this value hierarchy, and thus become difficult to read.
Lucio, Junkrat, Roadhog, Soldier 76, all these characters fail to establish strict definition between light and dark values.
Additionally, many of these characters have areas of visual noise that do not read well at a distance.
However, there is one standout character in Overwatch that bucks this trend directly. Like it or not, she’s also the face of Overwatch. While I’m personally not a huge fan, Tracer is the strongest character design in the game by leaps and bounds.
She’s the strongest because, out of all the characters in that group shot, she’s the only one with a reasonably readable silhouette, at least on part of her body.
This brings us back to value hierarchy. It brings us to the understanding that her bright yellow tights highlight her function:
She’s fast as fuck, and her design accentuates that in every way. Her legs are impossibly long, and her design is sleek. The thing that makes her design readable is the huge splash of color with a single gradient going across it.
This is something every other character lacks, to some degree, and the main reason they don’t read well.
So, to tighten the visuals of OW and make the characters function better in gameplay, they all need to take a lesson from Tracer. Eliminate the small details, or bring their values closer together. Use those huge splashes of color to differentiate characters. Introduce team colors and eliminate colored nametags and visuals will be cleaner.
Consider giving more visual identity to different areas of maps to accentuate when you’re in the wrong neighborhood.
What Works, and How it Works
Now that we’ve talked about character identity and some high-level readability, let’s use three specific examples and talk about what does and doesn’t work.
In this case, we’re going to use three characters that are directly comparable because of game design and implementation:
The Scout and Tracer, the Heavy and Zarya, and the Medic and Mercy.
Silhouette
Without knowing anything about these characters, it’s easy to guess what types of abilities and properties they might have:
Skinny characters usually have low direct combat survivability, either through lower HP or generally lower defense. Lightweight designs tend to emphasize speed and glass cannon tactics. Hard hitters for run-and-gun gameplay. This borrows from sprinters in the real world.
Both scout and Tracer communicate this trope effectively, and also demonstrate it through their intended playstyle.
Medium-weight characters often have corresponding survivability, and both medic and Mercy also demonstrate this. Additionally, medium characters are often found in support roles because front-line silhouette reads are less important. That is, the exaggeration of their designs tends to be less important because they’re generally fairly stationary. In addition to being fairly stationary, subtler silhouettes tend to deemphasize combat effectiveness.
If the medic had a heavier or more unbalanced silhouette, possibly with larger shoulders, you’d question his combat capability.
Both the Heavy and Zarya also communicate their combat roles effectively. They’re tanky hard targets that deal out huge damage. Their thick silhouettes quickly communicate high HP pools and survivability, and their huge guns are… well, huge.
All these characters communicate gameplay through silhouette. However, there are key differences to note. While TF2 characters place a huge emphasis on a color value hierarchy, the Overwatch characters largely do not.
Color and Value
Why is value hierarchy important? Because it’s what we see immediately after general silhouette.
TF2 characters are designed to place the brightest, most contrasty colors to convey important information instantly. Specifically, TF2 places bright colors at chest level. This draws your eye to the most dangerous area; the weapon.
Let’s get some visual aids.
Here are Heavy and Zarya’s silhouettes. Both very strong and very readable. Cool.
Here’s a general value breakdown of each character.
At this point it becomes instantly clear what’s going on with Heavy’s color values. They’re designed to draw the eye toward one specific part of him:
His gun.
By making the arms and bandolier contrasty, the eye is drawn down to the target shape of the drum magazine. There are literally bright lines pointing towards the dangerous part of the Heavy.
Additionally, you’ll notice that Heavy’s feet and pants are much darker than most other areas. This deemphasizes them, and puts them lower in the visual hierarchy of things that are important for us to look at. Our eyes are naturally drawn to bright colors and values, so we generally ignore his feet.
Not so with Zarya. Zarya’s (very large, very obvious) feet are given the same emphasis as her chest, and while her weapon is contrasty and bright, it generally doesn’t stand out against the rest of her body.
Let’s compare Scout and Tracer.
These silhouettes generally communicate the speed and survivability I mentioned before. They’re VERY similar.
And here’s another value breakdown.
Similarly to Heavy, bright and contrasty colors are placed around the chest to bring emphasis to Scout’s weapon.
And, just like Heavy, Scout’s legs are (mostly) darkened to deemphasize them in favor of bringing the focus to the danger area. Also, just like Heavy’s bandolier and arms, we literally have a line going through the chest to point at the gun.
Meanwhile, Tracer’s areas of highest contrast are her head and guns. This wouldn’t be bad, except her guns don’t read well next to the very similar values of her gauntlets. And, unfortunately, her gauntlets share many values with her chestplate. This makes her entire upper torso difficult to read.
Additionally, her legs share many of the same values as the rest of her body. In dim light, these will all blend together.
Saturation
Tracer’s artists have decided to counteract some of these problems with bright, saturated color.
This is a good idea, but the execution means that her danger areas (her guns) are no longer emphasized. Are we meant to fear her legs?
If we take a look at the areas of highest color saturation, it’s more obvious where our eyes are led.
On the Scout, it’s made abundantly clear where we’re supposed to be looking. But where should we look at Tracer?
The same holds true of every other TF2 character:
What happens when we highlight the saturated areas of the Overwatch roster?
This is problematic from a usability standpoint. Many players are simply not going to have the ability that is necessary for target identification in this situation.
And what about color blind and low-vision players? Many of them will be relying on contrast cues rather than actual colors to understand what they’re seeing.
While it makes marketing sense to have more visually diverse characters, it weakens the visual brand at the same time.
Anyway…
I think I’ve gotten myself into enough trouble with Overwatch die-hards today, so I’ll end on a high note…
Despite some visual problems, Overwatch is still damn pretty. From a technical and art direction standpoint, I’m glad it exists. Its wide variety of characters are encouragement for other companies and projects to pursue variety in representation, even if it isn’t 100% perfect.
In the future, when thinking of what you need to produce for characters in your game, think of how your characters are reading from the gameplay camera. The visual hierarchy we look at starts with silhouette and value, and goes through color, saturation, and smaller details like patterns.
What are your goals? Are you making a team shooter? If you’re an artist, your art is a contribution to gameplay and overall game design, and that means your art needs to support these overall goals. Consider how Team Fortress 2 succeeds in this area, and try to hit that same level.
