Minimal Theatre Setup

This article cover the basic minimal setup for Theatre, like the one created in the Quick Start article, but a lot more shorter and straightforward.

---

1. Create a new 2D or User Interface scene, and structure it like the following:

   • 

   The two highlighted nodes are the Theatre-specific nodes.

   Adjust the size and position of the PanelContainer to your liking.

   
   

2. Tick the fit_content property on the DialogueLabel.

   • 

   
   

3. Attach a script to the scene and create a new TheatreStage object variable with @export annotation.

   extends Control
   
   @export var my_stage: TheatreStage
   

   
   

4. Go to the inspector, and assign the TheatreStage node to the variable named stage in the script.

   • 

   • 

   
   

5. Click the TheatreStage node, go to the inspector, and assign the Label to actor_label, and DialogueLabel to dialogue_label.

   • 

   
   

6. Use input event to progress the TheatreStage.

   extends Control
   
   @export var my_stage: TheatreStage
   
   func _input(event):
       if event.is_action_pressed("ui_accept"):
           my_stage.progress()
   

   
   

7. You can then write/load your Dialogue, and start it.

   extends Control
   
   var dlg: Dialogue # Load/create Dialogue here
   
   @export var my_stage: TheatreStage
   
   func _input(event):
       if event.is_action_pressed("ui_accept"):
           my_stage.progress()
   
   func _ready():
       my_stage.start(dlg)
   

Code summary

MyScene
  ├─ TheatreStage
  └─ PanelContainer
        └─ VBoxContainer
            ├─ Label
            └─ DialogueLabel

extends Control

var dlg: Dialogue # Load/create Dialogue here

@export var my_stage: TheatreStage

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

func _ready():
    my_stage.start(dlg)

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