Godot 4: Getting Started

Main Screens

The last area of the UI I want to show here might be the most important as well: the screens. Instead of mixing 2D elements and 3D meshes in a single view like most game engines, Godot opts to separate them to make them easier to work with.
As mentioned before, when you create a new project in Godot, it opens the 3D screen by default.

Here you can manipulate meshes in the viewport and get a preview of the node placement, lightning and other effects.

Next up is the 2D screen, which you can switch to by clicking the 2D screen tab at the top of the window.

This where you can place sprites and create a user interface on a flat plane. Also notice that the toolbar is now showing a bunch of different buttons than before. In Godot, this toolbar will often change depending on the context.

The Script screen will be empty for you at the moment, as you haven’t created any scripts yet. This a built-in code editor with a suite of useful features, including syntax highlighting, rich auto-completion and a debugger.

This is a godsend, as you can choose to solely use this editor to develop your games, without the need for any external script editor.
The last screen is Godot’s AssetLib.

As I’ve mentioned before when discussing the Project Manager, this is a repository of assets like demos, scripts and plugins. Unlike the filtered view of the Project Manager, you can view and import all types of assets here.

Nodes and Scenes

While giving you a tour around Godot’s interface I often mentioned the terms nodes and scenes. These are your most important tools, and you’ll be constantly using them to build up your game. Time to take a closer look at how to create them!

Your First Scene

Click the 2D Scene button in the Scene dock on the left. This will create a new Node2D node at the root of your scene.

A node is the smallest building block in Godot and it can come in all sorts of different flavors. A node can display a sprite, draw a line, play audio, show a checkbox, make a web request and a ton more. You can even create your own custom nodes!
What you created here is a Node2D node, a 2D game object that doesn’t do anything by itself, but does provide a position, rotation and scale. You’ll be using this node as a parent to add other nodes to as its children.

To make its purpose more clear, rename Node2D to GameRoot. You can do this by clicking the node again while it’s selected, pressing F2 or right clicking the node and selecting Rename in the context menu. Now type the name “GameRoot” and hit Enter to confirm.

To save this scene, press CTRL/CMD + S or navigate to Scene ▸ Save Scene in the menu at the top left. This will open Godot’s save dialog.

What you’re seeing here is the root of the project, as indicated by the res:// path at the top. To keep your files neatly organized, it’s best to create folders for each type of asset you’ll be using. Click the Create Folder button at the top right and name this new folder “scenes”.

You can see the path changed to res://scenes to show you’re now in the new folder you created. Name this scene game.tscn and click the Save button to store it.

You can now find this new scene in the FileSystem dock at the bottom left.

In Godot, a scene is a hierarchical organization of nodes that serves as the building blocks for creating games and applications. Scenes can be used as blueprints, allowing you to create instances of them in other scenes. For example, you might have a “world” scene that includes an instance of a “player avatar” scene and a “user interface” scene, which displays information such as the number of gems collected by the player.

The ability to reuse scenes promotes a modular design approach, encouraging the development of smaller, reusable parts that can be combined to create larger, more complex projects.

Every project in Godot has a main scene, which is the first scene that’s loaded when starting the game. In most games, this is a title screen, an intro or credits. The main scene in this tutorial is the main scene. To set it up like that, right-click the game.tscn scene file and select Set As Main Scene in the context menu.

To run the main scene, press F5 or click the Run Project button at the top right, which looks like a play button.

After a short while Godot will run the scene in a new window.

It may look simple, but pat yourself on the back as this is your first scene run of many to come! You can close the window by pressing F8, clicking the Stop Running Project button in the editor or by pressing the window’s close button.

Instancing Scenes

Now you know the basics of how scenes work, it’s time to take a closer look at scene instancing, also commonly called scene instantiating. An instance is a copy of a scene that exists withing another scene. The original scene is used as a template or blueprint to create that copy.

To get started, create a new empty scene by clicking the + button next to the game scene tab.

This scene will contain a single sprite to have something visual to show. It’s been a long-standing tradition in the Godot community to use the Godot logo as a placeholder for all kinds of objects, so I think it’s fitting to use it in this introduction as well!
You can find the icon at the root of the project in the FileSystem dock. Drag it inside of the empty scene’s viewport to add create a new Sprite2D with the icon as its texture.

If you take a look at the Scene dock, you’ll notice a new root node named Icon has been added.

The colored lines in the 2D screen’s viewport are called the x and y axis, with the horizontal line running from left to right being the x-axis and the vertical line running from top to bottom being the y-axis. Every x-position left from the center is negative, while every x-position right from the center is positive. Same with the y-axis: every y-position above the center is negative, while every y-position below the center is positive.

Every 2D position is mapped somewhere on these axes. The sprite node should be centered in the viewport to make it easier to instance this new scene and position it later on, so its position should be (X:0, Y:0). While you could position the icon by eye and hope for the best, a more suitable way of manipulating the position of a node is by using the Inspector.

First, select the Icon node by clicking on it, either in the viewport or in the Scene dock . This will highlight the icon with a orange outline and red handles will appear surrounding it.

Next, take a look at the Inspector on the right, which is now populated with the nodes’s properties.

From here, you can change the texture, set up animation frames, change the color and much more. To change the node’s position to (X:0, Y:0), unfold the Transform property and reset the Position property by clicking the circular arrow button next to the property name.

That should’ve perfectly centered the icon.

Now save this scene by pressing CTRL/CMD+S, naming it icon.tscn and placing it in the scenes folder next to game.tscn.

To check if everything is working as expected, you should run this scene. Press F6 or click the Run Current Scene button (clapperboard icon with a play icon in it) at the top right to run the active scene, icon.

The top left location of the game window is at position (X:0, Y:0), that why this results in a cut-off icon. If you get the same result as in the screenshot below, everything is working as intended.

Go ahead and close this window. The next step is the actual instancing of the icon scene in the main scene. To do that, open the game scene by clicking its scene tab at the top and drag icon.tscn from the FileSystem dock onto the viewport.

The blue rectangle in the viewport visualize the screen borders, you might have to zoom out a bit to see them. Drag three more icon scene instances to the game scene and spread the icons out a bit by dragging them around in the viewport.

Time for another test, press CTRL/CMD+S to save the scene followed by F5 to run the game. You should see the icons happily sitting there.

In the next section, you’ll spruce things up a bit with some simple scripting.