Spider-Man's Animation: The Zip To Point

Hello and welcome to New Frame Plus, a series about video game animation.

This is not news to you, but swinging around in
Spider-Man looks and feels amazing.

And of course it does. This is an Insomniac game.
Their animators are awesome.

There is tons that I could dig into here,

but today I want to focus on just one of his swing animations: the Zip-To-Point move.

Let's just look at this whole move real quick.

As soon as the player hits the commands
to initiate the move

Spider-man extends his arms
in the direction of the targeted surface,

shoots the webs, yanks himself
directly to that spot like a bullet,

catches himself with his hands,
brings his feet down just behind them

and settles into that classic Spider-Man perch.

Pretty simple right?

Now, there are essentially three phases
to the animation of this move.

Phase One: The Anticipation, where Spidey shoots the webs toward his destination.

The first few frames of this are actually
an automated blend from whatever animation
Spider-man was playing before.

See, the animators need to transition Spidey
into this anticipation pose quickly,

but they've got no way of knowing exactly

what pose Spider-man was in at the moment the player entered the Zip-To-Point command.

They could theoretically just have him snap
to that new pose the instant the player hits the button

But it would also look kind of unnatural physically

So instead, they spend the first fraction of a second linearly blending from Spider-Man's previous animation

into this new one,
just to smooth that transition out a little.

This is something that you'll see
most games do to smooth the transitions
from one animation to another

Now, because that blend is somewhat automated,

this is the spot where you're likely to see the most jank, especially when played back in slow motion.

Notice how Spidey's orientation to the ground

changes rapidly (and kind of unnaturally)
over the course of just a few frames.

It's a bit of jank that the player is likely to FEEL rather than SEE.

This brings us to the anticipation pose itself,
which is really nice.

Spider-Man's arms are extended toward his destination,

which both communicates direction
and clearly shows his intent.

His body is also curled up into a ball which is going to contrast really wonderfully with what happens next...

Phase Two: The Action, in which Spider-Man launches toward his destination.

He yanks on the webs and stretches out his body completely.

He's like a dart or an arrow shooting at his target.

And the contrast between the curled-up anticipation and THIS gives just a wonderful spring to the move.

This brings us to Phase Three: The Recovery.

As Spidey nears his destination,
he extends his arms to catch himself,

and you get this nice, extended,
overlapping bounce on his spine and his head
as he absorbs that forward momentum

and settles into the final resting pose

One of the things I really like
about this particular animation is
how much Squash & Stretch plays into it,

and not because Insomniac's animators
are noticeably warping or exaggerating
Spidey's physical proportions or anything.

You don't actually have to turn your character into rubber to make use of this animation principle.

Imagine animating a rubber ball springing from one point to another of its own will.

It would squish in the anticipation before the jump...

stretch as it sprang toward its target

and then squash again as it hit the target and tried to quickly stop all that momentum.

Spider-Man's body does something
very similar in this animation!

He curls up, launches into a stretched-out pose

and then bunches up again at the finish
to try to absorb all that momentum.

The other thing that I love is that, throughout all this,
all of the key poses are iconic Spider-Man.

The web shooting anticipation,
the flight, the ending perch...

even if you only have a
passing familiarity with this character

it all feels just right.

And one last thing worth noting about this

is just how much complexity is hidden
inside this one seemingly-simple move

Like, sure, you've got the three parts of this movement: the web shot, the flight and the landing.

Simple enough.

Three animations ought to cover it, right?

What if the player wants to launch Spider-Man toward a perch that ISN'T directly in front of him?

Well, you could use the same starting animation

and just have Spider-Man whip around
to face that new direction on the first frame,

but it would feel really unnatural, and totally ignore the momentum his current swing already had.

So, rather than doing that,

Insomniac has created a bunch of variants to that anticipation web shot.

If the player's target is off to one side

Spider-Man will twist his upper body
in that direction to shoot the webs,

and then transition into that same
stretched-out flight pose after launching.

Aha, but! What if Spider-Man isn't even flying?

What if he's just launching
from one perch to another perch?

Well, I guess you're gonna need an alternate starting animation for that scenario too.

But ok, what if he's perched AND
point-zipping to a spot behind him?

Well... dang.

I guess we need ANOTHER transition for that edge case.

All of these possible starting positions might lead
to the same stretched-out flying pose,

but they require different initial animations to make that transition feel organic and seamless.

BUT it's actually more complicated than even that.

Because I lied a second ago!

Those starting positions DON'T always end up
in the same flying pose.

Spider-Man will actually play
different Zip-To-Point animations

depending on how far away he is from the target.

If the target is close, he may instead do this simpler hop animation,

more like a web-assisted jump.

But okay, what if the target destination is really far away?

In that scenario, Spider-Man will do
this twisting flight path,

which is functionally the same as the regular one,
but just a little bit more visually interesting.

I don't know this for sure, but I would guess

that the animators felt that having Spidey stay in this one stretched out pose

for a really long distance Zip-To-Point move
felt just a bit flat and same-y.

So they put a little spin in there
on the long flights to keep Spider-Man feeling
visually interesting and dynamic.

And even the landing on this move can vary!

Not only will Spider-Man's follow-through
momentum-absorbing bounce

be more severe and exaggerated
after those long Point-Zip jumps

because he's having to recover from stopping
so much more forward momentum,

but there's a potential branching point here.

If the player has unlocked the Point Launch skill
on Spidey's talent tree,

they can press Jump immediately after Spidey's hands hit his target

to have him instead SPRING off of that target,

gaining more height and a huge burst of speed.

Think about that...

all of these variants... all of these
alternate versions and branching points,

and all of this animation coverage
just to make one single move look good.

One!

You would be surprised how common this is in game animation.

It is amazing how much work and technical complexity can go into making a gameplay move feel and look...

...effortless.

Dog GONNIT, this game's animation looks good.

Anyway, I hope you enjoyed this!

I wanted to try doing some episodes
on just a single animation,

so I decided to take some requests!

Today's episode was a request from Nick Phan.

So, thank you Nick!

What about you?

Can you think of a particular animation
you'd like me to dig into?

Come on, any game you want.

Is there some particular combat move
or jump, or maybe a moment in a cutscene
that you'd like an episode about?

Let me know down in the comments, or on Twitter.

Maybe the next episode will be about your suggestion!

And, as always, subscribe if you want
to see more animation videos

and click that little bell thingy down there
if you want to make sure that YouTube
notifies you of future video releases.

Thank you for watching and I'll see you next time!