How to Build a UI in Godot 4 – Quick Guide

Welcome to this Godot UI tutorial where we’ll be setting up a scorekeeping system for a game using Godot and its UI system.

A crucial part of most video and computer games is providing players with information through the user interface. UIs include everything from mini-maps that let players know where they are to scoring which provides a quantification for players to compare and compete with their previous performances.

In this Godot UI tutorial, we’ll create a score text in our game, learn how to position it on the screen and update the player’s score as they collect coins.

This Godot UI tutorial assumes you have basic knowledge of Godot and its scripting language, GDScript. But don’t worry, if you’d like to learn more about Godot and GDScript, you can also review our full course, Create a 2D Platformer with Godot 4 which covers these concepts more in-depth.

Project Files

The project files include code snippets used in this Godot UI tutorial to set up the needs system. Understanding this codebase will prove beneficial in realizing the functionality of your Godot survival game.

Download Project Files Here

CTA Small Image
FREE COURSES AT ZENVA
LEARN GAME DEVELOPMENT, PYTHON AND MORE
ACCESS FOR FREE
AVAILABLE FOR A LIMITED TIME ONLY

Score Text

As mentioned, in this Godot UI tutorial, we will be setting up our score text for our game to learn the basics of the UI system. This will allow us to see our score as we progress through the game.

Creating the Score Text

First, we need to create a Canvas Layer as a child node of the Player node, this is a node that renders UI elements on our screen. We will also add a Label node as a child to the Canvas Layer.

Label node

We can then rename the label to ScoreText.

Score Text Label

Next, select the ScoreText node and press the key to focus on it. In the inspector, add the text Score: 0. This will be the text that is displayed on the screen.

Score Text inspector

We can position the Score Text wherever we want relative to the screen. To do this, scroll out and you will see a faint blue rectangle. This represents the screen resolution. We can then use the move tool arrows to position it in the space.

We can also customize the Score Text by changing the font size, outline, and shadow. To do this, in this Inspector choose New LabelSettings in the Label Settings property.

Label Settings property

We will increase the font size to 40 pixels and add a black outline that is 5 pixels wide. You can change any of the values you like to your own taste of course.

font size and black outline

This will make the Score Text display on our screen, however, we still haven’t added any functionality to it.

Score Text display

Adding the Score Text to the Script

Now, we need to add the score text to our Player.gd script and hook it up to the function we created previously.

score text script

Underneath the score variable, we will add a new variable to keep track of our Score Text. We will use the @onready tag and the get_node function to set it to our Score Text node when the script is loaded.

@onready var score_text : Label = get_node("CanvasLayer/ScoreText")

Finally, in the add_score function, we want to update our score_text. We will use the str function to combine our integer score variable with a string.

func add_score(amount):
    score += amount
    score_text.text = str("Score: ", score)

Now you can press Play and collect the coins in your level and you will see the score increase. Feel free to duplicate the coin (or drag the Coin.tscn scene into the level from the FileSystem) to create more coins across your level. Due to the way we handle the game_over state of the game, when we restart the score will also be reset as intended.

And that’s it for this Godot UI tutorial in a nutshell!

Godot UI Tutorial Wrap-up

With that, we come to the end of this Godot UI tutorial. You have successfully created a score-keeping system in your game, displaying the score on the screen, and updating it as the player collects coins – all crucial elements for the UI experience. Experiment with your game; add more UI elements, position them differently, and so forth. Either way, you have the foundations now to explore UI development and adapt what you need to a variety of games.

Keep exploring Godot Engine and improve your game development skills. You can find more tutorials on a variety of genres, including RPGs, FPS games, and much more, right here at Zenva. Enjoy developing!

We hope this tutorial has been instructionally beneficial for you, and we can’t wait to see what you’ll create next!

Want to learn more? Try our complete CREATE A 2D PLATFORMER WITH GODOT 4 course.

FREE COURSES
Python Blog Image

FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.