Skip to main content
Go to Editor

Viewer: Recorder

viewerrecorderrecordingexportvideoguide

The Recorder captures Spine animations from the viewer as video, animated images, or image sequences.

Recording Modes

  • ⚡ Quick Record — real-time capture using MediaRecorder + captureStream(). Produces WebM output only. Fast but limited to real-time frame rate.
  • 🎬 HQ Export — offline frame-by-frame rendering using WebCodecs VideoEncoder + readPixels(). Supports all formats and produces pixel-perfect output.

Output Formats

  • Video: WebM, MP4, AVI, MOV
  • Animated image: GIF, Animated PNG (APNG)
  • Image sequence: PNG Sequence, WebP Sequence

Codecs (HQ Export)

VP8, VP9, H.264 (AVC), AV1, ProRes — available codecs are auto-detected based on browser support.

Quality

  • Presets: Low (~1 Mbps), Medium (~3 Mbps), High (~5 Mbps), Lossless (~20 Mbps).
  • Custom bitrate — specify in kbps for fine control.

Timing

  • FPS: 24, 30, 60, or custom (1–120 fps).
  • Warm-up — seconds for physics/constraint settling before recording begins.
  • Pause-after — hold the last frame for a set duration.
  • Include last frame — toggle.

Viewport & Crop

  • Enable/disable crop — toggle crop region.
  • Crop rectangle — X, Y, Width, Height in Spine world coordinates.
  • Snap to pair — auto-fit crop to a skeleton pair with configurable padding.
  • Interactive crop overlay — drag corners/edges directly in the viewport.

Resolution

  • Scale mode — percentage slider (10%–400%).
  • Fixed mode — explicit pixel dimensions (up to 4096px).
  • Computed output resolution displayed live.

Render Options

  • Render bones — include debug bone overlay.
  • Render images — include attachment images.
  • Render others — bounding boxes, paths.
  • MSAA — None / 2× / 4× anti-aliasing.
  • Smoothing — levels 0–8 with algorithm choice (Bicubic / Bilinear).

Background

  • Transparent — auto-disabled for formats lacking alpha (e.g., GIF, JPEG).
  • Solid color — custom color picker.
  • Checkerboard — visual transparency indicator.
  • Alpha channel support: VP9+WebM, AV1+MP4, PNG Sequence, APNG, WebP Sequence.

HUD Overlay

  • Toggle: track info, time, frame number, FPS, skeleton labels.
  • Custom text — watermark string.
  • Position — 4 corners (top-left, top-right, bottom-left, bottom-right).
  • Font size — 8–64px, plus text color picker.

Repeat & Multi-Skeleton

  • Repeat count — 1–100 loop iterations.
  • Target pair — record a specific skeleton or all.
  • Skeletons mode — Combined (single file) / Separate files (one file per skeleton).

Filename Template

Template string with variables: {project}, {animation}, {W}, {H}, {fps}. A live preview of the resolved filename is displayed.

Timeline Integration

The recording range appears as a red/orange dashed clip on the timeline. Drag edges to resize the range, drag the body to reposition, or use the settings button (⚙️) to open full recording settings.