アプリ

【OBS Studio】DiscordのオーバーレイにカスタムCSSを実装する【Among Us】

目次

1.はじめに

ども、こんにちは!最近「Among Us」というゲームに激ハマり中な彩葉です。
簡単に説明すると宇宙を舞台にした人狼ゲームと言ったところですが、皆さんはご存知でしょうか?

しかしAmong Usは最大15人でプレイ可能なため、声と名前が一致せず会議中に誰が話しているのか分かりづらいことがあります。
そこで今回は外部サイトを利用してDiscordのボイスチャットをOBSに表示し、
喋っている人が視覚的に分かるような変更方法をご紹介しようと思います。

2.完成イメージ

まず解説に入る前に完成形のイメージをご紹介いたします。動画下のユーザーアイコン部分が今回解説する部分になります。


Discordのアイコンと左下に名前を表示し、
喋っている人のアイコンを光らせながら、上下にぴょこぴょこっと動かすような設定にしております。
今回はこちらのアイコン部分と同じものを作成してみます。

6/19追記
15人用のカスタムCSSも作ってみました。
今後調整する可能性もございますが、もしよければ合わせてご利用ください。

※動画内で使用しているオーバーレイはLi1yPichu様のサイトよりダウンロードできます

3.Discord’s StreamKitと連携する

「Discord’s StreamKit」のページへアクセスする


Discord’s StreamKit
上記のボタンよりStreamKitへお進みください。

「Discordに接続」をクリック


少し下に移動すると表示されます。

「Install for OBS」をクリック

ボイスチャンネルを選択する


VOICE WIDGETを選択し、サーバーとボイスチャンネルを選択します。
※ボイスチャンネルを選択すると通話が開始されますので切り忘れにご注意ください!

選択オプション(任意)

Show Speaking Users Only ONにすると話しているときだけアバターを表示されます
Small Avatars ONにするとアイコンが小さくなります
Hide Names ONにするとユーザーネームが表示されなくなります

OBS側のカスタムCSSでも調整可能ですが、必要な場合こちらを選択します。

ブラウザソース(URL)をコピーする


右下のURLをコピーしてメモアプリなどに控えておきます。

エラー画面が表示される場合の対処方法


Discordを起動していないと画像のようにエラーが表示されて、「設定できない」というメッセージが表示されます。もし次に進めない場合、下記内容などもご確認ください。

・Discordへログインする
・Discordアプリの再インストール/アップデートを行う
・拡張機能などでコンテンツブロッカーを追加している場合OFFにする
・Braveブラウザを使用している場合Shieldsをオフにする

4.OBS側の設定

ここからはOBS側の設定に移ります。
OBSアプリをまだダウンロードされていない場合は下記より行ってください。

OBS Studioをダウンロード

OBSを開き、「ソース」の項目で「ブラウザ」を追加する

Discord StreamKitでコピーしたURLを貼り付ける


枠で囲まれた部分にDiscord StreamKitで取得したURLを貼り付けます。
これでdiscordの通話状況がOBS上に表示されるようになります。

【~10人まで】幅&高さ・カスタムCSSの調整をする

幅を「1500」px、高さを「200」pxに設定し、カスタムCSS部分に次のコードを貼り付けます。

※最大10人の通話を想定したCSSの為、11人以上になると見切れが発生します

【~15人まで】幅&高さ・カスタムCSSの調整をする

幅を「1700」px、高さを「200」pxに設定し、カスタムCSS部分に次のコードを貼り付けます。

自分のアイコンを表示したくない場合

自分のアイコンを表示したくない場合はこちらのCSSを追加します。
※「”」は消さないでください

発言中のユーザーに枠をつける

.speaking内に「filter: drop-shadow(0 0 5px rgba(0,255,0,1));」までを貼り付けます
※rgba(0,255,0,1)部分に好きなカラーコードが指定できます

ネームタグの上限を設定する

span.nameに「max-width~…nowrap;」までを貼り付けます
名前が長過ぎる場合、途中から「…」に置き換えます
※10人を想定したcssになります。max-widthの大きさはお好みの長さに各自変更してください

discordのIDの調べ方

1.ユーザー設定(歯車アイコン)をクリック

2.テーマ→詳細設定の「開発者モード」をオンにする

3.マイアカウントの「・・・」をクリックし、IDをコピーする

オーバーレイの位置を調整する


最後にdiscordのオーバーレイを任意の位置に移動すれば完了です!
赤枠部分の端をドラッグして任意の大きさに調整してみてください。

5.〆

いかがでしたでしょうか。
OBSは配信ツールですが、プレイ目的でOBSにオーバーレイを表示させて遊ぶのもアリかと思います。
それでは皆さん良い宇宙人狼ライフを!お疲れ様でした!ノシ