hirolog123のwot備忘録

World of Tanksの備忘録

【Discord StreamKit Overlay】Streamlabs OBSの配信画面にDiscordのボイスチャットメンバーを表示(オーバーレイ)【Discord】

f:id:hirolog123:20190301135034p:plain

戦車長の皆さん!GoodGameしてますか!!

今回はStreamlabs OBSでボイスチャットDiscordのチャットメンバーを配信画面に表示(Overlay)する方法です!

 

基本的にOBSも同じやり方でできますので、OBSの方も参考にしてください^q^

 

【Discord StreamKit Overlay】Streamlabs OBSの配信画面にDiscordのボイスチャットメンバーを表示(オーバーレイ)【Discord】

 

Discord Streamkit Overlayでどんなことができるのか?

配信を見ている時に複数の人がいると誰が話しているのか視聴者はわかりませんよね。

そんな時に「Discord StreamKit Overlay」が役に立ちます!

f:id:hirolog123:20190301142310p:plain

Discordと同じ様に話している人のアイコンが強調されて表示されるので、Discordにどんなメンバーが居て、誰が話しているか一目瞭然です!

f:id:hirolog123:20190301135112p:plain

 

 

はじめに

Streamlabs OBS か OBS、あるいは XSplitがインストールされていることが条件です。

今回はStreamlabs OBSの設定方法をベースにご紹介します^q^

本サイトはDiscordのボイスチャンネルのメンバーを表示するため、予めDiscordのボイスチャンネルを作成する必要があります。

ですので「VOICE CHANNELS」の右にある「+」を押して、表示させるVOICE CHANNELを作成しましょう。

今回はDiscordの「hirolog123サーバー」の「ロビー」を配信画面に表示させます。

f:id:hirolog123:20190301140014p:plain

 

 

Discordの設定

設定「歯車ボタン」をクリック

f:id:hirolog123:20190301141458p:plain

 

 

「オーバーレイ」を選択し、ゲーム中のオーバーレイを有効化をチェック。

この時にショートカットキーをゲーム内で使用するキーと重複させると、ゲーム内で不具合が発生することがあるのでご注意ください。

私は事故防止のため「SHIFT + ’」にしています。

f:id:hirolog123:20190301141548p:plain

 

 

Discord Streamkit Overlay で表示したいDiscordのサーバーを設定

Discord Streamkit Overlayはサイトを経由して行います。

はじめにDiscord Streamkit Overlayのサイトにいきます。

streamkit.discordapp.com

 

 

「Install for OBS」をクリックf:id:hirolog123:20190301134549p:plain

 

このあと、Discordにアクセスしても良いか聞いてきますので許可してください^q^

 

今回はボイスチャットのメンバーを表示したいので「VOICE WIDGET」をクリック。

※Discordのチャット(CHAT WIDGET)やステータス(STATUS WIDGET)も表示できますので、同じ要領でやっちゃってください^q^

f:id:hirolog123:20190301135431p:plain

 

 

サーバーを選択します。

Serverの「▼」をクリックすると貴方のDiscordに登録されているサーバー一覧が表示されますので、表示したサーバーを選択してください。

今回は「hirolog123サーバー」を選択します。

f:id:hirolog123:20190301140801p:plain

 

 

次に表示させたい「Voice Channel」を選択します。

「▼」をクリックして、表示させたいチャンネルを選んでください。

今回は「ロビー」を選択します。

f:id:hirolog123:20190301140857p:plain

 

 

表示内容の設定

 

表示設定

話している人だけを表示させる時は「Show Speaking Users Only」にチェック

写真(アイコン)を小さくする時は「Small Avatars」にチェック

名前を非表示させる時は「Hide Names」にチェック

f:id:hirolog123:20190301142836p:plain

 

 

テキスト設定を変える

文字の色を変える時は「Text Color」

文字のサイズを変える時は「Text Size」

文字のアウトラインの色を変える時は「Text Outline Color」

文字のアウトラインのサイズを変える時は「Text Outline Size」

文字の影の色を変える時は「Shadow Color」

文字の影のサイズを変更する時は「Shadow Size」

f:id:hirolog123:20190301143837p:plain

 

 

バックグラウンドの設定

バックグラウンド(文字の下地)の色を変えるには「Background Color」

バックグラウンドの透明度を変えるには「Opacity」

バックグラウンドの影の色を変えるには「Shadow Color」

バックグラウンドの影のサイズを変えるには「Shaodow Size」

f:id:hirolog123:20190301145042p:plain



 

配信ソフトの設定

Streamlabs OBSの設定を行っていきます。

ソースを追加します。

「+」をクリック

f:id:hirolog123:20190301145438p:plain

 

 

「ブラウザーのソース」を選択して「ソースを追加します。」をクリック

f:id:hirolog123:20190301145836p:plain



ソースの名前を入力して下さい、に名前を入力します。

ここではわかりやすいように「Discord」としています。

名前を付けてから「新しいソースを追加します。」をクリック

f:id:hirolog123:20190301145651p:plain

 

 

URLにDiscord StreamKit Overlayのブラウザーソースを入力してください。

ブラウザーソースをコピーして

f:id:hirolog123:20190301150218p:plain

 

URLに張り付けて「完成」をクリック

f:id:hirolog123:20190301150417p:plain

 

 

あとは表示させる場所とサイズを適当に調整して表示してくださいな^q^

f:id:hirolog123:20190301150743p:plain

 

 

【トラブル】上手く表示できない、表示が消えてしまう場合

このDiscord Streamkit Overlayはなぜか設定を変えていないのに表示しなくなったりします・。・

その時はStreamlabs OBS側の設定を少し変えると再表示されます。

例えば、Discord Streamkit OverlayのURLを入れなおしてみたり、表示エリアのサイズを変更するなどで改善するのでやってみてね^q^

 

 

まとめ

いかがでしたでしょうか。

これで配信にたくさんの人が遊びに来てくれても視聴者さんも迷わなくてすみますね^q^

思いの他、見ている人は誰が話しているかわからないので導入の検討をお勧めします(笑)