In this post we’ll set up 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.
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.
We will learn the language little by little during this and subsequent tutorials.
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, the file name represents the class, 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. This function is called when the node, and all its children, enters the active scene.
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 the 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!"
Run the scene and press the button. You should get the following result:
In the next post…
Now that we have some base knowledge of how Godot works, we can start building a little 2D game!
The post Godot Tutorial – Part 3: First project appeared first on Davide's Blog.
This post first appeared on Davide's Blog: Electronics, Games, And Everything In Between., please read the originial post: here