Skip to main content
Go to Editor

Visualizador: Gravador

O Gravador captura animações Spine do visualizador como vídeo, imagens animadas ou sequências de imagens.

Modos de gravação

  • ⚡ Gravação rápida — captura em tempo real usando MediaRecorder + captureStream(). Produz apenas WebM. Rápido mas limitado à taxa de fotogramas em tempo real.
  • 🎬 Exportação HQ — renderização offline fotograma a fotograma usando WebCodecs VideoEncoder + readPixels(). Suporta todos os formatos e produz saída com qualidade perfeita ao nível do pixel.

Formatos de saída

  • Vídeo: WebM, MP4, AVI, MOV
  • Imagem animada: GIF, Animated PNG (APNG)
  • Sequência de imagens: PNG Sequence, WebP Sequence

Codecs (Exportação HQ)

VP8, VP9, H.264 (AVC), AV1, ProRes — os codecs disponíveis são auto-detetados com base no suporte do navegador.

Qualidade

  • Presets: Baixa (~1 Mbps), Média (~3 Mbps), Alta (~5 Mbps), Sem perda (~20 Mbps).
  • Bitrate personalizado — especifique em kbps para controlo fino.

Temporização

  • FPS: 24, 30, 60 ou personalizado (1–120 fps).
  • Aquecimento — segundos para estabilização de física/restrições antes do início da gravação.
  • Pausa após — mantém o último fotograma durante um tempo definido.
  • Incluir último fotograma — alternador.

Viewport e recorte

  • Ativar/desativar recorte — alternador da região de recorte.
  • Retângulo de recorte — X, Y, Largura, Altura em coordenadas do mundo Spine.
  • Ajustar ao par — ajuste automático do recorte a um par de esqueletos com preenchimento configurável.
  • Sobreposição interativa de recorte — arraste cantos/arestas diretamente na viewport.

Resolução

  • Modo de escala — controlo deslizante percentual (10%–400%).
  • Modo fixo — dimensões explícitas em píxeis (até 4096px).
  • Resolução de saída calculada apresentada em tempo real.

Opções de renderização

  • Renderizar bones — incluir sobreposição de depuração de bones.
  • Renderizar imagens — incluir imagens de attachments.
  • Renderizar outros — bounding boxes, caminhos.
  • MSAA — Nenhum / 2× / 4× anti-aliasing.
  • Suavização — níveis 0–8 com escolha de algoritmo (Bicúbico / Bilinear).

Fundo

  • Transparente — auto-desativado para formatos sem canal alfa (por exemplo, GIF, JPEG).
  • Cor sólida — seletor de cor personalizado.
  • Xadrez — indicador visual de transparência.
  • Suporte de canal alfa: VP9+WebM, AV1+MP4, PNG Sequence, APNG, WebP Sequence.

Sobreposição HUD

  • Alternadores: info da faixa, tempo, número de fotograma, FPS, etiquetas de esqueleto.
  • Texto personalizado — string de marca de água.
  • Posição — 4 cantos (superior-esquerdo, superior-direito, inferior-esquerdo, inferior-direito).
  • Tamanho da fonte — 8–64px, mais seletor de cor do texto.

Repetição e multi-esqueleto

  • Contagem de repetições — 1–100 iterações de loop.
  • Par alvo — gravar um esqueleto específico ou todos.
  • Modo de esqueletos — Combinado (ficheiro único) / Ficheiros separados (um ficheiro por esqueleto).

Modelo de nome de ficheiro

String de modelo com variáveis: {project}, {animation}, {W}, {H}, {fps}. Uma pré-visualização em tempo real do nome de ficheiro resolvido é apresentada.

Integração com a linha temporal

O intervalo de gravação aparece como um clipe tracejado vermelho/laranja na linha temporal. Arraste as extremidades para redimensionar o intervalo, arraste o corpo para reposicionar, ou use o botão de definições (⚙️) para abrir as definições completas de gravação.