Let’s Learn Godot 4 by Making an RPG — Part 7: Setting Up The Game GUI #3🤠

christine - Jun 26 '23 - - Dev Community

In our two previous parts, we created the UI elements for our health and stamina values, as well as our pickups. In the final part of our GUI section, we are going to create the elements needed to display our player’s Level and XP values.


WHAT YOU WILL LEARN IN THIS PART:
· How to add UI elements to your scene more hands-off.
· How to position labels.
· How to change the fonts and anchoring of nodes.


LEVEL & XP UI

We aren’t going to add any code to update this yet because we first need to create an enemy for that first. Let’s go ahead and create these elements now.

In your Player scene, let’s add a new ColorRect to our UI node. Rename this node to XP and add two Label nodes to it. Rename the second Label node to “Value”.

Godot Learning RPG

With your XP node selected, change its Color property to #3a39356a, and its transform properties to the following:

Godot Learning RPG

Change the font of your two label nodes to ARCADECLASSIC, and the font size to 15.

Godot Learning RPG

Change the text of your Label to “XP:” and the text of your Value to “0/100”.

Godot Learning RPG

Then, change the anchor preset of the Label node to center-left. Change its properties to the following:

Godot Learning RPG

Do the same for the Value node but change it to center-right. Change its properties to the following:

Godot Learning RPG

Duplicate your XP node with all of its children and rename it to “Level”.

Godot Learning RPG

Change the Level node’s transform properties to the following:

Godot Learning RPG

Finally, change the text of your Label to “Level:” and the text of your Value to “1”.

Godot Learning RPG

Your result should look like this:

Godot Learning RPG

And that’s it for this game GUI. I know this was a very long three-parter, but in the next part, we at least will be able to do something a bit more fun when we create our Ammo and Consumable Pickups! Remember to save and backup your game project, and I’ll see you in the next part.

Your final code for this part should look like this.


FULL TUTORIAL

Godot RPG

The tutorial series has 23 chapters. I’ll be releasing all of the chapters in sectional daily parts over the next couple of weeks.

If you like this series or want to skip the wait and access the offline, full version of the tutorial series, you can support me by buying the offline booklet for just $4 on Ko-fi!😊

You can find the updated list of the tutorial links for all 23 parts in this series here.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .