OBS用のVtuber風Discord Overlayを作ってみた
喋っている時だけにょきって出てきます。
こりゃ便利。
追記:複数人がいるボイスチャットでも動作可能になりました。ただし、自分のIDを指定する必要があります。
どうもリリオです。
また死ぬほど久々の記事更新ですね。
色々ありましたが、やめてないよ。
今回はDiscord Overlayを利用してVtuber風のアニメーションを作ったので紹介します。
デモ
Discord OverlayをVtuber風に表示するテスト pic.twitter.com/mH3VbMLLQk
— リリオ@金欠 (@ririo08) 2021年7月20日
こんな感じで喋ってる時だけ動くようになっています。
長所
- 適当にブラウザでセットアップするだけなので楽
- FaceRigなどを使用しないので処理が軽い
- Discordという皆が使うメジャーなツールで利用できる
短所
- 画像の用意が少し難しいかも
- 口を動かしたりは出来ない!
注意事項
- 一人用です。
- 複数人用もいずれ開発したいです。
- 自分で画像を用意してください。(サイズは自由ですが300*300がオススメ)
- 自分の固有ID(17~18桁くらいの数字)が必要です。
使い方
OBSのソースにブラウザを追加する。
Discord StreamKit Overlayより、Voice Widgetを取得し、ブラウザに登録する。
- この際、自分用の一人で入るサーバー等を用意しておくと、誰にも邪魔されません。
下記のカスタムCSSを追加する
上は本来のDiscordのように喋っている間だけ出てくるもので、下はそれに加えて少しは跳ねるアニメーションを追加しています。
アニメーションに変えてみたんだけどどうだろうか pic.twitter.com/eVrEDFhwgZ
— リリオ@金欠 (@ririo08) 2021年7月23日
そして、カスタム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っぽくなれるので、自前のイラスト等がある方は是非試してみてください。
チャンネル登録よろしくね!