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.

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.
  • Nodes can also contain additional notes and metadata.
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.