January 13, 2009

Attack Animations: Part 1

I know I'm late but the topic of attack animations was much more difficult to put into words than I had initially expected. Generally I speak about these kinds of topics using a white board and scribble notes so actually writing it all down is a bit foreign and so because of that I am going to tackle this topic in a couple posts. Stay tuned!

Attack animations begin with ideas that should take the "character" into account first and foremost, in other words "Form" before "Function". By doing this we should not have Yoda doing drops kicks, which would be totally out of "character" thus making the player scratch their head instead of enjoying attacking with Yoda. Once enough "Form" ideas have been generated its time to bring "Function" to the table. "Function" dictates when the hit frame is, the total length of the animation, how far the move travels, etc... Now that all the brain dump has taken place its time to combine all the elements of "Form" and "Function" and paper design an actual attack. Ok have fun and brainstorm the crap out of attacks before settling on one for creation!

Time to explain your creation to the animator. Do you know how to speak their language, I hope so or this is all going to end badly :(

The first rule in expressing an idea to an animator is to start with anything NON-TECHNICAL… they are artists after all. Walk them through the idea in words to begin with, hopefully you've already created an animation list with a small written description is available for them to read. Best case scenario is they get what you want because you are an amazing speaker whom can articulate complex ideas through words, ok I am lying this never happens. So here are my Top 3 techniques of getting them to understand the idea.

• Get out of your seat and act out what in the hell it is you want! This technique not only gives them a visual study of motion but it shows the designer is committed to the idea enough to get up and make a fool out of themselves. The acting also allows the animator to point out issues with motion, footwork, etc… thus creating a healthy creative dialogue!

• Ok this one is really just another form of acting but it uses puppets instead of people. Get some toys, stuffed animals, or whatever floats your boat and have some fun with motion and posing to get your idea across to the animator.

Capture Reference
• Video capture reference from other media sources such as sports, movies and other games is a quick and easy way to express complex ideas. The ability to find just about anything on YouTube these days has become a vital tool in my game design bag of tricks! The other nice thing about this is the animator can keep the reference to look at time and time again during the creation of the animation asset.

NOTE: Video taping either the acting or puppets greatly increases their effectiveness by turing them into video reference.

Now that we know how to express our ideas, what ideas should we be expressing for attack animations? Well, for me there are only three things to worry about when creating that great attack animation: Anticipation, Connection, and Follow Through!

• The Anticipation of an attack animation is the calm before the storm; there is something about it that sticks in your brain giving you a sense of destruction before it even happens. Seeing this destruction well beforehand focuses the eye so that the Connection is always seen in the best possible way. The Anticipation pose needs to be achieved quickly and then held for a bit so it reads well on screen, remember that motion is not needed once the pose has been reached. The Anticipation pose should also be very over the top and feel like the weight of the world is about to strike behind it to sell the attack.

• The Connection of an attack animation is usually a single pose that shows the very best pose of the animation to ensure excellent presentation. If the Connection pose is ever confused as something other than the Connection then it is wrong and should be fixed immediately. Imagine this pose being a freeze frame where all the blood, impact, and sounds are sold to their maximum potential, think of a K.O. blow in a boxing match. The face of the attacker should read power, strength, and dominance where the face of the enemy should read pain, Pain, and PAIN!

Follow Through
• The Follow Through of an attack animation can make or break the attack because it conveys the power after it happens. The Follow Through should have one key pose that is held before the animation begins to recover back to the base pose. Think of a baseball player after he hits a homerun, one could look at that pose in a picture and know what happened. The best way to achieve this is to use strong over the top poses and spend more frames savoring them and less frames returning to the base pose.

This concludes Attack Animations: Part 1, hope to see you back for the next part very soon.


s said...

Good start! Looking forward to the rest.

Do you ever start with function first? Perhaps you know you need an unblockable, low quick strike, or knockback attacks - or even a suite of these to create a character.

Tristan Sacramento said...

Nice write up. Although, yoda doing a drop kick would be so awesome. :-). I agree that designers and animators in a room acting stuff out is a great start. Animation takes time and getting everyone on the same page is a must.

TJ Phan said...

I agree with Tristan, I'd pay to see Yoda doing a drop kick!

And yes, I'm all for getting with designers in a room to brainstorm/act out attack anims.

Would you say the biggest difference between player controlled characters and enemies regarding anticipation is that the player has very little (for responsiveness) and the enemies have longer ones (to telegraph an attack)?

Great points btw, and great blog.

Thomas Grové said...

Yay!, I love to see the best combat animator I know (TJ Phan) leaving a comment on the blog of one of the best combat designers that I know. Makes me smile from the cockles of my heart :)

Thomas Grové said...

I would venture to say that responsiveness is the impression of how long it takes between pressing a button until a corresponding visual is perceived.

So a long anticipation pose on the player character is ok, as long as it didn't take long to get into that pose, and as long as the resulting attack has the impression of a big enough payoff. (Like Benkei from Genji 1, or Zangief)

Though these may still be shorter than those of an ai enemy, not only for responsiveness reasons, but also because of giving the player enough of a chance to react to the enemy attack.

TJ Phan said...

Yes--another good point, Thomas. You could have slightly longer antics as long as it "pops" into that antic pose. Ninja Gaiden has good examples as well with their heavy weapons. And don't forget anim interrupt windows. Ahh, I love this stuff!

And Thomas, you're waaay too nice!:)
I still give it up, though, to the combat animators from Ninja Gaiden and DMC. The 2 new Naruto games have some awesome posing as well!

C.Gaspur said...

Great post Eric, thanks for sharing. I am happy to report that SF3 is off the table (mostly) and HD remix is in full swing down here. I look forward to the next post.

Anonymous said...

I like this explanation - an attack in terms of essentially 3 comic book panels. The concrete separation between windup, connection, and aftermath is what makes fighting game attacks memorable in a way that a soccer kick is not - except, of course, the bicycle kick, which does have these 3 elements.

eric williams said...

Sometimes "Function" comes first but even when this happens I try to move back into the open idea phase. The main reason is that ideas are limitless and I see no reason to limit anything during brainstorming.

I will be covering some of the other comments in the next post so be sure to come back!

Also be thinking about the next topic, I like this topic request line format a lot.

p.s. Yoda doing a drop kick is only ok if your name is Uwe Boll... sorry :(

Mehdi Yssef said...

written like a true animator !

A few typos though:
Reference Paragraph: "design bag (not bad) of tricks"
Anticipation paragraph "about to strike behind it to (not so) sell the attack"

How about an axe kick :-D ?

XSPR said...

Great article- animators themselves have profited from taking actual improvizasional acting classes, and your clear layout of the 3 main points also translates very well to the technical pieces of attack animations: start-up frames, hitting frames (with the hitboxes) and recovery frames.

Sean Gilley said...

Sorry, having Yoda do a drop kick would look lame.

whiskeypail said...

Eric Williams taught me everything I know about game animation.

@robyrt...a soccer kick has all three of those elements too. A ball just doesnt have a face to crumple...

Vincent said...

Cool post. It's crazy how often than not when something feels "off" in an animation for an action game, you can just point to one of these 3 things and find one or more straight up missing.

On a related note, check out this video of melee attacks on RE5. They're obviously a different style of attacks from most action games, but it's interesting to see some of the techniques they apply to exaggerate the three components listed here:


For example, Regardless of what you think of the crazy camera animations there, it's hard to not argue they dont serve a pretty distinct purpose in creating a better feeling of anticipation.

Anyway, where's part 2????

- Vince

Bruno Velazquez said...

Thanks whiskeypail for clearing the whole soccer kick thing....when I read that I almost spit out my drink.

Anyways all you need is to watch these videos to see how to sell impacts: http://www.gametrailers.com/player/44292.html


itidus20 said...

I read somewhere, perhaps Iwata Asks, that for super mario 64, shigeru miyamoto got up on a table or chair and acted out in the air how he wanted mario to look when swimming.

Rabirtsn said...

Thanks a sound wonderful Post.We are delighted exercise of your visit us and we hope that the information presented here will leave you with a positive impression about our company and the wide range of services and products that we offer in the markets we serve. خلاطات إسمنتية متحركة