DEV Community

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

Posted on • Updated on

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

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

Rename this node to AmmoAmount and add a Sprite2D 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 node is a static object that contains one singular sprite frame. Add another child to it as type Label. This will show the ammo amount that our player has.

Godot Learning RPG

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

Godot Learning RPG

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

Godot Learning RPG

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

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

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

Godot Learning RPG

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

Godot Learning RPG

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

Godot Learning RPG

Your AmmoAmount element should now look like this:

Godot Learning RPG

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

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

Godot Learning RPG

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

Godot Learning RPG

Your UI should now look something like this:

Godot Learning RPG

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.

Buy Me a Coffee at ko-fi.com


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 (0)