Skip to main content

Cutscene Node

The Cutscene node plays a timed cinematic sequence with multiple synchronized tracks — dialog, backgrounds, characters, effects, audio, and camera movements.

Timeline Editor​

Click "Open Timeline Editor" in the inspector to open the fullscreen sequencer.

Layout​

  • Preview (top 35%): Shows the scene at the current playhead position. Transport controls (play, pause, skip).
  • Timeline (bottom 65%): Track list on the left (200px), timeline bars on the right, playhead (red vertical line).
  • Inspector (right 260px): Properties of the selected track.

Transport Controls​

  • Play/Pause: Real-time playback with moving playhead
  • Skip to Start/End: Jump to beginning or end
  • Time display: Current position / total duration
  • Zoom: Ctrl+Scroll on timeline, or +/- buttons (30%-500%)

Working with Tracks​

Each track is a colored bar on the timeline:

  • Drag the bar to move it in time
  • Drag edges to resize duration (left or right)
  • Click to select and edit properties in the inspector
  • Mute button (speaker icon) to disable a track during preview
  • Snap to 100ms grid

Track Types​

Dialog (pink)​

Shows text on screen during the cutscene.

  • Character: who speaks (or narrator if none)
  • Text: the dialog line

Background (blue)​

Changes the background image.

  • Asset: select from backgrounds
  • Transition is always fade, duration is minimum of track duration or 500ms

Effect (yellow)​

Screen effects: shake, flash, fade_out, fade_in, tint.

  • Effect type: choose the visual effect
  • Intensity: 0 to 1

Audio (teal)​

Play, stop, or fade music/SFX.

  • Action: play, stop, fadeIn, fadeOut
  • Audio: select from audio assets

Character (purple)​

Enter, exit, or move characters on stage.

  • Action: enter, exit, move
  • Character: select character
  • Position: far_left, left, center, right, far_right

Camera (orange)​

Zoom, pan, and animate the camera.

  • Zoom: 0.5x to 3x (1.0 = normal)
  • Pan X: horizontal offset (-50 to +50%)
  • Pan Y: vertical offset (-50 to +50%)
  • Easing: linear, ease-in, ease-out, ease-in-out

Camera transforms apply to scene content (background, characters, effects) but not to UI elements (textbox, menus).

Wait (gray)​

A spacer track — no visual effect, just timing.

Properties​

  • Label: name of the cutscene
  • Total Duration: length in milliseconds
  • Skippable: whether the player can skip the cutscene

Execution​

At runtime, the cutscene:

  1. Sorts all tracks by start time
  2. Uses requestAnimationFrame loop for accurate timing
  3. Fires each track's event when elapsed time reaches its start
  4. Camera tracks apply CSS transform with transition
  5. Clears dialog when cutscene ends
  6. If skippable and player clicks, all remaining tracks fire immediately

Tips​

  • Use the zoom controls to work with precise timing
  • Layer dialog tracks with character enter/exit for cinematic sequences
  • Camera tracks create dramatic zoom-ins and pans
  • Combine fade_out effect with background change for scene transitions
  • Set total duration slightly longer than your last track for a clean ending