Game UI
As in the previous projects you’ve worked on, you’ll need a HUD to display information during gameplay. Collecting items will increase the player’s score, so that number should be displayed, as well as the player’s remaining life value, which will be shown as a series of hearts.
Scene setup
Create a new scene with a MarginContainer
root node named HUD
and save it in a new ui
folder. Set Layout to Top Wide and, in the Theme Overrides/Constants section of the Inspector, set the right and left margins to 50
and the top/bottom margins to 20
.
Add an HBoxContainer
node to keep things aligned and give it two children, Label
and HBoxContainer
, named Score
and LifeCounter
, respectively.
On the Score
label, set the Text property to 100
and in the Inspector, under Layout/Container Sizing, check the Expand box. In Label Settings, add a new settings object to configure the font. Drag res://assets/Kenney Thick.ttf
into the Font property and set Size...