Node Graph Basics
Learn how to navigate the node graph canvas, place nodes, and connect them to build logic flows.
Node Graph Basics
Canvas Navigation
| Action | How |
|---|---|
| Pan | Middle-mouse drag, or Space + left-mouse drag |
| Zoom | Scroll wheel |
| Select node | Left-click |
| Select multiple | Drag a selection rectangle, or Shift+click |
| Move nodes | Click and drag |
| Delete selected | Delete or Backspace |
| Duplicate | Ctrl+D |
| Frame all nodes | F |
| Frame selection | Shift+F |
Node Anatomy
┌──────────────────────┐
│ ▶ On Click │
│ │
│ Object ○│
│ Event ○│
└──────────────────────┘
- Title bar — node name and an optional category icon
- Left ports — input ports (execution flow in, or data in)
- Right ports — output ports (execution flow out, or data out)
- ▶ symbol — indicates an execution port (flow control)
- ○ symbol — indicates a data port
Port Types and Colors
| Color | Data type |
|---|---|
| White | Execution flow |
| Blue | Boolean (true/false) |
| Green | Number (integer or float) |
| Yellow | String (text) |
| Purple | Object reference |
| Orange | Vector (2D or 3D) |
| Red | Color |
| Gray | Any (accepts any type) |
Connecting Nodes
- Click and hold on an output port (right side of a node)
- Drag the wire to an input port (left side of another node)
- Release — the connection is made if the port types are compatible
To disconnect a wire, click it and press Delete, or drag the connection off its port.
Type coercion
ShapeBox automatically converts between compatible types:
- Number → String (displays the number as text)
- Boolean → Number (true = 1, false = 0)
- Color → String (returns hex code)
Node Categories
Right-click the canvas to open the node browser:
| Category | Contents |
|---|---|
| Events | Scene ready, click, hover, timer, collision, keyboard, custom events |
| Objects | Get object, set property, show/hide, enable/disable |
| Math | Add, subtract, multiply, modulo, clamp, lerp, random |
| Logic | If/else, switch, compare, and/or/not, delay |
| Animation | Play clip, stop, set time, blend, events |
| Variables | Get/set local variable, global variable, object variable |
| UI | Show dialog, notification, tooltip, progress bar |
| Network | Fetch URL, WebSocket send/receive, scene state sync |
| Physics | Apply force, raycast, get velocity |
| Device | Is mobile, is VR, is AR, get input |
| Audio | Play sound, stop, set volume |
| Time | Get elapsed time, set timer, clear timer |
| Conversion | Type converters, formatters |
Variables
Variables store values between node executions. Three scopes:
| Scope | Access | Lifetime |
|---|---|---|
| Local | This script graph only | Duration of one execution |
| Object | Any script on the same object | While the scene is running |
| Global | Any script in the scene | While the scene is running |
Create variables in the Variables panel on the left side of the graph editor, then drag them into the graph as Get or Set nodes.
Comments and Groups
- Comment node — right-click → Add Comment — adds a text label to the canvas
- Group — select multiple nodes → right-click → Group — creates a collapsible container to organize complex graphs
Reroute Points
Right-click on any wire and choose Add reroute to insert a movable waypoint, which helps keep your graph readable when wires cross long distances.