Designing the dialogue box

In this video, we’ll design the dialogue box scene using nodes we saw in the scoreboard and slideshow series.

New concepts

The RichTextLabel node

Whenever you want to add formatting to text, you want to use the RichTextLabel node.

It uses BBCode tags to display text in bold, italics, in-line code, and more. It also supports clickable URLs and text effects, as you’ll see.

BBCode tags look like this:

[b]This text is in bold[/b]
[i]This text is in italics[/i]
[u]This text is in underlined[/u]

When creating a RichTextLabel, you need to activate BBCode support. To do so, expand the BBCode category and turn on the Enabled checkbox.

Once activated, you must write your text with BBCode inside the node’s bbcode_text property. Otherwise, the BBCode tags will appear inside the text.

Your questions

When would I use a RichTextLabel over a Label?

You need to use a RichTextLabel for long paragraphs, clickable words, or any text that needs formatting.

The Label node is much simpler to use, so we recommend using it whenever you don’t need a RichTextLabel.

The Label node also has much more predictable behavior inside containers.

In the next lesson, we’ll use a Theme resource to enhance our dialogue box.