Toggling Dialogue UI

Dia:
    "Having the Dialogue UI visible at all time
    is probably not very ideal."
:
    "Unless you're making a full on text adventure game,
    you'd want to show the dialogue UI only when it needed to."
:
    "Here, we'll demonstrate how you can do that, with just a simple
    `show` and `hide` CanvasItem methods."

TL;DR

Utilize Stage's signals: started, finished, and cancelled to call hide()/show() methods on the dialogue UI.

Before we begin, let's add a 'start dialogue' button, so we don't have to restart the scene everytime the dialogue ended.

Add a Button, and we'll rename it to StartButton. Adjust its text, size, and position to your liking.
Set the focus_mode properto to none. To avoid accidental button press when progressing the dialogue.
Connect the pressed signal of the button to a method. In that method, call the Stage's start() method. It should looks something like this:
```
func _on_start_button_pressed():
    stage.start(dlg)
```
Now, let's move on to the tutorial.

Let's take a look at the current scene tree. Since PanelContainer is the parent of all UI dialogue, let's save it as a variable named dialogue_container.
```
@export var dialogue_container : PanelContainer
```
Note

Don't forget to assign the node in the inspector when using @export annotation to reference nodes!

Create 2 methods: hide_dialogue_ui() and show_dialogue_ui().

func show_dialogue_ui():
    pass

func hide_dialogue_ui():
    pass

For now, let's just simply show and hide the dialogue UI, by calling show() and hide() on dialogue_container.

func show_dialogue_ui():
    dialogue_container.show()

func hide_dialogue_ui():
    dialogue_container.hide()

Click your Stage node, head over to the Node's Signals dock, and connect the signals started, finished, and cancelled to the 2 methods created previously. More specifically:

Signals Method

started show_dialogue_ui()

finished, cancelled hide_dialogue_ui()

Code summary

MyScene
  ├─ Stage
  ├─ PanelContainer
  │     └─ VBoxContainer
  │         ├─ Label
  │         └─ DialogueLabel
  └─ StartButton

extends Control

var dlg : Dialogue # Load/create Dialogue here

@export var stage : Stage
@export var dialogue_container : PanelContainer

func _input(event):
    if event.is_action_pressed("ui_accept"):
        stage.progress()

func _ready():
    stage.start(dlg)

func _on_start_button_pressed():
    stage.start(dlg)

func show_dialogue_ui():
    dialogue_container.show()

func hide_dialogue_ui():
    dialogue_container.hide()

Download

Download scene & script

Got any questions? feel free to ask them in the GitHub Discussions!

Signals	Method
`started`	`show_dialogue_ui()`
`finished`, `cancelled`	`hide_dialogue_ui()`