1 00:00:00,240 --> 00:00:02,300 In this video we'll animate the gem. 2 00:00:02,320 --> 00:00:05,257 We'll create a cycle where it moves up and down 3 00:00:05,306 --> 00:00:09,414 and then we'll create the animation for when the player picks it up. 4 00:00:10,543 --> 00:00:13,314 Before we used the Inspector on the right 5 00:00:13,315 --> 00:00:16,714 and used those key items icons to create keyframes, 6 00:00:16,715 --> 00:00:19,957 or did that in the animation editor directly. 7 00:00:20,330 --> 00:00:24,814 This time we're going to use the shortcuts in the Toolbar. 8 00:00:24,920 --> 00:00:29,771 Those are shortcuts to quickly key the transforms of your nodes, 9 00:00:29,871 --> 00:00:33,000 the position, rotation and scale. 10 00:00:33,468 --> 00:00:38,900 You can see you have a key icon to create key frames for the buttons 11 00:00:38,901 --> 00:00:40,771 that are toggled up there. 12 00:00:41,090 --> 00:00:43,486 Let's get started with the gem. 13 00:00:44,587 --> 00:00:46,914 Click the location icon. 14 00:00:46,915 --> 00:00:48,769 It should be the only one that's blue. 15 00:00:48,770 --> 00:00:51,200 You can click the others to toggle them. 16 00:00:51,900 --> 00:00:55,271 Then ensure that you have the pickup gem selected 17 00:00:55,272 --> 00:00:57,186 and press the Insert key. 18 00:00:57,490 --> 00:01:02,900 It's going to offer to create tracks for the position of the gem. 19 00:01:02,930 --> 00:01:07,186 You can click create and see the first keyframe appear in here. 20 00:01:08,160 --> 00:01:10,738 Now we're going to lengthen the animation, 21 00:01:10,739 --> 00:01:14,138 so on the right we're going to set it to 2 seconds 22 00:01:14,139 --> 00:01:18,243 so that the bouncing animation doesn't go too fast for the gem. 23 00:01:18,410 --> 00:01:22,686 We'll also click the loop icon to make the animation loop. 24 00:01:22,960 --> 00:01:26,514 In the bottom right you can increase the Zoom level 25 00:01:26,515 --> 00:01:28,871 by dragging the slider to the right. 26 00:01:29,290 --> 00:01:32,871 Place the time cursor around the middle of the animation, 27 00:01:33,086 --> 00:01:35,886 move the gem up a little bit 28 00:01:36,176 --> 00:01:39,210 and then you don't even have to go click up there, 29 00:01:39,240 --> 00:01:41,957 you can just press the Insert key. 30 00:01:42,370 --> 00:01:45,571 This is the shortcut to quickly insert a key 31 00:01:45,572 --> 00:01:49,685 for the properties that are toggled on up there. 32 00:01:50,814 --> 00:01:54,455 Then you can click and drag on the animation timeline 33 00:01:54,456 --> 00:01:57,471 to see the gem move up and it will automatically 34 00:01:57,472 --> 00:01:59,914 move back down to the start position. 35 00:02:00,058 --> 00:02:02,457 We don't have to add more keyframes in there. 36 00:02:02,520 --> 00:02:06,157 If you play with Shift + D you'll see it move up, down. 37 00:02:06,240 --> 00:02:10,140 It doesn't look great because the transition is linear at the moment, 38 00:02:10,170 --> 00:02:16,057 but before we fix it we're going to animate the shadow circle. 39 00:02:16,730 --> 00:02:19,500 For the shadow circle we go to the toolbar, 40 00:02:19,514 --> 00:02:22,729 turn off the location and turn on the scale 41 00:02:22,766 --> 00:02:25,357 because it's the scale that we want to animate. 42 00:02:25,480 --> 00:02:28,300 We'll place the time cursor at the start 43 00:02:28,301 --> 00:02:31,857 and press Insert to create our first keyframe. 44 00:02:32,530 --> 00:02:35,343 Then drag the time cursor to one second 45 00:02:35,344 --> 00:02:37,629 and we're to scale it down. 46 00:02:38,032 --> 00:02:43,493 You can use the select tool and Alt, click and drag to do that, 47 00:02:43,693 --> 00:02:46,857 and use the Shift key to constrain 48 00:02:46,858 --> 00:02:51,786 the scale to be uniform and then press Insert 49 00:02:51,987 --> 00:02:54,340 and we'll insert a keyframe. 50 00:02:54,370 --> 00:02:57,957 Now you can press Shift + D to see the animation. 51 00:02:58,010 --> 00:03:01,871 It doesn't look too great at the moment because of that linear transition. 52 00:03:03,200 --> 00:03:07,243 To improve it first I'm going to hide the collision shape 2D 53 00:03:07,244 --> 00:03:09,914 to see my scene a little better. 54 00:03:10,450 --> 00:03:13,729 Then I'm going to select the first key frames 55 00:03:13,730 --> 00:03:16,071 for both the scale and the position. 56 00:03:16,072 --> 00:03:20,049 So I click on the position keyframe here on the left 57 00:03:20,050 --> 00:03:22,940 and then shift click on the scale keyframe. 58 00:03:22,970 --> 00:03:27,093 I'm going to pull the easing curve to the left 59 00:03:27,300 --> 00:03:29,486 so that the gem goes up quickly 60 00:03:29,680 --> 00:03:32,900 and slows down and falls back down and accelerates. 61 00:03:32,920 --> 00:03:35,314 It's going to make it bounce, you will see. 62 00:03:35,315 --> 00:03:41,329 Press Shift + D, you can see it goes up a bit fast and then slows down 63 00:03:41,330 --> 00:03:44,157 as it reaches its highest position. 64 00:03:44,640 --> 00:03:48,171 Similarly, we're going to select the next two key frames 65 00:03:48,172 --> 00:03:50,700 and pull the easing curve to the right. 66 00:03:51,090 --> 00:03:53,857 This will make it go back down slowly 67 00:03:53,858 --> 00:03:58,771 and then accelerate as it reaches the start keyframe. 68 00:03:59,130 --> 00:04:02,186 You can then press Shift + D to see the animation 69 00:04:02,187 --> 00:04:06,714 and see that this time the gem bounces a bit better. 70 00:04:07,450 --> 00:04:10,357 We can do one last thing for this gem animation, 71 00:04:10,429 --> 00:04:13,471 it's click the Autoplay unload button. 72 00:04:13,530 --> 00:04:16,100 That way the animation will play automatically 73 00:04:16,101 --> 00:04:18,386 at the start of the game. 74 00:04:18,770 --> 00:04:21,914 Next, we'll create the destroy animation. 75 00:04:22,330 --> 00:04:26,071 Go to the animation menu and create a new animation 76 00:04:26,214 --> 00:04:27,871 that we'll name destroy. 77 00:04:28,450 --> 00:04:31,514 For this one, we want to scale the gem 78 00:04:32,494 --> 00:04:34,557 disappearing like this 79 00:04:34,650 --> 00:04:36,260 and same thing for the shadow, 80 00:04:36,280 --> 00:04:40,100 we're going to squash it until it has no scale. 81 00:04:40,130 --> 00:04:47,138 Then we'll call the queue free function on our pickup so that it gets destroyed, 82 00:04:47,338 --> 00:04:49,643 removed from the game entirely. 83 00:04:49,840 --> 00:04:57,329 We'll start by keying the scale of both the pickup gem and the shadow circle. 84 00:04:57,410 --> 00:05:01,321 Select the two sprites and press the Insert key 85 00:05:01,443 --> 00:05:04,100 to create the two tracks simultaneously. 86 00:05:04,600 --> 00:05:10,100 We're going to start at the full scale and then around .5 seconds 87 00:05:10,130 --> 00:05:14,057 we're going to set both of their scales to zero. 88 00:05:14,338 --> 00:05:17,771 We'll go to the Inspector, to the Transform tab 89 00:05:17,772 --> 00:05:21,771 and set the scale to zero for the both of them. 90 00:05:22,090 --> 00:05:26,157 This is going to scale them respectively, down to zero. 91 00:05:26,642 --> 00:05:29,214 In the Inspector, when you select multiple nodes 92 00:05:29,215 --> 00:05:30,728 that have the same properties 93 00:05:30,920 --> 00:05:35,086 and you change that property, it affects all selected nodes. 94 00:05:35,171 --> 00:05:40,085 Then press the Enter key to create the two scale keys. 95 00:05:40,086 --> 00:05:43,729 Then you can click and drag to see the nodes disappear. 96 00:05:44,393 --> 00:05:48,357 Like before the transition, the linear one is not great, 97 00:05:48,358 --> 00:05:51,343 so we're going to make it accelerate. 98 00:05:51,560 --> 00:05:54,214 Click and drag to select the first two keyframes 99 00:05:54,215 --> 00:05:57,571 and we're going to pull the easing curve, 100 00:05:58,010 --> 00:06:00,180 let's try in both directions. 101 00:06:00,210 --> 00:06:03,057 We'll start by making it slow down. 102 00:06:04,010 --> 00:06:05,257 This is not bad. 103 00:06:05,360 --> 00:06:07,743 Then we'll try to make it accelerate. 104 00:06:09,160 --> 00:06:11,660 Honestly, both can work. 105 00:06:11,690 --> 00:06:14,457 You can see this one has a bit of oomph to it, 106 00:06:14,714 --> 00:06:17,657 while the other feels good as well. 107 00:06:17,850 --> 00:06:20,886 I think I prefer pulling the curve to the right, 108 00:06:20,887 --> 00:06:25,857 having it accelerate like go into a void a bit quickly like so. 109 00:06:27,130 --> 00:06:29,622 All right, that's our animation done, 110 00:06:29,822 --> 00:06:30,700 well, not quite. 111 00:06:30,730 --> 00:06:34,262 We need to call the queue free function on the node. 112 00:06:34,499 --> 00:06:38,169 As we saw before we can do that from the animation. 113 00:06:38,170 --> 00:06:41,671 Click the add track button in the animation editor 114 00:06:41,729 --> 00:06:43,814 and select call method track. 115 00:06:44,029 --> 00:06:47,714 It's going to call a function on the note of our choice. 116 00:06:47,786 --> 00:06:51,600 We'll call it on the Area2D that will really need to rename. 117 00:06:51,970 --> 00:06:53,971 Click okay in there 118 00:06:54,686 --> 00:06:58,140 and then right click in the new function track, 119 00:06:58,170 --> 00:07:01,129 select insert key and we're going to call 120 00:07:01,130 --> 00:07:02,443 queue free in there. 121 00:07:02,857 --> 00:07:04,386 There you go. 122 00:07:04,600 --> 00:07:06,700 That's our animation done. 123 00:07:06,720 --> 00:07:10,475 The last thing we want to do is perhaps shorten the animation 124 00:07:10,476 --> 00:07:14,443 because there's no point having this empty bit of the timeline. 125 00:07:14,700 --> 00:07:18,714 Click in the time field on the right of the animation interface 126 00:07:18,800 --> 00:07:23,357 and press .5 to shorten the animation to 0.5 seconds. 127 00:07:23,680 --> 00:07:27,157 The last thing we need to do is rename the area node. 128 00:07:27,300 --> 00:07:30,814 Let's double click it and rename it to pick up. 129 00:07:31,144 --> 00:07:36,197 An interesting thing you'll see if you reselect the animation player 130 00:07:36,198 --> 00:07:40,314 is that name updates in the animation editor. 131 00:07:40,410 --> 00:07:43,129 It automatically knows when you rename a node, 132 00:07:43,190 --> 00:07:47,329 it's going to keep track of that in your animation as well. 133 00:07:47,410 --> 00:07:50,871 There's one last thing that I want to point out with animations 134 00:07:51,086 --> 00:07:55,943 saying that we destroy animation and then we go back to idle 135 00:07:56,257 --> 00:07:58,043 and the gem is invisible. 136 00:07:58,410 --> 00:07:59,471 Why is that? 137 00:07:59,570 --> 00:08:03,886 Because we don't have a scale animation track in there. 138 00:08:04,040 --> 00:08:06,569 In Godot when you play an animation, 139 00:08:06,769 --> 00:08:10,557 you are directly changing the properties of the nodes 140 00:08:10,558 --> 00:08:12,186 that you are animating. 141 00:08:13,786 --> 00:08:18,129 If you don't have some tracks in some of the animations, 142 00:08:18,130 --> 00:08:19,999 well, you can end up in this situation 143 00:08:20,000 --> 00:08:25,814 where the scale of the gem stays where it was in the destroy animation. 144 00:08:26,330 --> 00:08:31,260 It's not a problem for us because when we play destroy in the game, 145 00:08:31,290 --> 00:08:33,100 we will free the gem, 146 00:08:33,224 --> 00:08:37,914 so it will get removed from the game and the computer's memory entirely. 147 00:08:37,970 --> 00:08:41,371 However, this can be inconvenient in the editor. 148 00:08:41,440 --> 00:08:45,643 The one thing you can do is go to this reset animation, 149 00:08:45,970 --> 00:08:49,871 this is a zero length animation that Godot generates for you 150 00:08:49,872 --> 00:08:54,500 and stores the starting state of your nodes, 151 00:08:54,501 --> 00:08:57,529 so that when you automate them anytime you can go back 152 00:08:57,530 --> 00:09:02,229 to the reset animation and we'll reset the scene to its defaults. 153 00:09:02,560 --> 00:09:06,720 With that in the next part we will code the ghost pickup.