Cómo trabajar con imágenes reactivas de Discord como principiante [2022]

Publicado: 2022-09-13

Suponga que está buscando unirse al carro de VTuber (YouTube Virtual) y colaborar con sus compañeros jugadores y fanáticos en Discord. En ese caso, es posible que desee considerar el uso de imágenes reactivas de Discord . La transmisión con un avatar PNG VTuber reactivo es la forma más económica y fácil de usar para principiantes de comenzar con VTubing .

discord reactive images

Con la mejora de la animación 2D y 3D, los VTubers están regresando en todas partes, colaborando en plataformas como YouTube, Twitch y Discord. Los modelos VTuber o PNGtuber se pueden crear y personalizar para reflejar lo que dicen y hacen sus personajes en diferentes situaciones. Pruebe Discord Reactive Images si necesita un reemplazo de cámara facial para transmitir o usar en llamadas de discordia.

En esta publicación, aprenderá cómo los principiantes pueden configurar y usar las imágenes reactivas de Discord de varias maneras.

Tabla de contenido

¿Qué hacen exactamente las imágenes reactivas de Discord?

Las imágenes reactivas permiten que sus avatares en línea se muevan en respuesta a su voz o reacciones mientras transmite o participa en llamadas de Discord. Esto también te ayuda a permanecer en el anonimato. Para esos momentos en los que no está de humor para estar frente a la cámara, VTubing es una excelente manera de mantener las cosas animadas y atractivas para su audiencia.

Te permite crear videos con un personaje PNG digital o avatar, que se anima en tiempo real usando un software de captura de voz y representa un personaje ficticio, generalmente al estilo de la animación japonesa. Ya sea que esté transmitiendo en vivo en Discord o alojando un servidor de fans privado, puede hacer que su modelo PNG, 2D o 3D exprese sus emociones por usted.

Trabajar con imágenes reactivas de Discord y los requisitos previos necesarios

Discord permite a los streamers usar sus servidores de fans para chatear con suscriptores y crear vínculos con su comunidad tanto dentro como fuera del juego. Si eres un espectador de Twitch, puedes unirte y chatear con tus streamers favoritos en sus servidores de Discord, que se integran con su canal de Twitch. Como transmisor, puede mantener ocupados a los miembros de su servidor con canales de texto, canales de voz, mensajes directos grupales separados, bots de juegos, transmisión en vivo para una audiencia seleccionada y mucho más en Discord.

Dependiendo de la cantidad de personalización y conocimientos técnicos que desee poner en su imagen reactiva de Discord, puede elegir entre muchas opciones. Puede comenzar como PNGtuber y luego progresar a rigging 2D o 3D a medida que adquiere más experiencia con Vtubing. Y la mejor parte es que no necesita invertir en software de seguimiento facial, iluminación o cámaras de alta gama.

Ser un PNGtuber requiere una configuración mínima. Algunas de las cosas que necesita para configurar su imagen reactiva incluyen:

  1. Al menos una y no más de dos imágenes PNG para servir como su imagen reactiva de Discord.
  2. Un micrófono para grabar su voz con una función de reducción de ruido para eliminar el ruido de fondo.
  3. Un OBS, u Open Broadcast Software, para agregar una fuente de navegador para transmisión en vivo y grabación de video.

Dónde encontrar imágenes reactivas personalizadas

Hay varias formas de obtener imágenes PNG para tu avatar de Discord. Puede crear su propio modelo PNG desde un software de dibujo gratuito o de pago como FireAlpaca, Procreate, Inkscape o cualquier otro software de dibujo popular. Solo asegúrese de exportar la imagen como un recorte PNG transparente antes de cargarla en el servidor de Discord. Una vez que haya creado su PNG, puede usar una herramienta en línea como removebg para eliminar el fondo y obtener una imagen PNG transparente.

También puede comprar o encargar su PNG personalizado a través de Etsy, Instagram o Fiverr, donde puede encontrar una gran cantidad de artistas digitales que pueden crear PNG personalizados según sus especificaciones si está listo para desembolsar algo de dinero. Asegúrese de solicitar ejemplos de su trabajo y confirme que tendrá todos los derechos de autor de la imagen para que nadie más pueda reproducirla o utilizarla.

Métodos para agregar imágenes reactivas de discordia

Hay varias formas de agregar un PNG reactivo a sus llamadas y colaboraciones de discordia, pero en aras de la simplicidad para los principiantes, nos centraremos en dos métodos simples que no le quitarán mucho tiempo.

discord reactive images fugi tech + streamkit overlay

Estas son las formas de las que hablaremos en este post:

  1. Usando Reactive by Fugi, una herramienta de software que se integra con Discord para generar un avatar PNG que responde a tu voz automáticamente.
  2. Agregar manualmente CSS personalizado para generar código para imágenes reactivas de Discord, que luego puede editar, personalizar o cambiar de tamaño según lo desee.

Nota: Es posible que estos métodos no sean compatibles con dispositivos móviles, por lo que deberá descargar la aplicación Discord en su computadora de escritorio.

A continuación, repasaremos cada uno de los pasos anteriores con más detalle.

Método 1: agregar una imagen reactiva con las imágenes reactivas de Discord de Fugi

Discord Reactive Images de Fugi es la herramienta más popular y fácil utilizada por Discord PNGtubers. Para esto, necesitará una aplicación Discord conectada a un canal de voz, OBS y un micrófono.

Las instrucciones detalladas paso a paso son las siguientes:

  1. Descargue e instale la aplicación Discord de escritorio y un OBS (este tutorial utiliza OBS Studio gratuito y de código abierto)
  2. Ahora, inicie la aplicación Discord y seleccione el ícono de Configuración junto a su nombre de usuario en la esquina inferior izquierda.
    discord reactive images- settings
  3. En la ventana Configuración, desplácese hacia abajo hasta Avanzado desde el panel izquierdo y active Modo de desarrollador en Avanzado .
    discord developer mode
  4. Ahora, desde el panel izquierdo, seleccione Voz y video . Elija su micrófono en Configuración de voz y pruébelo para asegurarse de que funciona. Haga clic en el botón desplegable debajo de la sección Cámara del menú Configuración de video , luego seleccione Cámara virtual de OBS (si ha instalado OBS Studio).
    discord reactive images - obs virtual camera
  5. Ahora vaya al sitio web Reactivo de Fugi y haga clic en Iniciar sesión . A continuación, deberá iniciar sesión en Discord nuevamente y otorgar los permisos de aplicación necesarios para autorizar la aplicación.
    fugi discord reactive images
  6. Esto lo llevará a la página principal para configurar las cosas. Si tiene ambos PNG listos (uno con la boca cerrada y el otro con la boca abierta para su avatar parlante), haga clic en el ícono de la cámara debajo de " Establecer imagen inactiva" y seleccione el primer PNG con la boca cerrada. Luego, repita el proceso en " Establecer imagen hablada " y seleccione el segundo PNG con la boca abierta. Cuando haya terminado, haga clic en Guardar .
    fugi reactive images - upload PNGs
  7. A la izquierda, puede cambiar algunas cosas, como la alineación y el espaciado de la imagen y el efecto Rebote entre transiciones. Una vez hecho esto, haga clic en Aplicar y luego, en Enlaces, haga clic en el icono Copiar junto a la Fuente del navegador individual para copiar la URL.
    fugi discord reactive images - browser source
  8. Ahora abra OBS y haga clic en el ícono más ( + ) debajo de Fuentes . Haga clic en Navegador , luego en Crear nuevo , asigne un nombre a su fuente y haga clic en Aceptar .
    discord reactive images - add browser source to OBS
  9. En la ventana Propiedades , pegue el enlace que acaba de copiar junto a la URL y haga clic en Aceptar .
    discord reactive images -- copy links to obs
  10. Ahora, la imagen reactiva aparece en la parte superior. Al arrastrar la imagen, puede cambiar su ancho o alto.
    discord reactive image obs
  11. Para comenzar la transmisión de Discord, haga clic en Iniciar cámara virtual en Controles en OBS.
  12. Finalmente, regrese a la aplicación Discord y conéctese a un canal de voz (cree un canal de voz privado para probarlo primero). En la parte inferior izquierda, haz clic en Video y luego en Activar cámara .
    reactive png vtuber obs

En este punto, su imagen reactiva debería aparecer en Discord, y puede intentarlo hablando por el micrófono. La imagen reactiva ahora está lista para usarse para transmisión y colaboraciones a través de llamadas de Discord.

Método 2: usar la superposición OBS StreamKit para agregar una imagen reactiva

Si necesita un método alternativo, puede usar StreamKit Overlay de Discord, que le permite agregar un código CSS personalizado en lugar de cargar manualmente dos imágenes.

Las instrucciones detalladas paso a paso son las siguientes:

  1. Vaya al sitio web de Discord StreamKit y, según su software de transmisión, seleccione Instalar para OBS o Instalar para XSplit .
  2. Si ya inició sesión en Discord, se mostrará la página Widgets; de lo contrario, le pedirá que inicie sesión.
  3. Navegue hasta Voice Widget y seleccione el nombre de su servidor y el canal de voz de los menús desplegables junto a Servidor y Canal de voz, respectivamente. Si desea ocultar su nombre de usuario durante las llamadas de Discord, habilite la opción Ocultar nombres .
    pngtuber streamkit overlay
  4. Copie el código del navegador de la parte inferior derecha de la página en Voice Widget.
    discord vtuber - streamkit overlay
  5. Inicie OBS y seleccione el icono + (Agregar fuente) en el menú Fuentes. Haga clic en Navegador > Aceptar, luego pegue la URL que acaba de copiar junto a la URL y finalmente haga clic en Aceptar.
  6. Ahora, abra su aplicación Discord y cree un canal de texto privado donde pueda guardar sus imágenes PNG y cargar ambos archivos.
PROPINA:
Puede buscar en GitHub o Reddit para encontrar generadores de códigos y códigos personalizados disponibles por otros Vtubers. Uno que recomendamos está alojado en CodePen y creado por un Vtuber llamado Kukushie.
  1. Abra el enlace del generador de CSS en un navegador.
  2. Regrese a Discord y haga clic derecho en su nombre de usuario en la esquina inferior izquierda, luego seleccione Copiar ID . Pegue la ID junto a la ID de usuario de Discord en el generador de CSS.
    discord reactive PNG - custom CSS
  3. Abra el canal Discord donde se almacenan sus PNG, haga clic con el botón derecho en cada imagen, elija Copiar ID y luego pegue las ID junto a las secciones "URL de la imagen" en la ventana de CodePen.
  4. Verifique los enlaces de la imagen, luego haga clic en Generar CSS para generar su código, que luego puede editar y modificar. Haga clic en el botón Copiar CSS .
    discord reactive png vtuber - copy custom CSS
  5. Ahora, regrese a OBS y haga clic con el botón derecho en la fuente del navegador que creó con StreamKit, luego seleccione Propiedades .
  6. Desplácese hacia abajo hasta CSS personalizado , pegue el código que acaba de copiar y haga clic en Aceptar .

Ahora debería ver su imagen reactiva lista para usar en la parte superior, que se puede arrastrar y cambiar de tamaño. Para conectarse a Discord, vaya a Controles en OBS y seleccione Iniciar cámara virtual .

Puede comenzar a transmitir compartiendo toda su pantalla o solo la ventana de la aplicación del juego a través de OBS. Haga clic en + en Fuentes y seleccione Game Capture (Windows) o Display Capture (Mac) para capturar la pantalla de su juego. Alternativamente, si está jugando un juego de navegador, puede usar Windows Capture para compartir la ventana del navegador con los miembros de su canal de voz Discord.

Cómo conectar tu canal de Twitch o YouTube a Discord

Los streamers en vivo y las comunidades de Vtuber han utilizado ampliamente Discord para aumentar la participación y el crecimiento de la audiencia durante años. Es por eso que integrar Discord con otras plataformas de transmisión es una buena idea, especialmente para las personas que son nuevas en la escena de la transmisión. Puede dar a sus suscriptores diferentes canales y servidores para que todos puedan ver sus transmisiones al mismo tiempo. Le permite construir una base de seguidores leales, brindar beneficios y características especiales y notificar a su comunidad sobre cualquier actualización futura.

discord reactive image - connect twitch or youtube

Para conectar Discord a Twitch o YouTube, inicie Discord y haga clic en el icono de engranaje de Configuración a la derecha de su nombre de usuario en la esquina inferior izquierda. Navegue a Conexiones, haga clic en los íconos de Twitch y YouTube, y luego otorgue permiso para que cada uno de los servicios se conecte a Discord. Puede configurar roles y permisos de servidor, así como agregar bots, emojis personalizados, eventos comunitarios y más para sus suscriptores para que sea una experiencia divertida para todos.

Preguntas frecuentes sobre las imágenes reactivas de Discord

Loader image

¿Qué son las imágenes reactivas de Discord?

¿Cómo hago un PNG reactivo de Discord?

Puede crear su propio modelo PNG con software de dibujo gratuito o de pago, como FireAlpaca, Procreate, Inkscape, etc., y luego exportar la imagen como PNG transparente antes de cargarla en el servidor de Discord.

¿Cómo agrego imágenes reactivas de Discord a OBS?

El método más simple para agregar imágenes reactivas de Discord a OBS es cargar ambas imágenes PNG en la herramienta Reactive Fugi, luego copiar el enlace de origen del navegador y pegarlo en OBS como fuente.

¿Por qué las imágenes reactivas de Discord no funcionan?

Si las imágenes reactivas de Discord no funcionan, cierre sesión y vuelva a iniciar sesión; asegúrese de que las imágenes estén en formato PNG; verifique su nombre de usuario e ID de imagen, y asegúrese de estar en el canal de voz correcto y conectado a su cámara virtual OBS.

¿Por qué la imagen reactiva de Discord no oculta mi nombre de usuario?

Para ocultar su nombre de usuario de Discord, inicie Discord. Vaya a Configuración > Mi cuenta. Haga clic en Editar junto a Nombre de usuario, luego pegue el símbolo (enlace) en el campo de nombre de usuario y haga clic en Listo.

Otras lecturas:

  • Cómo agregar bots a un servidor de Discord [Guía]
  • Los 10 mejores bots de Discord útiles para administrar su servidor en 2022
  • Las 4 fuentes principales para encontrar servidores de Discord para unirse en 2022