Visual Scripting Overview

StoryFlow Editor uses a visual scripting system (also referred to as the node editor) - a powerful no-code interface for building interactive stories. Learn how to navigate and use it effectively.

Visual Scripting Interface

The visual scripting system (also referred to as the node editor) is a workspace where you build interactive stories by connecting nodes together - no programming required. Instead of writing code, you create logic flows, dialogue branches, and complex behaviors by dragging nodes onto a canvas and connecting them visually. The interface uses a resizable multi-panel layout that adapts to your workflow, with dedicated areas for editing, variables, and content management.

Main Interface Components:

• Top Menubar: File operations (Save, Save All, Show in Content Browser) and Help menu
• Center Toolbar: Save, Play/Stop buttons, Settings (canvas and editor options), and Export options
• File Tabs: Horizontal tabs showing all open files. Drag to reorder, click X to close. Changed files show an amber indicator
• Variables Panel (Left): Lists all variables for the current script (all types including arrays). Drag variables to canvas to create Get/Set nodes. Collapsible.
• Flows Panel (Left): Lists all flows defined in the current script. Click to jump to Entry Flow nodes. Collapsible.
• Canvas (Center): The main editing area where you create and connect nodes to build your story flow
• Right Sidebar: Contextual panels including Dialogue Editor and Variable Edit Panel. Appears when editing nodes or variables
• Content Browser (Bottom): File explorer for your project. Create folders and scripts, drag images to dialogue editor. Collapsible with minimized bar.

Navigation Controls

The canvas provides smooth navigation controls to help you work with stories of any size. Whether you have 10 nodes or 1,000, these controls make it easy to move around and stay organized.

Canvas Navigation:

• Pan (Move): Click and drag on empty canvas area to move your view around
• Zoom: Use your mouse wheel to zoom in and out. The zoom level is displayed in the top-right corner
• Fit View: Click the fullscreen icon button (top-right) to center your view on the Start node
• Minimap: Enable the minimap via Settings (gear icon, top-right) for a bird's-eye view of your entire story. Click nodes in the minimap to jump to them

Node Selection:

• Select Single Node: Left-click on any node to select it
• Multi-select: Hold Ctrl and click nodes to add them to your selection
• Box Select: Click and drag on empty canvas to draw a selection box around multiple nodes
• Deselect All: Click on empty canvas area

Canvas Controls (Top-Right):

• Zoom Indicator: Shows current zoom percentage (e.g., "100%")
• Fit View Button: Centers view on your Start node
• Settings Button: Opens a dropdown with canvas and editor options including Show Minimap, Snap to Grid, Background Style, Edge Type, Spellcheck, and Auto-label Buttons

Adding Nodes

Visual scripting in StoryFlow is built around adding and connecting nodes. Each node represents a specific action or logic operation, and connecting them together creates your story's behavior. StoryFlow Editor provides two methods for creating nodes: the context menu for browsing all available node types, and drag-and-drop from the Variables panel for creating variable nodes.

Using the Context Menu:

1. Right-click on any empty area of the canvas
2. The Node Creation Menu appears with all available node types
3. Browse through categories or use the search bar at the top to filter nodes
4. Use Arrow Up/Down to navigate items, Enter to select, or Escape to close
5. Click on a node type to create it at the cursor position

Creating Nodes from Connections:

When you drag a connection from a node's output handle and release it on empty canvas space, the Node Creation Menu opens automatically. In this context, you'll see a Compatible checkbox at the top of the menu. When enabled (default), only nodes that can connect to that output type are shown - making it faster to find the right node.

Node Categories in the Menu:

• Flow Control: Start, Dialogue, Run Script, Entry Flow, Run Flow, Play Audio, Set Background Image, Branch, Random Branch, End, Comment
• Boolean Operations: Not, And, Or (yellow indicator)
• Integer Operations: Greater Than, Less Than, Plus, Minus (cyan indicator)
• Enum Operations: Equal Enum, Switch On Enum, type conversions
• Array Operations: Add, Remove, Get/Set Element, Length, Contains, For Each Loop
• Variables: Get and Set nodes for all variable types (primitives, enums, arrays, assets)

Drag-and-Drop from Variables Panel:

1. In the Variables panel (left sidebar), find the variable you want to use
2. Drag the variable onto the canvas
3. When you release, a menu appears asking if you want to create a Get or Set node
4. Select your option and the node is created instantly

Keyboard Shortcuts

StoryFlow Editor includes standard keyboard shortcuts to speed up your workflow. All shortcuts use Ctrl.

Additional Tips:

• Double-click dialogue nodes to quickly open the Dialogue Editor
• Double-click edges (connection lines) to delete them instantly
• Drag file tabs to reorder your open files
• Click nodes in the minimap to quickly jump to different parts of your story