Comment travailler avec des images réactives Discord en tant que débutant [2022]

Publié: 2022-09-13

Supposons que vous cherchiez à rejoindre le mouvement VTuber (Virtual YouTuber) et à collaborer avec vos collègues joueurs et fans sur Discord. Dans ce cas, vous voudrez peut-être envisager d'utiliser Discord Reactive Images . Le streaming avec un avatar PNG VTuber réactif est le moyen le plus convivial et le moins coûteux de démarrer avec VTuber .

discord reactive images

Avec l'amélioration de l'animation 2D et 3D, les VTubers font leur retour partout, collaborant sur des plateformes comme YouTube, Twitch et Discord. Des modèles VTuber ou PNGtuber peuvent être créés et personnalisés pour refléter ce que leurs personnages disent et font dans différentes situations. Essayez Discord Reactive Images si vous avez besoin d'un remplacement de caméra faciale pour le streaming ou l'utilisation dans les appels discord.

Dans cet article, vous apprendrez comment les débutants peuvent configurer et utiliser Discord Reactive Images de plusieurs manières.

Table des matières

Que font exactement les images réactives Discord ?

Les images réactives permettent à vos avatars en ligne de se déplacer en réponse à votre voix ou à vos réactions lors de la diffusion ou de la participation à des appels Discord. Cela vous aide également à rester anonyme. Pour les moments où vous n'êtes pas d'humeur à être devant la caméra, VTubing est un excellent moyen de garder les choses vivantes et engageantes pour votre public.

Il vous permet de créer des vidéos avec un personnage ou un avatar PNG numérique, qui est animé en temps réel à l'aide d'un logiciel de capture vocale et représente un personnage fictif, généralement dans le style de l'animation japonaise. Que vous diffusiez en direct sur Discord ou que vous hébergez un serveur de fans privé, vous pouvez faire en sorte que votre modèle PNG, 2D ou 3D exprime vos émotions pour vous.

Travailler avec des images réactives Discord et les prérequis nécessaires

Discord permet aux streamers d'utiliser leurs serveurs de fans pour discuter avec les abonnés et créer des liens avec leur communauté à la fois dans le jeu et hors jeu. Si vous êtes un spectateur Twitch, vous pouvez rejoindre et discuter avec vos streamers préférés sur leurs serveurs Discord, qui s'intègrent à leur chaîne Twitch. En tant que streamer, vous pouvez occuper les membres de votre serveur avec des canaux de texte, des canaux vocaux, des messages directs de groupe séparés, des robots de jeu, la diffusion en direct vers un public sélectionné et bien plus encore sur Discord.

Selon le degré de personnalisation et de savoir-faire technique que vous souhaitez mettre dans votre image réactive Discord, vous pouvez choisir parmi de nombreuses options. Vous pouvez commencer en tant que PNGtuber, puis passer au rigging 2D ou 3D à mesure que vous acquérez plus d'expérience avec Vtubing. Et la meilleure partie est que vous n'avez pas besoin d'investir dans un logiciel de suivi de visage haut de gamme, un éclairage ou des caméras.

Être un PNGtuber nécessite une configuration minimale. Certaines des choses dont vous avez besoin pour configurer votre image réactive incluent :

  1. Au moins une et pas plus de deux images PNG pour servir d'image réactive Discord.
  2. Un microphone pour enregistrer votre voix avec une fonction de réduction du bruit pour éliminer les bruits de fond.
  3. Un OBS, ou Open Broadcast Software, pour ajouter une source de navigateur pour la diffusion en direct et l'enregistrement vidéo.

Où trouver des images réactives personnalisées

Il existe plusieurs façons d'obtenir des images PNG pour votre avatar Discord. Vous pouvez créer votre propre modèle PNG à partir de logiciels de dessin gratuits ou payants comme FireAlpaca, Procreate, Inkscape ou tout autre logiciel de dessin populaire. Assurez-vous simplement d'exporter l'image sous forme de découpe PNG transparente avant de la télécharger sur le serveur Discord. Une fois que vous avez créé votre PNG, vous pouvez utiliser un outil en ligne comme removebg pour supprimer l'arrière-plan afin d'obtenir une image PNG transparente.

Vous pouvez également acheter ou commander votre PNG personnalisé via Etsy, Instagram ou Fiverr, où vous pouvez trouver une pléthore d'artistes numériques qui peuvent créer des PNG personnalisés en fonction de vos spécifications si vous êtes prêt à débourser de l'argent. Assurez-vous de demander des exemples de leur travail et confirmez que vous détenez tous les droits d'auteur sur l'image afin qu'elle ne puisse pas être reproduite ou utilisée par quelqu'un d'autre.

Méthodes d'ajout d'images réactives Discord

Il existe plusieurs façons d'ajouter un PNG réactif à vos appels et collaborations Discord, mais par souci de simplicité pour les débutants, nous nous concentrerons sur deux méthodes simples qui ne prendront pas trop de temps.

discord reactive images fugi tech + streamkit overlay

Voici les façons dont nous discuterons dans ce post:

  1. Utilisation de Reactive by Fugi, un outil logiciel qui s'intègre à Discord pour générer un avatar PNG qui répond automatiquement à votre voix.
  2. Ajout manuel de CSS personnalisé pour générer du code pour les images réactives Discord, que vous pouvez ensuite modifier, personnaliser ou redimensionner à votre guise.

Remarque : ces méthodes peuvent ne pas être compatibles avec les appareils mobiles, vous devrez donc télécharger l'application Discord sur votre ordinateur de bureau à la place.

Nous allons passer en revue chacune des étapes ci-dessus plus en détail ci-dessous.

Méthode 1 : Ajouter une image réactive avec les images réactives Discord de Fugi

Fugi's Discord Reactive Images est l'outil le plus populaire et le plus simple utilisé par Discord PNGtubers. Pour cela, vous aurez besoin d'une application Discord connectée à un canal vocal, OBS et un microphone.

Les instructions détaillées étape par étape sont les suivantes :

  1. Téléchargez et installez l'application de bureau Discord et un OBS (ce tutoriel utilise OBS Studio gratuit et open source)
  2. Maintenant, lancez l'application Discord et sélectionnez l'icône Paramètres à côté de votre nom d'utilisateur dans le coin inférieur gauche.
    discord reactive images- settings
  3. Dans la fenêtre Paramètres, faites défiler jusqu'à Avancé dans le panneau de gauche et activez le mode développeur sous Avancé .
    discord developer mode
  4. Maintenant, dans le panneau de gauche, sélectionnez Voix et vidéo . Choisissez votre microphone sous Paramètres vocaux et testez-le pour vous assurer qu'il fonctionne. Cliquez sur le bouton déroulant sous la section Caméra du menu Paramètres vidéo , puis sélectionnez Caméra virtuelle OBS (si vous avez installé OBS Studio).
    discord reactive images - obs virtual camera
  5. Allez maintenant sur le site Web réactif de Fugi et cliquez sur Connexion . Ensuite, vous devrez vous reconnecter à Discord et accorder les autorisations d'application nécessaires pour autoriser l'application.
    fugi discord reactive images
  6. Cela vous amènera à la page principale pour configurer les choses. Si vous avez vos deux PNG prêts (l'un avec la bouche fermée et l'autre avec la bouche ouverte pour votre avatar parlant), cliquez sur l'icône de l'appareil photo sous " Définir l'image inactive" et sélectionnez le premier PNG avec la bouche fermée. Ensuite, répétez le processus sous " Définir l'image parlante " et sélectionnez le deuxième PNG avec la bouche ouverte. Lorsque vous avez terminé, cliquez sur Enregistrer .
    fugi reactive images - upload PNGs
  7. Sur la gauche, vous pouvez modifier quelques éléments, tels que l'alignement et l'espacement des images et l'effet Bounce entre les transitions. Une fois cela fait, cliquez sur Appliquer, puis, sous Liens, cliquez sur l'icône Copier à côté de la source du navigateur individuel pour copier l'URL.
    fugi discord reactive images - browser source
  8. Maintenant, ouvrez OBS et cliquez sur l'icône plus ( + ) sous Sources . Cliquez sur Navigateur , puis sous Créer nouveau , donnez un nom à votre source et cliquez sur OK .
    discord reactive images - add browser source to OBS
  9. Dans la fenêtre Propriétés , collez le lien que vous venez de copier à côté de l'URL et cliquez sur OK .
    discord reactive images -- copy links to obs
  10. Maintenant, l'image réactive apparaît en haut. En faisant glisser l'image, vous pouvez modifier sa largeur ou sa hauteur.
    discord reactive image obs
  11. Pour commencer le flux Discord, cliquez sur Démarrer la caméra virtuelle sous Contrôles dans OBS.
  12. Enfin, revenez à l'application Discord et connectez-vous à un canal vocal (créez un canal vocal privé pour le tester en premier). En bas à gauche, cliquez sur Vidéo , puis sur Activer l'appareil photo .
    reactive png vtuber obs

À ce stade, votre image réactive devrait apparaître sur Discord et vous pouvez l'essayer en parlant dans le microphone. L'image réactive est maintenant prête à être utilisée pour le streaming et les collaborations via les appels Discord.

Méthode 2 : Utilisation de la superposition OBS StreamKit pour ajouter une image réactive

Si vous avez besoin d'une méthode alternative, vous pouvez utiliser StreamKit Overlay de Discord, qui vous permet d'ajouter un code CSS personnalisé plutôt que de télécharger manuellement deux images.

Les instructions détaillées étape par étape sont les suivantes :

  1. Accédez au site Web Discord StreamKit et, en fonction de votre logiciel de streaming, sélectionnez Installer pour OBS ou Installer pour XSplit .
  2. Si vous êtes déjà connecté à Discord, il affichera la page Widgets ; sinon, il vous demandera de vous connecter.
  3. Accédez au widget vocal et sélectionnez le nom de votre serveur et votre canal vocal dans les menus déroulants à côté de Serveur et Canal vocal, respectivement. Si vous souhaitez masquer votre nom d'utilisateur pendant les appels Discord, activez l'option Masquer les noms .
    pngtuber streamkit overlay
  4. Copiez le code du navigateur en bas à droite de la page sous Voice Widget.
    discord vtuber - streamkit overlay
  5. Lancez OBS et sélectionnez l'icône + (Ajouter une source) dans le menu Sources. Cliquez sur Navigateur > OK, puis collez l'URL que vous venez de copier à côté de l'URL, et enfin cliquez sur OK.
  6. Maintenant, ouvrez votre application Discord et créez un canal de texte privé où vous pouvez enregistrer vos images PNG et télécharger les deux fichiers.
POINTE:
Vous pouvez creuser GitHub ou Reddit pour trouver des générateurs de code et des codes personnalisés mis à disposition par d'autres Vtubers. Celui que nous recommandons est hébergé chez CodePen et créé par un Vtuber nommé Kukushie.
  1. Ouvrez le lien du générateur CSS dans un navigateur.
  2. Retournez sur Discord et cliquez avec le bouton droit sur votre nom d'utilisateur dans le coin inférieur gauche, puis sélectionnez Copier l'ID . Collez l'ID à côté de l'ID utilisateur Discord dans le générateur CSS.
    discord reactive PNG - custom CSS
  3. Ouvrez le canal Discord où vos PNG sont stockés, cliquez avec le bouton droit sur chaque image, choisissez Copier l'ID, puis collez les ID à côté des sections "URL de l'image" dans la fenêtre CodePen.
  4. Vérifiez les liens d'image, puis cliquez sur Générer CSS pour générer votre code, que vous pouvez ensuite éditer et modifier. Cliquez sur le bouton Copier CSS .
    discord reactive png vtuber - copy custom CSS
  5. Maintenant, revenez à OBS et faites un clic droit sur la source du navigateur que vous avez créée avec StreamKit, puis sélectionnez Propriétés .
  6. Faites défiler jusqu'à Custom CSS , collez le code que vous venez de copier et cliquez sur OK .

Vous devriez maintenant voir votre image réactive prête à l'emploi en haut, qui peut être glissée et redimensionnée. Pour vous connecter à Discord, accédez à Contrôles dans OBS et sélectionnez Démarrer la caméra virtuelle .

Vous pouvez commencer à diffuser en partageant tout votre écran ou simplement la fenêtre de l'application de jeu via OBS. Cliquez sur + sous Sources et sélectionnez Game Capture (Windows) ou Display Capture (Mac) pour capturer votre écran de jeu. Alternativement, si vous jouez à un jeu par navigateur, vous pouvez utiliser Windows Capture pour partager la fenêtre du navigateur avec les membres de votre canal vocal Discord.

Comment connecter votre chaîne Twitch ou YouTube à Discord

Les streamers en direct et les communautés Vtuber utilisent largement Discord pour augmenter l'engagement et la croissance du public depuis des années. C'est pourquoi l'intégration de Discord à d'autres plateformes de streaming est une bonne idée, en particulier pour les nouveaux venus sur la scène du streaming. Vous pouvez donner à vos abonnés différents canaux et serveurs afin qu'ils puissent tous regarder vos flux en même temps. Il vous permet de créer une base de fans fidèles, de fournir des avantages et des fonctionnalités spéciaux et d'informer votre communauté de toute mise à jour future.

discord reactive image - connect twitch or youtube

Pour connecter Discord à Twitch ou YouTube, lancez Discord et cliquez sur l'icône d'engrenage Paramètres à droite de votre nom d'utilisateur dans le coin inférieur gauche. Accédez à Connexions, cliquez sur les icônes de Twitch et YouTube, puis autorisez chacun des services à se connecter à Discord. Vous pouvez configurer les rôles et les autorisations du serveur, ainsi qu'ajouter des bots, des emojis personnalisés, des événements communautaires et bien plus encore pour vos abonnés afin d'en faire une expérience amusante pour tout le monde.

FAQ sur les images réactives Discord

Loader image

Que sont les images réactives Discord ?

Comment créer un PNG réactif Discord ?

Vous pouvez créer votre propre modèle PNG à l'aide d'un logiciel de dessin gratuit ou payant tel que FireAlpaca, Procreate, Inkscape, etc., puis exporter l'image au format PNG transparent avant de la télécharger sur le serveur Discord.

Comment ajouter des images réactives Discord à OBS ?

La méthode la plus simple pour ajouter des images réactives Discord à OBS consiste à télécharger les deux images PNG dans l'outil Reactive Fugi, puis à copier le lien source du navigateur et à le coller dans OBS en tant que source.

Pourquoi les images réactives Discord ne fonctionnent-elles pas ?

Si Discord Reactive Images ne fonctionne pas, déconnectez-vous et reconnectez-vous ; assurez-vous que les images sont au format PNG ; vérifiez votre nom d'utilisateur et vos identifiants d'image, et assurez-vous que vous êtes dans le bon canal vocal et connecté à votre caméra virtuelle OBS.

Pourquoi l'image réactive Discord ne masque-t-elle pas mon nom d'utilisateur ?

Pour masquer votre nom d'utilisateur Discord, lancez Discord. Accédez à Paramètres > Mon compte. Cliquez sur Modifier à côté de Nom d'utilisateur, puis collez le symbole (lien) dans le champ du nom d'utilisateur et cliquez sur Terminé.

Lectures complémentaires :

  • Comment ajouter des bots à un serveur Discord [Guide]
  • Top 10 des bots Discord utiles pour gérer votre serveur en 2022
  • Les 4 meilleures sources pour trouver des serveurs Discord à rejoindre en 2022