オーバーレイで生配信番組をレベルアップ！OVALDIのご紹介
この記事は OVALDI というオーバーレイ制御ソフトの紹介記事となります。
OVALDIは、生配信を実施する時に、ゲームやカメラの画像の上に別の画像や文字を表示・制御できるソフトとなります。
このソフトの基本的な使い方やオーバーレイの作り方を説明しますので、これを読めば簡単なものはすぐに作れようになるかと思います！
オーバーレイとは何か
まず最初に、そもそも オーバーレイ とはなんでしょうか。
一般的によく使われる言葉ではないので、全く知らないという方もいるかと思います。
Wikipediaによると以下の意味となります。
オーバーレイ（Overlay）とは、何かの表面を薄く覆うこと（あるいは覆うもの）を意味する。
（中略）
画像処理ソフトや描画ソフトで複数のレイヤーを重ね合わせることもオーバーレイ表示と呼ぶ。
つまり、オーバーレイとは、ゲームの映像やカメラの映像の上に、別の画像をのせて表示する、その上にのせるもののことを言います。
例えばニュース番組でアナウンサーが原稿を読み上げている画面の時に、アナウンサーを撮影しているカメラの映像以外に色々なものが表示されています。
ニュースの見出し、アナウンサーの名前、時計表示、今日の天気などなど、あれがオーバーレイとなります。
オーバーレイを使用する意味
では、そのオーバーレイは何のために表示するのでしょうか？
OVALDIでは主にゲーム実況生配信やゲーム大会生配信での使用を想定していますが、「そんなのゲームの画面と実況解説の音声（場合によりカメラ）だけあれば十分じゃないの？」と思う方もいるかもしれません。
そうなんです。
究極的には、ゲーム画面と音声さえあれば状況は伝えられるので、オーバーレイは必要ないとも言えます。
では、オーバーレイを表示することにはどのような意味があるのでしょう。
カッコよくて見栄えがするから？
それも確かに大きなポイントです。カッコよくて見栄えのする番組は見るだけでテンションも上がりますし、気持ちよいものです。
ですが、オーバーレイを表示する目的のメインはそこではありません。
それはズバリ
画面の情報密度を上げ、前提知識を必要とせずに、継続的に視聴者に情報を伝えることが可能になる
ということです。
これがどういうことなのか、順番に説明します。
まず「画面の情報密度を上げる」について説明します。
プロ野球中継の映像をイメージしてください。
ピッチャー後方から見た基本となるカメラ映像がありますよね。あの映像にカメラの画しかなかったとした場合、得られる情報は
・ピッチャーが誰か（背中の名前表記を見て一応名前はわかる）
・両選手のチーム名（ユニフォームの知識があれば）
・バッターが誰か（顔を見て分かるだけの知識があれば）
・球場がどこか（フェンスの様子や広告などの知識があれば）
こんなところでしょう。
メチャメチャ少ない上に、前提知識がなければほぼ何も分かりません。
知識がない人にとっては、理解できるのは「プロ野球の映像だ」ということぐらいでしょう。
しかし実際の野球中継ではオーバーレイを利用して以下の情報を盛り込んでいます。
・対戦しているチーム名
・試合をしている球場名
・いま何イニング目（裏表）か
・何対何か（試合状況）
・カウント（ボール、ストライク、アウト数）
・出塁状況（ランナーがいるかどうか）
・ピッチャーの名前
・ピッチャーの防御率などの成績
・ピッチャーの紹介文
・バッターの名前
・バッターの成績（打率、本日の成績）
・バッターの紹介文
・配球
見ただけで今の状況を把握でき、この対戦、この一投にどんな意味があるのか、視聴者はすぐ理解することができます。
次に「前提知識を必要としない」という部分を説明します。
上の野球の例でも出てきましたが、前提知識があれば、カメラ映像だけでも得られる情報は多少あります。しかし、それらの前提知識をえるためにはかなりの時間と労力を割かなければなりません。
既存のファンにとっては当たり前でも、そうではない人にとっては気が遠くなるほどの作業です。
また、そもそもその前提知識をどうやったら得ることができるのかという前提知識も必要となるでしょう。
例えばゲーム大会生配信の場合、配信上では状況を表示していなくても、大会アカウントのツイートを確認する、オンライントーナメントサービス上に表示されてるトーナメント表を確認することにより状況把握ができたりします。
これらの情報にアクセスするのは、そのゲームコミュニティの人間であれば難しいことではないかもしれませんが、たまたま偶然配信を見た人にとっては非常に面倒な手間となりますし、そもそもそれらによって情報を確認できる、という前提知識がない人にとっては辿り着くことは非常に困難です。
逆に、前提知識があるコミュニティの人間だけが視聴すれば良いのであれば、わざわざオーバーレイを表示する必要はないと考えることもできます。ただ「せっかく配信をするんだから、1人でも多くの人に観て欲しい」と考えるのであれば、オーバーレイは必須のものとなるでしょう。
最後に「継続的に視聴者に情報を伝える」について説明します。
例えば「今やっている試合は、準決勝第1試合、A選手 対 B選手、取得マッチは 2-1 でA選手が優勢」という情報は、口頭でも説明可能です。
ただ、配信番組は基本的に視聴者がどこから見始めるかが分かりません。その説明があった直後から見始めたら、状況が分からずに、次に状況説明があるまで視聴し続けなければなりません。
オーバーレイはその問題を解消します。ゲーム画面上にその状況説明が継続的に表示されているので、視聴者は自分が見始めたタイミングですぐに状況を把握することができます。
口頭での説明には限界があります。
通常人は1秒間に6～7文字程度喋ることができるそうです。つまり2時間の大会の間1秒も休むことなくしゃべり続けたとしても5万字程度しか喋ることができません。
であれば、オーバーレイの表示で伝えられることはそちらに任せ、音声で伝えることは別のことに振り向けた方が、より楽しく、内容の濃い番組となるでしょう。
これらのオーバーレイ表示の利点は、大会生配信のみならず、個人のゲーム実況生配信でも同様です。
誰が出ているのか、何のゲームをやっているのか、どんなチャレンジをしているのか、出ている人がどんな人なのか。
Twitterや配信番組の説明文などを見れば分かることでも、配信画面内で完結するように構成することで、視聴者の負担を下げ、より楽しんでもらえる工夫ができると思います。
また、副次的な効果として、全ての情報が動画内で完結していると、リアルタイムではなくアーカイブでの視聴時に情報が散逸しないというメリットもあります。
オーバーレイの素材を作成してみよう
さて、前置きがかなり長くなってしまいましたが、ここからはオーバーレイの作成についてお話していきたいと思います。
まず、オーバーレイを作成するためには素材が必要です。
通常、オーバーレイ素材を作るためには Photoshop や Illustrator などが使用されると思いますが、今回は誰でも簡単にできるよう、できる限りシンプルに作成してみたいと思います。
使うものは Windows 付属のペイントで作成してみます。しかも、作成するのは青い四角形と白い四角形の2つだけ。
この2つを上手く組み合わせて、格闘ゲーム用のオーバーレイを作成していきたいと思います。
OVALDI をインストールすると、ドキュメントフォルダ内に「OVALDI」というフォルダが生成されますので、素材類は全てこちらに入れておきます。
オーバーレイを配置してみよう
素材が用意できたら、いよいよ OVALDI を起動しての作業となります。
まずはソフトを起動し、生成される URL を Xsplit や OBS に入れます。
Google Chrome のようなブラウザでも大丈夫ですが、OVALDIの画面の大きさや比率は URL を入力した先の設定に依存するので、実際に配信する際にズレが生じる可能性があります。
Xsplit などに入れて、ちゃんと 1920 x 1080 などの配信サイズで作成することをオススメします。
ここでは Xsplit でのやり方を説明していきます。
URL をコピーしたら Xsplit の左下「ソースの追加」>「ウェブページ」を選択し、出てきたウィンドウに URL を入れ OK をクリックしてください。
すると、Xsplit 上に白枠の四角が表示されますので、左上の角をドラッグして全画面の大きさに引き伸ばします。
これで配置の準備は整いました。
ここからは OVALDI 上で作業をしていきます。
【選手名表示エリアの作成】
まずは選手名エリアを作成していきます。
本来であれば、実際にオーバーレイを使用したいゲームの画面に合わせて配置するために、下に静止画を配置して作業しますが、著作権的な色々で微妙なラインな気がしますので、今回は置かずに作業したいと思います。
まずは 1P2P の名前を表示するエリアを作成します。
「コンポーネントの追加」を選び、コンポーネントを作成します。分かりやすいように「1P」という名前にしておきます。
コンポーネントとは構成要素という意味ですが、OVALDI ではグループぐらいの意味で考えていただければと思います。
1P というグループを作成して、その中に画像パーツやテキストパーツなど、1P に関連する要素をまとめるというイメージです。
コンポーネントの大きさを調整し、作成したい1P側の画像表示エリアより少し大きい程度の大きさにしておきます。この作業の理由については後々説明します。
コンポーネントの配置ができたら、中身のパーツを追加していきます。左下の「パーツの追加」にある画像ボタンをクリックすると画像の設定が開くので、名称を「1P Name Back」としておきます。
次に配置したい画像を選びます。画像設定の左下、「パーツの追加」の上に「画像の追加」ボタンがありますので、こちらをクリックし、先ほど OVALDI フォルダに入れた画像ファイルを選びます。
画像が表示されたらコンポーネントツリーから「1P Name Back」を選びます。コンポーネント全体を選択していても、主要な設定項目は表示されますが、全ての設定項目を選びたい場合は、必ずコンポーネントツリーからその素材を選ぶようにしてください。
今回画像を横長にしたいので、設定項目の「画像サイズ」から「横フィット」を選びます。これで画像が横に引き伸ばされた形になります。
画像の大きさを調整して、コンポーネントエリアの中央に来るようにします。
細かい作業をする場合は、左上にある「ズーム」を使用するとやりやすいかと思います。
画像の位置調整時にスライダー横にある+-ボタンで微調整をするかと思いますが、その際 1px だけ動かしたいのに 2px 動いてしまうことがあります。これはパーセンテージの値が+-ボタンだと0.1刻みで移動することが原因です。その場合は、直接0.01刻みで数値を入力すれば、1px 単位で調整ができます。
（OVALDIでピクセル単位での位置指定ではなく、パーセンテージを使用しているのは、配信の画面サイズを変更した際にオーバーレイも拡大されるようにするためです。ピクセル単位で指定してしまうと、画面サイズを変更するとその都度位置や大きさの指定をやり直す必要性が出てしまいますが、パーセンテージで指定しておけば、画面サイズが変わっても、画面内でのオーバーレイの表示位置や大きさも一緒に変わるため、手間がかかりません）
この青い画像の上に白で文字を打っても良いですが、今回はその上に白い画像を置き、青を縁取りとして使用する形にしたいと思います。
先ほどと同じように、1Pのコンポーネントを選択し、「パーツの追加」から画像ボタンをクリック、「1P Name Front」と名前をつけ、配置したい画像を選んで配置します。
先ほどの青画像より少し小さめにして中央に配置し、上下左右に青い縁取りが残るようにします。
最後に、選手名を打ち込みます。
やり方は画像の配置とだいたい同じです。1Pコンポーネントを選択して、左下の「パーツの追加」からテキストボタンをクリック、「1P Player Name」とパーツ名をつけます。コンポーネントツリーから「1P Player Name」パーツを選んで設定項目を表示し、左下のテキスト打ち込みエリアに入れたい文字列を入力します。
その後フォントやフォントサイズ等々を調整したら、コンポーネント内の白い四角内に上手く収まる位置に調整して完了です。
1Pの名前表示エリアが完成したら、次に2Pを作成します。
同じ手順を繰り返しても良いですが、今回は1Pのコンポーネントをコピーして2Pを作成します。
コンポーネントツリーから1Pを選んで右クリックし、「複製」を選択します。複製されたコンポーネントを2Pとリネームし、格納されている各種素材も2Pにリネームします。
2Pコンポーネントの横位置を調整して、2P側に移動します。
先ほど1Pのコンポーネントを名前表示エリアと同程度の大きさにしておいたのはこのためです。
コンポーネント自体をフル画面サイズで作成していると、コピー後の移動時に素材ごとに移動をしなければなりませんが、コンポーネントと表示エリアを同等程度のサイズにしておけば、コンポーネントを移動するだけで一括で移動が可能になります。
移動が完了したら、今度は「2P Player Name」を選んで、文字位置を調整します。1Pは右揃えにしていたので、左右対称になるよう、2Pは左揃えに変更します。
画像については、今回は単色の四角画像でしたので左右は関係ありませんが、非対称の画像の場合は、コンポーネントツリーから対象素材を選んで設定項目の「反転」で左右を反転すれば、左右対称にすることが可能です。
これで1P2Pの名前表示エリアは完成となります。
【スコア表示エリアの作成】
次にスコア表示エリアを作成してみましょう。作り方は名前表示エリアとほぼ同じです。1点だけ違うのは、コンポーネントにパーツを追加する際に「テキスト」ではなく、「数値」を選ぶことです。
もちろんテキストパーツでも表示は可能ですが、更新があるたびに手で数字を打ち込む必要があります。
数値パーツを使用すると、-+ボタンをクリックするだけで、1ずつ数字を増やす（減らす）ことができるようになり、またリセットボタンで0に戻すことができるようになります。
運用時にかなり楽になりますので、数値パーツでの作成をオススメします。
【ラウンド表示エリアの作成】
最後にラウンド表示エリアを中央一番上に作成します。選手名表示エリアやスコア表示エリアと作り方は同じです。画像を配置し、上に文字を配置します。
エリアが完成したら、打ち変え文章を用意します。テキストパーツの左下に「テキストの追加」ボタンがありますので、こちらを押してテキストを追加します。今回は仮でシングルイリミネーショントーナメントを想定し、Round1、Round2、Semi-Final、Finalのテキストを準備しました。
その時々でテキストを入力して更新することもできますが、このように事前に用意しておくと、切り替えたいタイミングでラジオボタンを押すだけで内容を変えることができるようになります。
オーバーレイを動かしてみよう
これで必要な素材類の表示はできました。次にオーバーレイを動かしてみたいと思います。
OVALDI では、表示される際のアニメーションと消える際のアニメーションを設定できます。
設定項目は以下の通りです。
表示時間：何秒間そのパーツ（もしくはコンポーネント）を表示するか（0にすることでそのシーンが選ばれている間ずっと表示することができます）
表示遅延：シーンが切り替えから何秒後にアニメーションを開始するか
表示アニメ：表示される際に実行するアニメーションの種類を選択
非表示アニメ：消える際に実行するアニメーションの種類を選択
アニメスピード：設定したアニメーションを何秒間かけて実行するか
1点注意するべきことがあります。Xsplit の場合、シーン切り替え時にカーソルをシーンボタンに合わせるとプレビュー表示が実施されますが、ボタンを押して切り替えをおこなった場合、プレビューの続きから表示が開始されることになります。
素早く切り替えれば問題ありませんが、プレビュー上でアニメーションが始まってしまってから切り替えると途中からアニメーションが表示されることになります。
これを防ぐために、数秒の表示遅延を入れておくとプレビューが表示されてしまっても、アニメーションが始まる前にシーンを切り替えられれば、最初からアニメーションが表示されるようになります。
これらのアニメーションはパーツごと、コンポーネントごとに設定することができますが、1つ1つ設定するのはかなり手間がかかります。
そこで「プリセット」という機能を使用します。
OVALDIの画面一番右下にタブがありますので、こちらをレイアウトからプリセットに切り替えます。プリセットには「テキスト系」「画像系」などパーツの種類ごとの設定と「表示系共通」というものがあります。
今回は全てまとめて設定したいので、表示系共通を選択します。
画像のような設定項目が表示されました。
このプリセットに分かりやすい名前をつけ、内容を設定します。
設定が完了したら、タブをレイアウトに切り替えます。
各コンポーネント（もしくはパーツ）の右上にプリセット選択ボタンがありますので、こちらを押して、先ほど設定したプリセットを選択します。コンポーネントに設定した場合は、そのコンポーネント内にある全てのパーツにプリセットが適用されます。
アニメーションをつけたいコンポーネントで全てプリセットを設定すれば完了です。
一部要素だけアニメーションを変えたい場合は、プリセット設定後、各パーツごとに変更することもできます。
オーバーレイを更新してみよう
これで全ての準備が完了しました。実際に表示して運用してみましょう。
運用時にはOVALDIの右下のタブを「運用」に切り替えます。すると画面のように更新する内容部分だけが表示されるようになります。
名前は試合ごとにテキストを打ち変え、スコアは+-ボタンで入力、試合が終わったらリセット。ラウンド表示のテキストは回戦が進んだらラジオボタンを押して切り替えます。
これで一応完成となります。
一応と書いたのは、少人数の大会などであれば、この形でも運用は難しくないと思いますが、数十人規模の大会となると、このやり方だと選手の名前の打ち変えが煩雑になるからです。
その手間を減らすために「連動ソース」という機能があります。これを使用すれば、事前に設定した選手名をプルダウンで選べるようになります。
連動ソースを使用してみよう
【連動ソースの準備】
連動ソースを利用するためには、まずはCSVファイルを作成します。Excel 等の表計算ソフトをお持ちの方は、それを使用するのが簡単です。お持ちでない方は Windows のテキストドキュメントでも作成できますが、ここでは Excel での作成方法を紹介します。
まずは Excel を起動し、空白のブックを選んでください。
次に内容を入れます。
1行目にその列に入れる内容のタイトルをつけます。今回は分かりやすく「Player Name」としておきます。
あとはその列にプレイヤーの名前を入れていきます。
これで準備はOK。このファイルをCSV UTF-8形式で保存し、ドキュメントフォルダ内「LivesteamOverlayManager」フォルダに入れます。
選手の使用キャラの表示や国籍表示、チーム戦のチーム名なども CSV で設定できますが、今回は初級編なので除外します。基本的には設定項目ごとに列を増やしていき、同じ選手に関する内容が1行になるようにするだけです。詳しいことが知りたい場合は、LivesteamOverlayManager のサンプルの CSV ファイルの内容を見てみると良いと思います。
【連動ソースの読み込み】
次に OVALDI に連動ソースを読み込ませます。
OVALDI右下のタブを「データ」に切り替え、左上の青いボタン「新しい CSV ファイルの読み込み」をクリック、先ほど準備した CSV ファイルを選択してOKを押します。
そうすると、このような画面が表示されます。
【各コンポーネントとの連動】
データタブで正しく表示ができたら、タブを「レイアウト」に切り替え、コンポーネントとリンクさせていきます。
コンポーネントを選択し、名前のすぐ下にある「連動ソース」で先ほど読み込んだデータを選択します。
次に連動するパーツを選択し、追加します。
通常は、コンポーネントの左下の「パーツの追加」から連動テキストを選び、1から作成しますが、今回は事前の作業で既に選手名のテキストパーツは作ってありますから、それを連動テキストパーツに変換します。
コンポーネントツリーからテキストパーツを選び、右クリックし「連動テキストパーツに変換」を選択します。
1Pコンポーネントが完了したら、同じ作業を2Pコンポーネントでもおこないます。
最後に1P、2Pコンポーネントの連動ソース右にある「重複防止」というボタンを有効にします（この機能についてはのちほど説明します）
これで設定完了です。
【運用モードでの操作】
実際の運用時は、運用モードに切り替えて操作します。
「選択行」と書いてあるところをクリックし、選手名を選ぶ、それだけで表示を切り替えられます。
さて、先ほど設定した「重複防止」ですが、これは1Pと2Pを同じ選手名を選ばないようにする機能です。同じ名前を選んだ場合は、1Pと2Pの名前は同じにならず、表示位置が入れ替わります。
例えば現在、1Pうううう選手と2Pああああああ選手が選ばれている状態だとして、うううう選手をあああああああ選手に切り替えてみます。
すると1P2Pが入れ替わることになります。試合の途中でプレイヤーサイドが入れ替わるルールなどの時には、この機能を使用すると少しだけ便利です。
【運用時にCSVの内容を変更する】
事前に CSV を用意していたが、当日飛び入りの参加があったり、欠席者が出たり、選手名が間違っていたりで内容を変更しないといけない……なんてことも起こるかと思います。
その場合は、CSV ファイル自体を書き直すのではなく、データタブで削除、追加、内容の書き換えができます。（行の追加と選択行の削除は、ソースの一番下にありますので、スクロールして表示してください）
これは CSV ファイル自体を書き換えているわけではなく、CSV ファイルから OVALDI に読み込んだデータを書き換えていますので、CSV ファイルを再度読み込んだり、 OVALDI を再起動すると、元々の CSV ファイルの内容に戻ります。
CSV ファイル自体を書き換えたい場合は、書き換え実施後、既にデータタブにある CSV データを削除し、再度読み込みを実施した上で、レイアウトタブの連動ソースで再度ソースを選択してください。この手順を実施することで再度データとリンクさせることができます。
おわりに
さて、ひととおりオーバーレイの作成と運用方法をご紹介いたしましたが、いかがでしたでしょうか。
今回はシンプルな素材で必要最低限のものを作成しましたが、デザインに凝ってみたり、素材をアニメーションgifで作成したりすることで、素晴らしいオーバーレイを作成することが可能です。
また、今回は1P、2P全てのパーツをバラバラに作成しましたが、これもやりたいことに合わせて自由に作成してもらえればと思います。1P2Pの画像要素はそれぞれまとめて各1枚の画像で作成しても良いですし、いっそ全ての画像要素をまとめて1920 x 1080の画像1枚だけ作成して、その上に打ち変えるテキスト要素だけのせるというやり方もあります。そのあたりは皆さんの自由な発想で色々試してもらえればと思います。
OVALDI には本記事では紹介しきれなかった機能などもまだまだたくさんあります（例えばTCGやポケモンのようなたくさんの要素から選手がピックするゲームに最適なリスト表示機能などもあります）また日々改善・機能追加等もおこなってます。情報発信は公式ツイッターでおこなっていますので、良かったら見ていただけたらと思います。
また、OVALDI を使用した配信についての情報や使用した感想なども是非お寄せください。
皆さんと一緒に配信番組をより面白く、より素敵なものにしていけたらと思います！
また機会がありましたら、今回紹介できなかった機能の紹介記事も書きたいと思います。
この記事が気に入ったらサポートをしてみませんか？