1 00:00:01,240 --> 00:00:05,700 Hello and welcome to New Frame Plus, a series about video game animation. 2 00:00:05,700 --> 00:00:11,580 This is not news to you, but swinging around in Spider-Man looks and feels amazing. 3 00:00:11,580 --> 00:00:15,380 And of course it does. This is an Insomniac game. Their animators are awesome. 4 00:00:15,389 --> 00:00:17,939 There is tons that I could dig into here, 5 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. 6 00:00:25,900 --> 00:00:28,180 Let's just look at this whole move real quick. 7 00:00:28,180 --> 00:00:30,880 As soon as the player hits the commands to initiate the move 8 00:00:30,880 --> 00:00:34,560 Spider-man extends his arms in the direction of the targeted surface, 9 00:00:34,560 --> 00:00:38,200 shoots the webs, yanks himself directly to that spot like a bullet, 10 00:00:38,200 --> 00:00:41,619 catches himself with his hands, brings his feet down just behind them 11 00:00:41,620 --> 00:00:44,500 and settles into that classic Spider-Man perch. 12 00:00:44,500 --> 00:00:45,860 Pretty simple right? 13 00:00:45,860 --> 00:00:49,360 Now, there are essentially three phases to the animation of this move. 14 00:00:49,500 --> 00:00:54,380 Phase One: The Anticipation, where Spidey shoots the webs toward his destination. 15 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. 16 00:01:00,940 --> 00:01:05,840 See, the animators need to transition Spidey into this anticipation pose quickly, 17 00:01:05,840 --> 00:01:07,960 but they've got no way of knowing exactly 18 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. 19 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 20 00:01:17,700 --> 00:01:20,700 But it would also look kind of unnatural physically 21 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 22 00:01:27,240 --> 00:01:30,740 into this new one, just to smooth that transition out a little. 23 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 24 00:01:36,160 --> 00:01:38,900 Now, because that blend is somewhat automated, 25 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. 26 00:01:44,060 --> 00:01:46,800 Notice how Spidey's orientation to the ground 27 00:01:46,800 --> 00:01:50,860 changes rapidly (and kind of unnaturally) over the course of just a few frames. 28 00:01:50,860 --> 00:01:55,120 It's a bit of jank that the player is likely to FEEL rather than SEE. 29 00:01:55,120 --> 00:01:58,820 This brings us to the anticipation pose itself, which is really nice. 30 00:01:58,820 --> 00:02:01,680 Spider-Man's arms are extended toward his destination, 31 00:02:01,680 --> 00:02:05,700 which both communicates direction and clearly shows his intent. 32 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... 33 00:02:11,560 --> 00:02:16,040 Phase Two: The Action, in which Spider-Man launches toward his destination. 34 00:02:16,040 --> 00:02:19,100 He yanks on the webs and stretches out his body completely. 35 00:02:19,120 --> 00:02:21,940 He's like a dart or an arrow shooting at his target. 36 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. 37 00:02:27,980 --> 00:02:31,300 This brings us to Phase Three: The Recovery. 38 00:02:31,300 --> 00:02:34,903 As Spidey nears his destination, he extends his arms to catch himself, 39 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 40 00:02:41,540 --> 00:02:44,240 and settles into the final resting pose 41 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, 42 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. 43 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. 44 00:03:02,180 --> 00:03:07,480 Imagine animating a rubber ball springing from one point to another of its own will. 45 00:03:07,480 --> 00:03:10,380 It would squish in the anticipation before the jump... 46 00:03:10,380 --> 00:03:12,660 stretch as it sprang toward its target 47 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. 48 00:03:17,440 --> 00:03:20,880 Spider-Man's body does something very similar in this animation! 49 00:03:20,880 --> 00:03:23,660 He curls up, launches into a stretched-out pose 50 00:03:23,660 --> 00:03:27,840 and then bunches up again at the finish to try to absorb all that momentum. 51 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. 52 00:03:33,560 --> 00:03:37,026 The web shooting anticipation, the flight, the ending perch... 53 00:03:37,026 --> 00:03:40,140 even if you only have a passing familiarity with this character 54 00:03:40,140 --> 00:03:42,180 it all feels just right. 55 00:03:42,180 --> 00:03:44,560 And one last thing worth noting about this 56 00:03:44,560 --> 00:03:49,480 is just how much complexity is hidden inside this one seemingly-simple move 57 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. 58 00:03:54,660 --> 00:03:55,760 Simple enough. 59 00:03:55,800 --> 00:03:58,140 Three animations ought to cover it, right? 60 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? 61 00:04:04,120 --> 00:04:06,720 Well, you could use the same starting animation 62 00:04:06,720 --> 00:04:10,780 and just have Spider-Man whip around to face that new direction on the first frame, 63 00:04:10,780 --> 00:04:16,220 but it would feel really unnatural, and totally ignore the momentum his current swing already had. 64 00:04:16,220 --> 00:04:17,860 So, rather than doing that, 65 00:04:17,960 --> 00:04:22,380 Insomniac has created a bunch of variants to that anticipation web shot. 66 00:04:22,380 --> 00:04:24,860 If the player's target is off to one side 67 00:04:24,860 --> 00:04:28,520 Spider-Man will twist his upper body in that direction to shoot the webs, 68 00:04:28,520 --> 00:04:32,400 and then transition into that same stretched-out flight pose after launching. 69 00:04:32,400 --> 00:04:35,420 Aha, but! What if Spider-Man isn't even flying? 70 00:04:35,420 --> 00:04:38,680 What if he's just launching from one perch to another perch? 71 00:04:38,680 --> 00:04:42,400 Well, I guess you're gonna need an alternate starting animation for that scenario too. 72 00:04:42,600 --> 00:04:47,180 But ok, what if he's perched AND point-zipping to a spot behind him? 73 00:04:47,180 --> 00:04:48,180 Well... dang. 74 00:04:48,180 --> 00:04:51,040 I guess we need ANOTHER transition for that edge case. 75 00:04:51,060 --> 00:04:56,060 All of these possible starting positions might lead to the same stretched-out flying pose, 76 00:04:56,060 --> 00:05:01,740 but they require different initial animations to make that transition feel organic and seamless. 77 00:05:01,740 --> 00:05:04,400 BUT it's actually more complicated than even that. 78 00:05:04,400 --> 00:05:05,960 Because I lied a second ago! 79 00:05:05,960 --> 00:05:09,740 Those starting positions DON'T always end up in the same flying pose. 80 00:05:09,820 --> 00:05:13,400 Spider-Man will actually play different Zip-To-Point animations 81 00:05:13,460 --> 00:05:16,440 depending on how far away he is from the target. 82 00:05:16,440 --> 00:05:20,460 If the target is close, he may instead do this simpler hop animation, 83 00:05:20,460 --> 00:05:22,620 more like a web-assisted jump. 84 00:05:22,620 --> 00:05:25,908 But okay, what if the target destination is really far away? 85 00:05:25,908 --> 00:05:29,800 In that scenario, Spider-Man will do this twisting flight path, 86 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. 87 00:05:34,180 --> 00:05:36,340 I don't know this for sure, but I would guess 88 00:05:36,340 --> 00:05:40,600 that the animators felt that having Spidey stay in this one stretched out pose 89 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. 90 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. 91 00:05:51,760 --> 00:05:54,320 And even the landing on this move can vary! 92 00:05:54,320 --> 00:05:57,940 Not only will Spider-Man's follow-through momentum-absorbing bounce 93 00:05:57,949 --> 00:06:02,120 be more severe and exaggerated after those long Point-Zip jumps 94 00:06:02,120 --> 00:06:05,760 because he's having to recover from stopping so much more forward momentum, 95 00:06:05,760 --> 00:06:08,340 but there's a potential branching point here. 96 00:06:08,340 --> 00:06:12,880 If the player has unlocked the Point Launch skill on Spidey's talent tree, 97 00:06:12,880 --> 00:06:16,680 they can press Jump immediately after Spidey's hands hit his target 98 00:06:16,680 --> 00:06:19,200 to have him instead SPRING off of that target, 99 00:06:19,220 --> 00:06:22,340 gaining more height and a huge burst of speed. 100 00:06:22,460 --> 00:06:23,760 Think about that... 101 00:06:23,760 --> 00:06:28,400 all of these variants... all of these alternate versions and branching points, 102 00:06:28,400 --> 00:06:33,700 and all of this animation coverage just to make one single move look good. 103 00:06:33,920 --> 00:06:34,840 One! 104 00:06:34,900 --> 00:06:38,060 You would be surprised how common this is in game animation. 105 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... 106 00:06:46,900 --> 00:06:48,139 ...effortless. 107 00:06:48,139 --> 00:06:50,880 Dog GONNIT, this game's animation looks good. 108 00:06:50,880 --> 00:06:52,478 Anyway, I hope you enjoyed this! 109 00:06:52,479 --> 00:06:55,779 I wanted to try doing some episodes on just a single animation, 110 00:06:55,780 --> 00:06:58,060 so I decided to take some requests! 111 00:06:58,060 --> 00:07:00,280 Today's episode was a request from Nick Phan. 112 00:07:00,280 --> 00:07:01,640 So, thank you Nick! 113 00:07:01,640 --> 00:07:02,620 What about you? 114 00:07:02,620 --> 00:07:05,680 Can you think of a particular animation you'd like me to dig into? 115 00:07:05,680 --> 00:07:07,340 Come on, any game you want. 116 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? 117 00:07:13,660 --> 00:07:16,060 Let me know down in the comments, or on Twitter. 118 00:07:16,060 --> 00:07:18,720 Maybe the next episode will be about your suggestion! 119 00:07:18,860 --> 00:07:22,080 And, as always, subscribe if you want to see more animation videos 120 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. 121 00:07:27,600 --> 00:07:30,220 Thank you for watching and I'll see you next time!