ゲーム攻略

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

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

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

なとり
なとり
私も何か簡単にそういう装飾をする方法はないだろうか~と長いこと考えていまして
なとり
なとり
画期的な方法を見つけました!

DiscordとOBSを連携させることでマイクの反応を感知し、それに合わせて変化するイラストを表示させてマイクに合わせて動くアニメーションを追加する方法があったんですねぇ~

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

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

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

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

*今回のやり方はVtuberさん界隈で使われている技術を参考にしています

OBSでブラウザの追加

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

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

なとり
なとり
ブラウザは簡単なプログラミングやurlの処理ができるものです。私も初めて使いました

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

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

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

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

挿入するコード

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

コード① URL

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

https://streamkit.discordapp.com/overlay

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

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

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

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

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

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

コード② カスタムCSS

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

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

li.voice-state:not([data-reactid*=”①DiscordのキャラID]) { display:none; }
.avatar {
content:url(②画像Aのurl);
height:auto !important;
width:auto !important;
border-radius:0% !important;
filter: brightness(80%);
}

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

@keyframes speak {
0% {content:url(③画像Bのurl);}
100% {content:url(④画像Cのurl);}
}

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; }

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

こちらも難しいことはありませんので順番に埋めていきましょう

DiscordのキャラIDの取得

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

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

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

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

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

画像A~CのURLリンク

次は②~④の画像Bのurlです

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

今回のコードでは三枚の画像変化に対応していて、それぞれの役割はこんな感じです

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

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

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

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

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

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

なとり
なとり
シンプルだけどけっこうカワイくないでしょうか

用意する画像について

なとり
なとり
画像について少し触れておきます

画像は最低限口が動いていれば

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

この例ではシンプルなイラストだったので「そんなに動かなくてもいいかなぁ、」と思い、待機状態のイラスト画像Aと話している時の画像Bを同じ画像で流用しました

そしてこのぐらいのシンプルさで十分な気がする

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

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

上の画像のように、ほとんどの配信はこんな風にメインの映像が凝ったものになると思います。会話イラストまで凝ったものだと後ろが見づらくなってしまうので手間、パフォーマンス両方の面からシンプルなイラストで初めて見るのが良いと思います

ということで適当な画像が無い方は加工しての利用が可能ないらすとやさんのイラストをオススメします

会話画像のurlの設定方法

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

Discordで参照するためには使用する画像を一度Discordのチャット欄にドロップする必要があります

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

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

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

この手順で②画像AのURL③画像BのURL④画像CのURLそれぞれを埋めていきましょう

なとり
なとり
これでソースは完成です

完成例

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

li.voice-state:not([data-reactid*=”***588826****”]) { display:none; }

.avatar {

content:url(https://cdn.discordapp.com/attachments/******50***/******9071432***9/dinotestBf2.png);

height:auto !important;

width:auto !important;

border-radius:0% !important;

filter: brightness(80%);

}

.speaking {

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/******50***/******9071432***9/dinotestBf2.png);}

100% {content:url(https://cdn.discordapp.com/attachments/******50***/******9071432***9/dinotest2.png);}

}

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; }

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

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

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

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

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

まとめ

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

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

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

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

なとり
なとり
用途はさまざま!

絵の設定に関しては割とこの設定がベストに近いかなと思うのですが、一応切り替わる画像の枚数や表示間隔を変更することができますので次回はその辺りをご紹介したいと思います

DiscordとOBSを連携させてイラストを動かす~カスタム編~今日は昨日紹介した「DiscordとOBSを連携させて喋ると動くイラストのエフェクトをつける」の設定カスタマイズ編です https:/...

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

関連記事

・Discord + 音楽BOT↓

DiscordにrythemBOTを入れて音楽を楽しもう

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

HDMIキャプチャを買ってswitchやPS4の映像をパソコンで見よう