In this video, you'll create a ship that moves by itself.
I will teach you how to create nodes,
attach a script to them, and write a bit of code to take control of the ship.
To get started, open the Godot editor
and we want to open the Learn to Code with Godot Practices project,
the one with the purple icon.
If you haven't imported it yet, you'll find a link to a guide
right below the video that will teach you how to do that step by step.
Let's double click that to open the Godot project
and we land on the 3D view.
Now, before we get started, I want to give you a quick tour
of the user interface so you get a sense for how the Godot editor works.
In the top left you have the main command menus
to manage scenes, your project and so on.
In the center at the top
you have the main screens, the 2D view, 3D view,
script editor, which allows you to code your games,
and the asset lib which is a library
of free and open source add-ons you can download in your projects.
We'll be working in the 2D view so you can click on that button.
Then in the top right, you have a couple of buttons
to test your game or to test the current scene that you're editing.
In the middle you have the viewpoint,
so it can be2D, 3D, it can be a script editor.
We'll be working in 2D.
Finally, on the sides you have the docks.
On the left side you have the scene editor.
It lets you create characters, levels, all kinds of things in your game.
In the bottom left, the file system dock lists all the files in your game project.
On the right you have the Inspector that we'll use in a moment.
This one allows you to change
the properties of selected objects in your scene.
Finally, you have the practices dock.
This one we made for you.
It lists all the interactive practices in the project.
Just note that look may change because we keep improving it
and adding practices with updates.
With that we can get started creating the scene.
To get started head to the moving ship directory
in the file system dock.
You can double click it to expand it.
There you'll find a couple of subfolders, you can ignore them for now.
They contain the code for the practice you'll be doing after the lessons.
You also have several files, some images, but also a script and scene.
We'll typically include files like these in projects to avoid wasting time
on details that aren't important for your learning at this stage.
The thrusters will give your ship some thrusters
without you having to worry about how the code works exactly.
We're going to get started creating our ship.
To do that we head to the scene dock in the top left.
You're presented with four options to create a scene.
You can start with a 2D base node,
3D base node, user interface based node, or another node.
That's what we're going to make here.
Click the other node button to open the Create New Node dialog.
There you can see all the building blocks
that Godot provides to make games and you have tons of them.
If you click on the arrows to expand them
you'll see the list goes on and on and on.
Now, the main three types are spatial for 3D,
control, the green ones for user interface
and node 2D, the blue ones for 2D stuff.
We will create one of the blue ones,
but we're not going to be opening the list and searching for the nodes.
Instead, we'll use the search bar at the top.
You can click into it and type sprite to find the sprite node.
A sprite is an image that you can move, scale and rotate as you'll see.
When you create the sprite you see the node appear
in your scene dock in the top left and you see the Inspector
show the properties of the sprite that you can change.
Things like its position, rotation, but also its texture.
This is the image that the sprite node will display.
You want to head to the file system dock in the bottom left and click and drag
the green_ship.png file onto the texture slot in the Inspector.
When you do that, your ship appears.
Then you can click and drag on the node on the bounding box
to move it in the game view.
We can talk a bit about navigation.
You can use the mouse wheel to zoom in and out,
or you can click on the plus, minus icons
and the text in the top left corner of the viewport.
You can middle mouse click and drag to pan the view.
You want to place the ship so it's inside of this frame here
because this will be your game view.
We can try to run the scene now.
To do so you can click on the button in the top right called Play Scene.
If you click it, the file dialog will open
to ask you to save before running the scene.
We can go into the Moving Ship folder
and we're going to name the file movingship.tscn.
Tscn is the extension for scenes in Godot.
You can click Save and your game will run automatically.
You have the sprite, we add a background to make the scene
look a bit cooler for you and we're going to make that sprite move
because right now it's not doing anything.
You can press F8 to close the game window.
To move the sprite we need to attach a script to it.
In the scene dock you're going to right click on the sprite node
and select the Attach Script button.
You can use the default,
your template will probably be set to default.
I recommend to use empty instead and click create.
Godot will automatically create the script file
in the file system dock, you can see it down there
in the bottom left and populate it with this line, extends sprite.
This one is new, it just means all the code of the sprite
in the Godot engine this script extends it,
it adds to it literally.
This means that we have access to all the features of a sprite as coded
by the Godot developers in the Godot engine.
To make the ship move we need to use
a function you've seen in the Learn GDScript app.
Which one was it?
It's the process function and to define it in our script
we write func _process and you can see something new,
it's that when you type things in Godot the editor is going to suggest completions
for what you are typing.
You can press enter to accept its suggestion.
The process function is built into Godot and it runs the code you're going
to put inside of it every frame and we can use that to move our sprite.
To do that we're going to add some value to the sprite's position.
We write position and then we're going to add
plus equals like this, it means add to the position
and we need to add a vector 2 value to it.
We're going to start to type vector 2
and then we have in the parentheses
to give a horizontal value and a vertical value.
We can start by saying five, zero, something like that.
Every frame we're going to add to our ship's position.
Now you can click the button in the top right
to play the scene or you can press the shortcut F6.
If I do that the ship moves every frame,
all is well and good.
Well, there's one problem.
Right now we have a hard coded amount of pixels
that we move every frame.
As we saw in the learn GDScript app we want to use the delta parameter
of the process function to make our code time dependent.
That way if the game frame rate goes down
the ship will still move at the same speed.
When doing that we need to increase the values we use in our vector 2.
Typically 500 on the x-axis and we are going to multiply that by delta.
Why is that?
It's because delta is a fraction of a second,
so it's typically a very small value around 0.1 or something like that,
so it's going to make our vector here much smaller.
We're going to press F6 again to see
that the ship still moves exactly the same way,
more or less at a different speed perhaps.
Now, we can make that a bit better
'cause you see we may not want
the speed of the ship to always be the same.
In the next lesson, we're going to introduce input
and different things to control the ship.
One thing we can do is instead
of hard coding this value in our process function,
we're going to create a member variable for it.
Outside of the process function create a new variable named velocity.
We're going to put a colon equal to set its default value
and cut and paste our vector 2 here.
Select it with the mouse, press CTRL + X to cut
and then click next to the velocity and Control + V to paste our value.
We're going to add that velocity value to the function.
We've abstracted away our vector 2 value,
that way it will be a bit easier to edit but also modify from code later.
All right, so we can see the ship moving,
we can change our velocity,
we can make the number bigger on the vertical axis.
When we press F6, the ship moves diagonally, more or less.
Now, there's one thing that's not so neat.
It's that if I make the ship move down,
it's still going to be looking to the right.
One thing we can do now that we have
our velocity value is change the angle of the ship based on its current velocity.
The way we do that in the process function
is by adding a new line and we're going to change the rotation of the ship.
We're going to make it equal to velocity.angle.
The angle function of the vector 2
gives you the angle of that vector in radians
and rotation is a value in radians.
When we do that and press F6,
you'll see that the ship ends up pointing towards the velocity.
If you use a value that makes it go diagonal
and we're going to make it go up,
the ship will be looking up a bit.
To wrap up let's make our ship a little cooler by adding the thrusters.
Head back to the file system dock
and select the file thrusters.tscn, not thrusters.gd, which is a script.
Click and drag thrusters.tscn onto the sprite node in the scene dock.
When you release the key, you'll see the flames appear behind the ship.
Now when you play the game, the flames will be there.
As we add code to the ship, you'll see them animate automatically.
It's just to make things a bit more pleasing visually.
Now click the script icon next to the sprite node in the scene dock
to head back to your code.
In the next video, we'll add code to control the ship with a keyboard.
See you there.