1 00:00:00,320 --> 00:00:04,614 In this video, you'll create a ship that moves by itself. 2 00:00:04,930 --> 00:00:07,243 I will teach you how to create nodes, 3 00:00:07,450 --> 00:00:12,300 attach a script to them, and write a bit of code to take control of the ship. 4 00:00:12,570 --> 00:00:15,057 To get started, open the Godot editor 5 00:00:15,166 --> 00:00:19,380 and we want to open the Learn to Code with Godot Practices project, 6 00:00:19,400 --> 00:00:21,060 the one with the purple icon. 7 00:00:21,080 --> 00:00:24,808 If you haven't imported it yet, you'll find a link to a guide 8 00:00:25,008 --> 00:00:28,814 right below the video that will teach you how to do that step by step. 9 00:00:29,010 --> 00:00:31,943 Let's double click that to open the Godot project 10 00:00:32,271 --> 00:00:34,329 and we land on the 3D view. 11 00:00:35,090 --> 00:00:38,340 Now, before we get started, I want to give you a quick tour 12 00:00:38,370 --> 00:00:42,557 of the user interface so you get a sense for how the Godot editor works. 13 00:00:42,730 --> 00:00:46,814 In the top left you have the main command menus 14 00:00:46,824 --> 00:00:49,529 to manage scenes, your project and so on. 15 00:00:50,050 --> 00:00:51,780 In the center at the top 16 00:00:51,810 --> 00:00:55,043 you have the main screens, the 2D view, 3D view, 17 00:00:55,157 --> 00:00:57,943 script editor, which allows you to code your games, 18 00:00:58,114 --> 00:01:00,329 and the asset lib which is a library 19 00:01:00,330 --> 00:01:04,543 of free and open source add-ons you can download in your projects. 20 00:01:05,080 --> 00:01:08,629 We'll be working in the 2D view so you can click on that button. 21 00:01:09,160 --> 00:01:11,886 Then in the top right, you have a couple of buttons 22 00:01:11,957 --> 00:01:16,871 to test your game or to test the current scene that you're editing. 23 00:01:18,040 --> 00:01:19,740 In the middle you have the viewpoint, 24 00:01:19,770 --> 00:01:22,829 so it can be2D, 3D, it can be a script editor. 25 00:01:23,345 --> 00:01:24,986 We'll be working in 2D. 26 00:01:25,514 --> 00:01:29,400 Finally, on the sides you have the docks. 27 00:01:29,880 --> 00:01:32,490 On the left side you have the scene editor. 28 00:01:32,520 --> 00:01:37,343 It lets you create characters, levels, all kinds of things in your game. 29 00:01:37,450 --> 00:01:42,714 In the bottom left, the file system dock lists all the files in your game project. 30 00:01:43,010 --> 00:01:47,210 On the right you have the Inspector that we'll use in a moment. 31 00:01:47,240 --> 00:01:49,620 This one allows you to change 32 00:01:49,650 --> 00:01:53,114 the properties of selected objects in your scene. 33 00:01:53,450 --> 00:01:55,529 Finally, you have the practices dock. 34 00:01:55,570 --> 00:01:57,657 This one we made for you. 35 00:01:57,930 --> 00:02:01,386 It lists all the interactive practices in the project. 36 00:02:01,520 --> 00:02:05,443 Just note that look may change because we keep improving it 37 00:02:05,444 --> 00:02:08,143 and adding practices with updates. 38 00:02:08,450 --> 00:02:10,957 With that we can get started creating the scene. 39 00:02:11,170 --> 00:02:14,140 To get started head to the moving ship directory 40 00:02:14,170 --> 00:02:15,634 in the file system dock. 41 00:02:15,700 --> 00:02:17,757 You can double click it to expand it. 42 00:02:17,920 --> 00:02:21,730 There you'll find a couple of subfolders, you can ignore them for now. 43 00:02:21,760 --> 00:02:25,540 They contain the code for the practice you'll be doing after the lessons. 44 00:02:25,570 --> 00:02:31,100 You also have several files, some images, but also a script and scene. 45 00:02:31,130 --> 00:02:35,860 We'll typically include files like these in projects to avoid wasting time 46 00:02:35,890 --> 00:02:39,380 on details that aren't important for your learning at this stage. 47 00:02:39,410 --> 00:02:42,190 The thrusters will give your ship some thrusters 48 00:02:42,390 --> 00:02:46,057 without you having to worry about how the code works exactly. 49 00:02:46,210 --> 00:02:48,860 We're going to get started creating our ship. 50 00:02:48,890 --> 00:02:52,064 To do that we head to the scene dock in the top left. 51 00:02:52,186 --> 00:02:55,214 You're presented with four options to create a scene. 52 00:02:55,330 --> 00:02:57,580 You can start with a 2D base node, 53 00:02:57,610 --> 00:03:01,280 3D base node, user interface based node, or another node. 54 00:03:01,280 --> 00:03:03,100 That's what we're going to make here. 55 00:03:03,130 --> 00:03:07,957 Click the other node button to open the Create New Node dialog. 56 00:03:08,090 --> 00:03:10,186 There you can see all the building blocks 57 00:03:10,290 --> 00:03:13,610 that Godot provides to make games and you have tons of them. 58 00:03:13,640 --> 00:03:15,780 If you click on the arrows to expand them 59 00:03:15,810 --> 00:03:18,186 you'll see the list goes on and on and on. 60 00:03:18,530 --> 00:03:22,744 Now, the main three types are spatial for 3D, 61 00:03:22,745 --> 00:03:25,914 control, the green ones for user interface 62 00:03:26,043 --> 00:03:29,943 and node 2D, the blue ones for 2D stuff. 63 00:03:30,130 --> 00:03:31,980 We will create one of the blue ones, 64 00:03:32,010 --> 00:03:36,610 but we're not going to be opening the list and searching for the nodes. 65 00:03:36,640 --> 00:03:39,220 Instead, we'll use the search bar at the top. 66 00:03:39,250 --> 00:03:44,157 You can click into it and type sprite to find the sprite node. 67 00:03:44,290 --> 00:03:49,967 A sprite is an image that you can move, scale and rotate as you'll see. 68 00:03:50,729 --> 00:03:53,796 When you create the sprite you see the node appear 69 00:03:53,797 --> 00:03:57,229 in your scene dock in the top left and you see the Inspector 70 00:03:57,543 --> 00:04:01,114 show the properties of the sprite that you can change. 71 00:04:01,329 --> 00:04:05,557 Things like its position, rotation, but also its texture. 72 00:04:05,850 --> 00:04:08,914 This is the image that the sprite node will display. 73 00:04:09,090 --> 00:04:14,260 You want to head to the file system dock in the bottom left and click and drag 74 00:04:14,290 --> 00:04:19,957 the green_ship.png file onto the texture slot in the Inspector. 75 00:04:20,160 --> 00:04:22,671 When you do that, your ship appears. 76 00:04:23,410 --> 00:04:28,314 Then you can click and drag on the node on the bounding box 77 00:04:28,500 --> 00:04:31,329 to move it in the game view. 78 00:04:33,243 --> 00:04:35,009 We can talk a bit about navigation. 79 00:04:35,010 --> 00:04:37,800 You can use the mouse wheel to zoom in and out, 80 00:04:37,929 --> 00:04:40,986 or you can click on the plus, minus icons 81 00:04:41,500 --> 00:04:44,943 and the text in the top left corner of the viewport. 82 00:04:45,210 --> 00:04:49,657 You can middle mouse click and drag to pan the view. 83 00:04:50,410 --> 00:04:55,140 You want to place the ship so it's inside of this frame here 84 00:04:55,160 --> 00:04:57,714 because this will be your game view. 85 00:04:57,800 --> 00:05:01,020 We can try to run the scene now. 86 00:05:01,040 --> 00:05:06,971 To do so you can click on the button in the top right called Play Scene. 87 00:05:07,330 --> 00:05:11,060 If you click it, the file dialog will open 88 00:05:11,090 --> 00:05:13,820 to ask you to save before running the scene. 89 00:05:13,840 --> 00:05:16,971 We can go into the Moving Ship folder 90 00:05:17,480 --> 00:05:22,620 and we're going to name the file movingship.tscn. 91 00:05:22,650 --> 00:05:26,300 Tscn is the extension for scenes in Godot. 92 00:05:26,330 --> 00:05:30,270 You can click Save and your game will run automatically. 93 00:05:30,470 --> 00:05:33,986 You have the sprite, we add a background to make the scene 94 00:05:33,987 --> 00:05:38,129 look a bit cooler for you and we're going to make that sprite move 95 00:05:38,130 --> 00:05:40,200 because right now it's not doing anything. 96 00:05:40,450 --> 00:05:43,700 You can press F8 to close the game window. 97 00:05:44,530 --> 00:05:48,071 To move the sprite we need to attach a script to it. 98 00:05:48,957 --> 00:05:53,586 In the scene dock you're going to right click on the sprite node 99 00:05:53,587 --> 00:05:56,272 and select the Attach Script button. 100 00:05:56,360 --> 00:05:57,889 You can use the default, 101 00:05:58,089 --> 00:06:00,819 your template will probably be set to default. 102 00:06:01,019 --> 00:06:05,214 I recommend to use empty instead and click create. 103 00:06:05,215 --> 00:06:07,371 Godot will automatically create the script file 104 00:06:07,372 --> 00:06:10,371 in the file system dock, you can see it down there 105 00:06:10,529 --> 00:06:15,171 in the bottom left and populate it with this line, extends sprite. 106 00:06:15,410 --> 00:06:19,857 This one is new, it just means all the code of the sprite 107 00:06:20,057 --> 00:06:22,943 in the Godot engine this script extends it, 108 00:06:22,944 --> 00:06:24,529 it adds to it literally. 109 00:06:25,386 --> 00:06:30,842 This means that we have access to all the features of a sprite as coded 110 00:06:30,843 --> 00:06:33,329 by the Godot developers in the Godot engine. 111 00:06:33,410 --> 00:06:35,700 To make the ship move we need to use 112 00:06:35,730 --> 00:06:38,740 a function you've seen in the Learn GDScript app. 113 00:06:38,770 --> 00:06:39,957 Which one was it? 114 00:06:40,330 --> 00:06:44,812 It's the process function and to define it in our script 115 00:06:44,943 --> 00:06:49,900 we write func _process and you can see something new, 116 00:06:49,930 --> 00:06:55,260 it's that when you type things in Godot the editor is going to suggest completions 117 00:06:55,290 --> 00:06:56,957 for what you are typing. 118 00:06:57,029 --> 00:07:00,257 You can press enter to accept its suggestion. 119 00:07:00,570 --> 00:07:05,352 The process function is built into Godot and it runs the code you're going 120 00:07:05,353 --> 00:07:10,067 to put inside of it every frame and we can use that to move our sprite. 121 00:07:10,290 --> 00:07:14,922 To do that we're going to add some value to the sprite's position. 122 00:07:15,071 --> 00:07:18,843 We write position and then we're going to add 123 00:07:18,914 --> 00:07:22,900 plus equals like this, it means add to the position 124 00:07:23,287 --> 00:07:26,380 and we need to add a vector 2 value to it. 125 00:07:26,410 --> 00:07:28,660 We're going to start to type vector 2 126 00:07:28,690 --> 00:07:31,057 and then we have in the parentheses 127 00:07:31,058 --> 00:07:34,729 to give a horizontal value and a vertical value. 128 00:07:35,578 --> 00:07:39,614 We can start by saying five, zero, something like that. 129 00:07:39,800 --> 00:07:43,140 Every frame we're going to add to our ship's position. 130 00:07:43,170 --> 00:07:45,671 Now you can click the button in the top right 131 00:07:45,672 --> 00:07:49,043 to play the scene or you can press the shortcut F6. 132 00:07:49,410 --> 00:07:52,420 If I do that the ship moves every frame, 133 00:07:52,450 --> 00:07:53,860 all is well and good. 134 00:07:53,890 --> 00:07:55,529 Well, there's one problem. 135 00:07:55,686 --> 00:07:58,486 Right now we have a hard coded amount of pixels 136 00:07:58,487 --> 00:08:00,043 that we move every frame. 137 00:08:00,229 --> 00:08:04,900 As we saw in the learn GDScript app we want to use the delta parameter 138 00:08:04,952 --> 00:08:08,557 of the process function to make our code time dependent. 139 00:08:08,700 --> 00:08:11,571 That way if the game frame rate goes down 140 00:08:11,770 --> 00:08:14,600 the ship will still move at the same speed. 141 00:08:15,480 --> 00:08:20,220 When doing that we need to increase the values we use in our vector 2. 142 00:08:20,250 --> 00:08:26,886 Typically 500 on the x-axis and we are going to multiply that by delta. 143 00:08:27,290 --> 00:08:28,100 Why is that? 144 00:08:28,130 --> 00:08:31,431 It's because delta is a fraction of a second, 145 00:08:31,432 --> 00:08:36,620 so it's typically a very small value around 0.1 or something like that, 146 00:08:36,650 --> 00:08:40,857 so it's going to make our vector here much smaller. 147 00:08:43,000 --> 00:08:45,743 We're going to press F6 again to see 148 00:08:45,970 --> 00:08:49,388 that the ship still moves exactly the same way, 149 00:08:50,086 --> 00:08:52,571 more or less at a different speed perhaps. 150 00:08:53,114 --> 00:08:55,700 Now, we can make that a bit better 151 00:08:55,730 --> 00:08:58,049 'cause you see we may not want 152 00:08:58,050 --> 00:09:01,135 the speed of the ship to always be the same. 153 00:09:01,360 --> 00:09:03,957 In the next lesson, we're going to introduce input 154 00:09:03,958 --> 00:09:06,814 and different things to control the ship. 155 00:09:07,600 --> 00:09:09,411 One thing we can do is instead 156 00:09:09,412 --> 00:09:11,943 of hard coding this value in our process function, 157 00:09:12,200 --> 00:09:15,371 we're going to create a member variable for it. 158 00:09:15,881 --> 00:09:20,786 Outside of the process function create a new variable named velocity. 159 00:09:20,943 --> 00:09:24,614 We're going to put a colon equal to set its default value 160 00:09:25,250 --> 00:09:28,425 and cut and paste our vector 2 here. 161 00:09:28,970 --> 00:09:32,310 Select it with the mouse, press CTRL + X to cut 162 00:09:32,510 --> 00:09:37,140 and then click next to the velocity and Control + V to paste our value. 163 00:09:37,170 --> 00:09:40,614 We're going to add that velocity value to the function. 164 00:09:40,890 --> 00:09:44,643 We've abstracted away our vector 2 value, 165 00:09:44,714 --> 00:09:50,543 that way it will be a bit easier to edit but also modify from code later. 166 00:09:51,410 --> 00:09:54,214 All right, so we can see the ship moving, 167 00:09:55,200 --> 00:09:57,043 we can change our velocity, 168 00:09:57,271 --> 00:10:00,900 we can make the number bigger on the vertical axis. 169 00:10:01,320 --> 00:10:05,543 When we press F6, the ship moves diagonally, more or less. 170 00:10:06,250 --> 00:10:08,380 Now, there's one thing that's not so neat. 171 00:10:08,410 --> 00:10:11,540 It's that if I make the ship move down, 172 00:10:11,560 --> 00:10:13,829 it's still going to be looking to the right. 173 00:10:16,960 --> 00:10:19,343 One thing we can do now that we have 174 00:10:19,344 --> 00:10:25,443 our velocity value is change the angle of the ship based on its current velocity. 175 00:10:25,970 --> 00:10:28,100 The way we do that in the process function 176 00:10:28,130 --> 00:10:33,900 is by adding a new line and we're going to change the rotation of the ship. 177 00:10:33,930 --> 00:10:38,357 We're going to make it equal to velocity.angle. 178 00:10:38,730 --> 00:10:42,457 The angle function of the vector 2 179 00:10:42,801 --> 00:10:47,086 gives you the angle of that vector in radians 180 00:10:47,415 --> 00:10:50,543 and rotation is a value in radians. 181 00:10:50,970 --> 00:10:52,914 When we do that and press F6, 182 00:10:53,010 --> 00:10:56,980 you'll see that the ship ends up pointing towards the velocity. 183 00:10:57,010 --> 00:11:00,670 If you use a value that makes it go diagonal 184 00:11:00,671 --> 00:11:02,369 and we're going to make it go up, 185 00:11:02,370 --> 00:11:04,914 the ship will be looking up a bit. 186 00:11:05,872 --> 00:11:10,414 To wrap up let's make our ship a little cooler by adding the thrusters. 187 00:11:10,730 --> 00:11:12,620 Head back to the file system dock 188 00:11:12,650 --> 00:11:18,957 and select the file thrusters.tscn, not thrusters.gd, which is a script. 189 00:11:19,170 --> 00:11:24,380 Click and drag thrusters.tscn onto the sprite node in the scene dock. 190 00:11:24,410 --> 00:11:28,940 When you release the key, you'll see the flames appear behind the ship. 191 00:11:28,970 --> 00:11:32,220 Now when you play the game, the flames will be there. 192 00:11:32,250 --> 00:11:36,486 As we add code to the ship, you'll see them animate automatically. 193 00:11:36,610 --> 00:11:39,871 It's just to make things a bit more pleasing visually. 194 00:11:41,210 --> 00:11:45,657 Now click the script icon next to the sprite node in the scene dock 195 00:11:45,986 --> 00:11:47,657 to head back to your code. 196 00:11:48,010 --> 00:11:52,414 In the next video, we'll add code to control the ship with a keyboard. 197 00:11:52,690 --> 00:11:53,629 See you there.