Monday, November 9, 2009

Visual Clarity in Character Design (Part I)

Monday, November 9, 2009
With the release of Left 4 Dead 2 coming up, let's talk about visual clarity in character design. Valve has learned quite a bit about doing it right in recent years, so it's worth dissecting a few of the lessons they've learned.

We'll start with some background, and then cover three main concerns: silhouette/scale, color/patterns, and materials/detailing. In another update, we'll apply these lessons to less than successful character designs in another existing game and see what we come up with.

The L4D Survivors before and after major reworking, after Turtle Rock Studios' absorption into Valve proper.

Valve's visual bravura arguably dates to Half-Life 2. But HL2 was more of a breakthrough in terms of memorably drawn characters, rather than a variety of pragmatic concerns we'll be discussing here--a single player game with invincible/high health friendly NPCs is not the same as designing for team/co-op multiplayer.
By pragmatic, I mean the kinds of things that have a direct impact on gameplay. For this, we'll look at Team Fortress 2.

Players may remember that TF2 was originally--circa 1998 or so--going for a more realistic visual and gameplay style (seen at left).

Thankfully while in development, in they were soundly swooped by a number of different games, most notably the Battlefield series of games.

TF2 was ultimately redesigned closer to the original Quake mod roots of the game, but with a clean, stylized look harkening to the work of classic 20th century commercial illustrators.


We see the particular stamp of Moby Francke's visual style, which from an outsider's perspective seems to be the strongest artistic voice on where TF2 would end up, visually. (I have no doubt this greater movement toward visual clarity in character designs was due to others artists as well, but Francke's work seems the single best artist at the company I can point to.)
Prior to his work on TF2, witness his Counter-Strike: Source model sheets (below and to the right).

While the character designs had already been more or less decided with the mod version of Counter-Strike, notice the presentation of the model sheet itself. Major shapes and silhouettes are emphasized over detailing or texture.

This is a crucial concept governing much of the successfulness of TF2: a clean, uncluttered, "readable" look. The CS:S models are not hugely different from the original CS characters, but they are an iterative improvement and a step toward what would become TF2.

Below, one of Moby Francke's character designs for TF2. Same presentation for the model sheets as for CS:S, but with the style of the game he's able to work in more memorable silhouettes. Simply by considering the various TF2 characters with relation to each other you can reverse-engineer most of these lessons--but let's talk about them more in detail.



Silhouette/Scale

Even some of the most casual players are probably aware of silhouette design issues. This is perhaps the single most important factor when designing any videogame character. Look below--do you have trouble identifying any of the characters below solely by their silhouettes?
With TF2, Valve realized that the more quickly the player needs to identify other characters and act on that information (friend or foe, what class the other player is) the more important it becomes. The demands of a hardcore, team-based competitive multiplayer game helped drive the visual style for TF2 to not only be attractive, but also transparent to the needs of the gameplay. This transparency would be honed and show up again with L4D 1 and 2.



Character designs can be placed on a spectrum from the naturalistic (L4D) to stylized, to the almost completely abstract (say, Space Invaders). Above, these characters are all nominally human, but their silhouettes vary wildly. The more stylized the game, generally the more wiggle room you'll have to play with in terms of defining through silhouette.

Scott McCloud's Understanding Comics has a very useful lens to consider this concept--the "Pictorial Vocabulary"--that applies equally as well to videogames as it does to comics. (A more detailed version with examples of this is available here.)


As games become more abstracted either up or to the right of this triangle, the more dramatic the differences in silhouette (may) become. Game mechanics tend to track similarly, though it is not strictly correlated. (There are a lot of games with somewhat realistic graphics but highly abstract mechanics and world.)
Start with a normal human silhouette, think about the various different messages it sends--height, weight, gender, age; the interrelations of shapes (held weapons also count a lot for unique silhouette), the character's most common postures, style of animation, etc. Silhouette is one of the most identifying factors so long as the character in question is not significantly occluded visually, or they can be clearly discerned from the background.


It's worth noting that for L4D, silhouette will also communicate important information like being gravely wounded--once a player has very low health they transition to the stooped, wounded stagger in place of a normal gait.

The natural corollary to silhouette is scale. A silhouette may identify a character well, but introduced together with scale variation, a character's readability is boosted considerably. With L4D, all characters are realistically scaled/silhouetted human characters (no giants, no dwarves, and no spikey anime hair) and yet the characters are all well differentiated on these grounds.


Color/Patterns

This is one of the least appreciated aspects of good visual character design. Clear, simplified application of color and pattern can be one of the best ways to create well differentiated characters--and it is here that arguably the L4D character designs are strongest.


Let's look at character concepts for both L4D1 and L4D2. Then consider the color schemes, divorced from all other aspects besides color by applying them to the same Lego minifigure-like template. Players familiar with them will have no trouble naming all 8 characters:


Simple, strong combinations of colors in different arrangements can by themselves create memorable, easily differentiated characters that can be IDed by the player under duress reliably, which is the holy grail for functional character design.



Materials/Detailing

Out of all concerns, materials and detailing are some of the most difficult to explicate, but still crucial to overall presentation. Material choice--say, a glistening bright shine on armor or a weapon vs. a matte finish--can go a long way, especially when other information isn't available to the player.
Extremely low-light conditions will strip players of color information, leaving only silhouette cues and in many cases not even that. Extremely reflective materials, on the other hand, will still "read" differently than matte ones in low light. (Which is part of why most real-world military firearms feature some manner of matte finishing, parkerizing and the like--so they won't reflect sharply in the dark.)

The associated problems here are why we've got the single biggest crutch for videogame character design: glow-y bits. Everyone from Sam Fisher to Marcus Fenix can orient themselves easily in a pitch-dark room, thanks to gratuitous glow-y bits. Your future power armor design lacking that necessary punch, or clarity? Glowing tech-bits are every lazy s.f. concept artist's best friend.

The slippery slope.

Detailing is a sort of catch-all description for other concerns too numerous for the scope of this article, including the overall visual complexity of a character. As such it should be considered carefully, as should the overall visual complexity of your game, as it relates to your gameplay.
Marcus Fenix and the other COGs in Gears of War are deceptive cases: with careful deployment of certain techniques, in combination with more overt ones such as glow-y bits, you can still maintain fairly good legibility--even if tastefulness remains elusive.

Color-overlay shaders reveal a breakdown of basic visual clarity in UT3.

But it can be tricky--Gears of Wars' near sibling Unreal Tournament 3, despite a very similar aesthetic, fails almost completely in terms of clarity of visual design. Busy, techy character designs against busy, techy backgrounds mean that in team games, characters and vehicles (!) at mid-to-long distances are overlayed with a red or blue shader shell, in order that they're readily perceptible at all.

I apologize if some of these concepts aren't fully explained, but with Part II we'll be applying all the lessons to some existing designs in another game. In the meantime--what are your favorite examples of visually successful and spectacularly unsuccessful visual designs for videogame characters?

Further viewing: Illustrative Rendering in TF2 Presentation

16 comments:

gerudo rivera said...

this article was nicely illuminating (like most of your stuff) and it explains pretty clearly some concepts that many game players, reviewers, and even designers either take for granted or (apparently) don't understand

you couldn't have picked a better counterexample to these concepts than UT3, and the "slippery slope" chart got a laugh out of me... you'll probably see it reposted in various places before long ;-0

Anonymous said...

Very nice article. I've thought about color and silhouette before, but materials never occurred to me.

Also, I'm loving the structure of the last couple posts that illustrate both successful and less-than-successful approaches to explain broader game design issues.

One game I thought approached these concepts very well was the somewhat recent JRPG Persona 4. Nearly all of the game's would-be heroes were (surprise, surprise) ordinary teenagers, but unlike most JRPGs, Persona 4 didn't place those characters in a total fantasy world, which lead to a unique character design challenge. The party characters attend a high school that requires uniforms, and so the game has to make them stand out without going far enough to make it seem like they're simply ignoring the rules that everyone else has to follow.

This is most evidently done with associating specific colors to the different characters. Some of this is done with the easy/lazy anime convention of unnatural hair color, but most of the characters don't rely on that. Some wear a brightly colored jacket or sweater over the uniform; another has a pair of headphones around his neck; one wears a regular t-shirt and wears his uniform unbuttoned. Nothing too outlandish for a school environment, and it still works well enough to make the characters stand out.

The game also establishes fairly strong silhouettes without them being overly stylized. The game's title screen actually has all the characters in silhouette, which shows that they're all clearly identifiable, and also shows how much the game communicates through the posture and posing of the characters. Being a JRPG, there's lots of dragging conversations that leave the characters standing around for a few minutes. While doing so, the game uses a pose unique to a certain character that helps them stand out in terms of silhouette and personality (one will frequently cross his arms casually, another will stand impatiently with her hands on her hips, etc). Since this type of game doesn't have much animated character movement at all, these still poses have to express a lot.

One draw back of successfully making the ordinary high school gang stand out so well is that everyone else in the school and the town then look like the lifeless extras they are. No other NPC gets the privilege of of having an iota of personality expressed in their appearance.

It seems that, in some cases, the game world has to become less exceptional so that the heroes of that world appear more exceptional. For single-player games, I'm not sure this is always the best trade-off.

chiasaur11 said...

Well, just thinking about power armored super soldiers, and I understand if I'm disagreed with, I think Halo did a solid job character design wise.

The Elites look like your level enemies, Grunts look like pushovers, Jackals look a little nastier, and Hunters look like they will violently rip you limb from limb. Quick, easy threat assessment.

shinymans said...

I have to say that I didnt find the Gears character designs and art direction good at all. COGs, especially the ones with shiny bald heads, would often have too many glowy bits obscured and end up looking like locusts because basically everyone in the game except for that one girl have the exact same build.

rossmum said...

Glad they changed Bill's design - in that case, simplifying him visually also made him actually look like a Vietnam veteran, rather than someone who'd paid a few too many visits to the local surplus store.

In terms of readability of player characters, Borderlands did fairly well too, I feel. Although you have two pretty huge characters and two pretty small ones, it's not hard to tell each pair apart, even as the LODs start to kick in. Obviously a team also has the ability to change their characters' colours to stand out as well, but even if they all stay with shades of green, grey and brown, the silhouettes and scale difference suffice.

I also agree with Chiasaur, although things got hazier as numbers started appending themselves to the title. In Halo 1, threat assessment took about a milisecond and no real conscious thought. If anything really shone or glowed, it was an Elite, and its similarity in height and build to the player made it obvious that it was more or less an equal. If it had a big glowing circle, it was a Jackal; they looked more sly than menacing. Small pointy things that made funny noises were as dangerous as they looked, which is to say not at all. The feeling that you could probably step on a Grunt and not notice was a pretty good hint as to their individual strength. Hunters looked well and truly dangerous, and were easy to spot from any angle; the huge hulking blue thing with spikes was hard to miss. Each of these differed in height, colour palette, and looks; even someone playing for the first time with no prior instruction could work out what was a problem and what wasn't. Even later as Sentinels and the Flood were introduced, they were easily distinguishable. Halo 2 managed to keep things somewhat similar, but Halo 3 made long-range assessment a real problem. Everything glowed, everything wore about ten different types and colours of armour, and you often couldn't really tell a Brute Chieftan apart from the lowliest in the pack until he'd shoved his hammer a few feet up you.

I'm all for detail, but a lot of games are beginning to take it too far or assuming that random metal joints and glowing panels are a good substitute for well-planned visuals - they're not.

gauss said...

gerudo: Thanks man. I don't think the writeup is as clear as it could be, but I hope that the next entry will demonstrate more effectively by way of actually doing.

And it's a shame about UT3. The game fights itself on a couple of different levels. If the play were slower or simply different--I'm actually kind of intrigued about the possibility of having to pick out targets in a busy environment. Target acquisition is one of the strange thrills of, say, ArmA2.

Anonymous: Yeah materials are going to play more of a part as graphical fidelity marches ever onward. We used to not have anything like enough memory to handle that sort of subtlety, but now we're to the point where we have more than enough. Leather and metal and cotton and spandex all look very differently, and material choice can make all the difference between a good/clever character design and a cliche one, all else being equal.

As far as Persona goes, absolutely. To cop a phrase, some Japanese companies have forgotten more about tenants of strong character design than we've ever learned. Dealing with characters that are all dressed in the same uniform but all look unique is quite a test of skill.
And really, the idea that other NPCs in the world are dim and ordinary by comparison sounds completely appropriate given that the protagonists of Persona -are- special, right?

chiasaur11: Yeah there are too many nuances to address here. The article seems to poo-poo non-realistically grounded character designs but Halo had some very effective enemy designs... and the ubiquity of Master Chief imagery is a testament to the staying power of the Spartan armor design.

rossmum: Yeah it was funny at the time to track what seemed like an internal beard debate: all the original survivor males were bearded, then seemed to all go clean-shaven, but Bill was able to keep his after all, thankfully.

Borderlands does have nice character work all around. I think the 4 mains still look a little oddly like enemy NPCs but maybe that's just me. Overall, it's hard to imagine the game having stuck with it's original look--does anyone even remember what it looked like?

Me, I'm all for a strict moratorium on giant pauldrons and glow-y bits. It's all lazy as hell at this point.

Zwebbie said...

Nice article! A lot of it can be found in Valve's commentaries, but I do like the colour comparison.

A game that I'd pick as an example of good character design is Company of Heroes. It has a lot of things working against it; it's an RTS, all the soldiers are young , fit caucasian males and the style is realistic. Nevertheless, the uniform design is very clever, in my opinion.

The uniforms have gotten a bit of flak and there are plenty of re-skins out there. Admittedly, they aren't very realistic, but they do their job well.
Most of the Axis troops, for example, walk in grey/blueish camouflage, which obviously isn't a terrific choice for Normandy. It does make them all distinguishable from the Allied troops, who wear green and brown uniforms.
On top of that, special troops have even more outlandish colours. Axis Pioneers (the builder units, so to speak) wear purple purple and Snipers wear pink. A bit odd, as you might imagine, but extremely useful in the game - you could do that colour comparison that you did with L4D and it'd actually work.

It's also very useful when you're watching a Youtube shoutcast of the game. I once saw one by someone who had a skin mod installed, and I had no idea what was going on anymore, because in an online video, colour is pretty much all you can use to distinguish units by.

Anonymous said...

"even if tastefulness remains elusive" hahahah, yes.

The benefit of widely different silhouettes was noted by a flatmate of mine way back in the days of Quake. The Quake 1 bestiary remains easily identifiable even in silhouette - the creatures vary quite exotically in both size and shape, even the number of limbs being different. Useful in a game with a lot of interplay between light and shadow.
I wouldn't want to credit id as being as concious of this as Valve, but it's what I immediately thought of when touring the commentary nodes in TF2.

theworm said...

I couldn't agree more. I remember playing the demo of 'Enemy Territory: Quake Wars' and got utterly frustrated with it. About 30% of my playing time was spent trying to differentiate friend from foe AND people/vehicles from the buildings and landscapes. The two sides had very similar colouring and patterning of armour and both they and the vehicles has insanely detailed textures which made picking them out from the insanely detailed world textures unbelievably hard.
In fact it was so bad you could not see someone lying prone in grass, the visual detail merged so well. Now if the game was meant to be a slow paced, tactical battle sim (like Operation Flashpoint)I could see the point, but this was intended to be a fast paced shooter where quick target identification was crucial.
Felt a bit like no-one held a cohesive vision for the game and the game designers never spoke to the artists, or they did but no-one understood what you talk about in your post.

Jonathan Sheets said...

Counter-Strike(1.6) was my first online FPS and whenever I have looked back at that experience, being unable to immediately differentiate between friend and foe (and getting shot in the head in the moment it took to figure it out) is always the most interesting problem I had with the game.

Visual clarity is definitely a part of it, but I personally think that the real problem (aside from friendly fire disincentivizing a 'shoot first' policy) was my familiarity with the level layouts.
I eventually moved past that problem by knowing when and where to expect an enemy even if they weren't there. (If there's someone around this corner, he's a Terrorist)
Really though, that this was such a big deal in the first place was a result of CS's one-life model (I would die then sit around not having fun) so it shouldn't be surprising that the solution is also an artifact of the same system.(The comparison to Football(A) hadn't occurred to me until now, but I imagine that keeping track of who players are is a similar problem with similar solutions)

It's interesting how incredibly time sensitive those expectations are though. Astoundingly enough, this has managed to become a convoluted reflection of another behavior that is, for me at least, extremely (and interestingly) time sensitive: spy checking in TF2.

But I digress. Anyways, good post and good blog in general.

Anonymous said...

Glowy bits are cheating, and in most games it is just laziness. But how would you approach Splinter Cell without them? The game is pseudo-realistic, so Fisher has to be wearing black. It's a light/dark stealth game, so you have to be able to tell how visible you are while still keeping track of him, and he has to be distinct from the guards in shadow. They went with a distinctive gait (especially when croucred) and uniquely colored glowy bits (that gameplay pretends aren't there), but I'd be curious how you would do it.

gauss said...

Thanks for the comments everyone.

Anonymous: Honestly I'm a bit puzzled by the insistence of glowy bits in Splinter Cell, despite them being central to the iconic design of the series' covers and main character. ("Huh. My NVGs glow bright green. Isn't it weird that guards never seem to notice?")

But by the same token, it never bothered me all that much, bizarre as it is. The stated design reason I've always heard, (besides the unimpeachable "because it looks cool,") is so that the player can always know at a glance where Sam is facing (as well as fairness concerns in competitive multi).

In the former case, I don't buy it.
It calls to mind the personal non-issue of games that show a status icon to indicate that you're currently crouched or prone: really, is it that hard to tell?

Maybe a mental checklist: am I moving slowly, or extremely near to the ground? It could be I am crouched or prone. Please talk to your doctor for more information about this condition. If you've crouched your character and forgotten about it and it's somehow a problem (especially in COD, where sprint will cancel a crouch) then you deserve everything that's coming to you.


Sam Fisher is tough though, no doubt. Because he can move independently of his camera (if memory serves), meaning that I can press "forward" but actually be heading backward relative to the camera, it's pretty tough if you can't actually tell where Sam is going.
Now whether or not that was a legitimate problem that came in with testing and the game itself, or more of a legacy peripheral issue relating to the original Splinter Cell's release on original X-Box, making it a game played by a whole lot of people with bad televisions for displays who literally could not where Sam was pointing without something glowing. I think (hope) the quality of most players' displays has improved, but it could be that original logic still reigns. All just conjecture at this point.

Anyway, to answer your question I think that Velvet Assasin had a more elegant solution to the same problem. Violet's outfits designed without restriction, and then when she moves into deep shadow, a soft, deep purple fresnel shader is applied to her. This does double duty in both letting the player see their character, and also an easy way to tell the player Violet is successfully concealed.

With old Sam Fisher, you've got glowy bits to orient to visually, as well as an additional HUD light meter to tell you whether or not you're concealed. A visual design element that eliminates a HUD element is always a plus to me.

Anonymous said...

Usually I must decide weather or not I'm crouched in a few seconds and instead of going through the mental checklist I just hit the button to toggle crouch which is very annoying because then I have to un-crouch again right after if I was wrong.

This happens a lot in games where you movement is hindered and you don't realize it or when crouching will put you underwater so the floor seems closer.

So in short I like the crouch display.

Anyway, I noticed that in Half Life 1 the graphics meant that enemies couldn't be varied and still look human so they made the enemies aliens and the soldiers are green, while the science are white and the guards are blue. Your orange but that is not that important.

Ben said...

Since reading a bunch of your posts, they now stick constantly in the back of my mind (visual signs of upcoming events, pacing of levels, silhouettes etc...) whenever I'm playing anything or looking at game footage. They came back to me recently when I took a glance at Capcom's latest Super Street Fighter IV character reveal trailer, which can be found here:

http://www.youtube.com/watch?v=_zY1WGnnlLk

At 1:12 is the entrance of Makoto (previously seen in Street Fighter III: Third Strike), and I have to say I was rather disappointed. Of all the colourful roster of characters Capcom has rebooted for this installment, Makoto seems to have been given the least attention.

First off, in case it's not clear from the trailer (which it wasn't for me, as I had never played SFIII and had no prior knowledge), Makoto is actually female. Not only that – and this is my biggest problem – her basic appearance is strikingly similar to Ryu's (white karategi, black belt, dark chunky hair) albeit the signature red headband is missing (though she is wearing a sort of red corset under the gi), and the sleeves are not torn off either. It's almost led me to believe that her long yellow neck scarf (which hardly sticks out either) was stuck in there haphazardly to at least discern her from the others.

Of course, it's a beat'em up and most players will likely not be preoccupied with her looks, but more her abilities. Still, I think there's something to be said for wanting to play as a character that's 'cool' or a character that resembles your playing style. Some folk enjoy playing a character who likes to dish out huge amounts of damage in one go, albeit slowly; they've got Zangief to personify that - an overmuscled Russian powerhouse who's got plenty of scars detailing that he's been in more than one scuffle before and isn't afraid to give back as much as he's taken. Then there are others who like to play fast and flashy. Voila - Ken. Strong blast of yellow hair combined with bright red gi. That colour scheme alone gives an impression of speed, no?


Now this is sidetracking your post. Instead of thinking about who I thought was the most/least visually clear video game character I've encountered – it suddenly hit me about, humm... what’s the best phrase here? Audible clarity?

Basically, you have mentioned the colour schemes and silhouettes of the L4D characters, so when you're marauding through a pack of zombies, it's easier to know what not to shoot and the player(s) plans accordingly how he'll get out of the mess, right? I was then led to wonder about how sound plays a role in all of this overall “clarity”.

The whole audible part got me thinking about, of all things, Blizzard's Starcraft. Yes, it's a completely dated game, and the sprites look pretty lame by today’s standards, but with hindsight where I thought it excelled (the strategy part notwithstanding) was in sound effects. Even if you weren't watching the screen, you could tell what units were attacking and what units were being killed. Even if you were scrolling across the map, you often were able to hear distantly what sort of fight was going on (i.e. aerial units devastating your ground units) and could then build or attack accordingly, e.g. get your ground-to-air in there before you’ve wasted all your money.

So it’s led me to the question about what do you think of the whole sound effect design part of creating a game? What sort of experience have you had with it? Have you had to sit in near-endless sessions hearing a plethora of gunshots hitting wood, brick or soil deciding which one fits best? Surely you can’t have a jump scare in complete silence?

Ben said...

Given the recent reveal of the new Devil May Cry (which was just titled "DmC") at TGS, and the fairly vocal fallout upon seeing the trailer, any thoughts/observations on Dante's new look?

gauss said...

Hi Ben--I can't claim status as a fan of the earlier DMC games, but boy does the new Dante seem provocative on a few different accounts. I think there are a number of important factors at work, not the least of which are Ninja Theory's own ideas of cool but likely there are some questions of appealing to a new audience... or is that valid? No question anime-styled characters really have no problem with uptake among younger video game players. Is it a question of change for change's sake? I certainly have been thinking over the new Dante--I may have to spend some more time scrutinizing the old character design and comparing the new one. Thanks for the comment.

Post a Comment

 
gausswerks: design reboot. Design by Pocket