Let’s Learn Godot 4 by Making an RPG — Part 6: Setting Up The Game GUI #2🤠
Tags: learning, tutorial, gamedev, beginners
Published: 2023-06-24 08:29:12


Previously, we created the UI for our player’s health and stamina, as well as implemented the functionality to update these values both in the code and visually. In this part, we will create the user interface to show and update our Pickups. Pickups are the things that our player will be able to, well, pick up! This includes health and stamina regeneration drinks, and ammo. We don’t have these items yet, and we’ll create them later on, but for now we will create the UI for them.

---

>  **WHAT YOU WILL LEARN IN THIS PART:**
>  · How to add UI elements to your scene.
>  · How to add labels and icons.
>  · How to change a node’s Color properties.
>  · How to change the fonts and anchoring of nodes.

---

## PICKUP AMOUNTS UI

In your Player scene, underneath your UI node, add a new ColorRect node.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*7E5tocrfLEjH3k6rNb8LIg.png)

Rename this node to AmmoAmount and add a [Sprite2D](https://docs.godotengine.org/en/stable/classes/class_sprite2d.html) node to it as its child. This Sprite2D node will be our ammo’s icon. An AnimatedSprite2D node can contain multiple sprite frames and thus we can organize these frames to play an animation, whereas a [Sprite2D](https://docs.godotengine.org/en/stable/classes/class_sprite2d.html#class-sprite2d) node is a static object that contains one singular sprite frame. Add another child to it as type [Label](https://docs.godotengine.org/en/stable/classes/class_label.html). This will show the ammo amount that our player has.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*XRS8akpMODzAeXnJ8AfxFg.png)

Select the Ammo node, and underneath Layout, change its color value to #3a39356a.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*0TmStSiGkooy9FBTtIXV9w.png)

Change its size to x: 40, y: 20 — and its position to x: 5, y: 8.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*KHe-bBxBaUG7NL3lP6Y-JA.png)

Now select the Sprite2D node, and let’s rename it to Icon. Whilst we’re at it, rename the label to Value.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*xlmWJLMjpzSTTd8ZILd2Ag.png)

Back to the Icon node, let’s assign it a texture. I don’t have an icon to represent bullets, so I’m going to make do with an icon of a shard! In our Assets > Icons folder, drag the image called “shard_01i.png” into the texture property. Then go ahead and change its position to x: 10, y: 10.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*peX2VeLvOT0yqkVg90NRAw.png)

With your Value node, change its text to “0”. Also, change its horizontal and vertical alignment to be centered, and anchor it to the center-right side of the box. Its size should be x: 19, y: 26 — and its position should be x: 21, y: -3.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2240/1*jCqgxziVa1ku6iFzq3YSIQ.png)

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*fhBykLJveunp8WYMDaLkpQ.png)

We also want to use a custom font for this text. Underneath Theme > Theme Overrides> Fonts, select the option “Quick Load”.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*tFV3pPR4uHW1HHjTew4t-A.png)

I have a few fonts added to this asset pack, but we’re going to use ARCADECLASSIC. Also, change its font size to 20 (or 15).

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*bMXQUfyWtgUqEPo4wiVgIg.png)

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*CVhdAj9ROzT0TiKiD3qhWw.png)

Your AmmoAmount element should now look like this:

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*A1Wo0m2aZlkkuQCLbDMb8A.png)

Duplicate this element twice. Rename the first duplicate to “HealthAmount”, and the second one to “StaminaAmount”. These new elements will show our player’s health and stamina drinks (regeneration potions) amount. Please rename the Ammo node to AmmoAmount.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*QLxHFdgFvcBJLpn2JehWkQ.png)

Your HealthAmount node’s position property should be x: 50, y: 8. The StaminaAmount node’s position property should be x: 96, y: 8.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*mrH6PJCDVSHorpqyY2883g.png)

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*eic-0WRhIFqPK1_1PqMJ9Q.png)

Change the HealthAmount node’s icon to “potion_02c.png”, which you can find under Assets > Icons. Then change the StaminaAmount node’s icon to “potion_02b.png”.

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*Lv5uElhtmLn9mICbOiabwg.png)

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2000/1*iLfJZyPACQm0yiCKNTTHOw.png)

Your UI should now look something like this:

![Godot Learning RPG](https://cdn-images-1.medium.com/max/2002/1*5FpE8uVP17HaZBB0ssVpTw.png)

We cannot change our newly created pickup values yet because we do not have pickups. We do have our UI however, so things are starting to come together. Let’s move on to our final GUI: Level & XP. Remember to save your game project, and I’ll see you in the next part.

Your final code for this part should look like [this.](https://github.com/christinec-dev/DustyTrails_RPG_Parts/tree/main/Part_6)

<a href='https://ko-fi.com/J3J2LP2U5' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi2.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

---
### FULL TUTORIAL

![Godot RPG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd9n6khb9jtaj0bynp7e.png)

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!](https://ko-fi.com/s/19c32424e5)😊

You can find the updated list of the tutorial links for all 23 parts in this series [here.](https://oops-i-devd.gitbook.io/oops-i-devd/godot-tutorials/dusty-trails/tutorial)