リリオの日記型倉庫3

ゲームが好きな人のためのブログ

OBS用のVtuber風Discord Overlayを作ってみた

f:id:ririo08:20210721012658p:plain

喋っている時だけにょきって出てきます。

こりゃ便利。

 

追記:複数人がいるボイスチャットでも動作可能になりました。ただし、自分のIDを指定する必要があります。

 

どうもリリオです。

また死ぬほど久々の記事更新ですね。

色々ありましたが、やめてないよ。

 

今回はDiscord Overlayを利用してVtuber風のアニメーションを作ったので紹介します。

 

デモ

 

こんな感じで喋ってる時だけ動くようになっています。

 

長所
  • 適当にブラウザでセットアップするだけなので楽
  • FaceRigなどを使用しないので処理が軽い
  • Discordという皆が使うメジャーなツールで利用できる
短所
  • 画像の用意が少し難しいかも
  • 口を動かしたりは出来ない!

 

注意事項

  • 一人用です。
  • 複数人用もいずれ開発したいです。
  • 自分で画像を用意してください。(サイズは自由ですが300*300がオススメ)
  • 自分の固有ID(17~18桁くらいの数字)が必要です。

 

 

使い方

OBSのソースにブラウザを追加する。

Discord StreamKit Overlayより、Voice Widgetを取得し、ブラウザに登録する。

  • この際、自分用の一人で入るサーバー等を用意しておくと、誰にも邪魔されません。

下記のカスタムCSSを追加する

 

 

上は本来のDiscordのように喋っている間だけ出てくるもので、下はそれに加えて少しは跳ねるアニメーションを追加しています。

 

そして、カスタムCSS内にあるコメントアウトされた部分をよく読み、それに従い値を変更しましょう。

自分の固有IDの特定の仕方ですが、それにはDiscordの開発者モードをONにする必要があります。歯車マークの設定→詳細設定より、開発者モードをONにしましょう。

その後、自分のアイコンを右クリック→IDをコピーより、取得することが可能です。

 

ここで画像の指定方法なんですが、基本的にはWeb上に存在する画像ファイルを指定することをオススメします。

(多分ローカルファイルも指定できると思うんだけどやり方わかんね)

オススメするサイトはImgur: The magic of the Internetです。

 

Twitterのアカウントなどで簡単に作れるので楽です。

そしてアップロードしたPNG画像が無劣化で取得できるのと、URLの取得がとても楽だからですね。

 

アップロードした画像を右クリック→画像のアドレスをコピー

これだけでURLが取得できます。

https://i.imgur.com/5Ni7CMa.png

こんな感じで、i.imgur.comのURLが取得できるので、これをOBSに貼れば完璧ですね。

 

あとは好きなように配置して完成!

 

上に飛び上がるモーションの高さなど単純なCSSで指定しているだけなので、好きにカスタマイズしてみてください。

すごい簡単にVtuberっぽくなれるので、自前のイラスト等がある方は是非試してみてください。

 

www.youtube.com

 

チャンネル登録よろしくね!