Labels

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.

For this example, we’ll use “Roboto” - a popular free font, which you can find on Google Fonts. You can also download here: Roboto_font.zip

Adding a Label

Add a new Label node to your scene. In the Inspector, you’ll see the node’s properties, most of which are self-explanatory (hover them with the mouse to see a description):

alt

Go ahead and add something in the Text field and experiment with how it looks. You’ll notice there is a default font, but it’s very plain (and small).

Adding a DynamicFont

To add your font in the Inspector, scroll down to and expand the Custom Fonts section. In the empty Font property, choose “New DynamicFont” and then click the new DynamicFont to expand it.

alt

Drag your font file (in this example we’re using Roboto-Medium.ttf) into the Font Data property (or choose “Load” and navigate to the file). There are several properties to adjust but for now let’s make Size a bit bigger.

Feel free to tinker with how the others affect the text appearance. For example, in the picture below, the second label has the Filter property enabled:

alt

Adjusting color

You can adjust the label’s font color in the Custom Colors section. Here you can change Font Color as well as add a shadow color. Shadow properties are set in the Custom Constants section.

alt

Dynamically changing text

If all you need in your scene is static text, then you’re done. However, if you need to update the label dynamically, you can do so in code by using the text property.

For example, if we had a Timer node in our scene, we could do the following:

extends Control

var counter = 0

func _ready():
    $Label.text = str(counter)

func _on_Timer_timeout():
    counter += 1
    $Label.text = str(counter)

See the “related recipes” section for more examples of using labels and working with UI nodes.

Like video?

Comments

comments powered by Disqus