Label in Godot

The label displays plain text on a screen. It gives us control over horizontal and vertical alignment, and it can wrap the text inside the node's bounding rectangle.

We are going to create a background texture and label here.

Firstly, we have to create a folder named Loony_lips_gfx.gip in which a folder named the gfx folder. In the gfx folder, we have four things that we can download online to use in our script file into our Godot engine.

Label in Godot

We have to copy this folder in our Loony lips folder which we make in our previous tutorial like this:

Label in Godot

This is the loony lips folder where we have copied the gfx folder.

Label in Godot

After that, we open the Godot game engine. These all folders are in loony lips (res://) folder in Godot engine.

Label in Godot

This is the gfx file extended.

Label in Godot

Let's start to make a background. To do that, click on loony lips to see the controls, and after that, add a child. To add a child, we press the plus (+) button. We have to create Texturerect for the background.

Label in Godot

Then the below area will be created.

Label in Godot

In background controls, there is an option texture. We have to click on it, and then we have to select the load to see the things.

Label in Godot

As given below, we have to select a load.

Label in Godot

Then after these files are opened, click on cancel.

Label in Godot

We are dragging the background into the texture to use the background.

Label in Godot

And here we have a lovely background, and if we press play here, then the output comes here.

Label in Godot

We can click on expand too. To extend the image.

Label in Godot
Label in Godot

From here, we can manage the layout of the background.

Label in Godot

If we want to measure the box, then we have to go on the view. From The Show Helper feature, we can see the margins. Each of the green dots shows the area.

Label in Godot

From Full Rect and Expand feature, we show the background full size.

Label in Godot

Then the output is:

Label in Godot

We can also do the width and height setting from the project setting and then go to Window and change width and height according to our needs.

Label in Godot

Then a lovely and adjustable background will come.

After that,

Now we are going to create a label. For this, we have to create a label by clicking loony lips like below. Click on the + sign upper side of the loony lips.

Label in Godot

As we have seen below, the label is created where we can write what we want.

Label in Godot

We are going to change the size of the font, then go to custom font and then take any size and more features from here.

We can choose the custom font to click on the new dynamic font and then go to setting, and we have a font in our gfx file to take it to drag the font and put it into the font. And then change the size and all features of font like below.

Label in Godot
Label in Godot

We drag the font from the gfx font.

Label in Godot

And then the background and label look like that.

Label in Godot

Here the output:

Label in Godot

We can adjust the text from Margin- Left, Top, Right, Bottom like below.

Label in Godot

Then this output comes:

Label in Godot

We can also set alignment according to our needs from Align, Valign. And Autowrap function is mainly used to make the page adjustable when we drag it small or big text will automatically adjust according to the page.

Label in Godot

Below is some example to understand appropriately:

If we choose the center in Align and center in the Valign, then the output comes. Try more.

Label in Godot

If we choose Bottom in Align and center in the Valign, then the output comes.

Label in Godot

It is the example of Autowrap function where the text is shrunk according to the page.

Label in Godot

We can also write the text in the output through code, as given below. We have to click on the loony lips file as given below to show the code.

Label in Godot

We are using get_node here, which is a function in GDScript.

Label in Godot

Then the output is:

Label in Godot

Here we have changed the label name to DisplayText.

Label in Godot

This is also the second type to fetching the data from here:

Label in Godot

Then the same output will come:

Label in Godot

We can also use RichTextLabel in place of Label; it works something different. In RichTextLabel, there is extra functionality called BB code also. But we are not using it here.

The below code is $DisplayText.text= story%prompt to fetch the data from the story and show it to our output page as given below: Here, we are autowrapped enable to wrapping the text. If we do not enable the autowrap, then into the output, the line is not broke from mid according to the page size, and it will not be seen us full. So Autowrap is enabled here.

Label in Godot

Output:

Label in Godot

In our next tutorial, we learn about the LineEdit in Godot.


Next TopicGodot LineEdit




Latest Courses