DEV Community

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

Posted on • Updated on

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

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.

Top comments (2)

Collapse
 
roofener profile image
Robert

I'm not sure if I just have no clue or I somehow missed it. From this lesson on your GUI show health at 100/100. Mine shows 0/100 and never changes. Did I miss where you linked this with a signal or (?) ? I am loving the tutorial and feel like I am beginning to understand things. Even if I am having some issues. Thank you for putting these together, I can't imagine how much work you put into them.

Collapse
 
christinec_dev profile image
christine

Hey Robert, sorry you're running into issues. Can you please maybe create a GitHub repo with your project's source code so that I can have a look and see what's going on?😊