In this Godot tutorial we’ll set up our first project: a simple GUI scene consisting of a button and a label. When we click the button, we will update the label with the traditional “Hello World!” text of every beginner tutorials.

We will learn how to:

  • Draw a very simple user interface.
  • Create a script and attach it to a node.
  • Hook up UI elements via signals.
  • Write a script that can access other nodes in the scene.

Creating a new project

First, let’s create a new project, clicking the New Project button. Choose and create a path for the project and set the project name to UITest:

Drawing the GUI

When the editor opens, the workspace selected by default is the 3D one. Click the 2D button at the top of the window or hit F2 to switch to the 2D workspace.

Now, we can add UI elements to the project. To do this, press the New Node button (the plus symbol) in the Scene tree editor:

This will open the Create Node dialog, showing a long list of nodes that can be created:

From there, select the Panel type. You can find it in Node → CanvasItem → Control → Panel. Searching for it is probably the fastest way to select it:

Once selected, click Create to add the panel to the project. The panel appears, selected, at the top left corner of the viewport. Use the 2D editor to resize the panel to make some space to add other GUI elements:

Now, with Panel node selected in the Scene tree editor, add a Label using the same procedure as before. The label will be added as a child of the panel.

In the Inspector, set the label Text property to “This is a label”.

Next, we want to add a Button to the panel. Repeat the procedure above, being careful to select the Panel node to add the button as its child. Set the button text to “Click me” in the Inspector.

Finally, use the 2D editor to position and resize the label and button so that they look like the image below:

Testing the scene

Before testing the scene we just created, we must save it. In the main menu, click on Scene → Save Scene and call it Main.tscn.

The file dialog only allows you to save files inside the project folder. The project root is called res:// which means resource path. When doing file operations in Godot, remember that res:// is the resource path, and no matter the platform or install location, it is the path to locate where resource files are inside the game.

Now that everything is ready, press the Play Scene button on the top bar (or hit F6) to run the scene:

Our first scene is running!

Setting the main scene

Right now, the only way to run something is to execute the current scene. Projects, however, may have several scenes, so one of them must be set as the main scene. This is the one that will be loaded any time the project is run.

What scene to load when the game start is stored in the project.godot file, along with many other settings. Godot provides a project settings dialog to edit this file easily. To access that dialog, select Project → Project Settings.

Once the Project settings window opens, find the Application → Run → Main Scene property and click on the folder icon to select Main.tscn.

Now, when you press the Play button (or hit F5), this scene will run, no matter which scene is actively being edited.

Scripting

Scripts are used to control how nodes function as well as how they interact with other nodes: children, parent, siblings, and so on. The local scope of the script is the node and it inherits the functions provided by that node.

Godot supports four official languages to write scripts: GDscript, VisualScript, C# and C++.

GDScript is the main language used in Godot (and the one I will use in these tutorials). It is a high level, dynamically typed programming language that uses a syntax similar to Python (blocks are indent-based and many keywords are similar) with many optimization for gameplay code (for example it has built-in types like Vectors and Colors). Using it has some positive points compared to other languages, due to its high integration with Godot.

If you don’t know anything about programming, don’t worry. We will learn GDScript a little at a time during the next tutorials. Even if you may come across concepts you don’t know, read this post to the end anyway to start familiarizing with GDScript. You can come back to this post later when you have more knowledge to grasp it more deeply.

Adding a script

Let’s go back to the project. Right click on the Panel node, then select Attach Script from the context menu: the script creation dialog will pop up. In this dialog you can set the script’s language, the class name, and other script options.

Make sure the selected language is GDScript. The node we’re attaching the script to is a Panel, so the Inherits field will automatically be filled in with Panel. In GDScript, by default, all script are unnamed, so Class Name is not editable.

Enter the name of the script (HelloWorld.gd) and click Create.

Godot will create the script, add it to the node and open the script workspace. You can see that now there is an Open Script icon next to the node in the Scene tab.

If you look at the script, you’ll see that a default template has been included that contains the _ready() function:

extends Panel

# Declare member variables here. Examples:
# var a = 2
# var b = "text"

# 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

A function it’s a block of code which only runs when it is called inside other code. You can pass data, known as parameters, to a function, and it can return data as a result. In GDScript, a function is defined using the func keyword, followed by the name of the function and a pair of brackets. If it’s possible to pass parameters to the function, the latter are specified between the brackets.

We will learn how to write functions in the course of this series of tutorials.

The _ready() function is called by Godot when the node, and all its children, enters the active scene.

Signals

Signals are emitted when some event happens, and they can be connected to any function of any script instance.

We want to connect the pressed signal of our button to a custom function in the script we just created. Godot provides two ways to create connections: through the editor or through code. We will use the editor.

Select the Button node in the scene tree and then select the Node tab. Next, make sure that you have Signals selected:

If you select pressed() under BaseButton and click the Connect button in the bottom right, you’ll open up the connection creation dialogue:

The top-left section displays a list of your scene’s nodes with the emitting node’s name highlighted in red. Use this to select the node you want to connect to the signal. Select the Panel node: the Path to Node field at the bottom will automatically update.

By default, Method In Node will contain a function name made-up by the emitting node’s name and the signal name, but you can choose any name you like. If Make Function button is checked, then the editor will generate the function for you before setting up the connection.

Click the Connect button. The script editor will open with the newly created function selected.

Changing label text

When we press the button, we want to change the label text to “Hello World!”.

First of all, we need to get the Label node in order to change its properties. To accomplish this, we will introduce the most used function in Godot: Node.get_node(). This function find nodes using paths relative to the node that owns the script.

Because Label is a child of Panel (where our script is attached), you can fetch it by typing the following code under the _on_Button_pressed() function:

func _on_Button_pressed():
    get_node("Label").text = "Hello World!"

Since version 3.0 of Godot, you can use a more compact notation to refer to the child nodes, using the $ operator:

func _on_Button_pressed():
    $Label.text = "Hello World!"

Run the scene and press the button. You should get the following result:

Conclusions

In these first three introductory tutorials, we get a basic knowledge of how Godot works. Now, we can start building a little 2D pixel art game!




0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to browse this Website, you consent to the use of cookies. More information

This Website uses:

By continuing to browse this Website without changing the cookies settings of your browser or by clicking "Accept" below, you consent to the use of cookies.

Close