Step 4: Display Dialogue In-Game
Set up dialogue UI components for text display and typewriter effect.
Categories:
Step 4 — Display Dialogue In-Game
Dialogue UI Component
The DialogueUIComponent handles displaying dialogue text on screen. It receives text from the UI Bridge and shows it in a UI element.
- Create a UI canvas with a text panel for dialogue display (speaker name label + dialogue text area)
- On the UI entity, add a
DialogueUIComponent - Register the UI entity with the bridge by calling
RegisterDialogueUI(panelType, entityId)or by placing it where the bridge can discover it
When a Text node executes, the sequencer sends the speaker name and dialogue text through the bridge to the UI component, which updates the display.
Typewriter Effect
The TypewriterComponent reveals text character by character for a classic RPG dialogue feel:
- On the same entity as the DialogueUIComponent, add a
TypewriterComponent - Set the Default Speed — letters per second (e.g., 30 for moderate speed)
- The typewriter automatically hooks into the dialogue display
When text arrives, the typewriter reveals it gradually. The player can press a button to call ForceComplete() for instant reveal.
World-Space Dialogue (Speech Bubbles)
For dialogue that appears above characters in the 3D world:
- Use
WorldDialogueUIComponentinstead ofDialogueUIComponent - Configure a spawnable prefab for the speech bubble UI
- The component tracks the speaking entity’s position and places the UI above them
Flow
Sequencer executes Text node
→ UIBridge.RunDialogue(text, speakerName)
→ DialogueUIComponent.DoDialogue(text, performerData)
→ TypewriterComponent.StartTypewriter(text)
→ Text reveals character by character
→ Player presses button → ForceComplete()
→ Sequencer advances to next node
Next: Add Player Choices