Hi everyone, Senior Animator Warren “fluffynus” Goff here to give you some insight into Xayah’s development from an animation perspective.
When building animation for new champs in League, we set out to accomplish two main things. The first is to clearly communicate gameplay; this includes the actual attack animation (and ability animation, death animation, etc…) as well as the feelings attached to them. The second is to define the personality of a champion by adding little quirks of their character into the game. In short, we want a champion’s animations to be clear and satisfying when auto-attacking and using abilities, while also true to the persona of the character.
Xayah’s rapid-paced gameplay and complex wing created some animation challenges: How can we make her movements look good, even when they happen quickly, while also showing off her feisty personality?
With these learnings, we were able to start creating animations that looked and felt good, even at high speeds.
An Infinite Supply of Death Quills
We work at 30 frames per second when animating auto attacks and spells for League. Xayah’s autos and abilities can be interrupted after about ten frames, which means we only have .33 seconds (ten frames) to anticipate and show the attack animation. Because of this, we have to be very specific about how we pose Xayah in each one of those ten frames. Her attack animations need to be distinct and obvious, so every player can recognize what she’s doing, while also seeming agile and dangerous, so she’s fun to play.
Xayah’s overall character and shape language is sharp, so we decided to make her animations feel snappy and responsive and for her wing to act like a wing, rather than a lifeless cloth—this also reinforced her spitfire personality. Since Xayah (probably) builds attack speed and can cast spells between autos, we kept the blends between animations to zero. In other words, she can immediately move from one animation to the next, with no frames in between. This is something we normally avoid, but with Xayah, it helped her feel really responsive and quick-footed.
For Xayah’s basic attacks, we wanted to make sure players could clearly see when she was about to auto, so we used a big anticipation pose and held it for five frames. After that, we popped into the actual attack and then the follow through.
All of this had to happen within ten frames:
- Frame 1-6: Anticipation
- Frame 7-8: Attack
- Frame 10+: Follow Through
Xayah’s Auto Attack Animation
Keeping the action to three main poses makes it more readable for players, as they first see the anticipation followed by the shift into actually throwing the quill.
Say That to My Feathers
Animating Xayah’s wing was a huge challenge, and we tried quite a few designs and rigs before landing where we are now. The final version has 39 bones, which is nearly as many as some champion’s have in their entire bodies, so animating her took a little longer than usual.
Xayah’s Wing with Visible Controls
Controlling the shapes of her wing during fast actions was especially important because we didn’t want it to seem stiff or unnatural—our goal was for Xayah’s wing to feel like it was weighted and under her control, kind of like extra fingers. Even though the rest of Xayah’s animations feel concise, the wing maintains a fluid-feeling throughout each motion before ending in a wing-like pose.
For example, during Xayah’s ult animation we controlled the shape of her wing so it spun smoothly while Xayah launched into the air but still felt snappy when she unleashed her Featherstorm.
Xayah’s Ult Animation
Animating Xayah’s attacks, abilities, and wing took some experimentation before we landed on a set that has clear gameplay, feels satisfying to play, and captures her fiery personality. We’re excited to finally see Xayah and Rakan together on the Rift, and we hope you guys enjoy the duo!
