Agrega una mascota de marca animada como overlay en OBS

Media Source o Browser Source: ¿cuál deberías usar?

Empieza con una Media Source si tienes archivos de video transparentes. Pasa a una Browser Source cuando un mismo personaje deba cambiar de estado en respuesta a eventos.

¿Cómo agrego un WebM transparente a OBS?

1. En Sources, haz clic en + y elige Media Source.
2. Deja activado Local File y busca tu .webm.
3. Activa Loop para un loop en reposo. "Restart playback when source becomes active" (activada por defecto) reinicia el clip cuando se muestra su escena, lo que viene bien para las reacciones.
4. Ajusta su tamaño y posición en la vista previa, por ejemplo en una esquina inferior.

La transparencia funciona por la forma en que OBS decodifica WebM. Su código de reproducción multimedia lee la etiqueta alpha_mode del stream y, cuando vale 1, elige el decodificador libvpx-vp9 (o libvpx para VP8), que es el que lee el plano alfa. Un WebM sin esa etiqueta se reproduce sobre negro.

Aquí es mejor usar WebM que un MOV HEVC con alfa. OBS decodifica los medios con FFmpeg, y en nuestras pruebas FFmpeg 7.1.1 descartó la capa alfa del HEVC con alfa de Apple. ProRes 4444 conserva el alfa, pero los archivos son muy pesados.

¿Cómo uso las reacciones de la mascota como alertas del stream?

Las herramientas de alertas como StreamElements se agregan a OBS como una Browser Source que carga la URL de tu overlay. Si tu herramienta de alertas te permite subir un video para una alerta, una reacción corta en WebM transparente funciona bien: la Browser Source está construida sobre Chrome Embedded Framework, y Chromium renderiza VP9 con alfa.

Una correspondencia que mantiene coherente la personalidad de la mascota:

Mantén los clips de alerta cortos (unos segundos) y usa el mismo personaje en todas partes, incluidos tus emotes; consulta emotes animados de Twitch a partir de una mascota.

¿Cómo creo un compañero en reposo para una esquina?

• Usa un loop tranquilo (idle o listening) en una Media Source con Loop activado.
• Mantenlo pequeño, más o menos del tamaño de la esquina de la webcam o menos, para que no compita con el gameplay.
• Pon el mismo personaje en un loop de sleeping en tu escena de BRB: así, al cambiar de escena también cambia su estado, sin configuración adicional.
• Si tienes muchas escenas, activa "Close file when inactive" para liberar memoria, a cambio de un breve momento en blanco cuando la escena vuelve a mostrarse.

Una mascota en loop que te acompaña debe repetirse sin cortes. Si ves un salto en cada ciclo, el último fotograma del clip no coincide con el primero, y ningún ajuste de OBS lo va a corregir.

¿Puedo controlar una mascota de Rive en una Browser Source?

Sí. Una página HTML local con el runtime web de Rive se renderiza sobre un canvas transparente, y la Browser Source la muestra encima de tu escena. Cambias de estado asignando el número de mood del archivo o disparando un trigger:

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

Carga el runtime @rive-app/canvas (desde un CDN o una copia local) y, en el script de la 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; }

Lo que conecta los eventos del stream con react() depende de ti: el widget personalizado de una herramienta de alertas, una librería de bots de chat o el propio cambio de escenas de OBS. Esa lógica de eventos es la parte que ningún archivo de animación incluye.

¿Qué no puede hacer una mascota prerenderizada en un stream?

• Reaccionar a tu voz. Si quieres una boca que se mueva cuando hablas, usa una app de PNGtuber como veadotube, que sacude o cambia el avatar según tu micrófono.
• Leer el chat. Los comandos de chat necesitan código de un bot o un widget que escuche el chat y reproduzca un archivo o dispare un trigger.
• Seguir tu cara o tu cursor. Eso es software de seguimiento para VTuber, otra categoría.

Charmotion cubre la parte visual: a partir de una imagen de mascota recibes 17 animaciones, y cada plan de pago (desde $20/mes) incluye cada una como WebM transparente para Media Sources y alertas, además del .riv para una Browser Source. No reacciona a la voz y no incluye lógica de chat ni de alertas.

Preguntas frecuentes

¿Por qué mi WebM muestra un fondo negro en OBS?

Lo más probable es que el archivo no tenga canal alfa. OBS usa el decodificador libvpx compatible con alfa solo cuando el WebM lleva una etiqueta alpha_mode con valor 1. Vuelve a exportarlo con -pix_fmt yuva420p en ffmpeg, o revisa el archivo en un verificador de video con fondo transparente antes de agregarlo de nuevo.

¿OBS puede mostrar un archivo MOV con fondo transparente?

Los archivos MOV ProRes 4444 conservan su canal alfa al decodificarse con FFmpeg, que es lo que OBS usa para medios, pero pesan muchísimo. El HEVC con alfa de Apple perdió la transparencia en nuestras pruebas con FFmpeg 7.1.1. Un WebM VP9 es la opción más segura para una fuente multimedia con fondo transparente.

¿Una mascota para stream puede reaccionar a mi voz?

No si es un video prerenderizado o un archivo de animación estándar. Las reacciones a la voz necesitan una app de PNGtuber o VTuber que escuche tu micrófono, como veadotube. Aun así, puedes usar una mascota prerenderizada para alertas y pantallas de BRB junto con esa app.

Respuestas rápidas de esta guía

• ¿Cómo agrego una mascota de marca animada a OBS?

Fuentes

• 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