That’s pretty awesome as if you want to augment the UI of the game engine in the future, you use the same skills you develop as you create a game.
Now then, let’s find that button.
Found the button!You can either click to expand the hierarchy of nodes, or there’s a search box at the top if you happen to know the name of the node you want.
After we find the button node, click “Create” and you’ll see that there is now a “child” of your control node called “Button”.
And in the UI you’ll see a tiny new box in the upper left hand corner.
Our brand new buttonNow a button that small is not going to be useful to us.
Let’s take a look at another component of Godot engine that we will be making extensive use of.
On the right we’ll see an “Inspector” tab.
Like the one below:This tab changes based on the node or scene we have currently selected.
It allows us to change properties and values of that node, and the types of properties change base on the type of node.
The property tab is also hierarchical.
The top most properties are the ones specific to that node.
Then you see “Control” properties.
Those are shared with all other Control nodes.
Below that are “CanvasItem” and finally “Node” properties.
Godot is very good about organizing information about components, and this is one of the reasons why I personally like this engine so much.
Anyway, let’s move on.
Type “Open” in the “Text” property under the “Button” header.
You’ll see the button change in the Scene as well:Zoom in a little, and drag the button a little bit down and to the right.
Then press the Play Scene button to try out your change:If all has gone well, you now have a button that we can use to click on to fetch our RSS feed.
Click on the RSSReader node again and click “+” once more.
We are going to add a text field to our UI to show the results of fetching the RSSFeed from the internet.
You have to click back on the top level (RSSReader) node again because whatever node you have focused will be the parent of the new node you add to the scene.
And we don’t want the textfield to be a child of the button.
This time instead of clicking around, type “textedit” in the search box.
You should see something like this:Found it!Hit “Create” then move it around a bit and resize it using the little red dots.
This is what I came up with so far:Now, we are going to talk about the third aspect of Godot building ( The first two being Scenes and Nodes ) which is Scripts.
Scenes are like the stage that hosts Actors, which are Nodes.
Without a script, actors would just sit around on a stage and do nothing.
Scripts are the logic and “life” you give to your actors.
We have a Button now, and a TextEdit field.
Let’s create a Script that will glue them together along with some logic inside our game.
If you remember, we had Script as one of our possible views at the top of the Godot interface.
Right now if you click on that label, you’ll see a big empty panel.
Scripts can be associated with Nodes, or they can just be on their own.
We are going to associate a Script with our Control node, so that we can add logic to our Button and TextEdit field.
Choose the Control node and look at the UI above it.
There is a little script shaped icon with a plus next to it.
See the little script with the green plus?A window will pop up with lots of fields.
Mine looks like this:Godot has a number of ways to write scripts.
The best way, in my opinion, is GDScript.
It’s a Python-like language that allows you to hook logic together with node properties.
There’s a ton of things to learn about GDScript, but for now let’s start with the basics.
Hit “Create” and look at the result:Our first script!You’ll see the name of the script in the upper left.
Godot pre filled some functions for us because we told it to in the previous dialog.
We could have told it to open a blank script, but that’s not super helpful when we want to get up and running fast.
At the top of the script you seeextends Controlthis just tells Godot that this script will be able to use all the properties and methods from Control.
Next you’ll see some # var something lines.
The # means comment.
We’ll use this a lot in the future to make sure our code is properly understandable.
Then, we see a func _ready(): statement.
Let’s explore this a bit.
The func declaration means this is a new function.
A function is just a collection of code that’s named in the script and you could possibly pass arguments to it, but we aren’t in this case so the () is empty.
There are special functions inside Godot that execute at certain times.
_ready() runs after the code has entered this node and everything has been set up and is ready to go.
It’s like the main() function in C++.
Now that we have this script generated, we have a place to work our magic!.Go back to the 2D view for our scene, after saving your script first.
You just have to click on the Control node we called RSSReader.
What we are going to do next is tell Godot we want to listen for a specific event on the button, and run some code if that event happens.
We can do this programmatically, but it’s more intuitive to do it via the GUI.
Let’s click on the button in the scene.
First, let’s rename it “OpenButton” in case we want to make more buttons.
This will help us remember which button it is.
Next, let’s look over back on the right hand panel.
Remember the Inspector tab?.There’s another one in the background called Node.
This tab lets you see the kinds of events that a particular Node will emit as well as the ability to group a node with others for coding purposes.
We’ll cover groups later on in another tutorial.
For now look for the “pressed” event and click “connect” at the bottom right.
Once you click that, you’ll see a big dialog with call kinds of options.
Make sure “Connect to Node” is RSSReader, and that “Make Function” is ON.
You can rename the function name to whatever you like, but for now, leave it as is and click “Connect”Now, you’ll see the script view again with a new function:func _on_OpenButton_pressed(): pass # Replace with function body.
This function is special.
It will only get invoked if — while our scene is running — someone clicks that particular button.
Let’s replace the pass line with a new method called print().
print() is like console.
Anything you pass into it will be printed to the Output panel.
Let’s replace the pass statement ( which is like a no-op) with this:print('Button pressed!')Here’s what mine looks like:Note that little arrow/line character to the left of the print statement.
It shows that you indented that line with a tab .
This is important because GDScript is like Python in that indentation matters.
If you do not indent your code properly, the editor will show an error message and your code will not work properly.
Now that we have gotten this far, let’s test our code!.Hit that preview scene button again to bring up your scene.
Click the button, and look at the Output in your debugger window.
Here’s what I have:If you see some error messages, make sure you clicked on the right element when you connected things, and that your code is indented properly.
If you see the messages then congrats!.You’ve successfully connected all the parts together we use often in Godot to build games and apps.
Now, we will write a function to get information from an RSS feed url and display it in our TextEdit Node.
Before we can do this, however, we need to add one more node to our Scene.
This will not be a visible node, but it is essential to run the HTTP request we want to make.
Everything you do in Godot centers around Scenes, Nodes, and Scripts.
Click RSSReader again and hit the “+” sign again.
Then type “http” in the search box to find an invisible node called HTTPRequest.
Add it to your scene by hitting “create”.
Here’s how things should look after you do this.
Switch back to your script view and add the following:As you can see, it gives you hints about what kind of arguments your method will need, and if you ever need to find out more about a given Object or method, you can command+click on Mac or control+click on Windows on the method and it will open documentation inside the editor for you to see how things work.
Let’s finish this line with the following:$HTTPRequest.
rss")If you command or control clicked on the “request” method of the HTTPRequest object, you’d see something like this:Use this methodology as much as you can when you are working on Godot coding, so you can learn about the objects and methods you are working with.
Also note, the $HTTPRequest moniker is just a way you can refer to an object in GDScript.
If your object had been named FooBar, you would have typed $FooBar to access it in script world.
Now if we ran the scene again, nothing new would happen.
The reason for this is twofold.
First, we need to call this new method from our button listener function.
Secondly, we need to wire up an event from the HTTPRequest object.
Let’s take care of these two steps.
First off, click on the HTTPRequest object in the Scene tab.
Now go over to the Node tab for this Node and click request_completed() .
We will wire up this event back into the script, just like we wired up the click event for the button.
Click “Connect” then “Connect” on the big dialog that pops up and you should see something like this:We will then replace the pass statement with this line:$TextEdit.
get_string_from_utf8())What this does is call into the TextEdit Node we have in the scene, set its text value to the response we get from the HTTPRequest.
That response lives in the body argument we get in the callback.
We have to convert that PoolByteArray object to a string so that it is the right type to pass into the set_text method.
Let’s look at our code listing now, with all the changes we have:All the code we need so far!With just these few lines of code, we can tell the Godot app to go fetch the data from the RSS url we provided, and pass it into our TextEdit field where it will display in our scene.
Save everything, and hit that preview button!Hopefully, you’ll see something like this after you click the “Open” button.
We got the data!We are reaching the end of Part 1 of our tutorial.
Already we have come a long way.
We have seen how to get Godot, set up a simple scene, wire up a Button to listen for clicks, wire up an HTTPRequest to emit data from a URL, and display it in a TextEdit node.
This is very powerful!I hope you have been able to follow along and get everything working.
If you have any issues, please let me know in the comments.
In Part 2, we will look at the XMLParser that will help us figure out how to parse the RSS feed, and we will add new components to our scene to list stories, read the summaries, and even open a browser window with the full story!In Part 3 we will explore adding a feature to save a setting that contains the URL we want to load when we launch the application.
I really hope you like this tutorial, and that you’ll share it around with others.
I will link to the next tutorial when it’s out, so stay tuned!.