Watch the video version of this tutorial here: https://www.youtube.com/watch?v=CvbkoaH9Ayg
In this tutorial, I'm going to cover the concept of nodes and what you can do with them in a bit more detail than in part 1.
When you're using Godot, most of your workflow is going to involve adjusting and changing the behaviour of nodes. However, nodes in Godot behave slightly differently to nodes in other applications like the Unreal engine or Blender. I won't try and explain the differences here, but just keep in mind that you should effectively forget whatever they told you nodes are.
In order to see what nodes are capable of, we're going to have to start adding them to the project.
First of all, add a tree root node of type Node. It's good practice- I'll explain later. If you don't know how to do this, go back and read part 1 and hopefully this bit should make sense to you.
You should end up with something like this in your Scene tab. This isn't anything new so far.
Now, you're going to add a node of type Sprite as a child of the tree root. Select "Node" in your scene tab, and press the + button. You'll be met with the same dialogue, but there is no Sprite node in sight!
Don't worry, I've got you covered. Godot has a search function at the top of the "Create New Node" dialogue, and it's given focus by default. Search for "sprite" and select "Sprite" from the list below.
In order to clear up any potential confusion, this is the same tree structure as shown before. Theoretically, you could access Sprite without using the search function by expanding CanvasItem->Node2D->Sprite.
The only reason that I don't do this instead is because it's marginally faster to use the search function. Ultimately, do whatever you'd be most comfortable with.
You can also see that there are other kinds of Sprite, such as Sprite3D and AnimatedSprite. These give us 3D functionality and animation, respectively. However, we won't be covering either of these for a while.
Now, we can get down to using the Sprite node we just added to the scene. You should see more or less the same as below.
Click on the Sprite node to make sure it's selected, and we can take a look at the Inspector area again. You might notice that now the Inspector is full of a lot of confusing technical terms. It's got properties with headings such as Sprite, Node2D, CanvasItem or Node.
If you remember the "Create New Node" dialogue, Node2D had a lot of children. All of the children of Node2D will have the same few properties available to them. They'll all have a position(Pos), a rotation(Rot), a scale(Scale) and a Z-coordinate(don't worry about it). Similarly, since all children of Node2D must also be children of CanvasItem, they will all have the CanvasItem properties.
Now that I've rambled on about inheritance for long enough, let's finally actually do something with the engine.
In the Inspector, select the dropdown menu that says "
Hopefully, this will open a file browser window for you to select the file you want to load into the Texture property. For now, select icon.png.
Now, you should be able to see in the scene view that you have the Godot mascot's face. If you don't, try using the scroll wheel to zoom in on the orange and white blob in the corner.
You might notice the orange box around the Godot mascot. Selecting any of the dots around the border or dragging the body will move the Sprite object. You can see the changes represented under Node2D in the Inspector tab.
Let's move our mascot just to the bottom-right of the origin. This is because in the in-game view, the origin is the top-left corner. If we left the mascot at the origin, only the corner of his jaw would be visible. This is not conducive to a positive user experience.
We can add yet another node to our scene, this time it'll be of type Label.
Make sure that the tree root is selected and press the + button again. This time, search for "label" and add the Label node to the scene. If you've done this correctly, you'll see an orange rectangle appear.
Go to the Inspector tab and select the empty space to the left of the paragraph icon and to the right of the "Text" property field to reveal a space to enter text. Enter something like "I really want to subscribe to AlexHoratio" and press the enter/return key.
After revealing your innermost desires, you should see that the Label item has updated with your text in the scene view.
| Who am I to argue? |
Now that you've made the Dark Souls of tech demos(?), you can press the Play button at the top or the F5 key. You'll be prompted to save your scene first, so press "Yes" and save it as something like "mainscene.tscn". After this, press F5 again and you'll be prompted to select a main scene. The main scene is the scene that first opens when a user opens your game, so this is very likely to be a main menu.
However, our game subverts classical video game standards. Select "maingame.tscn" or whatever you saved this scene as to make it the main scene. Finally, press F5 one more time and your game should launch. You'll be met with a grey window containing the Godot mascot and whatever you wrote on your label.
For now, that's all I'm going to be covering regarding nodes. It does get a little bit more complex, but for now I encourage you to experiment with moving the nodes around, adding more nodes and playing with more types of nodes.
Thanks for reading, and I'm happy to hear any feedback you might have. Stay tuned for Part 3 on the topic of Scripts!
