[OBS]e-sports大会のシーンの作り方

2024年4月30日 16:16

この記事ではe-sports大会の配信におけるシーン作成をざっくり説明していきます。

~~結構やっつけ仕事な記事です。~~

今回はVALORANTを例に作成していきますが、スト6やOW2など他のゲームだとしてもやることは殆ど変わりません。よろしくお願いします。

大前提

OBSを起動したらまずはスタジオモードにしましょう。
右下の「コントロール」から「スタジオモード」を押すとこのように画面が2つ出てきます。
右の画面(プレビューシーン)実際に映るシーンが表示され、左の画面(プログラムシーン)には編集中のシーンが表示されます。

例えば、プログラムシーンでキャスターが喋っている映像を流しながら、プレビューシーンでは試合の画面を編集することができます。
絶対にスタジオモードにしましょう。

また、配信に乗る音声をシーンで管理するため、設定からグローバル音声デバイスの項目をすべて無効にしておきます。

必要なシーンの種類を考える

e-sports配信に必要な画面を整理していきましょう。
私がTDU VALORANT FESで使用したシーンは以下の通りです。

待機画面：キャスターの挨拶(オープニング)が始まる前や試合のインターバルに使用します。
キャスター画面：試合前や試合後などにキャスターがトークする時に使用します。
トーナメント表画面：その名の通りです。大会が進行するたびに更新する必要があるので、インターバル中に忘れずに修正しましょう。
チーム紹介画面：チーム名やプレイヤーを表示する画面です。チームの数だけシーンを用意します。
マップピック画面：試合を行うマップを紹介する画面です。BO3などの1ゲームで勝敗が決まらない形式の時に使用します。
キャラピック画面：VALORANTの場合、試合画面と別でキャラピック画面を用意することが多いです。無くても問題ありません。
試合画面：最も大事な画面です。ゲーム画面を損なうことなくチーム名(もしくはプレイヤー名)を表示します。

シーンの作り方

私のシーンの作り方を解説していきます。
上でまとめたシーンすべてをまとめるのは大変なので、待機画面、キャスター画面、試合画面を解説します。

待機画面

このような待機画面を作成していきます。
シーン欄左下の＋ボタンから待機画面シーンを追加します。

シーンの構成要素を分解すると以下のようになります。

タイマー(テキスト)
対戦表の文字(テキスト)
対戦表の点数(テキスト)
BGMの曲名と作曲者(テキスト)
対戦表の枠線とマッチ番号(画像)
スライドショー(画像)
背景(メディアソース)
BGM(アプリケーション音声キャプチャ)

背景を静止画にする場合は、「対戦表の枠線とマッチ番号」と同じ画像にまとめてしまいましょう。
この記事では背景は動画にします。

それでは、シーンを作っていきましょう。
奥に配置するものから作っていきます。

背景を作成します。
ソースからメディアソースを作成し、背景動画を設定します。
ループにチェックを入れるのを忘れずに！

対戦表の枠線とマッチ番号を作成します。
ソースから画像を選択し、ファイルを選択します。
私は以下のような画像を作成しました。
皆さんは忘れずに透過pngで出力しましょう(n敗)。

スライドショーを作っていきます。
あらかじめスライドショーに使用する画像は1つのフォルダにまとめておきましょう。
ソースから画像スライドショーを選択し、スライドショーのフォルダを選択します。
スライド時間間隔はミリ秒単位なので、画像を表示する時間を10秒にしたい場合は10000msにしましょう。

対戦表の文字と対戦表の点数を作成します。
これらは大会が進行する度に更新していくことになるので、全体のバランスに気を付けながら、どのフォントをどのサイズで使うのかを決めておきましょう。
ソースからテキスト(GDI+)を選択し、フォントやサイズを決めたら点数を入力していきます。

タイマーを作成します。
ソースからテキスト(GDI+)を選択し、フォントやサイズを決めます。ここではソースの名前を「カウントダウン」にします。
次に、アプリ上部のメニューバーから「ツール(T)」「スクリプト」を選択します。

左下の+を押下し、countdown.luaを開いた後、右の項目を設定していきます。
Duration(minutes)で何分のカウントダウンにするかを決めます。ここでは10(分)としています。
Text Sourceではどのテキストソースにスクリプトを適用するかを決めます。ここでは「カウントダウン」を選択します。
Final Textはカウントが0になったときに表示される文字を表します。ここでは「00:00」にしています。

これでカウントダウンの完成です。

BGMを設定します。
待機画面では複数の音楽を流したいので、アプリケーション音声キャプチャを使用します。
PCに保存された1曲のみを使う場合の方法は、キャスター画面の項目で説明します。

BGMの名前と作曲者を表示します。
PCに保存された1曲のみを使う場合は読み飛ばしてください。

複数の曲を流す場合は、曲が切り替わるたびにテキストを編集するわけにもいかないので、Snipというプラグインを使用します。
SnipはiTunesとSpotifyで使用可能です。使っていない場合は読み飛ばしましょう。
Snipのzipファイルを解凍し、Snip.exeを起動すると、タスクトレーに引っ込みます。タスクトレーを開き、アイコンを右クリックします。

使用したいアプリケーションを選んだら、Set Output Formatで曲の情報をどのように表示したいかを設定します。
今回は 曲名 / アーティスト名 のようにしたいので、以下のように設定します。

iTunesだとSet Album Formatは無視されるっぽい？
Spotifyの場合はSet Album Formatを空欄にします

適当な音楽を再生した後、Snipをダウンロードした場所に戻り、Snip.txtをソース欄にドラッグアンドドロップします。
すると現在再生している音楽の情報がテキストとして表示されます。
あとは位置やフォントを調整します。

画像のように帯を付けたりスクロールさせることもできます。

キャスター画面

以下のような画面を作成していきます。
シーン欄左下の＋ボタンからキャスター画面シーンを追加します。

シーンの構成要素を分解すると以下のようになります。

キャスター名(テキスト)
背景(画像)
BGM(メディアソース)
Discord音声(アプリケーション音声キャプチャ)

キャスター画面などのBGMが音声の主役ではないシーンでは、使用するBGMを1つにしています。
そのため、BGMはアプリケーション音声キャプチャではなくメディアソースを使用しています。
勿論、待機画面で使用したアプリケーション音声キャプチャを使いまわしてもOKです。

それではシーンを作っていきます。

背景を設定します。
ソースから画像を選択し、用意した画像を選ぶだけです。

キャスター名を作成します。
ソースからテキスト(GDI+)を選択し、フォントやサイズを決めたら名前を入力しましょう。

BGMを作成します。
ソースからメディアソースを選択し、用意した音声ファイルを選択します。
ループにチェックを入れるのを忘れずに！

キャスターの声がなければ、大会は立ち行かなくなります。
Discord音声を取り込みましょう。

Discordを起動してから、ソースのアプリケーション音声キャプチャを選択します。ソースの名前は「Discord」とします。
Discordのウィンドウを選択し、一致優先順位はタイトルに一致、そうでなければ同じ種類のウィンドウを見つけるまたはタイトルに一致、そうでなければ同じ実行可能ファイルのウィンドウを見つけるにします。

余談ですが、Discordで誰かがしゃべると光ったりするやつはDiscord Streamkit Overlayでできます。
ネット上で散々紹介されているのでこちらでは取り上げません。

試合画面

以下のような画面を作成していきます。
シーン欄左下の＋ボタンから試合画面シーンを追加します。

シーンの構成要素を分解すると以下のようになります。

チーム名1(テキスト)
チーム名2(テキスト)
スコア(テキスト)
大会フレーム(画像)
ゲーム画面(ゲームキャプチャ)
Discord音声(アプリケーション音声キャプチャ)

それではシーンを作っていきます。

まずはゲーム画面を取り込みましょう。
取り込みたいゲームを起動してから、ソースのゲームキャプチャを選択します。

モードは特定のウィンドウをキャプチャを選択します。
ウィンドウでは、取り込みたいゲームを選択します。
ウィンドウの一致優先順位ではタイトルに一致、そうでなければ同じ種類のウィンドウを見つけるにします。もしくは、タイトルに一致、そうでなければ同じ実行可能ファイルのウィンドウを見つけるにします。
マウスカーソルを映したくない人は「カーソルをキャプチャする」をオフにします。

音声をキャプチャ(ベータ版)にチェックを入れましょう。
これを忘れるとゲーム音声が配信に取り込まれません。