1 00:00:00,486 --> 00:00:03,614 In this video, we'll create the game's start animation, 2 00:00:03,615 --> 00:00:05,828 which you can see here, this countdown. 3 00:00:06,043 --> 00:00:08,814 We'll learn not only how to animate text, 4 00:00:08,943 --> 00:00:14,614 but also how to prevent the player from moving until the animation ends. 5 00:00:15,000 --> 00:00:18,214 We'll do this using Godot's call function tracks, 6 00:00:18,215 --> 00:00:22,714 which allows you to call code from your animations. 7 00:00:23,043 --> 00:00:24,429 Let's get started. 8 00:00:25,043 --> 00:00:28,456 To start with, I'm going to fold the Static Body 2D 9 00:00:28,457 --> 00:00:31,800 and hide it to remove visual noise for you. 10 00:00:32,000 --> 00:00:34,557 Then we'll select the Obstacle Course 11 00:00:34,671 --> 00:00:38,871 and add a new label node as a child of it. 12 00:00:39,629 --> 00:00:43,199 The label appears in the top left. And as we learned before, 13 00:00:43,200 --> 00:00:46,954 we should go to Layout, Full Rect in the toolbar. 14 00:00:46,955 --> 00:00:48,514 And let's see what happens. 15 00:00:48,515 --> 00:00:50,500 It's even worse. 16 00:00:50,501 --> 00:00:51,514 What's happening? 17 00:00:52,043 --> 00:00:55,286 The Obstacle Course, the parent of the label, 18 00:00:55,300 --> 00:00:59,543 is a 2D node, it doesn't have a bounding box. 19 00:00:59,544 --> 00:01:04,710 So the label doesn't have a box to fill right now. 20 00:01:05,171 --> 00:01:08,800 Control nodes are supposed to work with other control nodes 21 00:01:09,414 --> 00:01:12,329 and not with the 2D nodes, the blue ones. 22 00:01:12,814 --> 00:01:18,471 We can separate the user interface from the game world and those 2D nodes 23 00:01:18,472 --> 00:01:22,600 by adding a new kind of node called a Canvas Layer. 24 00:01:22,700 --> 00:01:25,771 So we're going to do that, select the Obstacle Course, 25 00:01:25,914 --> 00:01:30,757 and we're going to add a new Canvas Layer node as a child of it. 26 00:01:31,271 --> 00:01:35,029 Then we drag our label onto the Canvas Layer. 27 00:01:35,386 --> 00:01:36,929 And if you select the node now, 28 00:01:36,930 --> 00:01:40,486 you'll see it's filling the entire game window. 29 00:01:41,137 --> 00:01:42,614 With the label selected, 30 00:01:42,615 --> 00:01:45,871 we're going to add some number in the text, like 1. 31 00:01:46,214 --> 00:01:49,486 It draws in the top left and it's not very visible right now, 32 00:01:49,487 --> 00:01:54,071 but we're going to align it and center it in the view. 33 00:01:54,072 --> 00:01:58,486 You go to Align, Center; Valign, Center. 34 00:01:59,229 --> 00:02:04,086 Now the text is here, really tiny, in the center of the view. 35 00:02:05,271 --> 00:02:07,329 We're going to change the font. 36 00:02:07,330 --> 00:02:10,157 We prepared one for you just to save a couple of clicks. 37 00:02:10,286 --> 00:02:13,005 Go to Obstacle Course, Fonts, 38 00:02:13,205 --> 00:02:17,714 and in the Inspector, we go to Theme Overrides, Fonts, 39 00:02:17,900 --> 00:02:22,071 and we can click and drag info_font onto the Font slot. 40 00:02:22,243 --> 00:02:24,786 And you can see now, the text is much bigger. 41 00:02:25,571 --> 00:02:30,814 All right, that gets us started. We're going to rename the label to Info. 42 00:02:30,815 --> 00:02:33,585 It's going to give you a bit of info on the game state. 43 00:02:33,586 --> 00:02:38,814 We'll put the text if you win or you lose in there later on. 44 00:02:39,171 --> 00:02:42,357 We have one last thing to do before we can animate the text. 45 00:02:42,386 --> 00:02:45,300 I'm going to reselect the Info Node 46 00:02:46,200 --> 00:02:51,022 and go to the Rect category in the Inspector 47 00:02:51,222 --> 00:02:53,457 and down to the Pivot Offset. 48 00:02:53,871 --> 00:02:57,243 We're going to scale the text to animate it. 49 00:02:57,244 --> 00:03:00,887 And so if I set my scale to 0.5-0.5, 50 00:03:00,888 --> 00:03:04,743 you can see the text moves to the top left of the screen. 51 00:03:04,744 --> 00:03:09,014 Instead, we want it to scale down, but centered in the view. 52 00:03:09,015 --> 00:03:11,857 And for that, we are going to move the Text Pivot. 53 00:03:12,157 --> 00:03:18,057 If we press V, if you hover over some parts of the game window 54 00:03:18,058 --> 00:03:21,586 and keep the V key down, you're going to move the Pivot, 55 00:03:21,587 --> 00:03:23,643 but we want to be precise about that, 56 00:03:23,644 --> 00:03:30,414 so we'll change the Pivot Offset in the Inspector to 960 by 540. 57 00:03:30,614 --> 00:03:34,286 This is half of the game's based resolution. 58 00:03:34,287 --> 00:03:37,214 And now if I change the scale to 0.5-0.5, 59 00:03:37,243 --> 00:03:42,043 you can see the text stays centered on the screen. 60 00:03:42,629 --> 00:03:45,743 With that, we can get started animating. 61 00:03:46,236 --> 00:03:49,414 To start animating, we select the Obstacle Course 62 00:03:49,415 --> 00:03:53,829 and we're going to add a new Animation Player as a child of it. 63 00:03:54,657 --> 00:03:58,971 Then we want to create an animation by going to the animation menu 64 00:03:58,972 --> 00:04:00,229 and clicking New. 65 00:04:00,514 --> 00:04:04,486 We'll call this one start_countdown. 66 00:04:06,543 --> 00:04:07,880 And to start with, 67 00:04:08,080 --> 00:04:10,443 we're going to change the animation duration. 68 00:04:11,018 --> 00:04:14,186 To the right of the timeline, you have a number there 69 00:04:14,187 --> 00:04:18,315 that you can click and change to 3, press enter. 70 00:04:18,316 --> 00:04:20,771 You'll see the gray area expense. 71 00:04:20,871 --> 00:04:23,929 And then in the bottom right, you have a Zoom Slider 72 00:04:23,930 --> 00:04:27,686 to change the Zoom level of your animation timeline. 73 00:04:28,671 --> 00:04:32,250 We're going to create our Animation Tracks, 74 00:04:32,251 --> 00:04:35,114 and to do so, we select the Info label. 75 00:04:35,115 --> 00:04:37,871 We're going to create them all at once. 76 00:04:38,329 --> 00:04:40,157 First, we're going to change the text 77 00:04:40,158 --> 00:04:43,214 because we need to change the count to two, then three. 78 00:04:43,257 --> 00:04:44,914 Three, two, one. 79 00:04:45,543 --> 00:04:50,971 So we start by clicking the key icon in the top right of the text field. 80 00:04:51,514 --> 00:04:55,395 And every time we're going to add a new animation track, 81 00:04:55,500 --> 00:05:00,214 we're going to animate a new property, we will get this pop-up. 82 00:05:00,215 --> 00:05:02,286 You can press enter to confirm 83 00:05:02,287 --> 00:05:05,386 and see the track added to the animation editor. 84 00:05:06,686 --> 00:05:08,700 We're going to animate the node's scale. 85 00:05:08,701 --> 00:05:11,929 So we expand the Rect category in the Inspector, 86 00:05:12,071 --> 00:05:16,543 go down and click the key next to Scale, and confirm. 87 00:05:17,814 --> 00:05:22,860 We're going to maybe do two things. 88 00:05:22,890 --> 00:05:25,800 We're going to change the visibility of the node. 89 00:05:25,801 --> 00:05:28,100 Later, we'll have to hide it. 90 00:05:28,214 --> 00:05:31,657 So we're going to expand the Visibility category 91 00:05:31,687 --> 00:05:33,743 and click the key next to Visible. 92 00:05:33,914 --> 00:05:36,113 It's generally good to, 93 00:05:36,114 --> 00:05:38,843 when you're going to mess with the visibility of node, 94 00:05:38,844 --> 00:05:43,514 to have a key just to make it visible at the start of an animation 95 00:05:43,557 --> 00:05:47,071 because if an animation makes a node invisible, 96 00:05:47,286 --> 00:05:50,514 if the next animation doesn't make it appear again, 97 00:05:50,515 --> 00:05:54,100 it's going to stay invisible despite playing the animation. 98 00:05:54,343 --> 00:05:55,914 I hope that makes sense. 99 00:05:55,915 --> 00:05:57,743 And we're going to do one last thing. 100 00:05:58,086 --> 00:06:02,471 It's key the font size of our text because we're going to change it 101 00:06:02,472 --> 00:06:04,620 depending on what we want to show here. 102 00:06:04,650 --> 00:06:09,914 Go to Theme Overrides, Fonts, you expand the Font, 103 00:06:10,657 --> 00:06:13,814 Settings, and put a key next to the Size. 104 00:06:14,614 --> 00:06:19,024 Doing this shows you that basically you can key and animate 105 00:06:19,025 --> 00:06:23,543 about everything you see in the Inspector in Godot, including text. 106 00:06:23,544 --> 00:06:27,557 I'm pointing this out because this is not the case with every single game engine 107 00:06:27,558 --> 00:06:29,457 or animation editor. 108 00:06:30,557 --> 00:06:32,386 Let's start animating. 109 00:06:32,387 --> 00:06:34,657 The first thing we'll change is the text. 110 00:06:34,658 --> 00:06:40,056 So we go to 1 second and select the Info node 111 00:06:40,057 --> 00:06:43,726 and change the text to 2, then click the key icon 112 00:06:43,771 --> 00:06:47,714 and you're going to see a little diamond added there. 113 00:06:47,871 --> 00:06:50,256 At the start, it shows 1, 2. 114 00:06:50,257 --> 00:06:52,857 Actually, we want to change the text at the start 115 00:06:52,943 --> 00:06:57,029 so we can place the time cursor at 0, select the label again, 116 00:06:57,030 --> 00:07:00,429 change the text to 3, click the key icon, 117 00:07:00,857 --> 00:07:04,357 and now, the text stays at 3, then goes to 2. 118 00:07:04,786 --> 00:07:09,671 And at 2 seconds, we want to change the text to 1. 119 00:07:09,672 --> 00:07:12,286 Then click the key icon to insert a keyframe. 120 00:07:12,287 --> 00:07:15,429 And then if you go to the view, play the animation, 121 00:07:15,543 --> 00:07:18,756 you can click the play key here. 122 00:07:18,757 --> 00:07:21,143 It's going to go 3, 2, 1. 123 00:07:22,429 --> 00:07:24,829 The text animation is working already. 124 00:07:25,071 --> 00:07:27,343 Then we want to animate the scale. 125 00:07:27,557 --> 00:07:29,842 The way we're going to do that is 126 00:07:29,843 --> 00:07:32,248 we're going to animate the node scaling down 127 00:07:32,329 --> 00:07:35,357 and then we're going to reset the scale to 1 128 00:07:36,471 --> 00:07:39,220 or to a value larger than 1 actually. 129 00:07:39,543 --> 00:07:42,929 Select the first keyframe or the rect scale 130 00:07:43,357 --> 00:07:48,099 and in the Inspector, we're going to type 3-3. 131 00:07:48,100 --> 00:07:50,157 We're going to make the text really big. 132 00:07:50,158 --> 00:07:52,357 And you have to click the animation timeline 133 00:07:52,358 --> 00:07:56,243 to update the animation state. 134 00:07:56,600 --> 00:07:59,657 You'll see the text might be a little blurry. 135 00:07:59,914 --> 00:08:04,414 It does not matter too much because as it's going to animate scaling down, 136 00:08:04,415 --> 00:08:08,343 the player will not see the blurriness too much. 137 00:08:08,943 --> 00:08:11,243 We're going to go to 1 second, 138 00:08:11,514 --> 00:08:15,329 right-click on our first rect scale keyframe 139 00:08:15,457 --> 00:08:17,400 and select duplicate keys, 140 00:08:17,757 --> 00:08:20,257 and do the same at 2 seconds. 141 00:08:20,258 --> 00:08:22,229 Right-click, duplicate. 142 00:08:22,529 --> 00:08:23,614 Why we do that? 143 00:08:23,615 --> 00:08:29,100 It's because every time we want to reset to that scale, 144 00:08:29,543 --> 00:08:32,943 we're going to insert a new keyframe there, 145 00:08:33,143 --> 00:08:38,700 right-click in the rect scale track and select Insert Key 146 00:08:38,886 --> 00:08:40,629 and then select the new key 147 00:08:40,630 --> 00:08:44,371 and we're going to set the scale in the Inspector down to 0. 148 00:08:45,171 --> 00:08:49,086 Now, if you play the animation, the node will go down 149 00:08:49,087 --> 00:08:53,886 and then, it will scale up, as you can see, very quickly 150 00:08:54,000 --> 00:08:56,057 and in a very ugly way. 151 00:08:57,100 --> 00:08:58,420 And we don't want that. 152 00:08:58,557 --> 00:09:00,928 One thing we can do there is 153 00:09:00,929 --> 00:09:05,229 when we select our keyframe with the scale at 0 in the Inspector, 154 00:09:05,230 --> 00:09:08,814 we can right-click on the Easing and select 0. 155 00:09:08,929 --> 00:09:12,414 It's going to keep the value this way. 156 00:09:12,514 --> 00:09:16,986 It's going to prevent any animation as you can see. 157 00:09:16,987 --> 00:09:21,357 And it instantly switches to 2 and shows the 2 very big. 158 00:09:22,129 --> 00:09:26,129 All right. Now we can place the cursor at 1.9 seconds, 159 00:09:26,614 --> 00:09:30,414 select our scale keyframe with the scale at 0. 160 00:09:30,415 --> 00:09:32,186 Right-click, duplicate, 161 00:09:32,386 --> 00:09:36,100 and we are going to do the same right before 3 seconds there. 162 00:09:36,101 --> 00:09:37,600 Right-click, duplicate. 163 00:09:38,314 --> 00:09:39,786 And if we play the animation, 164 00:09:39,787 --> 00:09:46,400 we'll see the text scaling down and we have our animation done, almost. 165 00:09:46,401 --> 00:09:48,686 We want to add one more thing. 166 00:09:49,200 --> 00:09:51,600 It's that when we play the game, 167 00:09:51,971 --> 00:09:56,957 we can use this icon to automatically play the animation on load. 168 00:09:56,986 --> 00:10:01,713 We're going to turn it on. And if we press F6 to play the scene, 169 00:10:01,714 --> 00:10:04,357 we see the countdown and stays on the screen, 170 00:10:04,358 --> 00:10:06,000 but we can move the character. 171 00:10:06,514 --> 00:10:08,450 And at the start of a race, 172 00:10:08,451 --> 00:10:11,086 you don't want the players to be able to move, 173 00:10:11,186 --> 00:10:13,100 so we're going to prevent them. 174 00:10:13,286 --> 00:10:16,371 We need to add code to keep the player in place 175 00:10:16,372 --> 00:10:18,943 and make it work with the animation. 176 00:10:19,086 --> 00:10:22,757 Now the question is: where do we put this code? 177 00:10:23,757 --> 00:10:26,757 The way we do this most typically in Godot is 178 00:10:26,758 --> 00:10:31,557 we place the code on a common parent to the various nodes 179 00:10:31,558 --> 00:10:33,800 that we need to access in the script. 180 00:10:33,801 --> 00:10:34,486 In this case, 181 00:10:34,487 --> 00:10:39,443 we're going to have to toggle processing on the Godot node, 182 00:10:39,444 --> 00:10:41,043 and we're going to need to synchronize 183 00:10:41,044 --> 00:10:43,929 that with the animation player and with the Info node. 184 00:10:44,129 --> 00:10:48,443 The common parent to all three of these is the Obstacle Course. 185 00:10:48,444 --> 00:10:51,529 So it makes sense to add a script to that one 186 00:10:51,530 --> 00:10:54,129 to coordinate the action between these nodes. 187 00:10:54,657 --> 00:10:59,043 We're going to select Obstacle Course and attach a new script to it. 188 00:10:59,357 --> 00:11:00,814 Click Create. 189 00:11:01,314 --> 00:11:04,986 And I'm going to right-click on the script and close all the other tabs 190 00:11:04,987 --> 00:11:08,243 so it's a bit cleaner and fold the Animation Editor. 191 00:11:08,371 --> 00:11:09,405 All right. 192 00:11:09,814 --> 00:11:11,614 With that, we can get coding. 193 00:11:12,171 --> 00:11:16,900 Actually, we're mostly going to need to change the Godot node right there, 194 00:11:16,901 --> 00:11:19,386 but later, we'll expand the script. 195 00:11:19,729 --> 00:11:24,257 We're going to start with, as usual, an already variable called Godot, 196 00:11:24,343 --> 00:11:29,043 and we're going to get our Godot node so we can use the dollar sign 197 00:11:29,044 --> 00:11:32,171 and complete to Course/Godot. 198 00:11:33,057 --> 00:11:36,986 Then we need to do two things. First, at the start of the game, 199 00:11:36,987 --> 00:11:40,171 we need to prevent the character from moving. 200 00:11:40,172 --> 00:11:42,614 And if we open the Godot Script, 201 00:11:42,771 --> 00:11:47,386 we're going to see that it moves in the physics process function. 202 00:11:47,571 --> 00:11:54,386 It turns out that nodes have a function to toggle physics processing on and off. 203 00:11:54,829 --> 00:11:56,700 We're going to do that now. 204 00:11:56,701 --> 00:12:02,557 We go back to the ObstacleCourse.gd script and we're going to add our ready function 205 00:12:02,786 --> 00:12:05,829 because this corresponds to the start of the game basically. 206 00:12:06,486 --> 00:12:11,043 We're going to call godot.set_physics_proces 207 00:12:11,171 --> 00:12:14,014 and we're going to set it to false. 208 00:12:14,557 --> 00:12:17,543 If you're wondering, this just tells Godot, 209 00:12:17,544 --> 00:12:23,390 "skip this node on every update while this value is false". 210 00:12:23,391 --> 00:12:29,742 And then later, to make the node call physics process every frame, 211 00:12:29,743 --> 00:12:32,546 you just call this function with a value of true, 212 00:12:32,547 --> 00:12:37,131 which is what we're going to do in a new function that we'll call start. 213 00:12:37,271 --> 00:12:39,786 And this function will start the game. 214 00:12:40,071 --> 00:12:42,971 For now, the only thing it's going to do is 215 00:12:43,014 --> 00:12:45,429 set physics process back to true. 216 00:12:45,643 --> 00:12:51,629 One thing you can do is you place your cursor on this line of code, 217 00:12:51,630 --> 00:12:56,343 press Ctrl+C to copy and Ctrl+V to paste. 218 00:12:57,143 --> 00:13:01,400 And then in the parentheses, you want it to change the false to true. 219 00:13:01,457 --> 00:13:04,043 You want to activate movement on Godot. 220 00:13:04,700 --> 00:13:09,200 Now, we have to call that function from somewhere to start the game, 221 00:13:09,329 --> 00:13:12,886 and we can do that from the animation player. 222 00:13:13,443 --> 00:13:16,314 We're going to click on the animation player node, 223 00:13:16,714 --> 00:13:19,300 which will open our animation, 224 00:13:19,543 --> 00:13:22,971 and this time, we'll use the Add Track button. 225 00:13:22,972 --> 00:13:24,143 Click that. 226 00:13:24,443 --> 00:13:28,214 And you want to add something called a Call Method Track. 227 00:13:28,215 --> 00:13:32,829 Method is another term for function basically. 228 00:13:33,286 --> 00:13:34,671 We're going to click that 229 00:13:34,786 --> 00:13:39,486 and it asks you on which node you want to call the function. 230 00:13:39,487 --> 00:13:43,229 It's on the Obstacle Course, so we double click this node, 231 00:13:43,286 --> 00:13:46,586 and a new track appears in our animation player. 232 00:13:46,971 --> 00:13:50,500 We're going to place a time cursor at the end of the animation 233 00:13:50,729 --> 00:13:55,671 and right-click on our function call track to insert a key. 234 00:13:56,943 --> 00:14:00,414 Then it asks you which function you want to call. 235 00:14:00,443 --> 00:14:03,271 We're going to look for our start function. 236 00:14:04,143 --> 00:14:06,614 We need to save the script first. Sorry. 237 00:14:06,615 --> 00:14:12,086 We save the script and then right-click, insert a key and look for start. 238 00:14:12,087 --> 00:14:16,215 You can see it finds the functions from your script. 239 00:14:16,657 --> 00:14:20,614 Click open to add this function call. 240 00:14:20,615 --> 00:14:24,870 Now, if we play the game during the countdown animation, 241 00:14:24,871 --> 00:14:27,271 I cannot move, and as soon as it finishes, 242 00:14:27,272 --> 00:14:31,743 now I can move the character and get pushed off the course a little bit 243 00:14:31,744 --> 00:14:33,029 with our push wall. 244 00:14:33,057 --> 00:14:36,557 This shows you how in Godot you can call a function 245 00:14:36,558 --> 00:14:40,157 from your animation which is a very convenient feature. 246 00:14:40,158 --> 00:14:44,486 It's not available, in every game engine and every technology, 247 00:14:44,943 --> 00:14:47,343 so this was something I wanted to point out. 248 00:14:47,600 --> 00:14:50,386 With that, in the next lesson, we'll add 249 00:14:50,387 --> 00:14:54,671 perhaps the countdown timer and the lose condition for the game. 250 00:14:54,672 --> 00:14:55,560 See you there.