UI on Godot 4 レシピ

Labels

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want to display some text on the screen.

Solution

Sooner or later you’re going to need to display some text on your screen. Examples include a title, countdown timer, score counter, and many others. For the majority of these, Godot’s Label node is the answer.

Working with fonts

Before you can start, you’re going to need a font. We’ll go into the full details of Godot’s font support in a separate recipe, but for our purposes, let’s assume you have a TTF or OTF font file. For using bitmap fonts, see the associated recipe.

Containers

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

Your UI has problem(s): it’s become overcomplicated, it doesn’t resize well, and/or you can’t keep track of how everything fits together.

Solution

For many developers, building a UI is their least favorite part. It’s very easy for a complex UI to spiral out of control and become impossibly painful to fix or modify. Godot provides some great tools for building UI - and if you take the time to learn to use them, you’ll find that they take away a lot of that pain.

Cooldown Button

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want to make RPG-style ability buttons, including a cooldown effect.

Solution

If you need art for your buttons, you can find a wide variety of well-designed buttons at Game-icons.net. We’ll be using a few from there for this recipe.

Node setup

The scene for our ability button will need the following nodes:

Heart Containers: 3 Ways

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You need to display a heart container bar (or other icon-based bar).

Solution

A common way of displaying the player’s health is via a series of icons (typically hearts) that disappear as the player takes damage.

In this recipe, we’re going to explore three ways of displaying this information, which I’m labeling “simple”, “empty”, and “partial”:

Floating combat text

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want units to display damage as floating numbers when hit.

Solution

There are many ways to approach this problem. For example, you could use a bitmap font and build an image for each number out of its digits, then use a Sprite2D node to display and move it.

However, for this recipe, we’ll use a Label node (named “FCT”). This will give us the flexibility to change the font, as well as making it easy to display the number as a string - or even other messages such as “miss”.

Level Select Menu

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

Your game needs a “level select” menu, where the user can choose from a grid of options.

Solution

As shown in the example above, we’ll make a scrolling grid of level “boxes” that the player can choose from. Let’s start with the individual level boxes:

1: Level box

Here’s the node setup:

Minimap/radar

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You want a minimap or radar-style UI item showing the locations of objects outside of the player’s view.

Solution

Here’s an example of what we are going for:

Project setup

To illustrate this feature, we’ll start with a simplified top-down game using the Autotile recipe and a player based on the Top-down character recipe. See the linked recipes for details on how these parts work.

Note

The art in this project comes from kenney.nl, which you can download here: Minimap Assets.

Radial Popup Menu

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You want a radial menu - a ring of buttons that pops up for you to choose an option.

Solution

Radial menus are used in a variety of games to allow access to a selection of buttons. For example, clicking on an NPC in a game allows you to choose what action to take: talk, inspect, attack, etc.

The specific look-and-feel of your menu should match with your game’s esthetic. For this demo, we’ll focus on the mechanics of making the menu work, and leave the styling choices to you.