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”.
With your XP node selected, change its Color property to #3a39356a, and its transform properties to the following:
Change the font of your two label nodes to ARCADECLASSIC, and the font size to 15.
Change the text of your Label to “XP:” and the text of your Value to “0/100”.
Then, change the anchor preset of the Label node to center-left. Change its properties to the following:
Do the same for the Value node but change it to center-right. Change its properties to the following:
Duplicate your XP node with all of its children and rename it to “Level”.
Change the Level node’s transform properties to the following:
Finally, change the text of your Label to “Level:” and the text of your Value to “1”.
Your result should look like this:
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
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)
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.
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?😊