Skip to main content
Go to Editor

Viewer: Grabador

El Recorder captura animaciones Spine del visor como vídeo, imágenes animadas o secuencias de imágenes.

Modos de grabación

  • ⚡ Grabación rápida — captura en tiempo real usando MediaRecorder + captureStream(). Produce solo salida WebM. Rápido pero limitado a la tasa de fotogramas en tiempo real.
  • 🎬 HQ Export — renderizado offline fotograma a fotograma usando WebCodecs VideoEncoder + readPixels(). Soporta todos los formatos y produce salida con precisión de píxel.

Formatos de salida

  • Vídeo: WebM, MP4, AVI, MOV
  • Imagen animada: GIF, Animated PNG (APNG)
  • Secuencia de imágenes: PNG Sequence, WebP Sequence

Codecs (HQ Export)

VP8, VP9, H.264 (AVC), AV1, ProRes — los codecs disponibles se detectan automáticamente según el soporte del navegador.

Calidad

  • Presets: Baja (~1 Mbps), Media (~3 Mbps), Alta (~5 Mbps), Sin pérdida (~20 Mbps).
  • Bitrate personalizado — especificar en kbps para control fino.

Temporizado

  • FPS: 24, 30, 60 o personalizado (1–120 fps).
  • Calentamiento — segundos para el asentamiento de físicas/constraints antes de iniciar la grabación.
  • Pausa después — mantener el último fotograma durante un tiempo determinado.
  • Incluir último fotograma — interruptor.

Viewport & Recorte

  • Activar/desactivar recorte — alternar región de recorte.
  • Rectángulo de recorte — X, Y, Ancho, Alto en coordenadas del mundo Spine.
  • Ajustar al par — ajustar automáticamente el recorte a un par de esqueletos con padding configurable.
  • Superposición de recorte interactiva — arrastra esquinas/bordes directamente en el viewport.

Resolución

  • Modo de escala — deslizador de porcentaje (10%–400%).
  • Modo fijo — dimensiones explícitas en píxeles (hasta 4096px).
  • La resolución de salida calculada se muestra en tiempo real.

Opciones de renderizado

  • Renderizar bones — incluir superposición de debug de bones.
  • Renderizar imágenes — incluir imágenes de attachment.
  • Renderizar otros — bounding boxes, paths.
  • MSAA — Ninguno / 2× / 4× anti-aliasing.
  • Suavizado — niveles 0–8 con elección de algoritmo (Bicubic / Bilinear).

Fondo

  • Transparente — desactivado automáticamente para formatos sin alfa (p. ej., GIF, JPEG).
  • Color sólido — selector de color personalizado.
  • Tablero de ajedrez — indicador visual de transparencia.
  • Soporte de canal alfa: VP9+WebM, AV1+MP4, PNG Sequence, APNG, WebP Sequence.

Superposición HUD

  • Alternar: información de pista, tiempo, número de fotograma, FPS, etiquetas de esqueleto.
  • Texto personalizado — texto de marca de agua.
  • Posición — 4 esquinas (arriba-izquierda, arriba-derecha, abajo-izquierda, abajo-derecha).
  • Tamaño de fuente — 8–64px, más selector de color de texto.

Repetición & Multi-esqueleto

  • Número de repeticiones — 1–100 iteraciones de bucle.
  • Par objetivo — grabar un esqueleto específico o todos.
  • Modo de esqueletos — Combinado (un solo archivo) / Archivos separados (un archivo por esqueleto).

Plantilla de nombre de archivo

Cadena de plantilla con variables: {project}, {animation}, {W}, {H}, {fps}. Se muestra una vista previa en tiempo real del nombre de archivo resuelto.

Integración con Timeline

El rango de grabación aparece como un clip punteado rojo/naranja en la línea de tiempo. Arrastra los bordes para redimensionar el rango, arrastra el cuerpo para reposicionar, o usa el botón de ajustes (⚙️) para abrir la configuración completa de grabación.