Read on Twitter
It's late and I'm drinking wine, so let's talk about art direction RE: Team Fortress 2 and Overwatch. 1/*
This is just going to be regarding vanilla TF2, mind you. The hats and goofy costumes are another topic. 2/*
So what makes TF2 good?
Easy.
It's consistent through and through. 3/*
Easy.
It's consistent through and through. 3/*
Take a look at this comparison image of TF2 heads and think about what you see. 4/*
Really break down these heads, and you'll find a ton of little nuances that keep everything within a consistent style. 5/*
For example, compare the angles of every nose to every forehead. With only minor tweaks/variations, the angles always match. 6/*
With small choices like nose-forehead angle consistency, the artists build a consistent style which they can easily replicate. 7/*
Similarly, look at the color palette. Top is skin, primary team colors, secondary colors, and tertiary colors. Bottom is metals. 8/*
With this tightly restricted palette, the artists build patterns and variation while maintaining strict control to keep consistency. 9/*
These colors stretch not just across characters and weapons, but across the environment as well. 10/*
Limiting the palette forces the artists to use shape language and materials to define different areas of the map. 11/*
As a direct result, the two teams end up having distinct identities despite being functionally identical. 12/*
Additionally, this identity makes gameplay more fluid by ensuring players always know where they are by distinct landmarks. 13/*
This environmental design also pulls double duty by accentuating the identities of each team member. 14/*
If we look at this early screenshot, we can easily determine who is on which team at a glance. 15/*
The cool tones of the Heavy in the foreground contrast with the colors of the red base and the red team members. Instantly readable. 16/*
This means you're always going to know when the dude in your base is on your team or the enemy team. Their colors ALWAYS contrast. 17/*
The shape language example from earlier also plays into character design by making silhouettes recognizable, even partially obscured. 18/*
With distinct character silhouettes, you get instant readability. Take the heavy, for example. Even mostly cut off, still recognizable. 19/*
Now, with those things in mind, let's look at some stuff from Overwatch. 20/*
What does Overwatch do well? Material reads, silhouettes, character recognizability. Even with different skins, they're distinct. 21/*
However, we quickly run into problems! For example, which team are these characters on? 22/*
Is Genji throwing stuff at Sombra because he's on a different team, or is he throwing PAST her? 23/*
[short break, back in a few minutes] 24/*
[midnight tacos acquired, back to this now] 25/*
By contrast, what happens if we shift some colors? Suddenly we get a better understanding of what's happening in the image. 26/*
This same principle seems to apply to most screenshots, marketing or no. Even with good silhouettes, team readability is tough. 27/*
Part of the problem stems from not having distinct teams, despite OW's built in fiction of Overwatch vs... everybody else. 27/*
Considering the roots of Overwatch's style AND gameplay, it's odd to me that things as simple as team colors are not standard. 28/*
"But wait! Overwatch HAS team colors!" 29/*
Does it though? What happens when we switch the HUD colors? Which team is Pharah on now? 30/*
This highlights a fundamental principle of team-based games. Specifically, who's on your team and who's not. 31/*
In this case, Overwatch's main theme— two teams battling for control of a map — becomes muddled. 32/*
Despite the fact that these characters are all instantly recognizable by their silhouettes, they become unreadable next to each other. 33/*
Their overall designs, while solid and displaying fundamentally good character design principles, fall apart in a group. 34/*
Contrast the above with the almost exact same image, at MUCH lower resolution, from TF2. 35/*
Some areas become muddy because of similar values, such as the scout/sniper/soldier, but the rest remains crisp. 36/*
This shows something interesting: Even with an extremely limited palette, TF2 designs remain distinct. Why? 37/*
The cause is twofold: 1. TF2 designs have larger areas of visual rest. 2. TF2 characters have a much stricter value hierarchy. 38/*
This value hierarchy shows itself in the use of illustrative rendering and by specifically painting color gradients into characters. 39/*
While the OW designs are clean, they rarely show this value hierarchy, and thus become difficult to read. 40/*
Lucio, Junkrat, Roadhog, Soldier 76, all these characters fail to establish strict definition between light and dark values. 41/*
Additionally, many of these characters have areas of visual noise that do not read well at a distance. 42/*
However, there is one standout character in Overwatch that bucks this trend directly. Like it or not, she's also the face of Overwatch. 43/*
While I'm not a huge fan, Tracer is the strongest character design in the game by leaps and bounds. 44/*
And no, it's not because of her ass. 45/*
She's the strongest because, out of all the characters in that group shot, she's the only one with a readable silhouette. 46/*
This brings us back to value hierarchy. It brings us to the understanding that her bright yellow tights highlight her function: 47/*
She's fast as fuck, and her design accentuates that in every way. Her legs are impossibly long, and her design is sleek. 48/*
And the thing that makes her design readable is the huge splash of color with a single gradient going across it. 49/*
This is something every other character lacks, to some degree, and the main reason they don't read well. 50/*
So, to tighten the visuals of OW and make the characters function better in gameplay, they all need to take a lesson from Tracer. 51/*
Eliminate the small details, or bring their values closer together. Use those huge splashes of color to differentiate characters. 52/*
Introduce team colors and eliminate colored nametags and visuals will be cleaner. 53/*
And consider giving more visual identity to different areas of maps to accentuate when you're in the wrong neighborhood. 54/*
Alright. It's almost 1am and I'm spent.
Thus ends the current chapter of my ranting and raving.
55/55
Thus ends the current chapter of my ranting and raving.
55/55
