The Broken Tangent

Animation of Kurtis Paddock

Post 1 - How to Animate a Flail for Valeera on Heroes of the Storm

*The contents below are my own opinions and not that of my employer*


Valeera Sanguinar

Homescreen key art done by Luke Mancini & Dan Harrington

The first two things that stick out in my mind when I think of the Warcraft Hero "Valeera Sanuinar" are: daggers and ponytails.

When I was asked to assist with her animations, I immediately began to conceptualize how to deal with her hair and those killer weapons. Here is a small breakdown on how I approached the "flail" animation set.


Posing and Blocking

First attempts at finding a nice hair pose to work in

What is a "flail" and when is it used in the game? A flail animation is triggered whenever your hero is affected by either an explosion or a spell, propelling them forward, backward, or straight into the air.  

I had never done this type of animation before, so I started researching previous Heroes and their flails. During my search, I began to pick up on similarities that our animation team was doing for this type of movement; I picked up on this wave-like motion, as if the explosion were passing directly through the Hero.

I began with the center of gravity (COG for short), creating a circular motion that derives from the middle of Valeera. This was the driving force for the spine, arms, hands, legs, and feet. In a "layered" animation process, I tend to start with the COG and work my way out from there. If this  was a "pose to pose" animation, I would take a different approach.


First Pass

We were able to accomplish great shapes in the hair with the amount of controls we had

Once the COG movement was set, I built off its momentum. Starting with the hips and spine, I began to mimic the same circular motion as the COG. In this case, it felt better to have more movement in the spine and go a little more conservative with her hips.

This whole time, I kept in mind that I was working toward this massive explosion of energy going through her. It needed to feel like she was being thrown back from the blast of whatever spell was just thrown at her. To accomplish this, I constantly had to check my work in-game.

Most studios will have tools created for you to instantly (or very quickly) see your work in the game engine. This allows for quick iterations if leads and art directors want to see an idea they have. The biggest thing for me when checking my animation in the game, is making sure the action I'm working toward is reading properly. For this, you'll need to make sure to ask your co-workers for feedback, get some fresh eyes on your animation as much as possible. I cannot stress that enough.

First pass working with all of her extremities.

With the hips and spine in place, I started layering her legs, feet, arms, and hands. After looking at this, I instantly noticed a "rowing a boat" motion that her arms and legs are doing, and that is not what I was looking for. I want it to look like she's being thrown back through space. I tightened up details in the timing and spacing of the animation, along with exaggerating her hands/blades and feet for readability. 


Final Pass

Valeera's full support set: Surf Mount Set, Flail, and Stun

Above is a video with all of the support animations I was lucky enough to do on Valeera. The 00:27 second mark is the start of the final version of the flail forward. 

At this point in my process, I've added additional overlap to her hands and feet to make it more readable from our game camera. I also played around with the timing of my offsets, making sure to really sell that wave-like motion going through her body. 

Enjoy!