May 17, 2022 06:00:00

How to use 'OBS Discord Icon Appearance Change Generator' that makes it super easy to understand who is talking on the distribution screen with the Discord icon

In live play of online games, multiple people may talk using voice chat such as Discord, but it is difficult for viewers of the live broadcast and video to understand 'who is talking now?' Is often. Therefore, Mr.

Alf has released ' OBS Discord Icon Appearance Change Generator ' that allows you to customize the movement and shape of the Discord icon after displaying it on the screen.

OBS Discord Icon Appearance Change Generator
https://obs-discord-icon.alfebelow.com/

GitHub --alfe / obs-discord-icons-css-generator: A generator that creates custom CSS for side-by-side or square icons when displaying members who are talking on Discord in OBS Studio.
https://github.com/alfe/obs-discord-icons-css-generator

First of all, since it is necessary to display the Discord icon in OBS Studio, access the following 'Discord StreamKit Overlay' from the browser with Discord running.

Discord StreamKit Overlay
https://streamkit.discord.com/overlay

Discord StreamKit Overlay supports OBS Studio and XSplit. This time it will be used in OBS Studio, so click 'Install for OBS'.

Then, Discord will confirm the access request from 'StreamKit Overlay', so click 'Authentication'.

Click the 'VOICE WIDGET' tab from the Discord StreamKit Overlay, and select the voice channel you want to reflect on the 'Voice Channel' for the Discord server used in 'Server'. There are various settings, but you only have to worry about three things: 'Show Spieking Users Only', 'Small Avatars', and 'Hide Names'. OK. After completing the settings, copy the URL displayed at the bottom of the preview screen on the right.

Next, in OBS Studio, right-click in the source field, select 'Add', and click 'Browser'.

Click 'OK'.

Paste the URL you copied with Discord StreamKit Overlay into the URL field in your browser properties and click OK.

Then, a layer that displays the Discord icon will be added like this. When you speak, the icon glows green, making it easier to visually tell who is speaking.

To see what happens when you record with OBS Studio while actually talking with the Discord icon displayed, you can often see the following movie recorded gameplay using

Yamaha ZG01 and Discord StreamKit Overlay, a high-performance audio mixer for gamers. understand. The Discord icon is displayed in the upper right corner of the game screen, and when you speak, that person's icon lights up.

I tried playing a game while voicing on Discord using Yamaha ZG01-YouTube


OBS's Discord Icon Appearance Change Generator is a site where you can further customize the icon display using this Discord StreamKit Overlay.

Access the OBS Discord Icon Appearance Change Generator .

With Discord StreamKit Overlay, you can adjust the arrangement of icons, the shape of the icons, the movement when speaking, the speed of movement, the size of the icons, the display of names, the appearance of names, and the position of names. A preview is displayed on the right side of the setting operation panel.

When the setting is completed, the CSS code will be displayed at the bottom of the setting operation panel. Click the clipboard icon on the right to automatically copy the CSS code.

In the 'Browser' properties in the OBS source, copy the CSS code into the 'Custom CSS' field and click 'OK'.

Then, the icon will be displayed as set by the Discord icon appearance change generator of OBS. With the addition of movement, it's easier to see who's talking now, so OBS's Discord Icon Appearance Change Generator is pretty useful if you're playing live games or recording videos while chatting with multiple people.