¿Cómo crear imágenes reactivas de Discord?

Discord te permite crear imágenes reactivas que son especialmente útiles para los creadores. Sin embargo, no es necesario ser creador para utilizar PNG reactivos y agregarlos a Discord. En esta publicación, veremos cómo crear y usar imágenes reactivas de Discord en Discord. Entonces, si quieres agregar estilo a tu juego de Discord, esta guía es para ti.

¿Qué son las imágenes reactivas?

Las imágenes reactivas son imágenes que poseen la capacidad de reaccionar al audio. Cuando alguien habla, su ícono se iluminará, indicando que está hablando. Una vez que dejen de hablar, todo volverá a la normalidad. Se pueden crear y agregar a Discord con varios métodos, como se explica más adelante.

Cómo crear imágenes reactivas de Discord

A continuación se muestran las dos formas de crear imágenes reactivas de Discord.

1. Crea y agrega imágenes reactivas de Discord de Fugi
2. Agregue CSS personalizado usando la superposición StreamKit de Discord

Hablemos de ellos en detalle.

1]Crea y agrega imágenes reactivas de Discord de Fugi

En primer lugar, comencemos con el método más sencillo de todos. Usaremos la herramienta Discord Reactive Images de Fugi para crear PNGtubers. Siga los pasos que se mencionan a continuación para hacer lo mismo.

1. Inicie la aplicación cliente Discord en su computadora; además, descargue y abra OBS Studio, que es una aplicación gratuita que todos pueden instalar.
2. En Discord, debes ir a Configuración haciendo clic en el ícono de rueda dentada ubicado al lado de tu nombre de usuario.
3. Luego, en la ventana Configuración, vaya a Avanzado desde el panel izquierdo y luego, en la sección Avanzado, habilite la opción asociada con el Modo desarrollador.
4. Desplácese hacia abajo en la sección izquierda para llegar a Voice & Video, vaya a Configuración de voz y seleccione el micrófono correcto. En Configuración de video, cambie Cámara a Cámara virtual OBS.
5. Luego, vaya a reactive.fugi.tech y haga clic en Iniciar sesión con Discord.
6. Ingrese sus credenciales o escanee el código QR para iniciar sesión en su cuenta y luego haga clic en Autorizar.
7. Serás redirigido a una página donde podrás configurar imágenes reactivas.
8. Tomemos el ejemplo de un avatar, necesitas dos imágenes, una con la boca cerrada y otra con la montura abierta. Una vez que tenga estas imágenes, haga clic en el ícono Más (+) , luego cargue una imagen hablando y otra inactiva. Finalmente, haga clic en Guardar.
9. Puedes configurar la imagen como quieras y una vez hecho, copiar el enlace generado.
10. Inicie OBS Studio, haga clic en el ícono Más (+) de Fuente, luego vaya a Navegador > Crear nuevo > ingrese el nombre de la fuente > De acuerdo.
11. En Propiedades > URL, pegue el enlace que le pedimos que copiara y haga clic en Aceptar.
12. Realice cambios en el tamaño de la imagen según su elección antes de iniciar la transmisión de Discord.
13. Para comenzar a transmitir en Discord, debe hacer clic en «Iniciar cámara virtual» ubicado en «Controles» en OBS.
14. Finalmente, cambie a Discord, conéctese a un canal de voz y encienda la cámara.

Intente hablar por el micrófono para probar la imagen reactiva que ahora debería aparecer en Discord. La imagen reactiva está lista para su uso en streaming y colaboraciones a través de llamadas de Discord.

2]Agregue CSS personalizado usando la superposición StreamKit de Discord

Alternativamente, podemos utilizar StreamKit Overlay de Discord para agregar CSS a nuestra imagen. Tenga en cuenta que este método requiere conocimientos previos de CSS o codificación. Sin embargo, no es necesario ser programador, basta con tener conocimientos de CSS. Siga los pasos que se mencionan a continuación para hacer lo mismo.

1. Ve a streamkit.discord.com.
2. Luego debe hacer clic en Instalar para OBS o Instalar para XSplit según el software de transmisión que esté utilizando.
3. Si aún no lo ha hecho, se le pedirá que inicie sesión en Discord. Asegúrate de abrir Discord antes de hacer eso.
4. Vaya a Voice Widget y seleccione su servidor y canal de voz en los menús desplegables. Oculte su nombre de usuario durante las llamadas de Discord habilitando la opción Ocultar nombres. Una vez hecho esto, obtendrá una URL en el lado derecho de la pantalla que deberá copiar.
5. Discord te pedirá que autorices en su aplicación, así que hazlo en la aplicación.
6. Ahora, abra OBS, haga clic en el ícono Más (+) para agregar una fuente desde el menú Fuentes, vaya a Navegador > Ok, pega la URL que copiaste y haz clic en Aceptar.
7. Abre tu aplicación Discord y crea un canal de texto privado donde puedas guardar tus imágenes PNG y cargar ambos archivos.
8. Ahora, ve a codepen.io, que es un generador de CSS.
9. Copie su ID de Discord haciendo clic en su nombre de usuario en la esquina inferior izquierda de Discord y seleccionando Copiar ID. Luego pégalo junto al ID de usuario de Discord en el generador de CSS.
10. Copie el ID de cada imagen PNG haciendo clic derecho sobre ella en su canal de Discord y seleccionando «Copiar ID». Luego pegue la identificación junto a «URL de imagen» en la ventana de CodePen.
11. Finalmente, haga clic en el botón Generar CSS para obtener el código CSS requerido. Para copiar el código generado, haga clic en Copiar CSS.
12. Abra OBS, vaya a la fuente del navegador StreamKit, haga clic derecho sobre él y seleccione Propiedades.
13. Navegue hasta CSS personalizado y pegue el código copiado.
14. Finalmente, haga clic en Aceptar.

Vea la imagen reactiva en la parte superior, cambie su tamaño y arrástrela según sea necesario. Para conectarse a Discord, vaya a Controles OBS y seleccione Iniciar cámara virtual.

¿Cómo agrego un PNG a Discord?

La forma más sencilla de agregar un PNG a Discord es arrastrándolo desde la fuente y soltándolo en tu chat. Simplemente abra el Explorador de archivos, vaya a la ubicación donde está almacenada la imagen, selecciónela y arrástrela y suéltela en Discord. Este método no se limita sólo a PNG sino que también funcionará para cualquier otro tipo de archivo.