Dialogue Editor

The Dialogue Editor is a powerful side panel that provides a dedicated interface for editing Dialogue nodes with support for text, player options, background images, and more.

Overview

The Dialogue Editor is a collapsible side panel that appears on the right side of the visual scripting system (also referred to as the node editor) when you're working with Dialogue nodes. It provides a rich editing experience with dedicated fields for all dialogue properties, making it easier to create complex interactive conversations than editing directly in the node visual.

Key Features:

• Dedicated Text Editing: Large text area with multiline support for dialogue content
• Visual Image Selector: Browse and preview background images from your project's Content folder
• Option Management: Add, edit, reorder, and delete player response options with drag-and-drop
• Unsaved Changes Tracking: See what you've modified before applying changes
• Auto-Preserve State: Your edits are preserved when switching between nodes or files

Opening the Editor

To open the Dialogue Editor, double-click any Dialogue node in the node graph. The editor panel will expand automatically from the right side of the screen.

The panel stays open as you work, allowing you to double-click different Dialogue nodes to instantly switch between editing them. The panel will automatically collapse when you select a non-Dialogue node (like a Branch node or Variable node), keeping your workspace clean.

User Interface

The Dialogue Editor is organized into four main sections, each handling a different aspect of your dialogue.

Title Field

The Title field is an optional text field that appears in the dialogue node header. It's primarily used for organization within the editor and is not displayed to players during playback.

• Optional: Can be left empty if not needed
• Display: Visible in the editor node header, but not shown to players during runtime
• Common uses: Speaker identification ("Narrator", "Alice"), scene labels ("Town Square - Morning"), conversation topics ("Quest Intro"), or any organizational text

Background Image

Add visual context to your dialogue with background images. Perfect for visual novels, illustrated stories, or creating atmosphere in your narrative.

Image Selection Features:

• Visual Browser: Browse all images from your project's Content folder with live previews
• Drag-and-Drop: Drag images directly from the Content Browser into the image selector
• Search Functionality: Filter images by filename to quickly find what you need
• Quick Actions:
  • Show in Content Browser: Locate the selected image in your file tree
  • Open File: View the image in your system's default image viewer
• Preview: See a thumbnail of the selected image directly in the editor

Drag-and-Drop Workflow:

1. Navigate to your images folder in the Content Browser (e.g., Content/Images/)
2. Drag an image file from the Content Browser
3. Drop it onto the image selector area in the Dialogue Editor
4. The image is automatically selected and previewed

Text Area

The Text field contains the main dialogue content that players will read. This is the core of your narrative.

Features:

• Multiline Support: Press Shift + Enter to create new lines within your dialogue
• Large Editing Area: Expanded text area makes it easy to write and edit longer passages
• Real-time Display: Text appears in the dialogue box exactly as you type it
• Variable Interpolation: Use {variableName} syntax to insert variable values dynamically
• Spellcheck: Enable spellcheck in Settings to underline misspelled words in text fields (disabled by default)

Options Management

The lower part of the Dialogue Editor is organized into three collapsible sections, each managing a different kind of dialogue content. Each section has its own add button and supports independent drag-and-drop reordering.

• Text: The main dialogue text area plus additional text blocks. Click "Add Text Block" to create non-interactive display text.
• Elements: Interactive input fields. Click the "Add" dropdown and choose an input type (Boolean, Integer, Float, String, or Enum).
• Options: Clickable button choices. Click "Add Option" to create a new button.

Common Actions:

• Edit Text: Click on any item's text field to edit its label or content. You can use {variableName} syntax to display variable values.
• Multiline Text: Press Shift + Enter to add line breaks within any text field.
• Reorder: Drag and drop items within their section to change display order.
• Delete: Click the trash icon to remove an item. This cannot be undone.

Handles on the Node:

Each item in the three sections creates handles on the dialogue node in the graph:

• Text Blocks: Left condition handle (boolean) to show/hide the text block based on game state
• Elements: Left condition handle (boolean) for visibility, right "On Change" handle (execution) that fires when the input value changes, and right "Value" handle (typed) that outputs the current input value
• Options: Left condition handle (boolean) for visibility, and right "On Click" handle (execution) that fires when the player clicks the button

Dialogue Sections

The Dialogue Editor organizes content into three distinct sections, each serving a different purpose.

Options (Buttons)

Options are clickable button choices that players select to advance the dialogue. They are the primary way to create branching narratives.

• Behavior: Player clicks to select, dialogue continues from the button's output handle
• Once Only: Enable the "Once" checkbox to hide the button after the player clicks it (see One-Time Options)
• Use Cases: Dialogue choices, branching paths, menu selections

Elements (Inputs)

Elements are interactive input fields that let players enter or select values. Each element has a type that determines what kind of input it presents and what type of value it outputs.

Available input types:

• String: Text input field for free-form text entry (names, passwords, custom responses)
• Integer: Number input for whole numbers
• Float: Number input for decimal values
• Boolean: Checkbox toggle for true/false values
• Enum: Dropdown menu with predefined choices from an enum variable

Handles per element:

• On Change (Right): Execution handle that fires when the input value changes
• Value (Right): Typed output handle providing the current input value (type matches the element's input type)
• Condition (Left): Boolean input to show/hide the element based on game state

Setting Up Enum Elements:

1. First, create an enum variable with your desired options (e.g., "Easy", "Normal", "Hard")
2. Add an Enum element from the Elements "Add" dropdown
3. Select your enum variable from the element's dropdown
4. Connect the Value handle to store or process the selection

Text Blocks

Text blocks display non-interactive text in the dialogue area alongside options and elements. They are read-only and cannot be clicked or interacted with by the player.

• Behavior: Displays styled text (no interaction)
• Condition Handle: Supports conditional visibility via boolean input
• No Output Handles: Text blocks have no execution or value outputs
• Variable Interpolation: Supports {variableName} syntax for dynamic text
• Click-to-Advance: Text blocks do not block the header output handle — dialogue nodes with only text blocks still show click-to-advance
• Use Cases: Additional narrative text, instructions, context-sensitive descriptions, conditional flavor text

Audio

Dialogue nodes can play audio when displayed. This is perfect for voice lines, ambient sounds, or musical cues tied to specific dialogue.

Adding Audio to Dialogue

In the Dialogue Editor sidebar, you'll find the Audio section below the Background Image:

• Audio Selector: Click to choose an audio file (MP3 or WAV) from your project
• Loop Checkbox: Enable to repeat the audio continuously
• Preview Controls: Play/stop button with progress bar to preview audio in the editor
• Reset Checkbox: Enable to stop any playing audio when this dialogue displays

Audio Behavior

• Audio starts playing when the dialogue node is reached
• Non-looping audio plays once and stops
• Looping audio continues until stopped by another node or reset
• The Reset option stops any currently playing audio

Characters

Dialogue nodes can be associated with a character, displaying their name and portrait in the runtime.

Selecting a Character

In the Dialogue Editor sidebar, use the Character selector to choose from your project's character files (.sfc):

• Character Dropdown: Shows all available characters with their portraits
• Search: Type to filter characters by name
• None Option: Clear the character selection

When a character is selected, the runtime will display their name and portrait alongside the dialogue text.

Character Variable Interpolation

You can reference character variables directly in your dialogue text using a special syntax. This allows dialogue to dynamically display character properties and custom variables.

Syntax: {Character.VariableName}

Examples:

• {Elena.Name} - Displays the character's name (e.g., "Elena")
• {Elena.Affection} - Displays a custom integer variable (e.g., "75")
• {Merchant.ShopName} - Displays a custom string variable (e.g., "The Golden Coin")
• {Player.Health} - Displays player health from a character file

Nested Interpolation:

Character variable interpolation supports nesting. If a character variable contains another variable reference, it will be resolved:

• If Elena.Greeting equals "Hello, {playerName}!"
• And playerName equals "Alice"
• Then {Elena.Greeting} displays "Hello, Alice!"

One-Time Options

Button options can be marked as "one-time" so they disappear after being clicked. This is perfect for exploration-based narratives where you want players to exhaust dialogue choices.

Enabling One-Time

Each button option in the Dialogue Editor has a "Once" checkbox. When enabled:

• The option displays normally the first time
• After the player clicks it, the option is hidden on subsequent visits
• This state persists within the current story session

Use Cases:

• NPCs with multiple topics to discuss (each topic disappears after being covered)
• Investigation scenes where clues can only be examined once
• Tutorial prompts that shouldn't repeat
• Side conversations that shouldn't clutter the main dialogue

Unsaved Changes

The Dialogue Editor intelligently tracks your modifications and provides clear feedback about unsaved changes.

How It Works:

• Automatic Tracking: The editor compares your current edits against the saved node data
• Visual Indicator: An amber asterisk (*) appears in the dialogue node's header on the canvas, and a "Reset Changes" button appears in the Dialogue Editor when you have unsaved modifications
• State Preservation: Your edits are preserved when you switch to other nodes or files, allowing you to continue editing later
• Click to Revert: Click "Reset Changes" to discard your edits and restore the node to its saved state

When Unsaved Changes Are Cleared:

• When you click "Reset Changes"
• When you click "Save Changes" (because there are no unsaved changes anymore)

Tips & Tricks