The Broken Tangent

Animation of Kurtis Paddock

Post 3 - Animating A Horse Mount Set with Cassia on Heroes of the Storm

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


Cassia, Amazon War Matron

Art done by: Luke Mancini

Art done by: Luke Mancini

This hero is the mighty Amazon from Diablo 2, or the "Jab-a-zon" as hardcore players know her. It's been twenty-plus years, many dead demons later, and now, Cassia finds herself in The Nexus. Of course, in the Nexus she has the ability to ride a horse...or a unicorn.

Below you'll find my thought process and approach to animating one of her mount animation sets. An "animation set" is a group of animations that the game calls for when the player performs an action or clicks a button. When a player summons their mount, the game looks for the appropriate mount animation set. I was responsible for all of her mount sets, but in this blog, I'll be talking about her horse mount set specifically. Below is a reel of all the support animations I was fortunate to work on.


Reference and Getting Something In-Game

Fresh off of Valeera and right into Cassia; more long hair and an even longer weapon with these animations. My first step was to start creating poses for Cassia on the horse. One thing that stuck out in this year's GDC talks was the constant call to "getting it in the game." So the quicker I can get something in the game engine, the quicker I can start iterating and tweaking the poses for better gameplay purposes.

Reference. What to use for reference? I was a bit stuck on what to look up since Diablo 2 did not have any mounts in the game. Typically, if we work on a hero already in the Blizzard Universe, we draw heavily from the animations and illustrations already created by the other teams. So I went super broad and searched: "riding on a horse with a spear."

Valkyrie charging into battle

One of the first images that came up was of a valkyrie, on a horse, with a spear. Perfect. Cassia harnesses the power of a valkyrie so I drew heavily from this reference. I also utilized the movie "Troy" as a reference. The lead animator on Cassia had a lot of reference from that film, so we were in constant communication during this phase.

The major difference here is that we chose not to have Cassia dawn her shield while she was mounted. This left me with a humongous spear that creates a hard line on her overall silhouette. The challenge, how do I maintain this powerful war matron posture with this long spear always in her hand?


Block Out and Beyond

This is where I started to block in my poses for Cassia on what's called a "proxy model." This model is an approximate shape of all horse mount's sitting space that Cassia needs to fit on. If I don't fit her properly on this, there is a high risk of clipping or potential bugs where she might be floating on some of the mounts. Keep in mind, this one animation set has to work on over ten different horse mounts in Heroes of the Storm.


Animating Using Animation Reference

Next was to start animating. Now that I had my pose that worked on the proxy model, I needed to figure out the timing of the horses in their respective animations. For example, I needed to know where the extreme up and down keys happened, so I could match my new Cassia animations to that timing. When I don't match the horse animations timing, then my Hero's animation will not sync up properly to the horse animations.

I looked at the animation file for our standard horse mount and noted where the key poses happened. From there, I went back into my Cassia file and set up key poses to match that of our horse animation; something I hadn't previously done. In school, we were always told not to use other animation as a reference. In this case, I had to. My horse run animation timing had to match that of our already made horse. If not, the two characters would not sync properly in the game.

Once those key poses were in, I added my breakdowns based on those main keys. I used this method of reference for my key poses on every animation for these horse mounts.  

Below are my final results: