MagnaLudumMLC

The Character Animation Process Behind Subway Surfers Blast

Subway Surfers: the beloved endless runner game that has captured the hearts of millions worldwide. With a staggering 2 billion downloads and counting, it’s no wonder that the game’s characters have become cultural icons. So, when Outplay Entertainment approached MLC to help bring Jake to life in their latest game, Subway Surfers Blast, we glided straight in. Join the wonderfully talented Rob (below), our Lead 3D Animator, as he takes us through the process and general animation techniques behind creating Jake’s character animations for Subway Surfers Blast, from start to end.

All of the animations were made in Blender.

Rob, MLC’s Lead 3D Animator

Starting Point – Brief, Blockout, Inbetween

Like most projects, we were given a detailed starting point, including the use case of each animation, where that would take place and the character it should portray. Looking at the previous game’s animation style gave us an immediate style guide to follow as far as how exaggerated we can push the animations as well as giving us a visual to the characters personality. The reference is set, the brief is greenlit. Time to put frames on the timeline.

Every animation starts with a “Blockout” especially since some of these animations needed were long and character filled! A blockout is the process of setting “Key frames”, which are key moments within the entire animation that make up the overall flow and intention of the animation.

Imagine a person jumping on the spot. One key frame is the crouching down to build energy, the next key frame is the pushing up; the release of energy just before feet leave the ground. The apex of the jump then is your next keyframe, finally the land, the completion of that action. These 4 key frames will be enough to get the overall animation idea down, moving and roughly timed up. Generally blocking is done in what is called “Stepped” mode. This is where the keyframes “pop” to one another instead of smoothly blending. People who are not familiar with how the process works can struggle to look past the very janky nature of stepped mode. However, for the animator, this is enough to adjust and nail the overall pace of the animation.

We then moved onto the “Inbetween keys”. This involves telling the software what should be moving between each pose. These poses help make both the body mechanics closer to reality, and convey the right weight.

We had our key poses nailed down, and inbetweens to convey the character and how they move from each key pose.

Polishing The Animations

Next on the agenda was polishing. Polishing is a very broad term but generally encapsulates the following:

• Arc tracking: Almost anything organic in life moves in a way that creates arcs. When you walk, the tip of your nose generally creates a “Figure of 8”. You swing your arms in an arc. Your feet move in arcs. If you don’t track these things your animation can look robotic and unnatural. During Jake’s breakdance, the path in which the legs/feet take are important to draw the viewers eyes and ensure the action doesn’t get lost by being too fast and unreadable.
• Overlap/Settle/Ease in and out: Things usually don’t come to a sudden stop. Momentum, gravity and other factors all affect how something stops and starts. You take a moment to build up to a full sprint not just go into one – this would be “Easing in” to your sprint. When you stop a sprint, you continue a bit of a run and then to a slight walk before coming to a stop – this would be “Easing out”. Perhaps you go past your intended point of stopping by a bit but then you recover to end up in your original intended stopping location – this is Overlap. In animation, all these factors matter on each individual body part. How your centre of gravity moves will dictate how the rest of you moves. The entire Subway Surfers animation exhibits this core principle, the way in which the body of the character slows up and down depending on the action that is happening which is defined by the energy used to do the action, gravity and momentum. The way in which the legs slightly “Drag” behind the centre of gravity also really shows off Overlap.

• Secondary animation: Say your character has a ponytail. The animation of that ponytail will follow the overall flow of the animation but act differently. When the body stops moving the hair may keep flowing as its weight is different, perhaps there is wind blowing it around? The character may have straps, accessories, props. With Jake, he doesn’t have much in the way of loose hair, articles of clothing or accessories. However, secondary motion has a large cross over with the Overlapping in that the chest of the character drags behind the centre of gravity similar to the legs to give the spine an organic feeling. This animation on the chest helps things feel less rigid and a bit more reactive.
• Details: How does the character place its foot? Toe first? Heel first? Does the hand contact the ground? Do the individual fingers need to be animated to show that weight been distributed across the hand? Any facial animation needed? Does that animation convey the personality of the character? Polishing details include a VERY wide range of tweaks, just like how Jake’s feet contact the ground, how his hands are placed, and how his arms, neck and head react to the forces applied by the actions going on.
  

The End Results

All of the final animations we created for Subway Surfers Blast are below in all their glory!

It was a delight to collaborate with Outplay Entertainment on the character animations for Subway Surfers Blast. Check out the full collaboration here.