WEBVTT 00:00:01.240 --> 00:00:05.700 Hello and welcome to New Frame Plus, a series about video game animation. 00:00:05.700 --> 00:00:11.580 This is not news to you, but swinging around in Spider-Man looks and feels amazing. 00:00:11.580 --> 00:00:15.380 And of course it does. This is an Insomniac game. Their animators are awesome. 00:00:15.389 --> 00:00:17.939 There is tons that I could dig into here, 00:00:17.940 --> 00:00:24.360 but today I want to focus on just one of his swing animations: the Zip-To-Point move. 00:00:25.900 --> 00:00:28.180 Let's just look at this whole move real quick. 00:00:28.180 --> 00:00:30.880 As soon as the player hits the commands to initiate the move 00:00:30.880 --> 00:00:34.560 Spider-man extends his arms in the direction of the targeted surface, 00:00:34.560 --> 00:00:38.200 shoots the webs, yanks himself directly to that spot like a bullet, 00:00:38.200 --> 00:00:41.619 catches himself with his hands, brings his feet down just behind them 00:00:41.620 --> 00:00:44.500 and settles into that classic Spider-Man perch. 00:00:44.500 --> 00:00:45.860 Pretty simple right? 00:00:45.860 --> 00:00:49.360 Now, there are essentially three phases to the animation of this move. 00:00:49.500 --> 00:00:54.380 Phase One: The Anticipation, where Spidey shoots the webs toward his destination. 00:00:54.380 --> 00:01:00.940 The first few frames of this are actually an automated blend from whatever animation Spider-man was playing before. 00:01:00.940 --> 00:01:05.840 See, the animators need to transition Spidey into this anticipation pose quickly, 00:01:05.840 --> 00:01:07.960 but they've got no way of knowing exactly 00:01:08.040 --> 00:01:12.640 what pose Spider-man was in at the moment the player entered the Zip-To-Point command. 00:01:12.640 --> 00:01:17.700 They could theoretically just have him snap to that new pose the instant the player hits the button 00:01:17.700 --> 00:01:20.700 But it would also look kind of unnatural physically 00:01:20.700 --> 00:01:27.240 So instead, they spend the first fraction of a second linearly blending from Spider-Man's previous animation 00:01:27.240 --> 00:01:30.740 into this new one, just to smooth that transition out a little. 00:01:30.740 --> 00:01:36.160 This is something that you'll see most games do to smooth the transitions from one animation to another 00:01:36.160 --> 00:01:38.900 Now, because that blend is somewhat automated, 00:01:38.900 --> 00:01:44.060 this is the spot where you're likely to see the most jank, especially when played back in slow motion. 00:01:44.060 --> 00:01:46.800 Notice how Spidey's orientation to the ground 00:01:46.800 --> 00:01:50.860 changes rapidly (and kind of unnaturally) over the course of just a few frames. 00:01:50.860 --> 00:01:55.120 It's a bit of jank that the player is likely to FEEL rather than SEE. 00:01:55.120 --> 00:01:58.820 This brings us to the anticipation pose itself, which is really nice. 00:01:58.820 --> 00:02:01.680 Spider-Man's arms are extended toward his destination, 00:02:01.680 --> 00:02:05.700 which both communicates direction and clearly shows his intent. 00:02:05.700 --> 00:02:11.560 His body is also curled up into a ball which is going to contrast really wonderfully with what happens next... 00:02:11.560 --> 00:02:16.040 Phase Two: The Action, in which Spider-Man launches toward his destination. 00:02:16.040 --> 00:02:19.100 He yanks on the webs and stretches out his body completely. 00:02:19.120 --> 00:02:21.940 He's like a dart or an arrow shooting at his target. 00:02:21.940 --> 00:02:27.980 And the contrast between the curled-up anticipation and THIS gives just a wonderful spring to the move. 00:02:27.980 --> 00:02:31.300 This brings us to Phase Three: The Recovery. 00:02:31.300 --> 00:02:34.903 As Spidey nears his destination, he extends his arms to catch himself, 00:02:34.903 --> 00:02:41.540 and you get this nice, extended, overlapping bounce on his spine and his head as he absorbs that forward momentum 00:02:41.540 --> 00:02:44.240 and settles into the final resting pose 00:02:44.780 --> 00:02:50.700 One of the things I really like about this particular animation is how much Squash & Stretch plays into it, 00:02:50.700 --> 00:02:57.380 and not because Insomniac's animators are noticeably warping or exaggerating Spidey's physical proportions or anything. 00:02:57.380 --> 00:03:02.100 You don't actually have to turn your character into rubber to make use of this animation principle. 00:03:02.180 --> 00:03:07.480 Imagine animating a rubber ball springing from one point to another of its own will. 00:03:07.480 --> 00:03:10.380 It would squish in the anticipation before the jump... 00:03:10.380 --> 00:03:12.660 stretch as it sprang toward its target 00:03:12.660 --> 00:03:17.340 and then squash again as it hit the target and tried to quickly stop all that momentum. 00:03:17.440 --> 00:03:20.880 Spider-Man's body does something very similar in this animation! 00:03:20.880 --> 00:03:23.660 He curls up, launches into a stretched-out pose 00:03:23.660 --> 00:03:27.840 and then bunches up again at the finish to try to absorb all that momentum. 00:03:27.840 --> 00:03:33.560 The other thing that I love is that, throughout all this, all of the key poses are iconic Spider-Man. 00:03:33.560 --> 00:03:37.026 The web shooting anticipation, the flight, the ending perch... 00:03:37.026 --> 00:03:40.140 even if you only have a passing familiarity with this character 00:03:40.140 --> 00:03:42.180 it all feels just right. 00:03:42.180 --> 00:03:44.560 And one last thing worth noting about this 00:03:44.560 --> 00:03:49.480 is just how much complexity is hidden inside this one seemingly-simple move 00:03:49.640 --> 00:03:54.660 Like, sure, you've got the three parts of this movement: the web shot, the flight and the landing. 00:03:54.660 --> 00:03:55.760 Simple enough. 00:03:55.800 --> 00:03:58.140 Three animations ought to cover it, right? 00:03:59.280 --> 00:04:04.120 What if the player wants to launch Spider-Man toward a perch that ISN'T directly in front of him? 00:04:04.120 --> 00:04:06.720 Well, you could use the same starting animation 00:04:06.720 --> 00:04:10.780 and just have Spider-Man whip around to face that new direction on the first frame, 00:04:10.780 --> 00:04:16.220 but it would feel really unnatural, and totally ignore the momentum his current swing already had. 00:04:16.220 --> 00:04:17.860 So, rather than doing that, 00:04:17.960 --> 00:04:22.380 Insomniac has created a bunch of variants to that anticipation web shot. 00:04:22.380 --> 00:04:24.860 If the player's target is off to one side 00:04:24.860 --> 00:04:28.520 Spider-Man will twist his upper body in that direction to shoot the webs, 00:04:28.520 --> 00:04:32.400 and then transition into that same stretched-out flight pose after launching. 00:04:32.400 --> 00:04:35.420 Aha, but! What if Spider-Man isn't even flying? 00:04:35.420 --> 00:04:38.680 What if he's just launching from one perch to another perch? 00:04:38.680 --> 00:04:42.400 Well, I guess you're gonna need an alternate starting animation for that scenario too. 00:04:42.600 --> 00:04:47.180 But ok, what if he's perched AND point-zipping to a spot behind him? 00:04:47.180 --> 00:04:48.180 Well... dang. 00:04:48.180 --> 00:04:51.040 I guess we need ANOTHER transition for that edge case. 00:04:51.060 --> 00:04:56.060 All of these possible starting positions might lead to the same stretched-out flying pose, 00:04:56.060 --> 00:05:01.740 but they require different initial animations to make that transition feel organic and seamless. 00:05:01.740 --> 00:05:04.400 BUT it's actually more complicated than even that. 00:05:04.400 --> 00:05:05.960 Because I lied a second ago! 00:05:05.960 --> 00:05:09.740 Those starting positions DON'T always end up in the same flying pose. 00:05:09.820 --> 00:05:13.400 Spider-Man will actually play different Zip-To-Point animations 00:05:13.460 --> 00:05:16.440 depending on how far away he is from the target. 00:05:16.440 --> 00:05:20.460 If the target is close, he may instead do this simpler hop animation, 00:05:20.460 --> 00:05:22.620 more like a web-assisted jump. 00:05:22.620 --> 00:05:25.908 But okay, what if the target destination is really far away? 00:05:25.908 --> 00:05:29.800 In that scenario, Spider-Man will do this twisting flight path, 00:05:29.800 --> 00:05:34.180 which is functionally the same as the regular one, but just a little bit more visually interesting. 00:05:34.180 --> 00:05:36.340 I don't know this for sure, but I would guess 00:05:36.340 --> 00:05:40.600 that the animators felt that having Spidey stay in this one stretched out pose 00:05:40.600 --> 00:05:45.720 for a really long distance Zip-To-Point move felt just a bit flat and same-y. 00:05:45.720 --> 00:05:51.740 So they put a little spin in there on the long flights to keep Spider-Man feeling visually interesting and dynamic. 00:05:51.760 --> 00:05:54.320 And even the landing on this move can vary! 00:05:54.320 --> 00:05:57.940 Not only will Spider-Man's follow-through momentum-absorbing bounce 00:05:57.949 --> 00:06:02.120 be more severe and exaggerated after those long Point-Zip jumps 00:06:02.120 --> 00:06:05.760 because he's having to recover from stopping so much more forward momentum, 00:06:05.760 --> 00:06:08.340 but there's a potential branching point here. 00:06:08.340 --> 00:06:12.880 If the player has unlocked the Point Launch skill on Spidey's talent tree, 00:06:12.880 --> 00:06:16.680 they can press Jump immediately after Spidey's hands hit his target 00:06:16.680 --> 00:06:19.200 to have him instead SPRING off of that target, 00:06:19.220 --> 00:06:22.340 gaining more height and a huge burst of speed. 00:06:22.460 --> 00:06:23.760 Think about that... 00:06:23.760 --> 00:06:28.400 all of these variants... all of these alternate versions and branching points, 00:06:28.400 --> 00:06:33.700 and all of this animation coverage just to make one single move look good. 00:06:33.920 --> 00:06:34.840 One! 00:06:34.900 --> 00:06:38.060 You would be surprised how common this is in game animation. 00:06:38.080 --> 00:06:44.900 It is amazing how much work and technical complexity can go into making a gameplay move feel and look... 00:06:46.900 --> 00:06:48.139 ...effortless. 00:06:48.139 --> 00:06:50.880 Dog GONNIT, this game's animation looks good. 00:06:50.880 --> 00:06:52.478 Anyway, I hope you enjoyed this! 00:06:52.479 --> 00:06:55.779 I wanted to try doing some episodes on just a single animation, 00:06:55.780 --> 00:06:58.060 so I decided to take some requests! 00:06:58.060 --> 00:07:00.280 Today's episode was a request from Nick Phan. 00:07:00.280 --> 00:07:01.640 So, thank you Nick! 00:07:01.640 --> 00:07:02.620 What about you? 00:07:02.620 --> 00:07:05.680 Can you think of a particular animation you'd like me to dig into? 00:07:05.680 --> 00:07:07.340 Come on, any game you want. 00:07:07.340 --> 00:07:13.660 Is there some particular combat move or jump, or maybe a moment in a cutscene that you'd like an episode about? 00:07:13.660 --> 00:07:16.060 Let me know down in the comments, or on Twitter. 00:07:16.060 --> 00:07:18.720 Maybe the next episode will be about your suggestion! 00:07:18.860 --> 00:07:22.080 And, as always, subscribe if you want to see more animation videos 00:07:22.080 --> 00:07:27.600 and click that little bell thingy down there if you want to make sure that YouTube notifies you of future video releases. 00:07:27.600 --> 00:07:30.220 Thank you for watching and I'll see you next time!