Welcome to the fourth lesson in the “Make a Simple Game in Godot” series, my name is Chadot and today I will teach you how to add some functionality to our buttons.
Setting up a main scene
There is a button named Play which is located to the top–right:
However, if we push it then we’ll receive a pop–message telling us that we have not defined any main scene for our project, so the engine doesn’t know which scene to begin the game with!
We are also presented with three different options here, we can of course cancel which will close the pop–message without making any changes. Or we can push select which will give as an additional pop–message that allows us to browse the files in our project. And lastly we have the option of defining the current active scene to be our main scene.
I want you to pick “select” so we can browse and find the scene we want as our main scene.
This will open up a browser window:
Hit the “back” button to go up one level so we can see all our folders:
So, which scene will be our main scene? Let’s pick the wrong one for now, so I can show you the proper way of doing it afterwards.
After selecting the Asteroid scene, push the Open button:
Now our first game is actually running!
But as you can see, our scene is completely empty! And that is to be expected because we have not done any work on our Asteroid scene.
Setting Main Scene the proper way
Now let me show you the proper way for defining the main menu of a project. Select Project > Project Settings…
This will open up a window that lists our project’s settings. Here we can define a whole lot of things, but for now we will focus only on defining our main scene.
Select the Run settings under General > Application:
This will switch our view to reveal a couple of settings for our project including the property that defines our main scene. Which just so happens to be at the top of the list of properties!
If you look closely, you will also see that the currently defined main scene is our Asteroid scene, which we had defined earlier!
Now let us go ahead and define the scene that will be our actual main scene, click the folder–looking icon:
This will show us the file browser again. This time we will pick the main menu scene as our main scene:
Now our main menu is selected in the Main Scene property! Go ahead and close the project settings window:
Now if we push play, our main menu shows up with our buttons!
Make buttons do something
Sheesh, I thought this lesson was about adding some functionalities to our buttons!
Go to the main menu scene and select the Play button that we created in the previous lesson. Now with the Play button selected, go to the inspector view and click on the Tab next to it called Node:
This will change the right side panel from the Inspector view that was showing us our button’s properties to a Signal view where we can discover what types of signals our button can emit!
Signals are, and do, exactly what you expect from a signal. They simply send a signal when something happens. From the Node view we are given a list of already built–in conditions for our button, which if met, a specific signal will be emitted.
But we are not limited to these built–in conditions! We can create our own, but that’s for a more advanced tutorial! Right now we already have everything we need, which is the pressed() condition.
Go ahead and double–click on the pressed() condition in the Node view for our Play button:
This will show us a pop–up window that asks us about how and where we want to connect our signal, in other words, where should the signal go when the button is pressed?
All signals have to be connected to a script.
But we don’t have a script! And there is even an error telling us about this:
There is no script in our scene and we have to fix that or else we will not be able to move forward.
Creating our first script
Programming is actually super easy. But you have to do something first before it becomes super easy. You have to believe it yourself and stop being scared of it.
Treat programming like you would treat paint. Just throw it around and see what happens. If it doesn’t work, then throw a different paint!
It’s really that simple!
The only “difficult” part is remembering the different names of each paint. That’s pretty much it.
In programming the name of the paint is actually the name of a function.
What does “function” mean?
It means exactly what it means! A function!
A thing, if used, will do this.
For example, when you turn the handle on your door, the door opens. That’s the function of the door handle. Or when you turn the light switch on, the electricity gets connected to your light bulb, and now your room is lit!
It really is that simple.
And if you trust me, and trust yourself, and stick to the end of this tutorial series, you will see exactly how easy programming is. So much so that you will eventually be programming in your sleep even!
So, let’s begin.
Let’s close the signal window for now, we will get back to it soon enough:
Attach a script
Select the MainMenu node (the parent node of our main menu scene):
Now, with the MainMenu node selected, push the icon with the paper–like image, this will add a script to the currently selected node:
This will show the Attach Node Script window for us, and because we took our time to properly name and organize our folders and scenes, the engine has filled in a recommended name for our script that is exactly what we want.
So we don’t really have to do much here except click the Create button:
This will change our work view from the 2D viewport to the script viewport:
Useful tricks in the Script Viewport
- With the script area selected, you can zoom in or zoom out to make the script text bigger by holding down Ctrl + scroll with the mouse–wheel.
- Use Ctrl + F to search your current script.
- Use Ctrl + Shift + F to search through all scripts in your entire project!
- If you Ctrl + Click on functions, such as the _ready() text, a helper text will open which explains what said function does and how it works.
Writing our first code
Now, the biggest mistake teachers do when teaching programming is to explain everything. And the biggest mistake student do when learning programming is to try to understand everything.
This is very bad. And if you have tried to learn programming before but never quite understood it and never got anywhere with it, then this is the reason why.
People who say that you have to understand everything… are… simply put… a dog’s behind, to put it nicely!
Hey, this is a classroom after all! I don’t want my students to use foul language in here, so I better lead by example!
On line 10, where it says func _ready():, I want you to begin a new line and write the following code:
Now, what do you think will happen when we start our game?
Take some time to guess!
Once you feel confident about your guess then go ahead and push the Play button!
Did you guess correctly?
The code we wrote on line 11 is basically telling the Game Engine to give us a message inside the console once our Main Menu scene has loaded.
Now that we have a script available we can go back to our previous attempt of connecting our Play button’s pressed() signal to the script we just created.
Make sure the button is selected and then head over to the right side panel and in the Node Signals view double click the pressed() condition:
This will open up the “Connect a Signal to a Method” window that we saw before, and it also pre–selects the top most node for us that has a script attached, and it also creates a name for our method (method is a different word for function).
Again, because we gave our buttons unique names, the Game Engine has gone ahead and properly suggested a great name for us in the “Receiver Method” property.
So, all we need to do is click the Connect button, go ahead:
This takes us back to our script view.
Can you guess what has changed?
Our Play button’s pressed signal has now been connected to our script, and because there was no function named _on_Play_pressed() in our script, the Game Engine went ahead and created it for us, neat eh?
The green arrow on line 20 indicates that something is connected to this specific function.
And if you go ahead and click on the green arrow, then a window will pop–up which tells us about all nodes that are connected to this particular function.
A programmer’s secret to success
Now I will reveal a secret that will make you the ultimate programmer. You don’t have to thank me, however, all I ask of you, while you stand there atop the hill of programmer legends is that you follow these rules.
Thee who wield the secret must obey these commandments or suffer in eternal bugs
- Never use the secret on code without having written the code at least once in thee lifetime.
- Never use the secret on code for which thee does not understand.
Alright, enough of that, the secret is:
COPY & PASTE as much as you can! It is a programmer’s most important tool. Everything else is secondary, except for the itself computer of course!
However, don’t copy someone else’s code that you find on the Internet. It won’t serve you much, and it will get you in trouble if you are planning on creating games commercially, to sell them to customers.
A customer trust that the product is made by you and so if there are any problems, then they trust they can ask you to solve it.
If you use someone else’s code and solutions, then you will risk creating more bugs and errors when trying to change something.
Even worse is if you don’t even understand the code yourself. Then it will be impossible for you to solve the problem and that will get you in trouble and make customers not trust you anymore.
It will ruin your career as a programmer, because not even other companies will be able to trust you enough to hire you!
Just follow the commandments mentioned above and you will become a legendary programmer that everybody loves in no time!
Applying the secret
Now, let’s take the code we wrote from before and move it down into our newly created function.
So, what do you think will happen if we start our game now then?
There are TWO things you need to guess correctly!
Take some time and really think about it.
Start the game once you are certain about the outcome!
Did you guess correctly?
The code we wrote is no longer printing our message when our Main Menu scene is loaded!
This is obviously because we removed that code from the _ready() function.
Before pushing the the Play button, I want you to take a deep relaxing breath and look at the Output window while pushing it.
Now tell me one thing…
…how did that make you feel?
Like a child in a candy store?
That’s great, you need it, because your homework is going to be a mood killer.
But before that, go right ahead and push that Play button over and over again. You have earned it!
You have learned how to define a project’s main scene and how to change a project’s main scene and define it the proper way.
You also learned how to create and attach scripts to nodes, and how to use Godot’s print to console function to output a message to the console. And how to connect a node’s signal such as a button’s press signal, to a script.
You also learned how to add fonts to your Godot project and how to create DynamicFont resources that can be used on various nodes across the entire project, and which can also be copied over to future projects.
Use your knowledge to connect the other two buttons’ pressed signal to the script, similar to how we connected the Play button’s pressed signal.
Next, open all scenes and attach/create a script to the root node.
In every scene that has buttons, connect those buttons’ pressed signal to their scenes respective script.
Go back to the print code we wrote for the play button, change the text to better communicate the purpose of the function, for example: Play button pressed.
In addition to this change, add a comma after the closing citation marks, and then another citation with a message telling us from what scene the message is coming from. Example:
print(“Play button pressed – “, “Main Menu” )
COPY & PASTE the updated print message into each button’s on_pressed function, in all scripts.
Use Ctrl + Shift + F to search for the term “pressed” to quickly find all lines of code you need.