Reactive is a Software for Streamers that allows the people you're streaming with to have little Avatars (PNG Tubers) That light up when they talk in a discord call.
It's very helpful for VTubers, PNGTubers and even Traditional Camera streamers to allow for a more interactive experience on their streams!
For Users who are NOT streaming, only steps 1-4 are applicable, steps 5-
A Couple Quick Notes on Reactive:
Reactive is for Discord only, it works with both private Discord Calls and private and public Server Channels.
You must have a Discord Account and allow the Reactive Site to Connect to your Discord account for Reactive to Work and be displayed on your Stream!
If you Drag Users from one Channel to Another manually as a Discord Moderator or Admin, users dragged from Channel to Channel will have to refresh the browser source (See Step 6) or disconnect and reconnect to the channel in order for the Reactive to Work Properly.
Now Lets Get Into It.
Setting Up Reactive As A User:
1) Navigate to https://reactive.fugi.tech/
This website serves as both the control page and setup page for your stream assets AND your own Fugitech PNGs
2) Sign in with Discord:
Authorizing Discord Access is Require or else it will not work.
3) On the Right Hand Side of the Control Panel there are two options.
These images are pretty self explanatory, the left hand image you upload and save will show as the image when you are not talking, the right hand image will be transitioned to when you are speaking.
It is recommended you use Images with the Background removed.
If you are using images with a background I recommend using a tool such as
To automatically remove background.
If that doesn't work for you there is a online image editor that allows for removing backgrounds called Pixlr.
I will create a walkthrough later on how to easily remove backgrounds using Pixlr/e and Link it Here.
To change one of the images click on the "No File Chosen" option, this should open up a file explorer, upload the images there.
This also supports PNGS with the backgrounds removed.
This is where the Streamer Portion of the Instructions Start, if you are not a streamer and are just someone appearing on someone else's stream, you can ignore after this point.
Setting Up Reactive as a Streamer
4) After you sign up with Discord you will arrive at the control page for Fugitech. In the Left Hand side you can see a set of Config Options. These will control how your Reactive Models appear and behave on your stream.
After you apply the settings it will automatically work on all Reactive Links on your Stream.
For PNGTubers who are using this themselves, you can include yourself in the Group view or not. If you are using a Camera or other Model yourself
You can also add or remove the models bouncing up and down as users are talking.
You can choose whether or not people are Dimmed when inactive.
In the next step I will show you how to set up inactive and active PNGs and go through that process.
The Cross Fade Effect makes the Dim and Lightening process more seemless to observe.
You can also choose the options to show name, and then size of the names so people can find those accounts easier, however this choose their DISCORD username as the name, so if their name is different from their stream name those names may not be helpful.
And of course, Image Spacing is to alter the distance between user PNGs in the Group
In step 5 I will go over the Links and how to set them up.
And Image Alignment is a standard alignment choice.
5) Just below the Config Panel there is a "Links Panel" this is where the group link as well as individual source links exist.
It should appear like this.
This should automatically populate with Users in Discord Calls (If it does not you may need to sign out and sign back into the Reactive Website)
6) To create these sources in Streamlabs/OBS you need to copy one of the Links in the Reactive Control Panel, you can use the Group channel if you want everyone in the call, or you can use individual users as well, for each individual a Browser Source needs to be created.
7) Click the New Source Button in your streaming Software.
Streamlabs:
OBS:
8) From the Add Sources Dialog Box you will select a "Browser Source."
Streamlabs:
OBS:
9) After adding the browser source, make sure to check Add new and name your new source.
Streamlabs:
OBS:
10) After Adding the New Source You will have a Dialog Box with several options.
In the URL option put the Reavtive URL for the Individual User or the Group.
All the other options can be left at default.
Streamlabs:
OBS:
After you Click OK you should be able to see the users populate within the source immediately in your Streamlabs or OBS.
You can resize the images as required using the normal OBS corner controls, you can hold ALT key to cut the edges while dragging edges and corners like any normal OBS source.
After this you should be and running completely.
Troubleshooting:
If users are not showing up in the Sources there are two main things you can do to resolve this.
First in your Sources in your OBS or Streamlabs you can Right Click on the source and click "Properties" and then click the option "Refresh Cache of Current Page"
If that doesn't work you can go back to the Fugitech Website and log out and log back in with discord, reauthorizing the discord link!
Thank you for Reading!
If this Helped you consider following my twitch:
Or joining my Twitch Community Discord for More Help!
Comments