Skip to main content

GraphFlow Editor Interface

Master the GraphFlow Editor interface to create professional animations efficiently. This guide covers all the tools, panels, and features you need to know.

🖥️ Interface Overview​

The GraphFlow Editor is your main workspace for creating animations. It consists of several key areas:

┌─────────────────────────────────────────────────────────────┐
│ File Edit View Tools Help                    [Minimize] [X] │
├─────────────────────────────────────────────────────────────┤
│ Toolbar: [New] [Open] [Save] [Play] [Stop] [Settings]      │
├─────────────────────────────────────────────────────────────┤
│ Node Palette │                    │ Properties Panel        │
│              │                    │                        │
│ Animation    │    Graph Canvas    │ Node Properties         │
│ Triggers     │                    │                        │
│ Control      │                    │ Animation Settings      │
│ Effects      │                    │                        │
│ Custom       │                    │ Easing Curves           │
│              │                    │                        │
├──────────────┼────────────────────┼────────────────────────┤
│              │                    │ Timeline Panel          │
│              │                    │                        │
│              │                    │ [Playhead] [Timeline]   │
│              │                    │                        │
└──────────────┴────────────────────┴────────────────────────┘

🎛️ Main Toolbar​

The toolbar provides quick access to essential functions:

File Operations​

  • New Graph - Create a new GraphFlow asset
  • Open Graph - Open an existing GraphFlow asset
  • Save Graph - Save current changes (Ctrl+S)
  • Save As - Save with a new name (Ctrl+Shift+S)

Playback Controls​

  • Play - Start animation preview (Space)
  • Pause - Pause current animation (Space)
  • Stop - Stop and reset animation (Shift+Space)
  • Step Forward - Advance one frame (Right Arrow)
  • Step Backward - Go back one frame (Left Arrow)

View Controls​

  • Zoom In - Zoom into the graph (Mouse Wheel Up)
  • Zoom Out - Zoom out of the graph (Mouse Wheel Down)
  • Fit to View - Fit entire graph in view (F)
  • Reset View - Reset zoom and pan (Home)

Settings​

  • Preferences - Open editor preferences
  • Performance - Show performance monitor
  • Debug - Toggle debug information

🎨 Node Palette​

The Node Palette contains all available nodes organized by category:

Animation Nodes​

  • Scale Animation - Animate object scale
  • Position Animation - Animate object position
  • Rotation Animation - Animate object rotation
  • Color Animation - Animate color properties
  • Alpha Animation - Animate transparency
  • Size Animation - Animate UI element size

Trigger Nodes​

  • On Button Click - Trigger on button press
  • On Mouse Enter - Trigger on mouse hover
  • On Mouse Exit - Trigger on mouse leave
  • On Collision - Trigger on physics collision
  • On Timer - Trigger after time delay
  • Custom Trigger - User-defined trigger

Control Nodes​

  • Wait - Pause execution for duration
  • Condition - Execute based on condition
  • Loop - Repeat animation sequence
  • Sequence - Execute nodes in order
  • Parallel - Execute nodes simultaneously
  • Random - Randomly select execution path

Effect Nodes​

  • Particle Play - Play particle system
  • Audio Play - Play sound effect
  • Screen Shake - Camera shake effect
  • Flash - Screen flash effect
  • Fade - Screen fade effect
  • Blur - Screen blur effect

Custom Nodes​

  • Custom Action - User-defined action
  • Custom Condition - User-defined condition
  • Script Node - Execute custom script
  • Event Node - Send custom event

🖼️ Graph Canvas​

The main workspace where you build your animation graphs:

Canvas Operations​

  • Pan - Middle mouse button drag
  • Zoom - Mouse wheel or Ctrl + mouse wheel
  • Select - Left click on nodes
  • Multi-select - Ctrl + left click or drag selection box
  • Delete - Delete key or right-click context menu

Node Operations​

  • Create Node - Right-click empty space → Add Node
  • Connect Nodes - Drag from output port to input port
  • Disconnect - Right-click connection → Disconnect
  • Duplicate - Ctrl+D or right-click → Duplicate
  • Group - Select multiple nodes → Right-click → Group

Grid and Snapping​

  • Show Grid - View → Show Grid (G)
  • Snap to Grid - View → Snap to Grid (Ctrl+G)
  • Grid Size - Adjust in Preferences
  • Snap Distance - Adjust in Preferences

⚙️ Properties Panel​

Configure selected nodes and their properties:

Node Properties​

  • Node Name - Display name for the node
  • Node ID - Unique identifier
  • Node Type - Type of node (read-only)
  • Enabled - Whether node is active
  • Priority - Execution priority

Animation Properties​

  • Target Object - GameObject to animate
  • Start Value - Starting value for animation
  • End Value - Ending value for animation
  • Duration - Animation duration in seconds
  • Delay - Delay before animation starts
  • Easing - Easing curve type

Trigger Properties​

  • Trigger Type - Type of trigger event
  • Target Object - Object to monitor
  • Condition - Additional conditions
  • Cooldown - Minimum time between triggers
  • One Shot - Trigger only once

Control Properties​

  • Condition - Boolean condition to check
  • Loop Count - Number of times to loop (-1 = infinite)
  • Wait Duration - Time to wait in seconds
  • Random Range - Range for random values

📊 Timeline Panel​

Visualize and edit animation timing:

Timeline Controls​

  • Playhead - Current time indicator
  • Timeline Ruler - Time scale in seconds
  • Zoom Slider - Zoom timeline in/out
  • Snap to Grid - Snap to time intervals

Animation Tracks​

  • Track Headers - Node names and properties
  • Keyframes - Animation key points
  • Duration Bars - Visual representation of timing
  • Easing Curves - Visual easing representation

Timeline Operations​

  • Scrub Playhead - Click and drag on timeline
  • Select Keyframes - Click on keyframes
  • Move Keyframes - Drag keyframes to new time
  • Resize Duration - Drag duration bar ends
  • Copy/Paste - Copy keyframes between nodes

🎯 Context Menus​

Right-click menus provide context-specific options:

Canvas Context Menu​

  • Add Node - Add new node to graph
  • Paste - Paste copied nodes
  • Select All - Select all nodes
  • Fit to View - Fit entire graph in view
  • Show Grid - Toggle grid display

Node Context Menu​

  • Duplicate - Create copy of node
  • Delete - Remove node from graph
  • Group - Add to group
  • Ungroup - Remove from group
  • Copy - Copy node to clipboard
  • Cut - Cut node to clipboard

Connection Context Menu​

  • Disconnect - Remove connection
  • Change Type - Change connection type
  • Add Waypoint - Add intermediate point
  • Remove Waypoint - Remove waypoint

⌨️ Keyboard Shortcuts​

Master these shortcuts for efficient workflow:

  • Space - Play/Pause animation
  • Shift+Space - Stop animation
  • F - Fit to view
  • Home - Reset view
  • G - Toggle grid
  • Ctrl+G - Toggle snap to grid

Editing​

  • Ctrl+C - Copy selected nodes
  • Ctrl+V - Paste nodes
  • Ctrl+D - Duplicate selected nodes
  • Delete - Delete selected nodes
  • Ctrl+A - Select all nodes
  • Ctrl+Z - Undo
  • Ctrl+Y - Redo

View​

  • Ctrl+Plus - Zoom in
  • Ctrl+Minus - Zoom out
  • Ctrl+0 - Reset zoom
  • Middle Mouse - Pan view
  • Mouse Wheel - Zoom in/out

🔧 Preferences and Settings​

Customize the editor to your workflow:

General Settings​

  • Auto-save - Automatically save changes
  • Auto-save Interval - Time between auto-saves
  • Undo Levels - Number of undo operations
  • Grid Size - Size of grid squares
  • Snap Distance - Distance for snapping

Performance Settings​

  • Preview Quality - Quality of animation preview
  • Max Preview FPS - Maximum preview framerate
  • Memory Limit - Maximum memory usage
  • Background Processing - Process animations in background

Visual Settings​

  • Theme - Light/Dark theme
  • Node Colors - Color scheme for nodes
  • Connection Colors - Color scheme for connections
  • Font Size - Text size in editor
  • High DPI - High DPI display support

🎨 Customization​

Custom Node Colors​

Set custom colors for different node types:

  1. Go to Edit > Preferences > GraphFlow Editor
  2. Select Node Colors tab
  3. Choose colors for each node type
  4. Apply changes

Custom Themes​

Create custom editor themes:

  1. Go to Edit > Preferences > Themes
  2. Click Create New Theme
  3. Customize colors and fonts
  4. Save and apply theme

Workspace Layout​

Arrange panels to your preference:

  1. Drag panel headers to move panels
  2. Resize panels by dragging borders
  3. Dock panels by dragging to edges
  4. Save layout in Preferences

🚀 Tips and Best Practices​

Efficient Workflow​

  • Use keyboard shortcuts for common operations
  • Group related nodes for better organization
  • Use descriptive names for nodes and graphs
  • Save frequently to avoid losing work

Performance​

  • Limit concurrent animations for better performance
  • Use appropriate easing curves for natural motion
  • Test on target devices regularly
  • Profile memory usage during development

Organization​

  • Create logical node groups for complex animations
  • Use consistent naming conventions
  • Comment complex logic with text nodes
  • Version control your GraphFlow assets

🎉 What's Next?​

Now that you understand the interface:

📚 Learn More​

🎯 Start Creating​

🎊 Interface mastered! You're ready to create amazing animations!

Let's learn about nodes! Check out the Node Types guide!