Skip to main content

Dialogue Tree Editor

Overview​

Drafft's Dialogue Tree Editor provides a powerful and flexible way to design branching dialogues for games. With a cleaner UI, improved node management, and deep integration with scripts, it allows for intuitive and efficient dialogue creation.

Dialogue Tree Creator

Features​

Intuitive Design​

  • A redesigned interface with better node management for a streamlined workflow.
  • Support for Vertical and Horizontal layouts.
  • Scripts can be loaded into sub-tabs within the dialogue editor.

Flexible Node System​

  • Any node can have multiple input and output ports.
  • Context menu for quick actions: Edit, Delete, Clone.
  • A configuration drawer for managing node attributes (inputs, outputs, title, metadata).

Script Integration​

  • Nodes can link to any script in the project, whether autogenerated by the dialogue editor or user-created.
  • Shared scripts allow for reuse across multiple dialogues or nodes.
  • Editing scripts outside the dialogue editor reflects changes instantly.
  • To prevent conflicts, scripts must be locked before editing.(Future update may include an "Auto-lock related scripts" option).
  • Adding scripts to dialogue nodes is optional.

Advanced Editing Tools​

  • Grid snapping for precise node alignment.
  • Duplicate nodes to speed up development.
  • Undo/Redo support for risk-free experimentation.
tip

You can shift-click to select multiple nodes at once.

Node Types​

  • Jump: Jump to a specific node.
  • Note: Add sticky notes for annotations.
  • Script: Embed scripts directly in dialogues.
  • Choice: Create branching paths with multiple options.
  • Condition: Branch dialogue based on a single boolean expression (true/false).
  • Switch: Branch dialogue based on an expression matching multiple case values.
  • Event: Trigger a game event by calling a function name with arguments.
  • Start: Define the beginning of a dialogue.
  • End: Mark the conclusion of a dialogue.
  • Return: Return to the previous choice point.

Output Port Scripts​

Each output port (handle) on a dialogue node can include @set directives that execute when a user follows that port. This allows you to track user choices and set variables without creating separate script nodes.

Example Use Case:

Choice Node with 3 outputs:
├─ "Approach Cautiously" → @set variables.approach = "cautious"
├─ "Walk Forward Openly" → @set variables.approach = "bold"
└─ "Observe From Distance" → @set variables.approach = "observant"

All outputs lead to the same Response Node, which reads variables.approach
and responds differently based on the player's choice.

How to Use:

  1. Edit a node and expand an output port
  2. Enter @set directives (one per line)
  3. When the user picks that output, the directives execute automatically
  4. A yellow @ badge indicates ports with scripts

Features:

  • Supports multiple @set directives per output
  • Only @set syntax is processed; other lines are ignored
  • Variables update before the next node's script runs
  • Error handling logs issues without blocking navigation

Node Reference​

This section summarizes each default node type as a peer section, so behavior is easier to scan in the sidebar.

Start Node​

Defines the entry point of a dialogue flow.

  • Typical handles: output only
  • Use it to mark where playback should begin

Script Node​

Runs dialogue or logic content via a linked script.

  • Typical handles: one input, one output
  • Best for linear dialogue and command sequences

Choice Node​

Branches into multiple player-facing options.

  • Typical handles: one input, multiple outputs
  • Output handles can carry @set port scripts

Condition Node​

Evaluates a boolean expression and routes to True or False.

  • Expression example: variables.player.level >= 10
  • Uses live scenario state during simulation
  • Supports optional linked script before branching

Switch Node​

Evaluates an expression and matches against multiple cases.

  • Expression example: variables.player.status
  • Supports case outputs plus a default output
  • Supports optional linked script before branching

Event Node​

Triggers runtime/game hooks from dialogue flow.

  • Main fields: functionName, arguments
  • Typical handles: one input, one output
  • Keep naming aligned with your runtime integration contract

Jump Node​

Redirects to another node in the same graph.

  • Main field: target node ID
  • Useful for reuse and loop-like flow

Note Node​

Adds author annotations in the graph.

  • Not executed during gameplay/simulation
  • Useful for team comments and design notes

End Node​

Marks a terminal branch point.

  • Typical handles: input only

Return Node​

Returns control to a previous branch context.

  • Typical handles: input only
  • Useful for cleaner graphs with fewer back-link edges

Simulation Behavior​

When Game Simulation is enabled in the dialogue player:

  • Condition and Switch nodes evaluate automatically
  • Scriptless nodes can auto-advance
  • Only speech lines are shown

When Game Simulation is disabled:

  • Nodes are explored manually
  • Backward navigation is available for branch review

Learn more about UAF scripting

tip

Condition and Switch evaluation uses Live Scenario state.

Dialogue Output Schema​

The dialogue system generates structured JSON output that represents the entire dialogue tree. Here's an overview of the schema structure:

Root Properties​

  • name: String - The name of the dialogue
  • type: String - Usually "Dialogue"
  • parent: String - ID of the parent element
  • icon: String - Icon identifier
  • color: String - Color code in hexadecimal
  • path: String - Path to the dialogue
  • collection: String - Collection type, typically "Dialogue"
  • Various metadata fields like created, modified, locked, etc.

Content Structure​

The dialogue content is organized in a tree structure under content.tree with two main components:

Nodes​

Each node represents a point in the dialogue flow and includes:

  • id: Unique identifier
  • position: X and Y coordinates in the editor
  • type: Node type (typically "base")
  • data: Contains node-specific information:
    • label: Display name (e.g., "1 - Start")
    • handles: Connection points for edges
    • nodeType: Type of node ("start", "script", "choice", "end", etc.)
    • scriptId: Reference to associated script content

For per-node behavior and usage guidance, see Node Reference above.

Edges​

Edges define connections between nodes:

  • edgeId/id/key: Unique identifier
  • source/target: IDs of connected nodes
  • sourceHandle/targetHandle: IDs of specific connection points
  • points: Array of coordinate points defining the edge path
  • Visual properties like width, color, curvyness