Design is all about the details

Design is all about details

NOTE: I'm reprinting this article from my old blog which means unfortunately a lot of links are dead. Especially the store to buy the book so I'm removing all of the links.

I suppose there is a place out there for a designer who does nothing but dream up great ideas that some one else gets to implement but every designer I know spends all of their time going over the fine details of a problem. No matter how simple or complex the problem is or the solution what you are really dealing with is the details of all that.

One of the reasons why I love Street Fighter so much is their ability to pay attention to these small details. Granted Sega probably does it better these days with Virtua Fighter but Capcom used to be the leader of it all. You have to be especially when you are creating games that people are playing against one another. Overlooking one small detail makes a character completely broken and if not caught in time can completely ruin a game (see Tekken 4 as an example).

When releasing various versious of Street Fighter over the years Capcom usually tweaks the characters in efforts to fix problems from before. I hate to say balance but thats the best word I can come up with.

Moving on I still find it interesting as to what Capcom decides to tweak going from one version to another. I recently picked up the Yoga Hyper Book which I HIGHLY recommend to anyone interested in Street Fighter nuances like hit boxes and frame data. You can order it here. While only really covering Super Turbo they have a few pages showing the hit boxes/frames for 'important' moves from World Warrior (the 1st version of Street Fighter 2) to Super Street Fighter 2 Turbo (the 5th and final version to actually be called Street Fighter 2).

One of the more annoying moves in that game happens to be Guile's Low Foward (it's a low hitting move that comes out really fast, has great range and quick recovery) which in the hands of great players like John Choi can win an entire tournament alone.

The book includes pictures of hitboxes/frame data for Guile's Low Forward for all 5 games so I'm going to post each one and give comments for them.

Let me explain a few things about the picture before we go into details:

• The blue is the hurtbox for which the character can be hit
• The red is the hitbox for which the character can hit an opponent

OK - lets look at the 1st one aka World Warrior

• 8 is the number of frames of 'startup' - how many frames before the move can hit
• 5 is the number of frames it can hit
• 7 is the number of frames of recovery where it no longer hits but can be punished
• 14 happens to be the damage it will do to an opponent

Notice the blue area goes around his arm and where it stops - before the boot. Notice how the red area stops at the end of the boot. This move was incredible in World Warrior and it is easy to see why - his whole leg is a gigantic hit box!

Champion Edition

Rumor has it that Street Fighter 2: World Warrior got a sequel due to how popular it was in America. The rumor talks about how competitive Americans were at the time and Capcom wanted to satiate their fans and decided to release a 'sequel' with 4 new characters and improved balance. Lets break this picture down a little bit:

The startup, hit frames and recovery are all the same. But notice how the blue and red boxes get shifted around. Guile now gets the ability to be hit in the back of the move as well as a little closer to his boot. However - the red box (the hit box) gets pushed out a little more than the graphic indicates. This was their first attempt at balancing the move out. An interesting choice of decisions.

Hyper Fighting

Capcom was taking a while to come out with another sequel (which would be Super Street Fighter 2 featuring once again 4 new characters) so in the meanwhile urban legend has it that 2 American designers (James Goddard and Dave Winstead) came into to release a minor update to combat all the bootleg rom versions that were coming out (such as Rainbow Edition where you could do all of your moves in the air). This version alone I could probably write a whole article on as it features not one single new frame of animation yet the game was tweaked and is considered by some to best version of Street Fighter. It is also the one that is coming out soon for Xbox Live Arcade (some day...).

For their 2nd attempt at trying to figure out what to do with this move it looks like they left it completely alone from Champion Edition but toned down how much damage it does to the opponent (from 14 to 10 points). Keep in mind that many people consider Guile to be the best in not only World Warrior but also Champion Edition and Hyper Fighting.

Super Street Fighter 2

If you can look back at any game that killed off the Street Fighter franchise it is definitely this game. Hyper Fighting was very fast compared to its predecessor and players got accustomed to it. SSF2 however was around the same speed as CE and it admittedly turned off players who were tired of more of the same old and moved on to other games like Mortal Kombat. History lesson aside lets take a look at how they decided to tweak this great move one more time:

They brought the damage back up from 10 to 14 but they also added a frame of recovery. Notice the red box and how it gets pushed back inside Guile, no longer going past the graphic of his leg arguably having the shortest attack range out of all versions. This also happens to be the first game where Guile is not considered one of the best.

Super Street Fighter 2 Turbo

Another sequel but this time they brought the speed of HF back along with a ton of small changes. However it looks like they decided to leave Guile's Low Forward the same as it was in SSF2.

Final Thoughts

Small changes can have very huge effects throughout your game. Simply adding one extra frame of recovery can alter how a character can compete. Granted there are way more variables than just this one move but thats just it - you need to keep track of them all and realize how they all interweave and what impact they have upon one another. Even if you aren't making a sequel or a competitive game you should still try to keep everything in mind, one small error can result in an infinite combo or getting the character stuck in an animation loop because the exit frame is longer than the animation itself.

Hopefully this wasn't too boring or too Street Fighter-centric but I felt more comfortable using SF as an example to convey the larger topic since I know that game better than most games.

Note: Images hella used without permission. Sorry Daigo.

Game Feel, Part 4

The feel of games part 4 – posing

part 1 can be found here

part 2 can be found here

part 3 can be found here

This is a weird topic to talk about simply because it crosses over into animation. However as designers it is important to keep it in mind. A move can look powerful or weak based on the way the whole thing is implemented. This is something you might argue with over the animators – but it is important that design drives the game and not animation. When animation drives the game you end up with something like Mark of Kri.

So what is posing? Posing is the way the character looks during a move – this could be as simple as where the arms are located or how far away the legs are spread or how the back is arched, etc. With good posing you can almost define the character in certain situations. Everyone in the world who plays videogames knows exactly what Ryu looks like when he throws a fireball or when he does a dragon punch.

I think it was Walt Disney (my google skills are lacking today) who said that people should be able to tell which character it is just by the shadow/silhouette. People seem to only remember shapes of characters, not necessarily what color they are or adornment, etc. In God of War 1 – the undead skeleton character, there were 3 different variations with huge differences – all gold armor, all red armor, etc and most people just didn’t pick up on those things. One of the things that might have helped is grouping them together in a fight (at least 2 – not all 3, that would have been overkill). So that people could see the differences instead of trying to remember what they looked like 30+ minutes ago (or even more if they haven’t played the game in a few days, weeks, etc).

So when you have characters that share the same shape – such as humanoids, it boils down to having really good posing to help sell the character and the motions. When working on the subweapons for Kratos (Sword, Hammer, etc) we had the concept artists just do silhouettes of Kratos standing with each one to help define the idle pose and the overall character of the subweapon.

Capcom used to have a really great pose with Zangief when he did his Spinning Piledriver from too far away:

Here is a good screenshot to convey what I’m talking about:

Zangief has his arms up and he is coming to chase yo’ ass down. Coupled with the fact that he ran really quickly – this move is damn scary still and it’s been over 10 years.

When Capcom decided to do the Alpha series they changed his pose which just doesn’t have as much of an impact:

Here is a good screenshot so you can see the pose I’m talking about:

His arms are by his side and it just doesn’t seem as scary. He is also moving a whole lot slower which basically made this move suck compared to how it used to be.

So while it is up to the animators to make a move look all badass don’t be afraid to offer up some advice on how to sell the overall ‘design’ of the character. It’s the little things that count and that go a long way.

What video game designers can learn from Paper

Paper

Paper by FiftyThree is an iPad drawing app that has garnered a lot of attention since being released. It has won numerous awards as well as the prestigious Apple's App of the year for 2012.

I want to talk about how videogame designers can learn a lot from Paper. No, I'm not talking about using it to create Keynote slides or anything like that. I'm talking about the actual design choices they have made and how it relates to videogames.

Do One Thing and Do It Well

Paper launched the same day the iPad retina was released. It had the benefit of looking beautiful when people were looking for apps to show off on their new device. The Verge even went so far to say it was the Instagram of drawing apps. With or without skill your drawings were going to look better than ever before.

It broke tradition in comparison to other drawing apps which overwhelmed the user with tons of choices. Which type of brush to use, what size of the brush, what color, etc. Paper launched with a lack of options. A free app that only gave you pen and a handful of colors to play around with.

When it launched it also was one of the first apps to attempt In App Purchasing and not be a game. The IAP was for the various 'tools' that the user could purchase. One of the great things they did with this was really call out each individual tool (Draw, Sketch, Outline, Write, and Color) as something special. People wanted to own all of the tools because they felt unique and different from one another.

This is something we as designers have done a bad job of - although we are slowly getting better. Name things! Build things up so that people want them. The 'Boomer' in Gears of War is no different than most enemies in games but he is built up, has a cool name, etc so that people remember him. Same with Clickers and Bloaters in The Last of Us. Take the time to name things in your game and make everything feel special and important. Think about how they would all make cool action figures and play sets.

Another great thing they did with their IAP is give the user a place to actually try the tool before they bought it. They bring up a window and let the player play with the Pencil or Outline tool before purchasing it. This would be like letting someone play with a character for a small amount of time or even a level before deciding if they want to purchase it or not.

Steal & Make it Yours

Building along the famous phrase, 'good artists copy great artists steal' FiftyThree have done an amazing job of this. Again, this is something that we as game designers need to do more of. Great ideas can be found everywhere! For example in God of War we looked at Track & Field along with Jet Set Radio for our button inputs.

Rewind

Taking inspiration from how 'jog dials' in video editing work they modified it to be 2 fingers together and by simply going in a clockwise / counter clockwise direction the user could undo / redo. This allows the user to not really care so much about where exactly the undo button is and instead keep their focus on the drawing. Make a stray line? Simply hold the stylus off to the side and quickly rewind and go back to your creation.

Color Mixing

When the app was first released - they were panned often about the lack of color choices. The simple answer would have been to give the user a color picker, something found in almost every other drawing app. FiftyThree instead chose to take their time and find a unique answer to a common problem.

They launched their Color Mixer about a year after launching the app. Which is basically an eternity within the iOS App Store. Their solution basically takes the Rewind gesture that people were already using but now making it 1 finger and emulating how it is to mix colors in a paint can.

Make sure to check out the color articles that FastCompany did. I link them below.

Zoom

Arguably the second most common complaint I'm sure they received aside from lack of color options was the ability to zoom. I don't know their time frame on this one but I imagine it took them a very long time as well. Their solution is again, pure genius. They took a real world object that people use to see closer in photos - the loupe and figured out how to make it work for a drawing app.

The loupe uses the common pinch to zoom gesture that anyone using an iOS device knows. This allows the user to keep their head down and focused on their creation and use their other hand to zoom in quickly, draw, and zoom back out.

Conclusion

FiftyThree have done an amazing job of releasing an app in a crowded market and not only doing well but also succeeding. Adobe's VP of Experience Design named it as his most depended app. Don't forget that Adobe makes drawing apps on the iPad as well!

The app has had a strong design voice from the very beginning. They didn't just overwhelm the user with a ton of choices; the app guides the user down a specific path with the lack of choices and options. Instead of rushing out with new options inspiration was found from outside what is considered a normal drawing app. Compare this to how Gears of War was inspired from the golf swing mechanic and used as their reload mechanic.

Last but not least - they have been fantastic about talking in detail how they make their product. I highly recommend reading some of the links below:

• A Closer Look at Zoom
• Engineering behind Zoom
• The Tech Behind Color Mixing

Fighting Game mechanics

Combat Systems

A little over 5 years ago, me and Eric Williams were bored at Border's and discussing the various systems found in fighting games. Specifically Capcom 2D games. We generated a long list of what each game brought to the table for the first time. I was having a problem at work trying to remember how certain games handled things when I stumbled across this. I figured I would post it up, in case anyone else finds it helpful. This is by no means all inclusive or perhaps even accurate. More or less a brain dump we had one evening.

Unfortunately I don't have time to screen cap or vid cap what all of these things are and if you don't follow the Capcom fighting game scene I'm not sure how helpful this will be since there is a lot of jargon but if you have any questions I'll do my best to answer.

NOTE: This was originally posted on my old blog and is very out of date and wasn't even 100% correct when we did it. That being said I still go back to it from time to time as it is a handy collection of various mechanics.

Street Fighter 2: World Warrior

• 2in1's
• Links
• Special Moves
• Kara Cancel
• Negative Edge
• Meaties
• Dizzies
• Mashing
• Projectiles
• Short+Fierce
• Breakable Objects
• Bonus Stages
• Cross ups
• Air Throw
• Block Damage

Street Fighter 2: Champion Edition

• Button Charging for special moves
• Vega's Wall Climb
• Evade
• Get up Animations
• Same Player vs. Same Player

Street Fighter 2: Hyper Fighting

• Joystick Controllable Movement Specials
• Air Special Moves
• True Reversals with Specials
• Teleport
• Air 2in1's

Super Street Fighter 2

• Dizzy particle right away
• Text Messages (Combo Meter)
• Rekka Ken
• DJ's Uppercut Punch
• Projectile Absorption

Super Street Fighter 2 Turbo

• Throw Techs
• Overheads
• Supers
• Juggling
• 1st game with playable hidden character(?)
• Character Variants (old vs. new)
• Controllable Limbs
• Weapon Loss and Pickups
• New Joystick Motions - Fei Long, Cammy
• Throw Whiffs

Street Fighter Alpha 1

• Chain Combos
• Alpha Counter
• 3 Part Super Meter
• 2 on 1 (Ryu/Ken vs. Bison)
• Command Roll
• Friends Super
• Hit Throw
• Rekka Ken Options (Guy)
• Taunts
• Character Intros
• Rival Fights
• Mini Launchers (Rose's Scarf)
• Fireball Reflect
• Air Block
• Block When Landing (Trip Guard)
• Auto Block

Street Fighter Alpha 2

• Tech Rolls
• Custom Combos
• Combo-able Alpha Counter (Rose)
• Stance Changes
• Poison Super
• Timed Button Input Specials (Gen's Kick)
• 2 Hit Air Jumping move (Gen)
• Super Jump
• Fake Special Moves

Street Fighter Alpha 3

• Counter Hits
• Air Techs
• Every Move Has Potential To Juggle
• 2 Button Throws
• Can Combo After Throw
• Guard Crush Meter
• Blue Blocking
• Damage Reduction
• Command Counters (Karin)
• Pushblock
• Dodge
• Crouch Cancelling
• Can Be Thrown While In Block/Hit Stun
• OTG Command Grabs
• System Variants (X vs. A vs. V)
• Command Dash

Capcom Vs. SNK

• Rolls
• Ratios/Teams
• Running
• Prolonging getting up Animation
• Command Charging of Meter (S Groove)
• Immobilizing Supers (Iori)
• Healing
• Infinite Low Life Supers
• Mash Inputs to change animation (Yamazaki)
• Bird Interaction (Nakoruru)

Capcom Vs. SNK2

• Level 2 Cancels
• Low Jump
• Parry
• Just Defend
• Raged
• Command Activate Meter (N Groove)
• Counter Roll
• Roll Cancelling
• Helper (Chang)
• Auto Guard

Street Fighter 3 (all of them)

• Special Into Super
• Parry / Red Parry
• Universal Overhead
• Variable Supers / Meters
• Dizzy Meter
• Unblockable supers (Denjin)
• EX Specials
• Kara Throw

Marvel Series (all of them)

• Super Jump
• Double Jump / Triple Jump
• OTG
• Flying
• Flying Screen
• Air Combos
• Gems
• Air Dashing
• Back/Forward Dashing
• Combo Into Throw (Air and Ground)
• Super Armor
• Vertical Scrolling Stages
• Healing
• Tagging
• Assists
• Team Supers
• Snapback
• Shuma - Super/Eyeballs/Time Gem
• Normal Move Projectiles
• No Continue If Hit
• Block Damage
• Status Upgrades
• Stealing Of Moves

Darkstalkers (All of them)

• Pouncing
• 9 Supers
• Dark Force
• No Update On Rounds
• Cursing

2D Misc

• Lying Down
• Command Dodge
• Weapon Clash
• Disarm
• Unthrowable
• Slow Down
• Suicides
• Destroys
• Anti Chip Damage
• Jump Cancelling
• Roman Cancel

God of War / Devil May Cry love letters

I happened to find something while cleaning my house and with E3 coming up next week seems like a good time to share this.

When I was on on God of War - one of our main competitors was Capcom's Devil May Cry. After God of War 2 shipped, our creative director Cory Barlog, sent basically a care package to their team. It included a copy of the game and a letter saying how awesome the whole team thought their games were and how strong of a team they were. I unfortunately don't have a copy of the letter that was sent but I do have the response from the Devil May Cry team.

Note that clicking on the link sends you to a PDF of the image above.

I think as game developers we really need to communicate and share with one another more often. It makes all of us better at our jobs.