Dev Blog: Champion Animation

Hey guys - Rory “RiotLamz” Alderton here to take you through our champion animation process!

Whether we’re chatting with players on the forums or at events, champion creation always seems to be a hot topic, so I figured I’d take some time to explain just how we go about making champions move.

The first thing I need to point out is just how we animate. There are two techniques that the animation industry uses these days: hand key, and motion capture. You’ve probably seen videos of actors running around in body suits covered in reflective balls, right? That’s motion capture, which has been used in countless games and movies that look to establish photorealistic and lifelike characters. Then there’s hand keying, where animators hand-draw each frame of an animation. It’s a slower and more manual process that ultimately gives the animator more control over the finished animation. It’s often used in anime and superhero movies when animators want to over-emphasize the movement and contortions of a character beyond their skeleton’s limitations.

So, can you guess which we use? It’s option b: hand-keyed animation. We settled on this technique years ago – before I joined – because it’s integral to maintaining our in-house style and helps us deliver smooth and instant animations that don’t affect League’s gameplay. Finally, hand-keyed animation allows us to implement several animation practices such as smear frames or squash and stretch all while maintaining iconic character silhouettes for gameplay readability.

Alright. Let’s get into a few examples!

Yasuo’s Ultimate Challenge

Ultimates are often the single biggest abilities in the game in terms of visual and gameplay impact. Whether you’re getting guillotined in the face by Darius or bounced to death by Zac, the animations – the visual tells of the ability – need to be larger than life and highly readable. With that in mind, we had to really think about how we could animate Yasuo during Last Breath so that he felt suitably nimble and powerful during the ability’s one second - that’s 30 animation frames – cast time. For gameplay purposes it was absolutely vital the animation did not exceed this time.

Ideas need to be approved as concepts before we start really animating them, so they need to be as clear, impactful and unique as possible. One early idea was to have Yasuo slicing his opponent upwards for the full second, but this wasn’t nearly impactful enough during playtests as he’d end up obscured behind the ability’s visual effects (VFX), and his poses were all contained in too small a space. You could barely see him, basically.

Next we tried posing Yasuo so he’d leap up and perform a three-hit combo. The animation concept went off for review, and was quickly approved! Success! Next was the actual animation process, which we started by establishing three airborne key-poses that flowed well together. These are the three moments of the animation that end up being seen for the longest amount of time, so are really vital. Then, with these complete, we started animating the connecting poses to flesh out the arcs of motion for Yasuo’s extremities. Here’s what we ended up with:

Next we splined the animation, smoothing it out from still poses to fluid motion. At this stage, the animation almost looks like it could go into the game, although Yasuo’s hair and ropes – traditionally tedious things to animate – aren’t yet animated at all. Whilst it is common to manually animate these things on a final pass once the animator’s happy with the main body motion, we actually ended up pioneering some great new tech called ‘Jiggle Tech’. With it, we can set things to animate and react in real time to the motions of Yasuo’s body through simulating physics instantaneously in my animation tool, meaning we can rapidly iterate and make tweaks and changes without going through the tedious task of re-animating the hair and rope each time.

Now that we have the bulk of the animation down, it’s time to start polishing. During this phase we like to include smear frames, where we stretch out the character and props to absurdly exaggerated proportions within single frames. This creates really fast blurs of motion and give the animation a snappy feel that show our anime and manga inspirations.

Building Braum

Braum carries a huge shield – actually an old door – around with him as he fights. This is a really cool concept, but meant we had to figure out exactly how Braum wields the thing as he attacks and uses his abilities. That said, the biggest challenge we found when animating him was in implementing his E, Unbreakable. It’s an intricate ability which Braum can use while he moves and uses his other abilities, which meant we had to merge various animations to create a 360-degree movement and attack system. Here’s how we went about animating the Heart of the Freljord’s most iconic ability.

First we had to find a strong and defensive base pose for Unbreakable, from which we could branch off into Braum’s other movements. After trying a few poses out, we went for a one handed, shield-planted-on-the-floor pose when stationary, leaving one of Braum’s fists free for his shield attack animations.

Next we had to figure out how Braum moved while using Unbreakable so he could actually defend his allies and block enemy attacks! Knowing that we didn’t want Braum to roam with the shield one-handed (the shield quickly lost any sense of weight and power this way), we changed the grip as well as posture so Braum used both his hands as he moved. Next we had to think about movement, so we created four separate movement animations: forwards, left, right and backwards. We combined these animations into our parametric system, which merges them together to create movement animations for all 360 degrees. For this to work well it was vital that the four animations were of the same length, that Braum’s limbs were in similar positions, and that his feet contacted the ground on exactly the same frames. Here’s where we ended up:

After figuring out Unbreakable’s idle and movement animations, we started looking at Braum’s attack animations while he was using his E. It was a massive part of the kit, something the designer was dead set on including. First, we tried our parametric system again, but the animations the computers created were over-blended, so they felt pretty mushy and unimpactful. We ended up having to create a system that required nine separate attack animations, catering for an even quadrant of 360 degrees each with minimum blending into each other. Here’s what that actually looks like:

As a final flavor pass we also included our in-house Jiggle Tech on several of Braum’s accessories like the necklace and rope! This gave some additional secondary animation which complimented the main animation nicely and gave a more overall polished touch.

Finally, one of my personal favorites is Braum’s ultimate, which is a great example of the various elements I’ve talked about above coming together to create an epic in-game moment.

---

That’s about it for now! Hopefully I’ve given you some insight into how our champion animation process works here at Riot. We’re always striving to raise the bar for each other and ourselves, because introducing new tech and better work into the game creates interesting and exciting challenges for all disciplines involved. I truly believe in the phrase “technology pushes art and art pushes technology”.

Thanks for reading!