christinePreviously, 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.
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.
Select the Ammo node, and underneath Layout, change its color value to #3a39356a.
Change its size to x: 40, y: 20 — and its position to x: 5, y: 8.
Now select the Sprite2D node, and let’s rename it to Icon. Whilst we’re at it, rename the label to Value.
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.
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.
We also want to use a custom font for this text. Underneath Theme > Theme Overrides> Fonts, select the option “Quick Load”.
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).
Your AmmoAmount element should now look like this:
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.
Your HealthAmount node’s position property should be x: 50, y: 8. The StaminaAmount node’s position property should be x: 96, y: 8.
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”.
Your UI should now look something like this:
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.
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.
