Write and Run

it's a simple way, but the only way.

OBS Studioの配信画面レイアウトのベストプラクティス

OBS Studio は現代の配信者にとって必須なソフトウェアです。かつては XSplit などのお世話になったこともありましたが、とくに YouTube Live や Twitch で活動している現代のアマチュア配信者のほとんどは OBS Studio を用いていると思います。かくいう私もそのような配信者のうちの1人で、Rust で Z80 を動かしたりリードソロモンを教わってゼロから実装したりする配信をしています(隙あらば宣伝): #ch789 / KOBA789 - YouTube

そんな OBS Studio ですが、配信画面のレイアウトを整えるのは至難の業であることが知られています。GUI の操作が難しいからでもありますが、レイアウトを司る「変換」という機能の仕様が難解なのが主因だと思います。日本語訳がわかりづらいこともその難解さに拍車をかけています。たとえば「変換」は "Trasnform" の訳なんですが、これはさすがに伝わらんと思います。他のアプリケーションに倣うと「変形」とかでしょうか。

この記事では「変換」の詳細な仕様については説明しません。言葉で説明したところでそれぞれの機能がプリミティブすぎて結局どのように使えばいいのかわからないからです。かわりにこの記事では、具体的にどのような設定にすべきかを紹介します。

基本の設定

シーンにソースを追加したらまずは「変換の編集」を開いてください。いきなりマウスで大きさを変えると不幸が始まります。うっかり大きさを変えた場合は「変換をリセット」で戻してから以下の設定をしてください。

以下の設定をした後ならマウスで動かしても大丈夫です。わかってきたら基本以外の設定をいろいろ試すとよいですが、まずは下記の設定から始めるのが安全だと思います。

「変換の編集」の原則

位置

そのままでよい。
座標を直接打ち込んで調整したいときはここに入力する。

回転

0.00° にする。
回転が入るとややこしくなるのでこの記事では扱わない。

大きさ

絶対に変えない。
大きさを直接打ち込んで調整したいときは後述の「バウンディングボックスのサイズ」を変更する。

位置揃え

「左上」でよい。
回転したいときは他の値にするがややこしくなるのでこの記事では扱わない。

バウンディングボックスの種類(超大事)

「境界の内側に合わせる」に設定する。この設定が一番大事。
この設定だと縦横比を歪められないが、縦横比を歪めたいケースはほとんどないのでこの記事では扱わない。うっかり縦横比が歪んでダサくなるほうがよっぽど不幸である。

バウンディングボックス内の配置

「中央」でよい。
それ以外でも悪いことは起きない。それぞれの効果が気になる人は試してみよう。

バウンディングボックスのサイズ

そのままでよい。
大きさを直接打ち込んで調整したいときはここに入力する。

バウンディングボックスにクロップ

この記事通りの設定では ON でも OFF でも同じ。
ややこしくなるのでこの記事では詳細を扱わない。

クロップ

よくわからなければ全部 0 でいい。入力データの端に映したくない部分や余計な部分がある場合にここで削れる。詳細は割愛するけどお好みで。

細かいことが気になる人向け

いきなり画面上でマウスを使って大きさを変えてはいけない理由

バウンディングボックスの種類」が「境界なし」のままマウスでサイズを変えると、「バウンディングボックスのサイズ」ではなく「大きさ」が変わるからです。

「大きさ」を変えてはならない理由

これを理解するには、シーン上のソースの大きさを OBS がどのように計算しているかを知らねばなりません。

バウンディングボックスの種類」が「境界なし」のときのシーン上の大きさは次の式で計算しています(クロップなどを無視しています)。

width = scaleX * sourceWidth
height = scaleY * sourceHeight

ここで、sourceWidth, sourceHeight はそれぞれ入力データの横幅と縦幅です。たとえばキャプチャカードデバイスが 1920x1080 で映像を取り込んでいれば、これらはそれぞれ sourceWidth = 1920, sourceHeight = 1080 となります。左辺の width, height はそれぞれ実際にシーン上で表示される大きさの縦幅と横幅です。

シーン上で表示される大きさは scaleX, scaleY という係数が乗されて決まるので、シーン上に表示される大きさを直接的に決めることはできません。

では「変換の編集」の「大きさ」を変更するとなにが起きているのでしょうか。実は width, height が変更されるかわりに、scaleX, scaleY が変更されます。つまり、狙った width, height になるように scaleX, scaleY が逆算されて保存されるのです。

これは入力データの大きさが変化したときに意図しない挙動を生み出します。例えば、シーンに背景画像を置いてそれをあとで差し替えるといったケースを考えてみます。

まず、シーンに「画像」ソースを追加し、背景画像を置きます。この画像ファイルの解像度は 3840x2160(4K) だったとします。つまり sourceWidth = 3840, sourceHeight = 2160 です。

しかし画像が大きすぎてシーンからはみ出してしまうので、あなたはマウスで大きさを調整してシーンサイズ 1920x1080(Full HD) ぴったりになるようにします。このとき、「バウンディングボックスの種類」は「境界なし」のままなので、内部パラメータ scaleX, scaleY が変更され、それぞれ 0.5 になります。

次にあなたはやはり別の背景画像に差し替えようと思い立ち、ソースのプロパティを変更して別の画像ファイルを読み込みます。この画像ファイルの解像度は 1920x1080(Full HD) だったとします。つまり sourceWidth = 1920, sourceHeight = 1080 に変わったわけです。

するとどうでしょう。シーン全体を覆うように配置されていた「画像」ソースは半分のサイズに縮んでしまい、960x540 の大きさになってしまいます。sourceWidth, sourceHeight が変わってしまったために、シーン上の大きさである width, height の値もそれに引きずられて変わってしまったのです。入力データの大きさが変わっても内部パラメータ scaleX, scaleY は調整されないので、入力データを変えるとシーン上の大きさが変わってしまうことがあるのです。

同様の現象はキャプチャカード等でゲームの画面を取り込んでいるときにも発生することがあります。ゲームが出力する画面解像度が変化すると、それに影響されてシーンのレイアウトが崩れてしまうのです。