【OBS】ゲーム配信・Discordの設定方法(誰がしゃべっているの？)

Toshi

YouTubeのゲーム実況をやっているチャンネルで、複数人しゃべっていることがありますが、配信画面にアイコンが出ており誰がしゃべっているかわかりやすくなっている。かと思います。今回は、OBSでゲーム配信する際のDiscordの設定方法についてお伝えしていきます。※アイコンを配信画面に出し、しゃべってるのをわかりやすくする方法まで解説

今回解説していく内容は以下です！

本記事の内容

・OBS ゲーム配信・Discordの設定方法(誰がしゃべっているの？)

OBS ゲーム配信・の設定方法(誰がしゃべっているの？)
まとめ

OBS ゲーム配信・の設定方法(誰がしゃべっているの？)

今回は、ゲーム実況で複数人でやるときに 誰がしゃべっているのか。わからなくならないように、画面にDiscordのアイコンを表示ししゃべっている時はわかりやすくカスタムするところまでをお伝えします。

そもそもDiscordって？

Discordは、Windows・macOS・Linux・Android・iOS・Webブラウザで動作する、ビデオ通話・音声通話・VoIPフリーウェアである。アメリカ合衆国で開発されており、2019年5月時点でユーザー数が2億5000万人に達している。

出典元：ウィキペディア

簡単に説明すると 無料で提供されている音声通話アプリ です。

ダウンロードせずWeb上で使うこともできるのですが、YouTubeなどでゲーム実況の画面にアイコンを表示させたい場合はアプリのダウンロードが必須です。

ここからは

Discordのダウンロード
Discord Streamkit との接続・設定
OBS側の設定
Discordでしゃべっている人をカスタム(CSS)

まで順を追って説明していきます！

Discordのダウンロード

Download Discord to Talk, Play, and Hang Out

Download Discord to talk, play, and hang out with friends over voice, video, or text. Available for Windows, macOS, Linu...

公式サイトより、自分が使っているパソコンに合わせて Discord をダウンロードします。

※私はMacを使っています

Discord.dmg を開き < Discord.app を Applications にドラック&ドロップ。

アプリを開くと Welcome back! というポップアップが出てくるので、アカウントを持っている場合は「EMAIL OR PHONE NUMBR」「PASSWORD」を入力しログインします。

※アカウントを持っていない場合は、「Need an account? Register」をクリック。

ログインできたら、Web上で使っていた時と同じ画面がでてきます。

はい、ここまでできたら次は Discord Streamkit に接続していきます。

Discord Streamkit との接続・設定

Discord Streamkit Overlay

Customize, promote, and show off your Discord community directly on your stream. Display your Discord chat alongside you...

Discord.app を起動した状態で、「Install for OBS」をクリックします。するとDiscord.appに以下のようなポップアップがでてきます。迷わず、承認をクリックしましょう。

次に、Discord Streamkit(Web)に戻って「VOICE WIDGET」をクリックし「Server」と「Voice Channel」を選択します。

Discord Streamkit Overlay

Customize, promote, and show off your Discord community directly on your stream. Display your Discord chat alongside you...

この時、Discordのアプリ側はどうなっているのかというと…

このような状態になっています。BLOGで紹介するため、BLOGというサーバーをサイドバーの + から追加し….

↓

Gamingをクリックし、通話中の状態にします。

「Server」と「Voice Channel」の設定さえできれば、配信画面にアイコンを表示することができるようになります。この状態で、リンクをコピーし….

OBSの設定にはいっていきます。

OBS側の設定

以前、YouTubeのライブ配信機能を使ったライブ配信のやり方とOBS Studioを使ったライブ配信のやり方を解説しました。OBSの設定ができていない方。設定がわからない方は以下の記事を先に見てみてください。

【OBS】YouTubeでライブ配信する方法

YouTubeでライブ配信を行いたい方向けに、YouTubeのライブ配信機能を使ったライブ配信のやり方とOBS Studioを使ったライブ配信のやり方を簡単に解説したいと思います。

さて、説明を続けていくのですがソースの追加でブラウザをクリックし追加ます。

次に…URLを変更し、OKをクリック。

これで、画面にアイコンを入れ込むことはできました！

あとは、配置や大きさを変更してあげればOKです。

Discordでしゃべっている人をカスタム(CSS)

最近、いつもAmongUsの配信を行なっているのですが、VC(Discord)を使った配信はやっていませんでした。これから、いろんな人と通話しながら、ゲームを楽しんでいこうということで、この記事を書きながら設定しています。

さて、「Discordでしゃべっている人をカスタム」ということなのですが CSS を何もしていない状態だと

しゃべっていない状態

しゃべっている状態

こういった感じになるのですが、カスタム CSS を書くことによって以下のような感じにも変更することができます。

しゃべっていない状態(アイコンが暗い)

しゃべっている状態(アイコンが明るく上下に揺れる)

ブラウザ < カスタム CSS 以下のコードを追加すれば同じように作ることが可能です。

/*＊＊＊＊＊カスタムCSS＊＊＊＊＊*/
/*アバターの大きさと明るさを決めるよ　あと線を消してるよ*/
.avatar {
height:200px !important;
width:200px !important;
border-radius:0 !important;
filter: brightness(70%);
}

/*しゃべったときの状態の設定してるよ*/
.speaking {
border-color:rgba(0,0,0,0) !important;
position:relative;
animation-name: speak-now;
animation-duration: 5000ms;
animation-fill-mode:forwards;
filter: brightness(100%) ;
}
/*しゃべってるときのアニメーションの設定だよ*/
@keyframes speak-now {
0% { bottom:0px; }
5% { bottom:10px; }
10% { bottom:0px; }
15% { bottom:10px; }
20% { bottom:0px; }
25% { bottom:10px; }
30% { bottom:0px; }
35% { bottom:10px; }
40% { bottom:0px; }
45% { bottom:10px; }
50% { bottom:0px; }
55% { bottom:10px; }
60% { bottom:0px; }
65% { bottom:10px; }
70% { bottom:0px; }
75% { bottom:10px; }
80% { bottom:0px; }
85% { bottom:10px; }
90% { bottom:0px; }
95% { bottom:10px; }
100% { bottom:0px; }
}

/* アバター及びネームタグ表示位置調整だよ*/
li.voice-state{
position: static;
display: inline-block;
width: 200px;
height: 200px;
}
.user{
display: inline-block;
}
span.name{
display: inline-block;
position: relative;
bottom: 70px;
}

/* 色々消すヤツ */
body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }

/*＊＊＊＊＊カスタムCSS終わり＊＊＊＊＊*/