スポンサーリンク
OBS 配信・vtuber・動画編集

OBSでディスコードの会話している人を分かるようにしたい

OBS
スポンサーリンク
へたれ
へたれ

ディスコで誰が話しているかわかんないよ~ォ

ラビ
ラビ

Discord strem Kit Overlayを使うんだな

はじめに

多人数配信の問題点

筆者はFPS廃人であるが、同じく廃人たち数人と夜な夜なAPEXをプレイする日々である。
固定メンツらも配信をはじめ、コラボ配信もいいよねって流れになってきた。

ただ、現状では誰が話をしているかわけがわからず、困っている。なんとかOBSの配信に、誰が話しているかを表示させたいのだが・・・。

そこで使うのが「 discord streamkit overlay」だ!

第一段階:誰が会話しているか明確に

筆者の配信。左上にディスコードのボイチャ部屋と同じ表示がされているのが分かる。
これならば、誰が話しているか明確だぞ!

上の動画のように、左上にディスコのボイチャルームと同じ表示ができるのがこのツールの特徴だ。色々と発展型もあるのだが、それは下の方で更に紹介するぞ。

とりあえず、上の動画の状態に持っていくのが第一段階なので、設定していこう。

Discord StreamKit Overlay
上のサイトにアクセスし「Install for OBS」
次に上のタブの「VOICE WIDGET」>表示させたいディスコの鯖>表示したいボイスチャンネル
の順でクリックする。
そうすると、(インストールされている前提の)ディスコードで、勝手にボイチャ状態になるはずだ。
試しにこの状態で話をして、水色枠内のあなたのキャラが通話状態になっていればOK
あとは緑枠のURLをコピーしておこう。これは後で使用する。
次はディスコード側の設定だ。
ソース>+アイコン>ブラウザの順でクリック
ソースを作成/選択では適当に名前を付けてOK
プロパティで、先程コピーしたーURLを貼り付けてOK
すると、配信画面上にボイチャの表示がされた。
やったね!

第二段階:お好みの画像を跳ね回らせる

第一段階まで設定すれば「誰が話しているか」は明確になるので、実用上はこれで十分ということになる。

ただ、コラボ配信などでは相手のVTUBERの画像などを動かしたり、点滅させたりした方が、より好感度が上がるだろう。

筆者の場合、よく一緒に遊ぶ友人らのキャラクターをゆっくり化し、右下に配置している。これらのキャラが、ボイチャと同時にぴょんぴょんと跳ねるのだ。見ていて楽しい。

第二段階、ゴーッ!

筆者の配信だ。画面右下でゆっくり達が、会話に合わせてぴょんぴょん跳ねるぞ
Discordで喋ってる人を分かり易くするカスタムCSS | 萬巓堂本店
配信ツール上でDiscordのオーバーレイ(発話者アイコン)を立ち絵に変えるカスタムCSSです。

やり方は上のサイトを参考にさせてもらったぞ。

まずはディスコードの左下にある歯車アイコンでユーザー設定を変更する。
次に詳細設定>開発者モードをONにしておく。

次に、適当なサーバーに描いたゆっくり画像を投稿しよう。
そして右クリック>リンクをコピーだ。これで画像のURLがクリップボードにコピペされた
萬巓堂本店 さんのサイトに掲載されているコードをコピー。
IDの所にディスコの個人ID
画像URLのところにディスコに貼り付けた画像のURLを入力する

li.voice-state:not([data-reactid*=”ID”]) { display:none; }
.avatar {
content:url(画像URL);
height:auto !important;
width:auto !important;
border-radius:0% !important;
}

.speaking {
border-color:rgba(0,0,0,0) !important;
position:relative;
animation-name: speak-now;
animation-duration: 1s;
animation-fill-mode:forwards;
}

@keyframes speak-now {
0% { bottom:0px; }
15% { bottom:10px; }
30% { bottom:0px; }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

そして第1段階で作成したソースの「カスタムCSS」にコピペしよう
すると、あなたが作成した画像が、ボイチャに連動してぴょんぴょんと跳ねるぞ!

更に会話中のキャラクターを動かそう

上の方法だと、会話していないとき、会話しているときのキャラ絵に違いはない。

が、.speaking {の部分に別の画像URLを入れると、話している時のみ画像を差し替えることができる。これを利用して、「話しているときはゆっくりの口が開閉する」というアニメーションgifに置き換えることで、更に可愛らしく、わかりやすく動くぞ!

こんな感じ
かわいい!
ここにアニメーションgifを追加だ!

終わりに

さて、今回はディスコードで誰が話しているかをわかりやすくする手法を紹介した。

今回の内容は実は結構手間で、
・対象者分のキャラ絵を用意する
・対象者分のソースを用意する
といった面倒さもある。ただコラボ配信するときはこの手法を使うと、絵的にも面白くなるし、誰が話しているかわかりやすいしで、とてもおすすめの方法だ。

へたれ
へたれ

ゆっくりが跳ね回るのはかわいいね!

ラビ
ラビ

ゆっくりしていってね!

スポンサーリンク
へたれちゃんのFPS上達・配信・マイニング・カメラ講座

コメント

タイトルとURLをコピーしました