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

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

へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい OBS
スポンサーリンク
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
へたれ

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

へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
ラビ

Discord strem Kit Overlayを使うんだな

はじめに

多人数配信の問題点

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

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

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

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

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

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

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

へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
Discord Streamkit Overlay
Customize, promote, and show off your Discord community directly on your stream. Display your Discord chat alongside your Twitch chat so the memes can be shown ...
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
上のサイトにアクセスし「Install for OBS」
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
次に上のタブの「VOICE WIDGET」>表示させたいディスコの鯖>表示したいボイスチャンネル
の順でクリックする。
そうすると、(インストールされている前提の)ディスコードで、勝手にボイチャ状態になるはずだ。
試しにこの状態で話をして、水色枠内のあなたのキャラが通話状態になっていればOK
あとは緑枠のURLをコピーしておこう。これは後で使用する。
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
次はディスコード側の設定だ。
ソース>+アイコン>ブラウザの順でクリック
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
ソースを作成/選択では適当に名前を付けてOK
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
プロパティで、先程コピーしたーURLを貼り付けてOK
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
すると、配信画面上にボイチャの表示がされた。
やったね!

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

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

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

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

第二段階、ゴーッ!

筆者の配信だ。画面右下でゆっくり達が、会話に合わせてぴょんぴょん跳ねるぞ
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
Discordで喋ってる人を分かり易くするカスタムCSS - 萬巓堂本店
配信ツール上でDiscordのオーバーレイ(発話者アイコン)を立ち絵に変えるカスタムCSSです。

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

へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
まずはディスコードの左下にある歯車アイコンでユーザー設定を変更する。
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
次に詳細設定>開発者モードをONにしておく。

へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
次に、適当なサーバーに描いたゆっくり画像を投稿しよう。
そして右クリック>リンクをコピーだ。これで画像のURLがクリップボードにコピペされた
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
萬巓堂本店 さんのサイトに掲載されているコードをコピー。
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; }

へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
そして第1段階で作成したソースの「カスタムCSS」にコピペしよう
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
すると、あなたが作成した画像が、ボイチャに連動してぴょんぴょんと跳ねるぞ!

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

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

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

こんな感じ
かわいい!
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
ここにアニメーションgifを追加だ!

終わりに

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

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

へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
へたれ

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

へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
ラビ

ゆっくりしていってね!

スポンサーリンク
へたれちゃんのFPS上達・配信・マイニング・カメラ講座 | OBSでディスコードの会話している人を分かるようにしたい
へたれちゃんのFPS上達・配信・マイニング・カメラ講座

コメント

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