Visual Language and Street Fighter

Video games have a voice, and it’s quite interesting to me to see how they communicate. An unfortunately large amount of games speak to the user in very literal ways: through writing and sound. A tutorial consisting of a series of text boxes or voice commands is tolerable (though grating in some cases), but a more elegant solution is preferable when possible. It's when the game dis-empowers the player completely that I think such methods commit a cardinal sin of game design. Video games are a visual medium, and the most important feedback a player can receive is through observation. I don't need to be told that piranha plants will kill me in Super Mario Bros., even if I've never played it before. I can figure that out simply by looking at them. That's visual language, and it influences us in ways we might not even notice. Every single game we play utilizes it, though some better than others. There are probably a hundred videos and articles out there explaining how genius the visual language in The Legend Of Zelda, Doom, Mega Man and other classics are, but what's more interesting to me is how fighting games take advantage of this concept to teach players extremely complex and dexterously challenging systems.

Fighting games don't have a "level 1" with which to slowly introduce a player to their mechanics. In the old days, you dropped a quarter into a cabinet and jumped right into a match, where you got your shit pushed in over and over, against man or machine. And even while getting digitally dunked on, you'd be learning how to play, getting better every time you did it. It's this steep, never ending learning curve which makes fighting games so compelling for some people. It's no wonder that they took off in the 90's with the release of Street Fighter 2, a game which still sets the benchmark for the genre.

I attribute the great success of the Street Fighter series partly to its marvelous use of visual language. And I further attribute the relatively slow growth of its audience, the near death of the entire genre in the early 2000's, and its notoriously high barrier-to-entry to a severe lack of good visual language in many respects. How can something have both excellent and terrible visual language at the same time? We need only look to Street Fighter 4 for examples!

Let's assume you've never played a fighting game before, so you just hop right into a match against the AI. Upon selecting the character you most identify with or would make the best waifu, the game pretty much drops you in and makes you fend for yourself. But right away you're given enough information to at least familiarize yourself with the playing field before your inevitable, shameful defeat.



Since I picked Ryu, it couldn't be made more obvious to me that the big yellow bar next to my characters portrait is somehow linked to me. It's above my character, on my side of the screen, with Ryu's name under it. This is the same format used since Street Fighter 2 to indicate our life bars, and the reason it hasn't been changed in 20 years is because it's perfect. You can't do anything else to make it better. If one somehow didn't know what a life bar was, the game would be quick to teach them:



I don't care if you've never played a video game in your life, you know that getting punched is bad for you. When the long, yellow bar connected to your character is reduced because a Mike Tyson look-alike clocks your stupid face, you'll know right away that you should always want that yellow bar to be as filled up as possible. We take such a simple and obvious visual cue for granted, but there was a time when game designers just didn't know about this stuff. Street Fighter 1, for example, positioned both health bars in the center of the screen, one atop the other. Other early fighting games used numbers instead of bars.

Now, take a look at the first picture again. We can figure out a lot more than just our life bars from the start of the round. First, that there is a time limit. Second, that some strange series of blocks with the word "combo" at the end and a 3/4ths circle with the word "ultra combo" in it are also connected to us in a similar manner to the life bar. And third, that the stage we're in appears to be only partially revealed to us. One only needs to wiggle the stick around to discover that the stage extends both forwards and backwards from the player, and that they can not see the whole stage at once.

All of this is so intuitive that it seems weird to have it explained. You might think, "Duh, of course that's how it is, anyone who's played the game could tell you that." And it's true, but that's my point. This is visual language so strong even a child could understand it. That alone is appreciable on some level, to be able to convey such information so vividly. Stuff like HUD’s and menus are the groundwork of visual language, any competent development team knows how to make them because they’re something the player needs to utilize constantly. So, let's move on and examine something a little more complex and unique: blocking.

For any readers familiar with traditional fighting games, ask yourself this: how did you figure out blocking? Did someone tell you? Was it through trial and error? Do you even remember, or was it so simple that you forgot how you even learned it? For those few not in the know, in many traditional 2D fighting games one blocks attacks by holding the stick/d-pad in the direction opposite their opponent. Unlike Mortal Kombat or Smash Bros., there isn't a block button. A block button is easy to figure out, just press everything on the controller and you'll find it eventually, but directional blocking is a bit trickier to teach. The way Street Fighter does it is pretty brilliant.

Start with the obvious: walking away from your opponent is an inherently defensive action. If you don't want to get punched by a mean person, walk away from them. Perhaps by mere chance most of us found out that we could block attacks when we were trying to get away from our opponent. But by walking away you would put yourself out of range of your opponent’s attacks in the first place, and you can also block while sitting still by holding down-back, which isn't a very instinctive action. Even though it’s possible many players discovered blocking on accident, I think there’s another reason. Watch what happens when Balrog throws some jabs in Ryu's vicinity:


Ryu flinches, stops moving and enters his block animation even though he's not being hit by the punches; the same thing happens while I'm crouching and holding away. This only occurs when you point the directional stick away from the opponent. If you're standing still, or holding forward, or any direction but back or down-back you won't activate these animations. Street Fighter has what is known as proximity guard. Every attack in the game has a hitbox, which registers whether or not the attack collided with your character, and a proximity guard box, which tells your character to enter their blocking animation when the attack is within a certain range of them and you're holding back or down-back. Not only does this help to teach players how to block without actually putting them in danger, it indicates how powerful an attack is too. Stronger attacks have bigger proximity guard boxes and leave the player stuck in the guard animation for longer.

Incidentally, proximity guard happens to open up the game for some very strange exploitation and abuse, but the idea behind it is clever. At some point you're going to be walking away from the opponent, and at some point your opponent is going to be trying to attack you at the same time. Proximity guard increases the chances of someone organically learning to block while reducing the chance of them being in real harms way simultaneously. So, now a prospective scrub has learned how to directional block, but Street Fighter also has high/low blocking. That is, some attacks can only be blocked standing, some only crouching, and some either way. Guess what motherfuckers, the game uses visual language to teach you that too!

Let's start with low attacks, the ones you have to crouch to block. The visual language here is very strong and very obvious; you're going to be able to figure out what all these attacks have in common pretty easily:


Crouching kicks hit low. Crouching punches generally do not, though there are notable exceptions, namely among the two boxing characters who use punches for everything. Even then, there are pretty clear visual cues that indicate where to block. Basically, if it looks like it hits low, it does. Fancy that, huh? It’s extremely simple, but there’s something to be said for consistency when helping guide players in a game.

On the flip side, moves that need to be blocked standing, overheads, are telegraphed with arguably even stronger visual consistency. If someone attacks from the air, it’s safe to assume it hits overhead. Easy. As for grounded overheads, you can spot a theme here:



Almost all overheads look alike. What I didn’t show were the few kick overheads in the game, which, much like punch lows, also share qualities that would indicate to block them high (I just didn't feel like making gifs for them). You aren’t necessarily going to react to an overhead and block it correctly, what’s important is that when you get hit by it that you know exactly what happened so that in the future you’re more ready for that option from the opponent. In the heat of the moment you may not know what hit you unless the game provides this information in an easy to see way.

There are a lot of other ways Street Fighter uses visual language well, but I think it’s important to also know what bad visual language looks like. Whether intentional or not, the Street Fighter series has a lot of it. It begins with another very basic feature: throwing.

Every character has a throw, known as a normal throw. Throws can not be blocked. Courtesy of our renowned Russian wrestler Zangief, here’s what a normal throw looks like:


Guess how fast a throw is? If you go back to the gif of Balrog jabbing at Ryu, the jabs that Balrog throws are 3 frames in startup. Since Street Fighter runs at 60 frames per second, the moment the Balrog player hits his jab button, it only takes 30 milliseconds for that jab to come out. A well trained human might be able to react to the startup of a 14 frame move in Street Fighter. My point is, a jab is really fucking fast, it’s far beyond the capabilities of any persons reaction speed. A throw is just as fast. So imagine those jabs that Balrog is throwing, but you can’t block them, and they do a 10th of your life and knock you down. There’s a reason one of the most infamous complaints new players have about Street Fighter is that throws are cheap. The truth is that they aren’t, the game simply fails to convey important information about them, like their speed. How would anyone be able to tell that a throw is as fast as a jab? Here’s what a throw looks like when it misses:



What this would wrongly imply is that throws are slower than they are. The truth is that everything you see there is not a throw; it’s the animation of a throw missing. The actual animation for the start-up of a throw is almost nothing, because it’s so fucking fast. Additionally, throws are much shorter than they appear. You can see Zangiefs hands passing right through Ryu like he isn't there.This is frustrating as a player because you have no good reference for how far away someone has to be for you to throw them. It’s not just point blank, it’s a teeny tiny bit further than that, and that range makes all the difference between getting a vital grab and getting slapped in your kisser. It's important to note that you can stop someone from throwing you by doing a throw tech. Essentially, when someone throws you, you have a small window where if you also press throw you’ll completely negate their attempt. This window is 12 frames long, and has no indication of where it stops or ends. The game never tells you or hints in any way that you can tech a throw. You’ll learn that you can by complete accident only. Have fun.

A few characters have special throws, known as command throws. Command throws can NOT be stopped. If you’re hit by a command throw, that’s it, you can’t tech it and you take a large chunk of damage. Guess what idiot, these moves are sometimes faster than normal throws. They can be 2 frames rather than 3, which means they'll beats every normal throw if done at the same time. How would you know that? 3 frames is fucking ridiculous, 2 frames is so fast you can’t even comprehend it. It takes 100 milliseconds for you to blink, those throws are five times faster. Five Zangiefs could spin your ass halfway to Siberia one after the other before you open your eyes. They also have a range WAY bigger than you'd think. Like, it’s funny how huge the distance is. Once again, the patriotic Zangief demonstrates, using his Spinning Piledriver™:


It happens instantly. You’ll be minding your own business, and then suddenly Zangief is there, and his arms are around you, you’re upside down, KO. There’s no visual language, only the sting of defeat, and a cry of rage echoing in the night to signify what occurred. The only language we speak here is a language of hatred and fear, and it is universal. Note, by the way, that you'd never be able to tell just based on the animation that a Spinning Piledriver™ is faster than a normal throw. It certainly looks slower, doesn't it?

In all seriousness, while Zangiefs command throw is really good, it has problems, namely in that if the Zangief player guesses wrong and ends up whiffing it he’s open for serious punishment. But as a new player, characters like Zangief are the scariest of them all, because throws are so powerful when you don’t really know what they are. And the game fails to teach on any meaningful level.

Then there’s bullshit like Blanka, who seems to break every rule of visual communication that I can’t even make enough gifs to show you. Just watch this video:


Blanka is actually pretty bad. But if you’ve never played against him before, you’re fucked. He thrives on being weird and impossible to understand. This is intentional. Why??? It seems like this only discourages new players from picking up the game. It’s a baffling design philosophy, but you can see it in every Street Fighter game. For some god forsaken reason, Capcom really likes putting gimmicky bullshit in their fighting games.

A lot of these problems come from a lack of foresight. Capcom balances the game assuming the player already knows how to play. For example, Zangief needs a huge throw range because he'd be pretty bad without it, and that loss of visual language doesn't matter to an experienced player because they'll instinctively know the range just from playing a lot. But I don't think balance and visual language can't be reconciled, I think sometimes developers get lazy. It's easy to change a few numbers to make a throw have better range, it's much harder to create a new animation for the character every time an adjustment is made. However, concepts like throw techs never being taught is unacceptable, and I refuse to believe there's no way to properly communicate it. A developer has to think about applying visual language in every aspect of their game or risk alienating their potential audience. Losing isn't always the worst thing ever, but losing for reasons you can't understand has to be one of the most frustrating experiences you can subject a player to. There's a broken controller somewhere that can attest to that. It's a shame that a series which essentially kick-started the genre, and uses visual language in such effective ways, still has issues communicating to its players.