SQUASH & STRETCH – The 12 Principles of Animation in Games

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 (to my knowledge) 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. It is one of the most powerful
tools in the animator’s toolkit. But I think that’ll do
it for Squash & Stretch. Two principles down,
ten left to go. If you haven’t already, be sure to
subscribe so you don’t miss the rest. And consider supporting the
show like all these great folks! Thank you for watching and
I’ll see you next time. [music]

93 Replies to “SQUASH & STRETCH – The 12 Principles of Animation in Games”

  1. I'm reminded of one of the unit spotlight videos for Total War: Warhammer, where they likened dwarfs attacking to "coiled springs". The game has a (relatively) realistic aesthetic and the units are often seen from a great distance, so they needed to do some squashing and stretching to effectively sell, for example, a dwarf smashing an opponent over the head with a great hammer as tall as he is.

  2. I was waiting for that McCree shot.. but I didn't realize the reason Widowmaker is blue is because she's literally made of rubber (4:43)
    Edit: OK Dan, that edit and timing of the credits background was just you showing off.. wasn't it? 😀
    Thanks for listing the music ^^

  3. It's incredible how you come up with new things to say (and, of course, new examples to focus on) every time you do an video on Squash & Stretch. Given how many times you've done that by now, that's a good thing…

  4. Can I just take a moment to admire the video production? Like seriously the only thing that equals the modern and slick editing is the videos content itself. Like DANG everything looks so clean

  5. I was just rereading Richard Williams "the animatiors survival kit" when i got the message that you uploaded a video about the 12 principles of animation. Nice.
    Also if you wanna get into animation and don't know where to start I highly recommend the animatiors survival kit. It is seen by many as the best book about animation.

  6. Sonic 06 has particularly bad rigging and posing. Things like Sonic flying through the air after hitting a bounce pad I remember looking particularly mad. The posing is kind of there but the orientation and rigging is completely off.

  7. This turned out great! Even when I already know what you're talking about, something about your delivery just makes it new and exciting and I walk away feeling like I've learned a thousand lessons in a single moment.
    Keep it up, Dan!

  8. I definitely need all 12 principles of animation as a seperate playlist to help teach my students using gaming examples I love having the unique perpesctive of a game animator to explain these.

  9. Excellent overhaul of the squash and stretch video. I love the 2D example footage selection. Manipulating the ball example on screen makes animation feel approachable and gives a feeling over really applying the principle on the spot rather than just being shown the result.

  10. Love seeing these techniques pointed out. A lot of the time they're done in such a way that it's an "invisible" technique where the viewer isn't really sure why it looks so good.

  11. Smash 64 and Mario 64 also have great uses of squash and stretch, each of Mario's attacks in both games being heavily emphasized by them. Nintendo somehow made it look excellent even at the early stages of console 3D.

  12. This is excellent, and so well done. I remember the original Squash and Stretch attempt had essentially distilled down into Jak and Daxter: the episode. That was good for a focused dive, but this feels like the whole picture, especially the applications on models with more rigid, realistic proportions. Can't wait for the rest of this series! (But you probably can; take a well earned break.)

  13. Yeah, I knew Jak and Daxter were gonna be in here somewhere. I'm sure some insane indie dev take notes from this video and make a game that looks and moves just like cartoons. You know, other than Cuphead's developers.

  14. Doom 2016 had a lot of squashy stretchy-ness. Mostly to show how weird the gross, flabby demons where but some glory kills had some good strechy-ness to ‘em to show how strong Doom guy was able to hit them

    I also played it for the first time recently so its on my mind lol

  15. i was just recently think that just in the past few years squash and stretch has become common in 3d games and was barely used before

  16. I still prefer 2D animation over 3D and the lack of squash and stretch in 3D animation is one of those reasons. Another one is the lack of highly stylized animation

  17. Speaking of squash and stretch, take a look at Sonic the Fighters! It's literally Squash n' Stretch heaven!

  18. I can't help but think of Dragonball FighterZ. They animated 3D models with like 2D characters, with inconsistencies and squashing & stretching, to maintain that anime feeling in a fighting game, and it looks amazing for it.

  19. Love this series, keep it up! One tiny criticism I have is that you list some of the advantages of the technique right in the beginning (0:16–0:32) before even showing any demonstration of the technique in use. I personally would have prefered it to see the examples first and then hear about the advantages. Otherwise fantastic video!

  20. I love your edition style, it's simple but awesome, how did you edit like that?🤔

    PD: Good video 😁

  21. From a physics perspective, you might hear about Poisson's ratio, which is the amount that gets pushed out in the sides (/pulled) when something squashes (/stretches). Rubbery materials have a Poisson's ratio such that their total volume should stay nearly constant.

    Enjoyed the video!

  22. Funny.. i was just thinking about this while i remembered how some people said the Naruto vs Pain fight has bad animation. Then this shows up in my recommendations, Youtube reading my mind xD

  23. I don't do any animation myself but I'm a huge fan of animated movies, series and computer games. These videos really help me distinguish good from bad animation, so I can appreciate the good stuff even more.

  24. I immediately thought of the Jak and Daxter fist attack while reading the title of the video, it's such a good example of stretch-y animations!

  25. It's funny to compare Spinel, who in-universe has the actual superpower to squash and stretch, to all of the other examples from animation of characters who are just normal but have been given exaggerated squash and stretch animations to sell their movement!

  26. Awesome god guys, I look forward ot the next one in the series.
    BTW how come it took so long for this episode to come out, anyone know?

  27. Nice video, I think even better than the old extra play one.
    I forget. Did you do a video for this new version, explaining what the 12 principals are? How they were established by The Nine Old Men, are basically the foundation of animation. I think you did it in the 1st series on extra play
    I'm a teacher and I love sharing these with my students. So I'm glad you are making them into short digestible, videos. It gets the information across without seeming so Academic. You do a good job on these videos. I can't wait to see the next principle.

  28. I've been going through and watching pretty much all your videos including the ones from extra credits and they have been a lot of help with the game I've been working on by myself it's my first project and I couldn't have gotten this far without you it's gonna be a 16bit ,top down, turn based RPG it seems like an extreme first project but I've also been using tutorials to help me get to grips with the app I'm using again thanks a lot

  29. I’m replaying Mario 64 at the moment, and I’ve actually noticed that Nintendo was doing some light squash & stretch even in what was one of their earliest attempts at a 3D game.

    When you punch and kick, Mario’s fist and feet stretches and grows for just a split second during the apex of each animation. It’s barely noticable, but it definitely adds a pit of extra “oomph” to each hit.

    Of course there’s also the title screen where you can stretch Mario’s face, even if that’s not the type of squash & stretch where talking about here 😛

  30. I'd like to ask for a general breakdown of why the free running animation in the various Assassin's Creed games feels so different between titles. Not necessarily a full look at each individual entry, but probably a focus on why Black Flag felt more "cartoony" than Unity did. It was a criticism I saw from someone who didn't enjoy a free game (even though they completed it, which boggles my mind). I'm personally a fan of all of them and I felt that Unity was off compared to the others in that they felt slower, somehow? But their comment on the game made me take a step back and kinda look at the differences between titles and for quite a few of them they felt exaggerated, except for Unity which was far more "realistic" in a way. I do know they did motion capture for that one so perhaps real world movements are inherently slow when it comes to video games? I'm curious to hear your thoughts and input on the subject.

  31. I just realized that squash and stretch reflect timing/ spacing with your key frames on the time line.

    I feel I should have realized this sooner.

  32. Why would a rubber ball "anticipate" a landing? It's not a character, it's an inanimate object, but you don't make that clear and instead imply that squash and stretch should be applied liberally to just about anything in every possible way. As a result of this brand of education, and you may be blind to this, everything in animation today is so rubbery and bouncy as to look uncanny in new ways. Please stop teaching animators to make poor assumptions about these principles.

  33. You can cheat deformation in 3D with types of motion blurs such as after images, smudging, lines, you can try deforming textures which have the benefit of being 2D, interaction with environment (dust trails and such), use a few frames of motion blur that isolate the subject and contort that only perhaps.

  34. I remember seeing I think a special feature on Jak and Daxter, one thing that was special about the character animation in that game is it the characters didn't have skeletons, they were literally vertex clouds that morphed from pose to pose. Apparently animating that way was really flexible but it was such a pain in the butt that they had to change to a more conventional skeletal model for the later games, that gave them much better facial expressions and subtlety but they lost a bit on the squash and stretch.

  35. I just wanna say how much I admire your choice of using Spinel/SU The Movie as a prime example of squash and stretch. Such great character animation.

  36. 3:09
    "stretching parts of the character out to create a smeared imitation of motion blur…"
    (Looks at McCree)
    wheeeeeezze

  37. Im not done with the video but i skipped through and didn't see any guilty gear so

    http://www.dustloop.com/wiki/index.php?title=File:GGXRD_Slayer_DandyStep.png

    this game uses BEAUTIFUL 3d models and does some crazy smears (and other animation tricks) to make it look like 2D anime at a glance!

  38. This is also the technique most misunderstood by casual consumers, usually because someone took a screencap and shared it.

  39. Another good example of the less cartoony approach to this is Warframe's Bullet Jump. The input actually lends itself really well to the concept: you simply press the jump button while crouching (squashed) and your Tenno will launch themselves headfirst (stretched) in whatever direction your camera is pointing with a nice flourishy spin.

  40. 0:50 Nevermind the squashing, the ball isn't even contacting the floor.
    1:28 I get the squashing on impact, and stretching on rebound, but doesn't stretching before impact make it look like the ball was anticipating the impact, like a living creature?

  41. Held this one out for primetime dinner viewing and holy crap it did not disappoint. I love learning all these lessons from you. You present them clearly and neatly, in a fun and engaging way, and it's always an inspiration to try and find the tools to try and make basic animation of my own.

  42. Despite this being a very short video in comparison to most others on Youtube, I found it engaging throughout. I really enjoyed all the examples and it made me realize why I prefer pixel art styled games and such. Good work, it's nice to be able to learn something while applying it to something you love like video games. You're the man, Dan

  43. Some TikTok artists out there have perfected Squash, Stretch AND anticipation.
    Especially the highly edited lip-sync Tiktoks.

  44. This just reminds me of how big Wario's head and fists get when he does his smash attacks in Smash Bros, it has to be one of the most exaggerated cases of this in the entire game!

  45. I think you are wrong saying spiderman absorbing energy is squash and stretsch. I'd say it's actualy overlapping action that is another principle of animation.

  46. I remember doing the rubber ball thing in a college game design class, while at the same time learning to use Adobe Animate

  47. Can I request that, in future episodes, we have a thing in the corner saying what game/tv show/etc. you're getting footage from?

Leave a Reply

Your email address will not be published. Required fields are marked *