Godot 3.1 Asteroids Tutorial for Beginners [1] Ship Movement


When you open the engine you will be met with this screen:

(those are some of my personal projects. It will be empty for you)

On the right-hand pane select New Project. Type in a name, choose a path, and hit Create Folder to make a new directory for your project. Then press Create & Edit.

Once you have created the project the main view will have shown up. Navigate to the project folder that was just created and create three new folders: scenes, scripts, and sprites.

Right click this link and Save link as… to your sprites folder. This is the player-controlled ship. There is an idle frame and a flying frame which we will eventually use for animation.

Project Settings

The first thing we will do is explore Godot’s Project Settings. At the top of the window, select Project>Project Settings. Many of your game’s settings can be accessed and changed in this menu, including things like controls and localization. For now we are just going to adjust the display. Scroll down to Display>Window. Our resolution is going to be fairly small. Set Width to 320 and Height to 180. Those are the dimensions of our game. We can make the window larger by setting Test Width and Test Height to 1280*720 or whatever you prefer. Under Stretch set Mode to 2d and Aspect to keep. That will stretch our game to the window’s size without ruining the aspect ratio.

(necessary changes have been highlighted)

Nodes and Scenes

One of the things that sets Godot apart from other engines is its Node and Scene system. Basically, just about every component in your game is a Node. There are many types of Nodes, some pertaining to 2D games, some to 3D games, and some to UI elements. A node might be a Sprite which displays an image on the screen, or an AnimationPlayer that can animate other nodes by changing values.

Every node can be nested under another to create Scenes. Almost all of your “objects” will be scenes. An enemy scene might consist of a Sprite node for its visuals, an Area2D node for its hitbox, and an AnimationPlayer for its animation. If you’re new to this format things might be a little confusing, but understanding the Node and Scene system is usually when Godot starts to click for people. In this tutorial I will be explaining in-depth just a couple of nodes and their properties. You can read more here.

(example scene setup of a player)

Player Scene

Let’s create the player scene. Press the 2D button at the top of the screen (next to 3D, Script, and AssetLib) to enter the 2D view. At the left-hand side of the screen is a pane called Scene. This is where our Scene Tree is located, which houses all of the nodes in the current scene. Press Custom Node and you will see a list of all of the nodes Godot has to offer. We are going to make the root node of the player an Area2D node, which you can search for and hit Create.

An Area2D node is used to detect if any other Area2D nodes or physics body nodes are overlapping it. Our player is going to be an Area2D so that it can detect if it has collided with an asteroid and reset the game. We will be covering that later in the series, so don’t worry about the yellow triangle next to the node that says it needs a shape, we don’t need it for this tutorial.

Now you should have a node in the Scene Tree. Right click the node and rename it “player” and save the scene using CTRL-S. Save the scene as “player.tscn” inside of the scenes folder you created earlier.

Right click the node again and press Add Child Node. Add a Sprite node. This is going to give our player an image. If you look at the right-hand pane of the screen, you should see the Inspector. This is a list of all of the properties we can change in a node. First press the box next to Texture and hit Load. Select the “player.png” you placed in the sprites folder earlier. The image should appear, but it’s blurry and there are two ships instead of one. In the Inspector, open the Animation menu and set Vframes to 2. Vframes and Hframes are how many vertical and horizontal images are in a sprite sheet.

To fix the blurriness, go to the Import menu on the left side of the screen in a tab next to the Scene tab. You will also have to select the “ship.png” using the FileSystem menu below it. In the Import menu, select Preset, set it to 2D pixel, and press the Reimport button. The image should now be pixelated and not blurry. You can hit Preset again and press Set as Default for ‘Texture’ so you don’t have to do this again in the future.Now we will add a script to the Area2D. Right click it again and click Attach Script. For path, press the folder icon and save it in the scripts folder. Create the script. Now head onto Page 3 to start on the player script.