DiscordとOBSを連携させて、ゲーム配信中に喋ると動くイラストをつけよう

ゲーム攻略

今回はYoutubeの配信者向けの情報です

ゲーム実況や雑談配信をしていて”画面が何か寂しい””Vtuberさんたちのように動くイラストのような装飾をしたい”と思ったことはないでしょうか

私も何か簡単にそういう装飾をする方法はないだろうか~と長いこと考えていまして…

なとり
なとり

画期的な方法を見つけました!

DiscordとOBSを連携させることでマイクの反応を感知し、声に合わせて変化するイラストを表示できるようになります

雑談配信で使うとこんな風になります

なとり
なとり

テレビのバラエティー風ですね

やり方はとっても簡単で動かすためのイラストを2~3枚用意OBSにこの記事で紹介しているコードを挿入するだけで使用できます

なとり
なとり

今日はそのやり方を紹介したいと思います

今回の内容は下のリンクで紹介されている「喋るとイラストが光ってポップするやり方」を参考にし、ソースに手を加えて絵が動くようにしました

OBSでブラウザの追加

まず最初にOBSでソースの追加をしましょう

画面下のほうの+ボタンを押して、ブラウザを選択

ブラウザは簡単なプログラムの処理ができるものです

なとり
なとり

私も初めて使いました

名前を適当につけて作成(会話時に反応するものだとわかるような名前が良い)

するとこんな画面が出てきます

この①URL、②カスタムCSSの二つを用意することで配信画面に”声に合わせて動くイラストを表示する装飾”となります

なとり
なとり

それでは順番に取り掛かりましょう

挿入するコード

ここからは実際に使うコードの作成していきます

コード① URL

Discordと連携させるため下記サイトから専用アドレスを作成します

トップページから→「Install for OBS→Voice Widget」と進み、検知させたいDiscoordの通話チャンネルを指定します

上の設定例では「なとり雑用チャンネル」の「General」でのマイク通話の信号を検知します

なとり
なとり

この画像の場所で話しているときのマイク信号ですね

チャンネルの指定ができたら、右下のURLをコピーしてさきほどのブラウザのURLの項目に入力しましょう

なとり
なとり

これでコード①のURLの用意は完了です

これをブラウザのURLの項目に張り付けて次に進みましょう

コード② カスタムCSS

次はカスタムCSSの用意です

カスタムCSSはこちらのコードに(1)~(3)の項目を埋めていけばOKです

カスタムCSS

li.voice-state:not([data-reactid*="(1)ディスコードのキャラID"]) { display:none; }
.avatar {
content:url((2)画像A);
height:auto !important;
width:auto !important;
border-radius:0% !important;
filter: brightness(80%);
}

.speaking {
-moz-animation: speak 1s linear 0s infinite normal;
-webkit-animation: speak 1s linear 0s infinite normal;
-o-animation: speak 1s linear 0s infinite normal;
-ms-animation: speak 1s linear 0s infinite normal;
border-color:rgba(0,0,0,0) !important;
filter: brightness(100%);
}

@keyframes speak {
0% {content:url((2)画像A);}
100% {content:url((3)画像B);}
}

(1)~(3)を見つけやすいように赤線を引いた画像はコチラです

なとり
なとり

 キャラIDやら画像のurlやらいろいろ出てきましたね

それでは引き続きこの(1)~(3)を順番に埋めていきましょう

DiscordのキャラIDの取得

(1)DiscordのキャラID”Discordの会話の中で誰の発言に反応するか”の指定です。配信で使用するボイス通話チャンネルを開き、該当するメンバーを右クリックしIDのコピーをします

32854475XXXXXX1←こんな感じで長い数字がでてくるのでこれをコードの(1)の部分に挿入します

もしもIDのコピーが表示されない場合

右クリックをしてもIDのコピーの選択肢が現れない場合はDiscordの設定を変更し、開発者モードをONにしてください

これで右クリックをすればIDのコピーがでてくるはずです

画像A~CのURLリンク

次は(2)~(3)の画像Bのurlです

なとり
なとり

キャラクター画像をOBSが認識できるようにしましょう

今回のコードでは2枚の画像が変化するようになっていて、それぞれの役割はこんな感じです

画像A     常に画面に表示されているモノ

画像B   マイクが反応している間に表示される。AとBの二枚を0.5秒おきに切り替え続ける

冒頭の例

冒頭で紹介した動画で実際に使用した画像はこんな感じです

画像A・・静止しているティラノサウルス

画像B・・口を開けたティラノサウルス

マイクが反応している間は画像A、Bが0.5秒おきに切り替わることでティラノサウルスがカパカパと口をあけたような感じのアニメーションになります

なとり
なとり

シンプルだけどけっこうカワイイ

用意する画像について

「使用するのはどんな画像がよいか?」について少し触れておきます

最低限口が動かせるようにを目標に

目的は話している感じにすることなので、最低限口が動いていればよいと思います。余力があれば黒目の位置を動かしてみたり、画像そのものの位置をややズラしてみるとドタバタした感じになるでしょう

この例ではシンプルなイラストだったので10分ほどの時間で簡単に加工をし、口と目を動かしました

シンプルな画像で十分

「会話のアニメーションで使うのが二枚の画像だけじゃあクオリティが低いのでは?」と思う人もいるかもしれません

「もっと凝った画像でやりたい!」という方のために画像を増やすような方法も後程紹介しますが、配信のメインは後ろの画面なので基本はこれぐらいシンプルなほうが見やすいと思います

上の画像のように、ほとんどの配信はメインの映像が凝ったものになると思います。

会話イラストまで凝ったものだと後ろが見づらくなってしまうので手間、パフォーマンス両方の面からシンプルなイラストで初めて見るのが良いと思います

ということで簡単なものでかまわないので画像を用意してみましょう

なとり
なとり

簡単な画像だと口を動かすような書き換えも楽ちん

会話画像のurlの設定方法

なとり
なとり

 それでは用意した画像を登録していきましょう

OBSで画像を読み込むために、まずはDiscordのチャット欄に画像をドロップします

こんな風にチャットログに画像が表示されます

そうしたら該当の画像を右クリックしてリンクのコピーをします

これでできたURLがソースに貼る画像のURLになります

この手順で(2)画像AのURL,(3)画像BのURLをそれぞれを埋めていきましょう

なとり
なとり

 これでソースは完成です

完成例

出来上がったソースはだいたいこんな感じになっていると思います(*は伏字)

li.voice-state:not([data-reactid*="XXX631XXX"]) { display:none; }
.avatar {
content:url(https://cdn.discordapp.com/attachments/XXXXXXXXXXXXXXX/XXXXXXX/testA.png);
height:auto !important;
width:auto !important;
border-radius:0% !important;
filter: brightness(80%);
}

.speaking {
-moz-animation: speak 1s linear 0s infinite normal;
-webkit-animation: speak 1s linear 0s infinite normal;
-o-animation: speak 1s linear 0s infinite normal;
-ms-animation: speak 1s linear 0s infinite normal;
border-color:rgba(0,0,0,0) !important;
filter: brightness(100%);
}

@keyframes speak {
0% {content:url(https://cdn.discordapp.com/attachments/XXXXXXXXXXXXXXX/XXXXXXX/testA.png);}
100% {content:url(https://cdn.discordapp.com/attachments/XXXXXXXXXXXXXXX/XXXXXXX/testC.png);}
}

これをOBSのブラウザのカスタムCSS欄に入れれば完了です

名前を表示したくないとき

ちなみにこれを使っているとアイコンの下にこんな風に名前が出ます

この名前を消したい場合には最初に用意したURL の「hide_names=false」という箇所「hide_names=tlue」にすればOKです

文字がたくさん書いてあるんでこの画像から見つけるのたいなと思うんですけど、ご自身の URL をよく見てみてください

複数人の場合は人数分用意しよう

ちなみに上記のコードで動くイラストは1人分です。雑談配信などで複数人に対応したイラストを表示させる場合には人数分のブラウザを同じ手順で登録してください

やっていることはとてもシンプルな作業なので、二回目以降はさくさくと数分で出来上がると思われます

なとり
なとり

 画像を用意して設定すれば何人でも対応できるのがこのやり方の長所です

まとめ

これでディスコードの指定したボイスチャンネルに参加している間、喋ると動くイラストのエフェクトを用意することができました

雑談配信で使ってもいいですし、1人の配信で使って簡易Vtuber的な使用をするのもOKです

大事なコラボ配信で気合を入れてみたり

ゲームのテーマにあったキャラクターをアバターとして表示させてみたり

なとり
なとり

 用途はさまざま!

絵の設定に関しては割とこの設定がベストに近いかなと思うのですが、もっと設定に変化を付けたい人向けに「切り替わる画像の枚数や表示間隔を変更する方法」を次回で紹介したいと思います

DiscordとOBSを連携させてイラストを動かす~カスタム編~
今日は昨日紹介した「DiscordとOBSを連携させて喋ると動くイラストのエフェクトをつける」の設定カスタマイズ編です デフォルトではこんな感じで2枚のイラストを使ったアニメーションになっています 画像A 常時表示す...

*追記 需要があるみたいなので近いうち今回の内容を動画にしたいと思います

以上本日は「配信者向け!DiscordとOBSを連携させて話すと動くイラストのエフェクトをつけよう」の紹介でした

他にも配信者向けの情報やDiscordのマニアックな使い方を紹介しているのでそちらも見てみてください

関連記事

・switchやPS4の映像をPCに取り込む↓

・Discordを一括でミュート処理する

Among usプレイヤー必見!Discord ボイスチャンネルを一括してミュートする方法
宇宙船人狼Among usで遊んでいて問題になるのが Discord のミュート処理です 議論の発動に合わせてマイクをミュートにしたりオンにしたりするのですが、ゲームをしながらの操作なのでこれがちょっと手間になってしまいます ...

・Discord + 音楽BOT↓

コメント

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