Visual Scripting Overview
Create interactive behaviors in ShapeBox without writing code using the visual node-based scripting system.
Visual Scripting Overview
Visual Scripting in ShapeBox lets you add interactive behaviors, animations, and logic to your scenes without writing code. You connect nodes together in a graph — each node represents an action, event, or value — and ShapeBox runs the graph when conditions are met.
What Visual Scripting Can Do
| Use case | Example |
|---|---|
| Object interactions | Click a button to open a door |
| Conditional logic | Show different content based on viewer input |
| Animations | Trigger a play animation when an object is entered |
| Navigation | Jump to a scene location when a zone is entered |
| Data display | Show a product price from a live API call |
| Score / state | Track how many items a viewer has collected |
| Device detection | Show different UI on mobile vs. desktop |
Opening the Visual Script Editor
- Select an object in the scene
- In the Inspector, scroll to the Scripts section
- Click + Add Visual Script — a blank graph opens in the bottom panel
- Alternatively, go to View → Visual Script Editor to open it as a full-panel editor
Each object can have multiple visual scripts. Scripts are associated with the object they were created on, but they can reference and control any other object in the scene.
Core Concepts
Nodes
A node is a single unit of functionality — an event that fires, a value to read, or an action to perform. Nodes have input ports on the left and output ports on the right.
Wires
Wires connect ports between nodes, defining the flow of data or execution. There are two wire types:
| Wire type | Color | Carries |
|---|---|---|
| Execution | White | Control flow — tells the next node to run |
| Data | Colored | Values — numbers, strings, booleans, objects |
Execution flow
Nodes connected by execution wires run in sequence from left to right. Branching nodes (like If) split the flow based on a condition.
Adding Nodes
- Right-click anywhere in the graph canvas to open the node search menu
- Type to filter by node name or category
- Click a node to add it to the graph
Saving and Running
Visual Scripts auto-save whenever you make a change. Click Play in the editor toolbar to test your scripts in preview mode. In the published scene, scripts run automatically.
When to Use Visual Scripting vs. Code
| Prefer Visual Scripting | Prefer Code (API) |
|---|---|
| Simple trigger-response flows | Complex algorithms |
| Non-programmers | Developers comfortable with JS/TS |
| Quick iteration | Reusable plugin logic |
| Standard events and actions | Custom rendering or physics |