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.

Output Port Scripts​

  • Each output port can include @set directives that execute when the user follows that path.
  • Perfect for tracking user choices without creating separate script nodes.
  • Only @set syntax is processed; helpful console warnings for unsupported directives.
  • Variables are updated before the next node's script runs.
  • Visual @ badge indicates which ports have attached scripts.

Advanced Editing Tools​

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

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.
  • 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
tip

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

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

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

Learn More​

For a detailed breakdown of how to use the Dialogue Tree Editor, check out our blog post: Easier Ways to Write Game Dialogue.