ももんの日常

アニメとマンガとプログラミングと

【Discord StreamKit】OBS上にDiscordのアイコンを表示させて動かす【機能解説】

こんにちは。ももんです。

今回はDiscordとOBSでアイコンを表示させ、動くようにする方法、使い方を

メモ程度に書いていきたいと思います!

機能の解説もしていきます!

 

AmongUsで最近よく見る

最近、AmongUsの実況をよく見ているのですが、

画面でアイコンがぴょんぴょん動いている。。。

これどうやってやってるんだろ。。。と思ったので調べてみました!

 

https://youtu.be/B03hw3n1ps8

参考:先端恐怖症さん

 

Discord StreamKit Overlay

こちらのサイトを利用します!

以下URL先に飛びます。

 

streamkit.discord.com

 

今回はOBSを利用するので、「nstall for OBS」を選択します。

f:id:toho_moko_keine_114:20210510175411p:plain

その後、上のタブにある「VOICE WIDGET」を選択します。

f:id:toho_moko_keine_114:20210510175730p:plain

 

Server : Discordのサーバーを選択

Voice Channel:ボイスチャンネルを選択

↑ここで設定した場所でのみ、この機能が使えます!

 

Show Speaking Users Only:喋っている人だけアイコン表示する

Small Avators:アイコン表示を小さくする

Hide Names:名前を隠す

 

TETX SETTINGS→名前の文字サイズ、色変更ができる

Text Color:名前の色変更

Text Size:名前の大きさ変更

Text Outline Color:名前の縁取り色

Text Outline Size:名前の縁取りの大きさ

Shadow Color:名前の影の色

Shadow Size:影の範囲(強さ)

 

BACKGROUND SETTINGS→名前の背景にある四角の色変更、消去ができる

Background Color:背景にある四角の色

Opacity:透明度

Shadow Color:影の色

Shadow Size:影の範囲(強さ)

 

今回は、「Hide Names」をONにして進めていきます!

設定が終わったら、赤枠内のURLをコピーして、Discord StreamKitでの設定は終わりです!

f:id:toho_moko_keine_114:20210510181026p:plain

 

OBS

次にOBSの設定です!

OBSを開き、左下にある「シーン」の「+」をクリックして、

新しくシーンを作成します。

※ここでは「hatena」という名前にしてます。名前は自由に決めてください。

 

その後、「シーン」の右にある「ソース」の「+」をクリックします。

いくつか項目出てきた中の、「ブラウザ」をクリックします。

 

f:id:toho_moko_keine_114:20210510181646p:plain

 

「新規作成」を選択し、名前を適当につけ、「OK]をクリックします。

 

f:id:toho_moko_keine_114:20210510181934p:plain

 

すると「プロパティ」画面が出てくるので、

「URL」という項目に先ほどコピーしたものを貼り付けます。

 

f:id:toho_moko_keine_114:20210510182026p:plain

 

その後、「OK」ボタンをクリックします。

これで設定が完了です。

 

Discord

最後に、Discordでの設定をします。

 

Discordを開き、自分のアイコンの横にある

歯車マークの「ユーザー設定」をクリックします。

 

f:id:toho_moko_keine_114:20210510182729p:plain

 

左側の「詳細設定」をクリックし、「開発者モード」をオンにします。

 

f:id:toho_moko_keine_114:20210510182844p:plain

 

Discordの設定はこれで完了です!

 

実際に使ってみる

さて、最後に動作確認してみましょう!

 

f:id:toho_moko_keine_114:20210510183358p:plain

 

はい!右側の赤枠がDiscordの画面、

左側の赤枠がOBSの画面になります!

 

Discordのチャンネル内にいる人物のアイコンが

OBS上にしっかりと表示されています!

 

これで、OBS上にアイコンを表示することができました!

次回はアイコンを四角にしたり、ジャンプさせたりしてみます!

 

最後までお付き合いいただきありがとうございました!

ではまた!

 

ちなみにももんは以下のマイクとキャプチャーボードを利用しています!