Hello ami Streamer! Depuis quelques temps je me suis amusé avec OBS et Streamerbot pour essayer de rendre une expérience unique pour mes viewers sur mon stream. J’ai eu une idée, permettre à ma communauté de modifier tout mon overlay pendant que je suis en stream. Et comme je suis fan d’Harry Potter j’ai décidé de leur donner la possibilité de mettre mon overlay aux couleurs des 4 maisons. En bref ça donne ça !
Alors, si tu as envie d’apprendre à savoir comment faire ça je t’explique dans cet article toutes les étapes à suivre. N’oublie pas, il te faudra utiliser deux logiciels en particulier : OBS Studio et Streamerbot. Je pars donc du principe que tu les as installé sur ton PC avant de démarrer ce tuto bien sûr. Et si tu veux en savoir plus sur la manière de personnaliser tes alertes de stream je te renvoie vers cet autre article que je t’ai rédigé. Pour avancer dans cet article je te propose de créer un nouvel overlay en mode « Dark mode » mais libre à toi de mettre les couleurs que tu veux. Et si tu cherches juste des overlays gratuits, je t’ai fait un article la dessus aussi.
Voici en intro une liste des plugins OBS à installer si tu veux pouvoir réaliser ce genre de transformation :
- Plugin Move permettant de faire bouger des sources d’une position A à une position B
- Plugin Gradient Source pour faire des sources avec un dégradé de couleur
- Plugin ShaderFilter pour appliquer des shaders sur tes sources (bouts arrondis ou Webcam en rond par exemple)
Dans OBS faire du scèneception (inception de scène)
Tu as sans doute l’habitude de créer ta scène « Just chatting » composée de plusieurs sources (Webcam, chat Twitch, Last follower etc…) et bien je vais te proposer de tout déconstruire. Pour chaque élément de ton overlay tu vas créer une scène dédiée dans OBS. Suis le guide, je t’explique.
Scène background
J’utilise en premier lieu une scène « Background » qui me permet si je le souhaite de changer la couleur de l’arrière plan global de ma scène. J’utilise une source Gradient par défaut qui est ma charte graphique, mais si je veux qu’un nouveau fond vienne prendre le dessus, je vais le créer dans cette scène, puis le masquer par défaut.
Dans cette vidéo, tu peux voir que j’ai une scène « Background » qui comporte plusieurs sources soit gradient, soir couleur. Grâce à Streamerbot, que l’on verra un peu plus tard dans l’article, tu pourras trigger l’activation de ce fond d’écran.
Cette scène « Background » doit maintenant venir se placer dans ta scène « Just Chatting ». Pour ce faire rien de plus simple, clic droit (ou +) puis ajouter une scène. Tu choisis ensuite la scène Background que tu viens de créer et tu la place tout en bas de la liste de tes sources pour qu’elle soit positionnée en arrière plan. Le tour est joué.
DISCLAIMER : J’ai choisi personnellement de rajouter une vidéo en mode filigrane au dessus de mon fond d’écran (c’est le rendu étoilé sur la photo ci dessus). Pour faire de même tu peux aussi te créer une deuxième scène intitulée « Background vidéo » et y positionner ta vidéo par défaut et d’autres que tu voudrais activer de la même manière.
Scène Webcam
Deuxième élément capital de tes overlays, ta webcam. Tu as sans doute déjà une source « Périphérique de capture vidéo » sur laquelle tu as appliqué un contour de caméra ou autre élément d’overlay classique. Moi j’ai décidé de tout gérer directement dans OBS avec des sources de couleurs.
De la même manière que précédemment je vais créer une scène « Caméra et filtres » qui me permettra de gérer toutes les modifications sur ma webcam et son contour à un seul endroit. Je place ensuite cette scène en tant que source de ma scène just chatting comme je l’ai fait précédemment.
Ensuite je vais créer mes bordure de webcam en me basant sur les bordures existants. Cela me permet de copier les sources existantes puis de les dupliquer pour garder les bonnes dimensions.
Pour renforcer l’aspect « Dark mode » je vais ajouter un filtre noir et blanc sur ma webcam. Pour se faire, je clique droit sur la source « Périphérique de capture vidéo » puis « filtre », « appliquer un LUT » et j’en choisie un noir et blanc.
Une fois que je suis satisfait du rendu, je peux maintenant masquer ces sources et ces filtres que je déciderai d’afficher en utilisant Streamerbot.
Scène de chat
On termine avec ta scène de chat. Je pense que tu as compris le principe ici et que tu devrais t’en sortir si tu veux afficher d’autres éléments comme les derniers followers/subs ou un objectif Twitch par exemple. Chaque élément devient une scène. Le chat aussi 🙂
Je sais que ça peut paraitre bizarre et pourtant c’est ce qui va rendre ton stream personnalisable à l’infini. Là je fais simple, je ne modifie que des couleurs mais tu peux tout aussi bien décider d’afficher des images ou même changer complètement la forme du chat. Sois créatif. 😉
Ici encore tu vas dupliquer les sources existantes puis les superposées de manière à ce que l’une remplace l’autre. N’oublie pas de masquer celles que tu crées en vue de l’obtention de récompenses de points de chaines. Une fois que tu es satisfait du résultat, ici encore tu peux masquer toutes ces sources par défaut. On va s’occuper maintenant de faire en sorte qu’elles s’activent au bon moment 😉
Dernière chose à faire, venir placer ta nouvelle scène « Chat » dans ta scène de « just chatting ». Ajuste la taille et l’endroit où tu veux qu’elle s’affiche et le tour est joué.
Streamerbot pour activer le Dark mode
Avec Streamerbot, il va être possible de choisir comment et pour combien de temps va être activé ton nouvel overlay. Tu peux choisir de l’activer manuellement en pressant une touche de ton clavier ou de ton streamdeck si tu en possèdes un. Mais je préfère donner la main à ma communauté pour le faire elle même. Soit par l’obtention d’une récompense de point de chaine, soit tout simplement avec une commande !darkmode qui peut être cool et une autre !lightmode qui remettrait ton overlay principal. Cela pourrait animer ton chat 😉
Créer la récompense de point de chaine
Je choisis personnellement de créer une récompense de point de chaine. Pour ce faire je me rends sur l’onglet « Platforms » dans Streamerbot puis clic droit, add. Je donne un nom, une couleur, une description et un nombre de points nécessaire pour récupérer cette récompense. Je clique ensuite sur OK. Ma récompense est créée ! Youuuupiiii… Euh non pour le moment elle existe mais ne fera rien si quelqu’un la récupère. 🙁
Créer l’action dans Streamerbot
Rendez vous maintenant dans l’onglet « Actions » pour créer l’action Dark Mode. Je te le rappelle, créer une action dans streamerbot consiste à
- Donner un titre à l’action ainsi que les préférences de Queues (c’est à dire quand est-ce qu’elle se déclenche vis à vis des autres alertes)
- Créer des sub-actions associées. C’est à dire que doit il se passer sur ton stream quand l’action se lance (activer les sources crées pour le dark mode par exemple)
- Choisir un Triggers qui lancera l’action. Une récompense de point de chaine fraichement crée par exemple
Tout d’abord, il faut donc créer l’action dark mode. Pour ce faire il te suffit dans la zone « Actions » de faire un clic droit puis add, donner un titre et choisir de le classer si tu t’es constitué des groupes. Tu verras dans la vidéo ci dessous que je la place personnellement dans la queue des maisons de Poudlard (car je ne souhaite pas que l’activation de cette récompense vienne prendre le dessus sur une récompense en cours sur les maisons de Poudlard). Si tu n’as ni groupe, ni queue tu peux laisser à vide. Fait juste attention que sans Queue, 2 récompenses récupérées en même temps s’annuleront.
Créer les Sub-actions
Bon, là il va falloir commencer à être concentré. Faudrait pas se planter 🙂
Dans les sub-actions tu vas chercher à :
- Afficher toutes les sources du dark mode dans les différentes scènes crées précédemment
- Laisser un temps ces sources affichées
- Puis les masquer à nouveau pour que ton stream redevienne comme avant.
Voici comment procéder. Tu vas positionner ta souris dans la zone Sub-actions puis clic droit (après avoir sélectionner l’action « Dark Mode » bien évidemment sinon ça ne marche pas).
Afficher toutes les sources du dark mode
Pour afficher le Background, tu vas procéder comme suit
- OBS => Tu indique ici que ce que tu viens chercher se trouve dans OBS
- Sources => Il s’agit bien d’une source que tu souhaites activer
- Set Source visibility State => Cela te permet de choisir si tu veux rendre visible ou masquer la source en question
Il faut ensuite que tu sélectionnes la scène dans laquelle se trouve la source (donc la scène Background si tu as suivi mon tuto) puis la source en question que j’ai appelé « Gradient Background Dark Mode » puis visible. Et voilà pour la première source
Il va te falloir faire la même chose pour toutes les sources de toutes les scènes que tu as créé. Attention quand même si comme moi tu as appliqué un filtre sur une source (mon image en noir et blanc sur ma caméra) la sub action est différente il te faudra faire
- OBS => C’est toujours dans OBS que ça se passe
- Sources => C’est toujours à une source que cela s’applique
- Set Source filter State => C’est un filtre de la source que tu veux activer ou désactiver
Tu cherches ensuite la scène dans laquelle se trouve la source (dans mon exemple la scène de caméra), la source concernée par exemple « Périphérique de capture vidéo » et le filtre que tu veux créer (moi je l’ai appelé « Dark Mode »).
Laisser un temps ces sources affichées
Une fois toutes tes sources du Dark Mode visibles, tu es content. Mais il va falloir les masquer à un moment donné non ? Personnellement j’ai décidé de le laisser 5 minutes à l’écran. Je pense que quelqu’un qui dépense 500 points de chaines mérite qu’on lui laisse le temps d’admirer. Pour lancer le décompte il te faut créer une nouvelle sub-actions comme suit
- Clic droit dans la zone sub action
- Core
- Delay
- Attention c’est en milisecondes donc si tu souhaites le faire durer 1 minute il te faudra renseigner une valeur de 60000
Masquer à nouveau les sources pour revenir à l’overlay de base
Là c’est juste hyper simple, tu vas copier coller toutes tes sub-actions que tu as créé pour rendre visible les sources puis tu vas venir modifier la « visibility « State » pour la placer sur la valeur « Hidden »
Dans l’image ci dessus tu vois mes sub-actions qui rendent visibles (en bleu) les sources puis qui les masquent (en rouge).
Créer le Trigger pour lancer l’action
Il ne nous reste à présent qu’une seule chose à faire, définir notre récompense de point de chaine comme Triggers de l’action dans streamerbot. On place sa souris à présent dans la zone Triggers puis :
- Clic droit
- Twitch => Cette fois ci c’est bien la récompense de point de chaine de Twitch qui est le déclencheur
- Channel Reward => Récupérer une récompense permettra de lancer l’action
- Reward Redemption => Il s’agit bien de la récompense récupérée la première fois qui déclenche l’action.
- Sélectionner la récompense en question (dans mon exemple la récompense s’apppelle « Dark Mode »)
Et maintenant ? Il ne nous reste plus qu’à voir le résultat 🙂
Rendez vous sur OBS, dans le chat Twitch ta nouvelle récompense de point de chaine devrait être disponible. Il te suffit de l’activer pour voir si oui ou non ton Dark Mode est bien lancé sur ton stream.
Et voilà le tour est joué ! J’espère que cet article t’a plu et qu’il te permettra d’améliorer grandement l’interaction de tes viewers avec ton stream. N’hésites pas à me dire en commentaire s’il y a d’autres articles qui te tenterait en mode tuto ou autres 😉
