Godot 4: Getting Started | Kodeco

[ad_1]

Godot is an open-source game engine that supports the creation of 2D, 3D, and mixed projects that runs on Windows, macOS, Linux and even Android. First released in 2014, it has gained popularity as a viable alternative to larger engines like Unity and Unreal Engine. Some well-known project created with Godot include Dungeondraft, Brotato, Dome Keeper and Sonic Colors: Ultimate.

One of the strengths of Godot is its user-friendly interface and intuitive design. The engine utilizes a node-based system and a Python-like programming language called GDScript, making it easy to create games and applications. It also has built-in nodes for 2D, 3D, and UI, which allows for minimal boilerplate code. Godot is a great choice for game development, especially for beginners.

A GIF of a roguelike game|One of my 2D projects running in Godot

The latest version of Godot, version 4, offers significant improvements over its predecessor, version 3.5. Godot 4 provides a more powerful and versatile game development platform with a wealth of new features and improvements to enhance the game development experience.
Some of the key features of Godot 4 include:

  • A modern Vulkan renderer for improved graphics and performance
  • Support for .NET 6, allowing developers to write scripts using C#
  • An upgraded GDScript, the engine’s primary scripting language, with improved performance and syntax
  • A high-performance physics engine
  • Enhancements to multiplayer functionality
  • A new 3D importer that supports glTF and Blender
  • Countless other features and improvements

Note: Here be dragons! At the time of writing, Godot 4 is not stable yet so you might encounter a weird bug here and there. The stable release is planned for somewhere in 2023. From my own experience, Godot 4 is more than stable enough already, so you shouldn’t run into many issues.

This tutorial focuses on getting you introduced to Godot 4. It touches lightly on some key aspects of the engine so you’ll be able to delver deeper in future tutorials. Here are some of the topics covered:

  • Downloading and opening Godot
  • Getting to know the user interface
  • Creating nodes and scenes
  • Running and instancing scenes
  • Creating scripts

You can download the materials for this project by using the link at the top or bottom of this tutorial. It only includes the final project as you’ll be creating a new project from scratch yourself.
Time to get started with Godot!

Getting Started

While the stable version of Godot can be downloaded from the official download page, you can get the latest version of Godot 4 via this tuxfamily link. Click on the latest folder to open it, rc1 for example.

A directory listing, with rc1 highlighted

From there, click the zip that corresponds to your OS to download it. For the rc1 version of Godot for Windows, that would be Godot_v4.0-rc1_win64.exe.zip.

Godot_v4.0-rc1_win64.exe.zip is highlighted in a list

After the zip has finished downloading, unzip the file and move the folder somewhere safe. Godot’s editor doesn’t need to be installed, so you can even put it on a USB stick or an external drive if you want. The next step is actually running the editor for the first time, how exciting!

Creating a Project

Open the Godot 4 folder and run the executable. Depending on your OS, this may be a .exe, .app or .x86_64 file. If this is the first time you’ve ever ran Godot 4 on your system, you’ll get a dialog window asking you if you wish to explore the example projects. Click the Cancel button to decline and continue to the Project Manager.

A window asking if you'd like to explore example projects

The Project Manager lets you open and create Godot projects. It has two tabs:

  • Local Projects: These are projects that are stored on your device. Any new projects you create will show up here. You can also import existing projects to add them to the list.
  • Asset Library Projects: This is a list of templates, projects and demos pulled from AssetLib, Godot’s official repository of user-submitted assets. You can use these as a starting point or for learning how to use certain engine features.

To create a brand-new project, click the New Project button at the top right.

The New Project button

This will open up the Create New Project dialog window. By default, the project directory will be somewhere in your user directory. This will act as the root folder of all your projects. You can change it by clicking the Browse button to the at the right. I changed mine to C:/GodotProjects for example.

Browse button is highlighted

The next step is creating a folder for the project itself. To do this, fill in the name for the project name, “GettingStarted” and click the Create Folder button. This will create a new subfolder at the project path’s location you set up in the previous step.

GettingStarted is filled in as the name, the Create Folder button is highlighted

Next, leave the other options at their default values and click the Create & Edit button at the bottom to generate a blank project and open the main editor.

Create & Edit button

Interface Tour

If everything went well with the project creation, you’ll be greeted by Godot’s main interface. It may look daunting at first, but no worries, you’ll be navigating it like a champ in no time!

Godot 4 full interface

Areas

Godot’s editor is split up into areas, one for every cardinal direction and a center screen. I’ll give an overview of these in the following sections.

Top Edge

Top bar

The top contains the following features from left to right:

  • Menus: These contain project-wide settings and allow you to save scenes, set debug options and open the documentation just to name a few features.
  • Screen tabs: This switches the content of the center screen to a different main screen. More on that below.
  • Playtest buttons: These buttons allow you to run and stop the project or a specific scene.
  • Renderer dropdown: This switches what renderer is used to display graphics, from the full-featured Forward+ at the top to the lightweight Performance mode.

Center Screen

Center of the window, with the viewport

The content of the center screen depends heavily on the chosen screen mode in the screen tabs. All screens besides AssetLib have the following features in common:

  • Scene tabs: This lets you switch between scenes or create a new empty one using the plus button. By default an empty one is active. At the end is a maximize button to fill the application window with the center screen.
  • Toolbar: A collection of buttons, toggles and menus that apply to the viewport. Here you can switch between selecting, moving, rotating and scaling selected nodes with the first four buttons for example.
  • Viewport: The main view of the scene in most cases. This is a flat plane in 2D mode, a 3D environment in 3D mode and an integrated development environment (IDE) in Script mode.

Left Docks

Left side of the window

The Scene dock at the top shows a hierarchy of the nodes in the active scene. When you have an empty scene open like you do now, it shows buttons to let you choose the root node type. I’ll explain what nodes and scenes are in Godot in the next section. For now, think of them as any objects used in your game, from sprites and 3D meshes to buttons and audio players.
The FileSystem dock at the bottom shows all files in your project like images, scripts and 3D models. The root of the project folder is res://, which stands for resources. By default, Godot comes with a single image: the Godot logo. You’ll get familiar with it soon. :]

Right Dock

Right side of the window

The dock on the right holds the Inspector, which allows you to view and edit the properties of any selected node or resource. Besides the Inspector, there are two more tabs: Node and History. The Node tab contains an overview of the selected node’s signals and groups while the History tab shows a list of the last actions you performed in the project, like moving a node or adjusting a setting for example.

Bottom Panel

Bottom side of the window

The bottom panel hides the output window, debug console, audio mixer, animation editor and the shader editor. Any context-sensitive editors like the tilemap editor will also appear here when needed. The panel can be folded out by clicking any of the buttons.
Try clicking on the Output button for example to see Godot’s initial output.

Output button at the bottom is highlighted

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.

A 3D model is visible in the viewport

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.

Blue colored tiles and a button are visible in the viewport

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.

The code editor

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.

Window showing a list of assets and a search box at the top

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.

GIF of clicking 2D Scene button

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.

GIF of renaming Node2D

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.

The save dialog window

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”.

Note: Here’s a fun fact! Godot’s style guide and community recommend using snake_case for file and folder names to avoid possible conflicts on case-sensitive operating systems.

GIF of clicking the Create Folder button and adding the scenes folder

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.

Save button

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

game.tscn is highlighted

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.

Scene dock showing a World node, with a PlayerAvatar and a UserInterface as its children

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.

Set As Main Scene is highlighted

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

Play button

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

An empty 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.

Stop 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.

Plus button next to game 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.

GIF of dragging in an icon to the viewport

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

Icon is highlighted

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.

A green and red axis

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.

An icon with an orange border

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

A list of properties, including a Texture and other Properties are folded

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.

A circular arrow button is highlighted

That should’ve perfectly centered the icon.

The x and y axes are running through the center of 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.

icon.tscn is saved to the scenes folder

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.

A clapperboard icon is highlighted

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.

Only the bottom right part of the icon can be seen at the top left

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.

GIF of switching scenes and dragging icon.tscn to 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.

Four icons on a gray background, with a blue border

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.

Four icons on a gray background

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

Scripting

Scripting is a fundamental skill when working with any game engine, including Godot. A script is a set of commands that tell the engine what to do and can extend its functionality. In Godot, scripts can be attached to nodes to add new features and behaviors to them.
For example, a Sprite2D node by itself can only display a texture, but with a script, it can follow the cursor, jump, or fade away. Scripts like these can be used to call web APIs, calculate formulas, and perform other actions necessary for creating a game or application.

Godot supports two main programming languages for scripts: GDScript and C#. Additionally, Godot allows for the use of GDExtension, a high-performance method for expanding the engine with libraries written in C or C++. This tutorial will focus solely on GDScript, as it’s an object-oriented language specifically designed for Godot. Its syntax is similar to Python and is widely used in Godot documentation and tutorials.

Your First Script

It’s tradition to start every introduction to a programming language with a “Hello World”, but for this example the nodes will tell you their name instead to greet you into the world of Godot.

To start with, open the icon scene again by clicking its tab at the top or by clicking its scene file in the FileSystem dock. Now select the Icon node via the Scene dock and click the script button at the top right of the Scene dock, it looks like a scroll with a green plus.

A button of a scroll is highlighted

This opens the Attach Node Script window.

Attach Node Script window

By default, a new GDScript will be created that builds upon the selected node type, Sprite2D. The path where the script will be places should be changed, so click the folder button next to the Path property. In the window that opens, go up one directory with the up arrow at the top left and create a new folder named “scripts” in the project root directory.

GIF of creating a new scripts folder

Now click the Open button at the bottom to choose the scripts folder as the location for your new script. Back in the Attach Node Script window, click the Create button at the bottom to create a new script named icon.gd. This will open up the script in Godot’s built-in code editor automatically:

extends Sprite2D


# Called when the node enters the scene tree for the first time.
func _ready():
    pass # Replace with function body.


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    pass

Without delving too deep into scripting, here’s what you should know about this code:

  • The extends Sprite2D part at the top makes it so this script can access all Sprite2D node properties, like its texture and transform.
  • func _ready() is a function that gets called by the engine once at the start of the node’s lifetime.
  • The _process function gets called every frame by the engine.
  • The pass keyword doesn’t do anything here except for exiting the functions. They act as placeholders for your own code.

GDScript uses tabs to group functions and statements together. These show up in the code editor as >|.

A symbol is highlighted

This is important to note as you might get an error saying something similar to “Expected indented block after function declaration.” if you forgot to add a tab or remove one by accident.

An error is displayed, the selected line is red colored

With that small disclaimer out of the way, it’s time to finally add your own code. Replace the pass in the _ready function with this print call:

print("Hello, I'm ", name)

The print method takes one or more arguments and prints them to the output console. The name variable is part of every node; it’s the name that you gave it via the Scene dock earlier: Icon.

Note: Here’s a useful tip! You can open the documentation for the built-in functions, methods and variables by holding the CTRL/CMD key and clicking on the word in the code editor.

Now save the script by pressing CTRL/CMD+S and run the icon scene by pressing F6. Next, minimize or drag away the the game window so you can see Godot’s editor and take a look at the output window at the bottom. There should be a new text entry in there saying “Hello, I’m Icon”.

Hello, I'm Icon text

Great work! You just added and ran your first script in Godot. Press the Stop Running Project button at the top right to close the game window
To add something to look at in the main scene, you’re going to make the icons rotate. To do that, remove the pass keyword from the _process function and replace it with the following:

rotate(delta)

The rotate method is part of Node2D (the parent node class of Sprite2D) and applies rotation to a node. The delta variable is passed to the _process function by the engine, it’s the time in seconds between the previous and current frame. By using a delta time as the rotation value instead of a constant value like 5 for example, the rotation will be smooth and framerate-independent.

In the games of yore, the speed of a game was tied to the CPU speed, which meant that some games are hardly playable because everything whizzes by so fast. Meanwhile, that same game on a slow CPU would result in everything moving in slow-motion. Using the delta time ensures a reliable, constant change in value based on time instead of processor speed. Don’t worry if this concept is still vague to you at this point, just remember to use the delta when you need something to constantly change over time.

Now save the script using the now familiar CTRL/CMD+S shortcut and press F5 to run the main scene, game. If all went well, you’ll see the icons you added earlier rotating.

GIF of four icons rotating

Meanwhile, if you take a look at the output window in the editor, you’ll see that the icons are telling you their name.

Hello text times four

That concludes this tutorial! I hope you had fun while taking your first steps with Godot as I’m looking forward to writing more about it in the future.

Where to Go From Here?

Thanks for reading this tutorial to the end! You can download the final project using the link at the top or bottom of this page.
In this tutorial, you learned the most crucial parts of Godot to get started with creating your own games. Of course, there’s a lot more to discover and master, so here are some useful resources to continue your journey:

This tutorial marks the start of a collection of Godot articles coming soon, so keep an eye on the website for more future content. If you have any topics in mind you want us to cover, make sure to leave a comment below.

[ad_2]

Source link