Consider the League of Legends login screen. A gateway for players, it ushers them to protected, personalized content. But the Motion Graphics team saw an opportunity to turn what could be a functional checkpoint into a chance for storytelling. The team injects a little magic with a new animation about every two weeks, depicting a scene around a new champion, in-game event, or milestone (like the recent World Championships).
A login screen is one of the first things players see when they boot up League, so the impression it makes sets the tone for the play experience. Part of the team’s challenge is to capture and distill the feel of the new content in the game through just a few seconds of animation. To be successful, the team has to dig deep to figure out what the scene says about League and how to use motion to best convey that story to players.
The team starts the process by bringing a static splash art illustration into motion. So how does this black magic happen? They first animate the characters in the scene by creating digital puppets in Adobe After Effects. The team breaks down the champ illustration into limbs and then inserts digital pins to create joints. This system of limbs and joints when connected forms a rig, a kind of digital skeleton, that the team can shift, stretch, and rotate.
Next, the team tackles champion motion. To accomplish motion that fits the character, the team reflects on both narrative in the splash art and the backstories of champs. By highlighting the elements that define a champ, they can nail the right feel for the movements. In the Jinx login, the team captured Jinx’s awe and satisfaction for the destruction she’d caused. The animation's focal point is her wide-eyed inspection of the chaos around her. Even when a character sits still, like the Yasuo login, the team finds motion: what defines the swordsman is his calm, so the focus is his meditative breathing.
Once the focal point’s animated, the team moves on to environmental effects that shape the mood of the scene, such as swirling embers or inclement weather. In fact, the team strives to always have motion in every pixel on the screen, because more motion evokes a stronger, more realistic scene. With so much happening in one small scene, it’s important that everything’s moving cohesively. The team puts a lot of attention on making sure everything flows together. "When you're watching an art form that is not 100% realistic — that is, not being filmed — any one little thing that's off will pull you out," says Anthony Possobon, who leads the Motion Graphics team. Motion cohesion and flow are also critical because these animations are looped on the login screen, typically for about five seconds before being repeated. (Possobon jokingly calls them the “ultimate GIF.”) So if the motion's not fluid, the repetition will feel stilted and annoying.
Animations are kept short and sweet in order to keep downloads small and reasonable—it's not practical to increase a patch size just for the login screen, especially for regions where download speeds are slower. But the team isn’t anchored to five seconds, and they depart from it when there’s storytelling value in a longer animation. For example, the team wanted the Vel’koz login to feel unpredictable to match the Void champ’s personality, so the team crafted additional animations that’d randomly play: the first few seconds remained the same, but then some players might see the champ gazing at them while others saw his massive laser beam ult.
Similarly, an ambitious narrative and new game mode debuted around Bilgewater for the big summer event. To mirror the feeling of a story being rolled out, the team created ten-second animations with a new oil painting-influenced technique, which looked like the illustration was being painted right in front of viewers’ eyes
Not every login screen will be on that scale, but the Motion Graphics team continues to try and keep animations fresh. Animated login screens have come a long way since the first one appeared in the summer of 2010—it featured Kat and Ryze in dramatic poses, weapons wrapped in glowing flames. The team hasn’t journeyed alone, of course. Animations are supported by striking splash art and stirring music, and together they take login screens beyond blank fields asking for a username and a password into storytelling opportunities that bolster the fantasy within League.
The Motion Graphics team has proven that storytelling isn’t something that only happens in-game or through events, it can be done in the least obvious of places: whether teleporting cybernetic ninjas or majestic odes to spatula-wielding manatees, there’s a little magic waiting to welcome players back into the world of League.