前回は → vMix ハンズオン【第7回】
1. Overlay とは
vMix には、レイヤーで絵を重ねる方法が二通り用意されています。 1つは既に解説している「MultiView」、そしてもう一つが「Overlay」です。
両者の違いは、MultiView がインプット毎に 10 のレイヤーが用意されているのに対して、 Overlay はシステム全体で 4 つ (*) のレイヤーが用意されているという点。 Overlay は最前面に表示される点。 そして、MultiView が予め仕込んで使用する物で、Overlay はライブ中・リアルタイムに出し入れする物という点です。
今回は Overlay の使い方を解説します。
(*) プラスで Stinger Transition 用が 4 つ有りますが、これは後で言及します。
2. Overlay の使い方
先程説明した通り、Overlay には 4 つのレイヤーが用意されています。これらのレイヤーはそれぞれに1つ Input を表示することが出来ます。 当たり前ですが、既に Input が割り当てられているレイヤーに別の Input を割り当てようとした場合は入れ替えとなります。 従って複数の Input を Overlay で重ねたい場合は、別々のレイヤーを使用しなければなりません。
Overlay に Input を割り当てたい場合は、Input の下に設置されている 1 ～ 4 の Overlay ボタンを 左クリック してください。 すると Output 上で 番号のレイヤーに Input が表示されます。 番号が大きなレイヤー程、より前面に表示されます。
では、Output に表示する前に、Preview で確認したい場合はどうするでしょうか？ その場合は、Overlay ボタンを 右クリック してみましょう。 すると今度は Preview 上で 番号のレイヤーに Input が表示されます。
Preview と Output は Overlay レイヤーを共有しており、尚且つ排他表示になるため、同じレイヤーで Preview と Output 両方に表示するといった事はできません。 そういう事をしたい場合は異なるレイヤーを使う必要があります。
Input が Overlay として Output に出ているか、Preview に出ているかを簡単に知るためには、 Overlay ボタンが何色に点灯しているかを見てください。 Output のタイトルバーと同じ色（デフォルトで「緑」）なら Output、 Preview のタイトルバーと同じ色（デフォルトで「橙」）なら Preview です。
点灯中の Overlay ボタンを左クリック（Output に表示中の場合）または右クリック（Preview に表示中の場合）すると、 番号の Overlay を消去することが出来ます。
それでは、Preview で絵を確認して問題なかったので、Output に出したいと思います。 Preview に右クリックで Overlay 表示した状態のまま、「Cut」や「Fade」またはその他のお好きなトランジションを使用して Output にスイッチングしましょう。 Preview に表示されていた Overlay が Output に移動しました。
さて、そのまま Input を Preview に引っ込めた場合はどうなるでしょうか。 Overlay も一緒に戻るでしょうか？
答えは「戻りません」。 実は、一度 Output に出した Overlay が、勝手に Preview に戻る事はありません。
なぜこの様な動作をするのかと言えば、いくらスイッチングしようとも、Input に関係なく常に最前面に表示出来るのが Overlay のメリットだからです。
更に、先のスクリーンショットの状態（Preview と Output にそれぞれ Overlay が表示されている状態）で、スイッチングした場合はどうなるでしょうか？
答えは下図の様になります。
これらの事は Overlay を使う上で十分理解しておいてください。 さもなければ重要なシーンで、余計な Overlay を残してしまう事故が発生します。
（このような事故を防ぐために、Trigger を使用した自動 Overlay 消去 を過去に紹介しています）
Input のスイッチングに画面要素を連動させたい場合は MultiView を使用して絵を重ねましょう。
また、Preview と Output は排他表示だという事も忘れない様にしてください。 Output に表示中のレイヤーで誤って Preview 表示をしてしまうと、Output から Overlay が消えてしまう結果になります (*)。
(*) そしてそれに気付いたオペレーターがテンパッて更におかしな操作をし放送事故になる。そんな場合は一呼吸し、落ち着いて正しい Overlay を出し直しましょう。
3. Overlay の設定
上記が Overlay の基本的な使い方になります。 さて、Overlay を出したり消したりするときに、なんとなくトランジション（フェード）が適用されている事に気づいたと思います。
デフォルトでは 500ms のフェードに設定されていますが、レイヤー毎に好きなものを設定できます。
vMix の画面下部にある「Overlay」ボタンをクリックしてください。 以下の様な「Overlay Settings」ダイアログが開きます。
| 番号 | 設定項目 | 機能 |
|---|---|---|
| 1 | Number | レイヤー番号 |
| 2 | Type | Fullscreen（1:1 のスケールで全体に表示する）または PictureInPicture（変形・装飾して表示する "ワイプ" ） |
| 3 | Effect | 表示切り替え時のトランジションを選択 |
| 4 | Effect Duration | トランジションに掛ける時間 |
| 5 | Duration | 自動的に消えるまでの時間。 0 で機能を無効化。ミリ秒かフレーム数で指定する。 |
| 6 | Alpha | アルファ値（不透明度） |
| 7 | Picture In Picture Location | Type に PictureInPictureを選んだ場合に使用。右の赤いボックスをドラッグすることで移動できる |
| 8 | Border | PictureInPicture時に使用。ワイプにボーダーを付加できる。色と線幅、丸角の半径をを設定可能 |
(3) Effect でトランジションが選択でき、(4) Effect Duration でトランジションの時間が設定できます。 指定したレイヤーに表示する物はすべて同じトランジションが適用されます。
また、(5) Duration をうまく使うと、ネームタグの様な、開幕少しの間表示して消したいオーバーレイの操作を簡略化できます。 消し忘れもなくて安心ですね。
他には、例えば Camera Input をワイプ化したい時、(2) Type を PictureInPicture に変更すればサイズと位置・装飾が設定できるようになります。 とは言え、ここで設定すると該当するレイヤーに表示した Input は全てワイプ化して表示されるので注意してください。 この機能を使わずとも、ワイプ化を Input Settings（の Position 等）で行う事も出来ます。つまり、ワイプ表示用の Input を作ってしまえばいい訳です。
どちらが良いかという点については、冒頭で述べた「MultiView は仕込んで使う物、Overlay はライブ中・リアルタイムに使う物」という説明を思い出してください。 画面構成が確定していて前もって仕込めるなら、出来る限り MultiView で仕込んでおきましょう。 Overlay Settings は仕込んでいなかった Input をワイプ化したり、仕込んだ物を更に微調整したい場合に使うのが良いと思います。
Overlay は、アドリブでの出し入れが想定される物や、 多くのシーンに対して横断的に必要になる素材で、全部のシーンに「有りバージョン」と「無しバージョン」を作ると、 Input の数が増えすぎると言った場合も必要になるでしょう。
4. Stinger Transition とは
Stinger（スティンガー）と聞くと、日々オンラインで戦いに明け暮れる戦闘民族の皆さんは「ミサイル」を思い浮かべるでしょうか。 英語ではツンツン刺さる（Stingする）物がスティンガーと呼ばれがちですが、ごく短い印象的な映像を鋭く差し込んでシーン切り替えを行うエフェクトを Stinger Transition と言います (*)。映像は何でもいいのですが、多くは躍動的な動きを持ち、派手な光ものエフェクトで番組ロゴがカットインしてくる様な、 シーンが切り替わる事が視聴者から分かりやすい物が好まれます。 また、大抵はアルファチャンネル付きの動画を使い、前後のシーンとフレームがブレンドされて、シームレスなシーンチェンジが行われます。
Stinger Transition を使うと、それだけで配信クオリティが格段に上がったように見えるから不思議です。
さて、vMix における Stinger Transition は専用の Overlay レイヤーを使って表示されます。 通常の Overlay 4 レイヤーの更に上に（または下に）、Stinger Transition 専用のレイヤーが 4 つ用意されており、 それぞれで独立して Stinger Transition を設定する事ができます。 つまり 1 つの Preset につき最大 4 種類の Stinger Transition を仕込むことが出来ます。十分ですね。
そして、Stinger Transition の素材ですが、これは通常の Overlay 同様に任意の Input を使用することが出来ます。 Video だけでなく、Image でも Camera Input でも、Title Input でもなんでも Stinger Transition に使えます。 もちろん見栄えの面で Video を使う事になるでしょうが、ここでは Image Sequence / Stinger Input を使います。 これはまさしく Stinger Transition のために用意された Input で、アルファ付きの PNG 連番ファイルをアニメーション表示させます。
(*) 語源は知らないので適当な独自解釈です。
5. Stinger Transition の作成
5.1. 動画の作成
Stinger Transition の素材を作成しましょう。 使用するツールは何でもいいですが、デファクトスタンダードは After Effects だと思います。 ロゴがズームインしてくるような物で構わないので、適当にアルファ付きのエフェクトを作って PNG 連番で書き出してください。 動画の長さは2～5秒程度で構いません。
動画作成時の注意として、予めターゲットとなるフレームレートを決めてください。 60fps 配信に使う Stinger Transition は必ず 60fps で作成してください。 さもないと動画の再生速度が想定よりも遅くなったり速くなったりします。
次に作成した動画から以下の情報を抽出しメモしてください。
- 動画全体のフレーム数 → Duration
- シーンの切り替えタイミング（フレーム番号） → Stinger Cut Point
更に、カットポイントとなるフレーム前後では 必ず画面全体を不透明ピクセルで覆ってください。 そうしないとエフェクト背景のシーンチェンジが視聴者から見えてしまい格好悪いです。 素材の都合で全体が覆えなくとも、背景のシーンチェンジが目立たない程度には覆う事をお勧めします。
参考までに After Effects での書き出し設定を以下に貼っておきます。 （オーディオは書き出せないので、別途 wav ファイル等に書き出してください）
5.2. サウンドの付加
サウンドのない Stinger Transition はなんだかちょっと味気ないもの。 かっこいいエフェクトには是非かっこいい効果音をつけたいですね。
Image Sequence / Stinger でサウンドを再生するには、連番ファイルの最初（例：stinger001_00000.png）と同じファイル名で、
尚且つ末尾に .wav や .mp3 を付けた音声ファイル（例：stinger001_00000.png.wav）を同じフォルダ内に配置してください。
.png を消さずに、その後ろに .wav/.mp3 を付けるので注意です。
また、当然ですがサウンドの尺を、動画と同じにしてください。
5.3. Stinger Transition の仕込み
出来上がった素材を vMix で Input 化しましょう。 Image Sequence / Stinger を使って、連番 PNG ファイルの「1 番目」を読み込んでください。 自動的に他の連番ファイルを認識し、動画として読み込んでくれます。また用意したサウンドファイルも、Input の Audio として読み込まれます。
Stinger Transition として仕込む前に、きちんと再生できるかテストしましょう。 Overlay に表示してやれば透過の具合も確認できます。
（多分バグだと思いますが、Image Sequence / Stinger では、Input の横に表示されるはずのオーディオメーターが、なぜか表示されません）
出来栄えが芳しくない様なら、5.1. に戻って調整してください。 良く有るミスはフレームレートが合ってなくて想定よりも遅くなる／速くなると言った事です。 After Effects の書き出しフレームレート設定を確認してください。
良い感じになったら Stinger Transition の設定をしましょう。Overlay の時と同様に、vMix の画面下にある「Overlay」ボタンで、 Overlay Settings ダイアログを開いて設定します。
| 番号 | 設定項目 | 機能 |
|---|---|---|
| 1 | Number | レイヤー番号（Stinger 1 ～ 4 のいずれかを選ぶ） |
| 2 | Type | 通常は Fullscreen を選択 |
| 3 | Effect | Stinger Transition 自体のトランジションを選択。つまり、どの様なエフェクトで Stinger Transition が Overlay 表示されるかという事。 |
| 4 | Effect Duration | 上記トランジションに掛ける時間 |
| 5 | Duration | 5.1. で調べた Duration を入れる。Stinger Transition の尺で、ミリ秒かフレーム数で指定する。 |
| 6 | Stinger Input | Stinger Transition に使用する Input を選択する。 |
| 7 | Display underneath Overlays | Stinger Transition を Overlay よりも背面に表示したい場合はチェック。 |
| 8 | Stinger Cut Point | 5.1. で調べた Cut Point を入れる。シーンの切り替えタイミングをミリ秒かフレーム数で指定する。 |
| 9 | Alpha | アルファ値（不透明度） |
尚、Duration は Stinger Input へ選択した素材の尺が自動的に入る様になっています。
6. Stinger Transition の使い方
Stinger Transition を設定したら、早速試してみましょう。 Preset には、Stinger Transition の他に、最低でも二つの Input を作成してください。 ここでは Input A と Input B とします。 Input A を Output へ、Input B を Preview へ配置してください。
次に vMix 画面中央、Preview と Output の間に並ぶ「Cut」「Fade」といったトランジションボタンの1つを「Stinger 〇（さっき設定した番号に置換）」に変更します。
変更したトランジションボタンをクリックし、Input A → Input B にシーン切り替えを行ってみましょう。
想定した通り、Stinger Transition で格好良くシーン切り替えができたでしょうか。 気に入らなければ 5.1. から繰り返す感じです。
これにて、通常のトランジション同様に Stinger Transition が使用出来る様になりました！
7. 今回はここまで
今回は Overlay の使い方と、Overlay の応用となる Stinger Transition の使い方を解説しました。 昔は Stinger Transition なんてものは高価な機材にしか付いてこなかったですが、 最近は vMix だけじゃなくて、OBS Studio や XSplit でも実装されていますね。 Stinger Transition があるだけで配信のクオリティがぐっと高く見えるので、 素材を用意する手間はかかりますが、是非チャレンジしてみてください。
（envatomarket 等の素材販売サイトへ行けば、クリエイターが作った素材が大量に販売されていますので、 気に入った物を購入して使うのが手っ取り早くていいかもしれません）
次回はいよいよ vMix の目玉機能である Instant Replay について解説したいと思います。
それではまた！
次回は → vMix ハンズオン【第9回】