Creating the User Interface

To start this chapter, let’s begin by asking a simple question: what was the first multiplayer game you played?

If you are thinking of a PC or a console game, try thinking another way. Imagine a bunch of kids holding their arms out, pretending to shoot and take down the bad guys invading their neighborhood. Perhaps there was an evocative action movie the night before on TV. Now, these kids are bringing to life what they think is possible within the realm of physics, mixed with a bit of fantasy and what they remember from the movie. Some kids will even pretend they have been harmed along the way. Fallen comrades will be avenged in the end, and good will once again prevail against evil. Who’s keeping the score here – that is, who has how many hit points?

How about the servers, internet speed, and likewise? Did the kids even need a user interface (UI) to play their game? No, because it was still easy for them to keep track of what...

Technical requirements

If you think you don’t have enough artistic talent to create UIs, then rest assured for two reasons. First, we’ll mainly focus on utilizing the UI components in Godot. Therefore, the graphic design aspect won’t be our concern. Second, we are providing you with the necessary assets in the Resources folder in Chapter 11 of this book’s GitHub repository. Inside it, you’ll find two folders: Fonts and UI. Simply merge these two folders into your Godot project folder.

This book’s GitHub repository, https://github.com/PacktPublishing/Game-Development-with-Blender-and-Godot, contains all the assets you need. Lastly, you can either continue your work from the previous chapter or utilize the Finish folder from Chapter 10.

Creating a simple button

A UI is a collection of components you lay out in a coherent manner around the core visuals of your game. The most essential UI component to start with may have been a Label node if we wanted it to be similar to printing “Hello, world!” when we are learning a new programming language. However, we’ll start with a Button node since the former case is so trivial, and we can also learn how to style a Button during this effort.

Before we start throwing around a bunch of UI nodes willy-nilly, we should first mention the right kind of structure to hold our UI nodes. We can use CanvasLayer similar to using a Spatial node to nest other nodes such as MeshInstance, AnimationPlayer, and others.

We’ve already been creating scenes mainly to display 3D models. Let’s follow similar steps for the sake of creating the UI:

1. Create a blank scene and save it as UI.tscn in the Scenes folder.
2. Choose CanvasLayer for its root node...

Wrapping in a panel

So far, we have created a button and styled it. However, it would be nice if it served some purpose, especially since we gave it a meaningful label. We’ll write some code so that this button can close a panel near the end of the Filling the panel with more control nodes section. Before we get to that point, though, we need the panel.

As we are introducing more UI nodes, let’s remember why we are doing this within the game’s context. Clara’s uncle had left a note. We’ll simulate that note with a combination of UI nodes in Godot so that it looks as follows:

Figure 11.3 – Clara’s note

We’ve already taken care of the button, but it is currently sitting in the middle of nowhere. We’ll wrap it in a Panel node in this section after we give a short disclaimer.

A Panel node is just another Control node in Godot that usually holds other components. There is a similarly named node...

Filling the panel with more control nodes

The uncle’s note is slowly taking shape. We’ll introduce a Label node in this section for the text portion. Additionally, we’ll have to figure out how to position all these elements so that the note resembles the layout we’d like to have. Lastly, we’ll discuss a few complementary Control nodes you may want to use in some other scenarios.

After all, we will still employ the most basic UI node: Label. If we had used it at the beginning, it would have looked unimpressive with its default style and color. Since we now have a proper texture over which this Label node can go, things will look more interesting. Follow these steps to do this:

1. Select the Panel node in the Scene panel.
2. Add a Label node and turn its Autowrap property on in the Inspector panel.
3. Set its Text to the following:

My dear Clara,

A close friend of mine is in dire need of help. I must leave immediately.

Check out...

Taking advantage of themes

Using or, more specifically, creating themes in your projects is smart on many accounts. First, we’ll discuss their usefulness, show you a few visual examples, and then create one for practicing. Let’s start with the reasons why you should use themes.

Firstly, using themes will save you from manually applying overrides to the components the way you’ve done so far. It’s still possible to keep adding manual touches here and there, but what would happen if you wanted to change a button’s artistic direction completely? This would trigger a chain reaction to change the look of other components too. So, you’d have to restart the manual editing. Furthermore, the ultimate worst-case scenario would be to revert your changes because, you know, we are human and we kind of tend to stick with our first choices more often than not.

Secondly, you could have multiple themes at the ready in your game. Although a button is still...

Summary

We started this chapter by debating what UIs are. We did this via a brief philosophical and theoretical explanation.

Assuming your games will require UIs, we investigated a practical use case such as constructing a note left by Clara’s uncle. This work necessitated us to work with multiple Control nodes – that is, the Button, Panel, and Label nodes.

During this effort, not only did we employ the components we needed, but we also styled them to match a specific artistic style.

For the sake of not repeating ourselves and taking the styling to the next level, we presented how using themes might be a time saver. To that end, we showed you how to utilize UI kits you could find online by assigning these kits’ individually exported graphics assets to the properties of Control nodes.

UIs are, in a way, a tool for the player to interact with the game. That being said, in the next chapter, we’ll discover a more direct way to interact with the...

Further reading

In the introduction, we talked about when a UI is necessary. However, there are situations when the best interface is no interface at all. There is an app – sorry, a book – for that by Golden Krishna: The Best Interface Is No Interface: The simple path to brilliant technology. He talks about how introducing more steps and elements disguised as a UI is nothing but interference.

We’ve already discussed the possibility of having games without a UI, but we’ll rest that argument for now. It might be better for you to be exposed to as much information and examples as possible at this point. So, the following are a few technical and practical resources:

• https://www.toptal.com/designers/gui/game-ui
• https://webdesign.tutsplus.com/articles/figma-ui-kits-for-designers--cms-35706
• https://ilikeinterfaces.com/
• https://www.gameuidatabase.com/

This chapter also showed you how to assign fonts to components. There are a lot of...