SQUASH & STRETCH - The 12 Principles of Animation in Games.
Hello, and welcome to New Frame Plus, a series about video game animation. It’s time to learn about another one of the 12 Principles! Last episode we discussed Timing. This time, we’re moving on to Squash & Stretch. Squash & Stretch is exactly what it sounds like.
It’s the squashing and stretching of animated characters and objects to exaggerate motion or show impact. It helps to convey weight and elasticity. It helps to emphasize contrast between poses. And it lends animated characters an organic flexibility while still preserving the volume of their form.
As with many of the animation principles, the easiest way to demonstrate Squash & Stretch is with a bouncing ball. Let’s say we want to animate a rubber ball bouncing across the floor. Here’s what that looks like with no Squash & Stretch whatsoever. Which… I mean, it looks fine.
Doesn’t really feel like it’s made of rubber, though, does it? It’s too rigid. It feels more like a marble. But what if we softened it up a bit with some Squash & Stretch? To start, let’s make it so that, when the ball contacts the floor, the downward force squashes it down into a flatter oval shape… and we want to make it wider as well to preserve the ball’s sense of volume.
This compression is basically what would happen to a real rubber ball, we’re just exaggerating it a bit. See? That already makes the ball feel a bit more rubbery. We can go even further, though! Let’s make it so that the ball stretches a bit when it rebounds and launches back into the air, emphasizing the ball’s rapid momentum upward.
And heck, we can do the same thing when the ball is falling just before it hits the ground. Makes a pretty big difference, right? This is what Squash & Stretch can do. As you can imagine, this principle lends itself best to cartoony styles of animation, where the characters are malleable and their movement can be exaggerated to physically impossible extremes.
The more Squash & Stretch you apply, the more elastic and cartoony the character is going to appear. When a cartoon character moves somewhere super quickly, you’ll see their whole body stretch in that direction to emphasize that speed, and there is a wonderful appeal to that kind of extreme exaggeration.
Of course, that squishiness isn’t going to feel appropriate on every character, especially ones who are meant to look more realistic. Like, you probably wouldn’t want to animate Aloy this way. That would look very wierd. As an animator, it’s important to know when to push this principle further and when to hold back.
Fortunately, an object doesn’t HAVE to be made out of rubber, or impossible cartoon physics to benefit from Squash & Stretch! After all, compression and extension are things our body does all the time. When we jump, we start by squashing down, then we stretch out as we leap into the air, and we stretch again in preparation to land so we can squash down once more to absorb the force of the landing.
Our facial features even squash and stretch while making expressions, which is something you’ll frequently see exaggerated in animation. Even on realistic characters, adding just a little bit of Squash & Stretch can make them feel slightly softer, a little less plastic.
Or when a character is moving really fast and there are large gaps in the spacing between each frame, stretching parts of that character out in a smeared imitation of motion blur can be a handy way to bridge those gaps just so our eyes can follow the movement better! You'll see this in Overwatch and League of Legends animation ALL THE TIME.
Now, generally speaking, Squash & Stretch is a principle that you don’t often see pushed very far in games. There are examples to be found, obviously, but especially when compared to film and TV animation extreme Squash & Stretch in games is relatively uncommon.
Part of the reason for this is that much of our industry currently favors realistic visual styles in which excessive Squash & Stretch would just feel aesthetically inappropriate. But another big reason is that 3D animation is far more common than 2D in today’s games, and cartoony elasticity can be quite challenging to achieve in 3D.
You see, for the traditional animator, Squash & Stretch is pretty easy to apply. If you want to have your character hit this really stretched-out bizarre pose, then just draw them that way. Bam. Done. But in 3D, your ability to distort a character’s proportions is defined by the skeleton of joints inside the model, and those sorts of extremely cartoony deformations can be rather difficult to achieve without a robust character rig.
Which means that it’s even HARDER to do extensive 3D Squash & Stretch in games, because game characters have to be rendered in real time, and complex, deformable character rigs tends to have a pretty big memory and performance cost. But just because we can’t always easily contort the character into bizarre shapes doesn’t mean we aren’t still applying Squash and Stretch.
Like I said before, you don’t have to be doing zany cartoony stuff to benefit from this principle. Even if your character rig won’t allow for a complex rubbery squishiness, you can still apply this principle in the way the character moves, exaggerating the extension and compression of their body in the poses you make.
Just look at Spider-Man. Remember when we talked about his Zip-To-Point move; the way he coils, launches himself, and then bunches up again to absorb the momentum at his destination? That's Squash & Stretch! Just like a cartoon ball springing from one point to another.
In fact, I think there might even be a little actual stretching happening on Spidey’s body during that launch? I might be wrong, It’s very hard to tell, but there might be a subtle amount of stretching in there. Or, going even more subtle, check out the javelins' jump launch in Anthem.
Now they’re not actually stretching the proportions of the javelins which is good, because they’re supposed to feel solid and metal and heavy, but the animators are still deploying this principle in the way the body compresses and then sharply extends to really emphasize the speed and power of that launch into the air.
Which is one of the big reasons that this basic move looks and feels so darned GOOD. But if you'd like a more extreme 3D example, then look no further than Jak & Daxter. You can see Squash & Stretch happening in just about every single move and attack.
You can see it in Jak’s torso when he runs... squash... stretch... squash... stretch… His entire body stretches out when he jumps, then bunches up in middair, stretches out again and than squashes down with the force of the landing. And you REALLY see it in his attacks.
LOOK at that. And look at how much Daxter cartoonishly stretches behind him! I’m still amazed at how well Naughty Dog pulled this off so early in the PS2 era. And you can tell the animators were having to fight those technical constraints. Like, they probably weren’t able to deform every part of the characters' bodies quite as much they would've liked.
Notice how Daxter’s head stays perfectly round throughout this whole move instead of stretching along with the body. But still, it is amazing what they achieved in this early era of 3D game animation. Most of today’s 3D games aren’t pushing the cartoony Squash & Stretch quite that far, but if you look around, you can find examples.
Some of them extreme, some of them quite subtle! I am so happy that Nintendo’s animators have started pushing the Squash & Stretch a little further with Mario lately. It just looks so good on him. But of course, if you want to see where the REALLY exaggerated stuff is happening, just look for the games with 2D and pixel animation.
The abundance of Squash & Stretch is one of the big reasons why the animation in these particular games is so fun to look at. Frank Thomas and Ollie Johnston called Squash & Stretch the “most important discovery” those early Disney animators made when establishing these principles.
And you can see why! It can make your cartoony characters' movement even more appealing, it can make your realistic characters feel more organic, and using it to exaggerate the extension and compression of your character’s body will often lead to stronger, more visually-dynamic poses.
