OBSの画面にディスコードのオーバレイを表示する方法(discord reactive)

配信での参加型やグループで配信している際に視聴者目線だと誰が話しているか等がわからない場合があります。
そこでディスコードのアイコン等を表示して発声中にアイコンが光ったり、跳ねたりする設定をすることで視聴者に視覚的に伝えることができます。
ここではdiscord reactive imageを使った設定方法をご紹介いたします。

Discord Reactive Image  https://reactive.fugi.tech/

discord reactiveでできること

・OBSにDiscordのアイコンを表示することができる。
・Discordで同じVC(ボイスチャット)にいる人もアイコンを表示できる。
・会話している人のDiscordのアイコンを光らせることができる。
・会話している人のDiscordのアイコンをバウンスことができる。

discord reactiveでできないこと

・他のVCにいる人は表示できません。
Discord Stream Kitを使うとボイスチャンネル毎にURLを取得可能なので複数のボイスチャンネルにいる人のアイコンを取得したい場合はDiscord Stream Kitがオススメです。

discord reactiveの設定方法

Discord Reactive https://reactive.fugi.tech/ にアクセス

Discord Reactive https://reactive.fugi.tech/ にアクセス
Login With Discord をクリック

ディスコードにログイン認証する

discord reactiveにディスコードアカウントでログインします。
認証ボタンをクリック

詳細な設定をする

ログイン後上記の様な画面が出てきますので、左上の設定項目から動作させたい様に設定を変更します。
設定項目の詳細についてはページ下部にまとめてありますのでそちらをご参照ください。

URLをコピー

OBSにアイコンを表示するにはGroupの右側にあるURLコピーボタンを押しクリップボードにコピーします。

OBS側の設定

OBSを起動しソースにブラウザを追加URLをペーストすればOBS上に表示されます。
以上で基本的な設定手順は完了です。

Vtuber等立ち絵等を個々に設定したい場合

右上のModelsから「+」マークを押すことで画像を追加することができます。
追加した後、「OBS Sources」の歯車マークを押すことでオーバーライド(適用)することができます。
Vtuber同士のコラボの際に相手に立ち絵などの素材があれば対応することがおすすめです。

discord reactive設定詳細

Include own image in group view グループビューに自分の画像を含める

Bounce Effect バウンス効果

Cross-fade effect クロスフェード効果

Dim own non-speaking image 自分が話していない時に画像をぼかす

Always(いつでも)
If matches speaking image
Never(設定なし)

Dim others' non-speaking image 他の人が話していない時に画像をぼかす

Always(いつでも)
If matches speaking image(まっちする場合)
Never(設定なし)

Show own mute/deaf icons 自分のマイク/スピーカーミュートアイコンを表示

Always(いつでも)
If matches speaking image(話している画像と一致する場合)
Never(設定なし)

Show others' mute/deaf icons 他の人のマイク/スピーカーミュートアイコンを表示 

Always(いつでも)
If matches speaking image
Never(設定なし)

Show names 名前の表示

Hidden(非表示)
Server Nickname(サーバーのニックネーム)
Global Nickname(グローバルニックネーム)
Global @username

Name size 名前のサイズ

32px デフォルト

Image alignment 画像の位置

Left(左寄せ)
Center(中央寄せ)
Right(右寄せ)
Justify(両端基準に均等)

Image Spacing 画像同士の間隔

0% デフォルト

まとめ

簡単、、、便利

おすすめの記事