Adicione um mascote animado como overlay no OBS

Fonte de mídia ou Fonte de navegador: qual usar?

Comece com uma Fonte de mídia se você tem arquivos de vídeo com fundo transparente. Passe para uma Fonte de navegador quando um personagem precisar mudar de estado em resposta a eventos.

Como adicionar um WebM com fundo transparente ao OBS?

1. Em Fontes, clique em + e escolha Fonte de mídia.
2. Mantenha Arquivo local ativado e selecione o seu .webm.
3. Ative o Loop para um loop idle (loop de repouso). "Reiniciar a reprodução quando a fonte for ativada" (ativado por padrão) reinicia o clipe quando a cena aparece, o que é ideal para reações.
4. Redimensione e posicione na prévia, por exemplo em um canto inferior.

A transparência funciona por causa da forma como o OBS decodifica WebM. O código de reprodução de mídia lê a tag alpha_mode do stream e, quando ela é 1, escolhe o decodificador libvpx-vp9 (ou libvpx para VP8), que é o que lê o plano alfa. Um WebM sem essa tag é exibido com fundo preto.

Aqui, prefira WebM a um MOV HEVC com alfa. O OBS decodifica mídia pelo FFmpeg, e nos nossos testes o FFmpeg 7.1.1 descartou a camada alfa do HEVC com alfa da Apple. O ProRes 4444 preserva o alfa, mas os arquivos são muito grandes.

Como usar reações do mascote como alertas da live?

Ferramentas de alerta como o StreamElements são adicionadas ao OBS como uma Fonte de navegador que carrega a URL do seu overlay. Se a sua ferramenta de alerta permite enviar um vídeo para um alerta, uma reação curta em WebM com fundo transparente funciona bem: a Fonte de navegador é construída sobre o Chrome Embedded Framework, e o Chromium renderiza VP9 com alfa.

Uma associação que mantém a personalidade do mascote consistente:

Mantenha os clipes de alerta curtos (alguns segundos) e use o mesmo personagem em tudo, inclusive nos seus emotes; veja emotes animados da Twitch a partir de um mascote.

Como criar um companheiro em idle no canto da tela?

• Use um loop calmo (idle ou listening) em uma Fonte de mídia com Loop ativado.
• Mantenha-o pequeno, mais ou menos do tamanho de uma webcam de canto ou menor, para não competir com o jogo.
• Coloque o mesmo personagem em um loop sleeping na sua cena de BRB, assim trocar de cena também muda o estado dele, sem configuração extra.
• Se você tem muitas cenas, ative "Fechar arquivo quando inativo" para liberar memória, aceitando um breve momento em branco quando a cena voltar.

Um companheiro em loop precisa ter um loop perfeito, sem emendas. Se você vê um salto a cada ciclo, o último frame do clipe não bate com o primeiro, e nenhuma configuração do OBS vai resolver isso.

Posso controlar um mascote Rive em uma Browser Source?

Sim. Uma página HTML local com o runtime web do Rive renderiza em um canvas transparente, e a Browser Source exibe esse conteúdo sobre a sua cena. Você muda o estado definindo o número de mood do arquivo ou disparando um trigger:

<canvas id="mascot" width="400" height="400"></canvas>

Carregue o runtime @rive-app/canvas (de uma CDN ou de uma cópia local) e, no script da página:

const r = new rive.Rive({
  src: "mascot.riv",
  canvas: document.getElementById("mascot"),
  stateMachine: "CharacterViewModelMachine",
  autoplay: true,
  autoBind: true,
  onLoad: () => r.resizeDrawingSurfaceToCanvas(),
});

// call from your own event code
function react(name) { r.viewModelInstance?.trigger(name)?.trigger(); }
function mood(n) { r.viewModelInstance.number("mood").value = n; }

O que conecta os eventos da live a react() fica a seu critério: o widget personalizado de uma ferramenta de alertas, uma biblioteca de bot de chat ou a própria troca de cenas do OBS. Essa lógica de eventos é a parte que nenhum arquivo de animação oferece.

O que um mascote pré-renderizado não consegue fazer na live?

• Reagir à sua voz. Para uma boca que se mexe quando você fala, use um app de PNGtuber como o veadotube, que balança ou troca o avatar a partir do seu microfone.
• Ler o chat. Comandos de chat exigem código de bot ou widget que escute o chat e reproduza um arquivo ou dispare um trigger.
• Seguir seu rosto ou cursor. Isso é software de rastreamento para VTuber, uma categoria diferente.

O Charmotion cobre a parte visual: a partir de uma imagem de mascote você recebe 17 animações, e todo plano pago (a partir de US$ 20/mês) inclui cada uma como WebM transparente para Media Sources e alertas, além do .riv para uma Browser Source. Ele não reage à voz e não inclui lógica de chat nem de alertas.

Perguntas frequentes

Por que meu WebM aparece com fundo preto no OBS?

Provavelmente o arquivo não tem canal alfa. O OBS só usa o decodificador libvpx compatível com alfa quando o WebM traz uma tag alpha_mode com valor 1. Exporte de novo com -pix_fmt yuva420p no ffmpeg, ou confira o arquivo em um verificador de vídeo com fundo transparente antes de adicioná-lo outra vez.

O OBS consegue exibir um arquivo MOV transparente?

Arquivos MOV em ProRes 4444 mantêm o alfa quando decodificados pelo FFmpeg, que o OBS usa para mídia, mas são muito grandes. O HEVC com alfa da Apple perdeu a transparência nos nossos testes com FFmpeg 7.1.1. Um WebM VP9 é a opção mais segura para uma fonte de mídia transparente.

Um mascote de live pode reagir à minha voz?

Não se for um vídeo pré-renderizado ou um arquivo de animação padrão. Reações à voz exigem um app de PNGtuber ou VTuber que escute o seu microfone, como o veadotube. Mesmo assim, você pode usar um mascote pré-renderizado para alertas e telas de BRB junto com ele.

Respostas rápidas deste guia

• Como adicionar um mascote animado ao OBS?

Fontes

• Media Sources, OBS Knowledge Base
• Browser Source, OBS Knowledge Base
• obs-studio media-playback decode.c (alpha WebM decoder selection), OBS Project on GitHub
• Adding an Overlay to OBS Studio, StreamElements Support
• veadotube, olmewe and BELLA!
• Data binding (web runtime), Rive