はじめに
ども、こんにちは！最近「Among Us」というゲームに激ハマり中な彩葉です。
簡単に説明すると宇宙を舞台にした人狼ゲームと言ったところですが、皆さんはご存知でしょうか？
しかしAmong Usは最大15人でプレイ可能なため、声と名前が一致せず会議中に誰が話しているのか分かりづらいことがあります。
そこで今回は外部サイトを利用してDiscordのボイスチャットをOBSに表示し、
喋っている人が視覚的に分かるような変更方法をご紹介しようと思います。
完成イメージ
まず解説に入る前に完成形のイメージをご紹介いたします。動画下のユーザーアイコン部分が今回解説する部分になります。
Discordのアイコンと左下に名前を表示し、
喋っている人のアイコンを光らせながら、上下にぴょこぴょこっと動かすような設定にしております。
今回はこちらのアイコン部分と同じものを作成してみます。
6/19追記
15人用のカスタムCSSも作ってみました。
今後調整する可能性もございますが、もしよければ合わせてご利用ください。
※動画内で使用しているオーバーレイはLi1yPichu様のサイトよりダウンロードできます
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アプリの再インストール/アップデートを行う
・拡張機能などでコンテンツブロッカーを追加している場合OFFにする
・Braveブラウザを使用している場合Shieldsをオフにする
OBS側の設定
ここからはOBS側の設定に移ります。
OBSアプリをまだダウンロードされていない場合は下記より行ってください。
OBSを開き、「ソース」の項目で「ブラウザ」を追加する
Discord StreamKitでコピーしたURLを貼り付ける
枠で囲まれた部分にDiscord StreamKitで取得したURLを貼り付けます。
これでdiscordの通話状況がOBS上に表示されるようになります。
【～10人まで】幅&高さ・カスタムCSSの調整をする
幅を「1500」px、高さを「200」pxに設定し、カスタムCSS部分に次のコードを貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/*画像サイズと明暗設定*/ .avatar { height:100px !important; width:100px !important; border-radius:0 !important; filter: brightness(50%); } /*トーク中の画像の状態設定*/ .speaking { border-color:rgba(0,0,0,0) !important; position:relative; animation-name: speak-now; animation-duration: 5000ms; animation-fill-mode:forwards; filter: brightness(100%) ; } /*トーク中のアニメーション設定*/ @keyframes speak-now { 0% { bottom:0px; } 5% { bottom:10px; } 10% { bottom:0px; } 15% { bottom:10px; } 20% { bottom:0px; } 25% { bottom:10px; } 30% { bottom:0px; } 35% { bottom:10px; } 40% { bottom:0px; } 45% { bottom:10px; } 50% { bottom:0px; } 55% { bottom:10px; } 60% { bottom:0px; } 65% { bottom:10px; } 70% { bottom:0px; } 75% { bottom:10px; } 80% { bottom:0px; } 85% { bottom:10px; } 90% { bottom:0px; } 95% { bottom:10px; } 100% { bottom:0px; } } /* 画像と名前の位置調整*/ li.voice-state{ position: static; display: inline-block; width: 130px; height: 100px; } .user{ display: inline-block; } span.name{ display: inline-block; position: relative; bottom: 46px; left: 0px; } |
※最大10人の通話を想定したCSSの為、11人以上になると見切れが発生します
【～15人まで】幅&高さ・カスタムCSSの調整をする
幅を「1700」px、高さを「200」pxに設定し、カスタムCSS部分に次のコードを貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/*画像サイズと明暗設定*/ .avatar { height:85px !important; width:85px !important; border-radius:0 !important; filter: brightness(50%); } /*トーク中の画像の状態設定*/ .speaking { border-color:rgba(0,0,0,0) !important; position:relative; animation-name: speak-now; animation-duration: 5000ms; animation-fill-mode:forwards; filter: brightness(100%) ; } /*トーク中のアニメーション設定*/ @keyframes speak-now { 0% { bottom:0px; } 5% { bottom:10px; } 10% { bottom:0px; } 15% { bottom:10px; } 20% { bottom:0px; } 25% { bottom:10px; } 30% { bottom:0px; } 35% { bottom:10px; } 40% { bottom:0px; } 45% { bottom:10px; } 50% { bottom:0px; } 55% { bottom:10px; } 60% { bottom:0px; } 65% { bottom:10px; } 70% { bottom:0px; } 75% { bottom:10px; } 80% { bottom:0px; } 85% { bottom:10px; } 90% { bottom:0px; } 95% { bottom:10px; } 100% { bottom:0px; } } /*画像と名前の位置調整*/ li.voice-state{ position: static; display: inline-block; width: 105px; height: 75px; } .user{ display: inline-block; } span.name{ display: inline-block; position: relative; font-size:50% !important; bottom: 24px; left: 2px; } |
自分のアイコンを表示したくない場合
|
1 2 3 4 |
/* 自身を非表示にする */ li.voice-state[data-reactid$="自分のdiscordID"] { display:none; } |
自分のアイコンを表示したくない場合はこちらのCSSを追加します。
※「”」は消さないでください
発言中のユーザーに枠をつける
|
1 2 3 4 |
/* Drop Shadow */ .speaking { filter: drop-shadow(0 0 5px rgba(0,255,0,1)); } |
※rgba(0,255,0,1)部分に好きなカラーコードが指定できます
ネームタグの上限を設定する
|
1 2 3 4 5 6 7 |
/* ネームタグの上限を設定 */ span.name{ max-width:90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
名前が長過ぎる場合、途中から「…」に置き換えます
※10人を想定したcssになります。max-widthの大きさはお好みの長さに各自変更してください
discordのIDの調べ方
1.ユーザー設定（歯車アイコン）をクリック
2.テーマ→詳細設定の「開発者モード」をオンにする
3.マイアカウントの「・・・」をクリックし、IDをコピーする
オーバーレイの位置を調整する
最後にdiscordのオーバーレイを任意の位置に移動すれば完了です！
赤枠部分の端をドラッグして任意の大きさに調整してみてください。
〆
いかがでしたでしょうか。
OBSは配信ツールですが、プレイ目的でOBSにオーバーレイを表示させて遊ぶのもアリかと思います。
それでは皆さん良い宇宙人狼ライフを！お疲れ様でした！ノシ
