0:00:01.240,0:00:05.700
Hello and welcome to New Frame Plus, a series about video game animation.

0:00:05.700,0:00:11.580
This is not news to you, but swinging around in[br]Spider-Man looks and feels amazing.

0:00:11.580,0:00:15.380
And of course it does. This is an Insomniac game.[br]Their animators are awesome.

0:00:15.389,0:00:17.939
There is tons that I could dig into here,

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

0:00:25.900,0:00:28.180
Let's just look at this whole move real quick.

0:00:28.180,0:00:30.880
As soon as the player hits the commands[br]to initiate the move

0:00:30.880,0:00:34.560
Spider-man extends his arms[br]in the direction of the targeted surface,

0:00:34.560,0:00:38.200
shoots the webs, yanks himself[br]directly to that spot like a bullet,

0:00:38.200,0:00:41.619
catches himself with his hands,[br]brings his feet down just behind them

0:00:41.620,0:00:44.500
and settles into that classic Spider-Man perch.

0:00:44.500,0:00:45.860
Pretty simple right?

0:00:45.860,0:00:49.360
Now, there are essentially three phases[br]to the animation of this move.

0:00:49.500,0:00:54.380
Phase One: The Anticipation, where Spidey shoots the webs toward his destination.

0:00:54.380,0:01:00.940
The first few frames of this are actually[br]an automated blend from whatever animation[br]Spider-man was playing before.

0:01:00.940,0:01:05.840
See, the animators need to transition Spidey[br]into this anticipation pose quickly,

0:01:05.840,0:01:07.960
but they've got no way of knowing exactly

0:01:08.040,0:01:12.640
what pose Spider-man was in at the moment the player entered the Zip-To-Point command.

0:01:12.640,0:01:17.700
They could theoretically just have him snap [br]to that new pose the instant the player hits the button

0:01:17.700,0:01:20.700
But it would also look kind of unnatural physically

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

0:01:27.240,0:01:30.740
into this new one,[br]just to smooth that transition out a little.

0:01:30.740,0:01:36.160
This is something that you'll see[br]most games do to smooth the transitions[br]from one animation to another

0:01:36.160,0:01:38.900
Now, because that blend is somewhat automated,

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

0:01:44.060,0:01:46.800
Notice how Spidey's orientation to the ground

0:01:46.800,0:01:50.860
changes rapidly (and kind of unnaturally) [br]over the course of just a few frames.

0:01:50.860,0:01:55.120
It's a bit of jank that the player is likely to FEEL rather than SEE.

0:01:55.120,0:01:58.820
This brings us to the anticipation pose itself,[br]which is really nice.

0:01:58.820,0:02:01.680
Spider-Man's arms are extended toward his destination,

0:02:01.680,0:02:05.700
which both communicates direction[br]and clearly shows his intent.

0:02:05.700,0:02:11.560
His body is also curled up into a ball which is going to contrast really wonderfully with what happens next...

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

0:02:16.040,0:02:19.100
He yanks on the webs and stretches out his body completely.

0:02:19.120,0:02:21.940
He's like a dart or an arrow shooting at his target.

0:02:21.940,0:02:27.980
And the contrast between the curled-up anticipation and THIS gives just a wonderful spring to the move.

0:02:27.980,0:02:31.300
This brings us to Phase Three: The Recovery.

0:02:31.300,0:02:34.903
As Spidey nears his destination,[br]he extends his arms to catch himself,

0:02:34.903,0:02:41.540
and you get this nice, extended,[br]overlapping bounce on his spine and his head[br]as he absorbs that forward momentum

0:02:41.540,0:02:44.240
and settles into the final resting pose

0:02:44.780,0:02:50.700
One of the things I really like[br]about this particular animation is[br]how much Squash & Stretch plays into it,

0:02:50.700,0:02:57.380
and not because Insomniac's animators[br]are noticeably warping or exaggerating [br]Spidey's physical proportions or anything.

0:02:57.380,0:03:02.100
You don't actually have to turn your character into rubber to make use of this animation principle.

0:03:02.180,0:03:07.480
Imagine animating a rubber ball springing from one point to another of its own will.

0:03:07.480,0:03:10.380
It would squish in the anticipation before the jump...

0:03:10.380,0:03:12.660
stretch as it sprang toward its target

0:03:12.660,0:03:17.340
and then squash again as it hit the target and tried to quickly stop all that momentum.

0:03:17.440,0:03:20.880
Spider-Man's body does something[br]very similar in this animation!

0:03:20.880,0:03:23.660
He curls up, launches into a stretched-out pose

0:03:23.660,0:03:27.840
and then bunches up again at the finish[br]to try to absorb all that momentum.

0:03:27.840,0:03:33.560
The other thing that I love is that, throughout all this,[br]all of the key poses are iconic Spider-Man.

0:03:33.560,0:03:37.026
The web shooting anticipation,[br]the flight, the ending perch...

0:03:37.026,0:03:40.140
even if you only have a[br]passing familiarity with this character

0:03:40.140,0:03:42.180
it all feels just right.

0:03:42.180,0:03:44.560
And one last thing worth noting about this

0:03:44.560,0:03:49.480
is just how much complexity is hidden[br]inside this one seemingly-simple move

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

0:03:54.660,0:03:55.760
Simple enough.

0:03:55.800,0:03:58.140
Three animations ought to cover it, right?

0:03:59.280,0:04:04.120
What if the player wants to launch Spider-Man toward a perch that ISN'T directly in front of him?

0:04:04.120,0:04:06.720
Well, you could use the same starting animation

0:04:06.720,0:04:10.780
and just have Spider-Man whip around[br]to face that new direction on the first frame,

0:04:10.780,0:04:16.220
but it would feel really unnatural, and totally ignore the momentum his current swing already had.

0:04:16.220,0:04:17.860
So, rather than doing that,

0:04:17.960,0:04:22.380
Insomniac has created a bunch of variants to that anticipation web shot.

0:04:22.380,0:04:24.860
If the player's target is off to one side

0:04:24.860,0:04:28.520
Spider-Man will twist his upper body[br]in that direction to shoot the webs,

0:04:28.520,0:04:32.400
and then transition into that same [br]stretched-out flight pose after launching.

0:04:32.400,0:04:35.420
Aha, but! What if Spider-Man isn't even flying?

0:04:35.420,0:04:38.680
What if he's just launching[br]from one perch to another perch?

0:04:38.680,0:04:42.400
Well, I guess you're gonna need an alternate starting animation for that scenario too.

0:04:42.600,0:04:47.180
But ok, what if he's perched AND[br]point-zipping to a spot behind him?

0:04:47.180,0:04:48.180
Well... dang.

0:04:48.180,0:04:51.040
I guess we need ANOTHER transition for that edge case.

0:04:51.060,0:04:56.060
All of these possible starting positions might lead[br]to the same stretched-out flying pose,

0:04:56.060,0:05:01.740
but they require different initial animations to make that transition feel organic and seamless.

0:05:01.740,0:05:04.400
BUT it's actually more complicated than even that.

0:05:04.400,0:05:05.960
Because I lied a second ago!

0:05:05.960,0:05:09.740
Those starting positions DON'T always end up[br]in the same flying pose.

0:05:09.820,0:05:13.400
Spider-Man will actually play[br]different Zip-To-Point animations

0:05:13.460,0:05:16.440
depending on how far away he is from the target.

0:05:16.440,0:05:20.460
If the target is close, he may instead do this simpler hop animation,

0:05:20.460,0:05:22.620
more like a web-assisted jump.

0:05:22.620,0:05:25.908
But okay, what if the target destination is really far away?

0:05:25.908,0:05:29.800
In that scenario, Spider-Man will do[br]this twisting flight path,

0:05:29.800,0:05:34.180
which is functionally the same as the regular one,[br]but just a little bit more visually interesting.

0:05:34.180,0:05:36.340
I don't know this for sure, but I would guess

0:05:36.340,0:05:40.600
that the animators felt that having Spidey stay in this one stretched out pose

0:05:40.600,0:05:45.720
for a really long distance Zip-To-Point move[br]felt just a bit flat and same-y.

0:05:45.720,0:05:51.740
So they put a little spin in there[br]on the long flights to keep Spider-Man feeling[br]visually interesting and dynamic.

0:05:51.760,0:05:54.320
And even the landing on this move can vary!

0:05:54.320,0:05:57.940
Not only will Spider-Man's follow-through[br]momentum-absorbing bounce

0:05:57.949,0:06:02.120
be more severe and exaggerated[br]after those long Point-Zip jumps

0:06:02.120,0:06:05.760
because he's having to recover from stopping[br]so much more forward momentum,

0:06:05.760,0:06:08.340
but there's a potential branching point here.

0:06:08.340,0:06:12.880
If the player has unlocked the Point Launch skill[br]on Spidey's talent tree,

0:06:12.880,0:06:16.680
they can press Jump immediately after Spidey's hands hit his target

0:06:16.680,0:06:19.200
to have him instead SPRING off of that target,

0:06:19.220,0:06:22.340
gaining more height and a huge burst of speed.

0:06:22.460,0:06:23.760
Think about that...

0:06:23.760,0:06:28.400
all of these variants... all of these[br]alternate versions and branching points,

0:06:28.400,0:06:33.700
and all of this animation coverage[br]just to make one single move look good.

0:06:33.920,0:06:34.840
One!

0:06:34.900,0:06:38.060
You would be surprised how common this is in game animation.

0:06:38.080,0:06:44.900
It is amazing how much work and technical complexity can go into making a gameplay move feel and look...

0:06:46.900,0:06:48.139
...effortless.

0:06:48.139,0:06:50.880
Dog GONNIT, this game's animation looks good.

0:06:50.880,0:06:52.478
Anyway, I hope you enjoyed this!

0:06:52.479,0:06:55.779
I wanted to try doing some episodes[br]on just a single animation,

0:06:55.780,0:06:58.060
so I decided to take some requests!

0:06:58.060,0:07:00.280
Today's episode was a request from Nick Phan.

0:07:00.280,0:07:01.640
So, thank you Nick!

0:07:01.640,0:07:02.620
What about you?

0:07:02.620,0:07:05.680
Can you think of a particular animation [br]you'd like me to dig into?

0:07:05.680,0:07:07.340
Come on, any game you want.

0:07:07.340,0:07:13.660
Is there some particular combat move[br]or jump, or maybe a moment in a cutscene[br]that you'd like an episode about?

0:07:13.660,0:07:16.060
Let me know down in the comments, or on Twitter.

0:07:16.060,0:07:18.720
Maybe the next episode will be about your suggestion!

0:07:18.860,0:07:22.080
And, as always, subscribe if you want[br]to see more animation videos

0:07:22.080,0:07:27.600
and click that little bell thingy down there[br]if you want to make sure that YouTube[br]notifies you of future video releases.

0:07:27.600,0:07:30.220
Thank you for watching and I'll see you next time!