OBS Studioのシーンに色々な画像ソースを組み込んでいく上で覚えておくと便利なのが、「画像の透過」に関する知識です。
今回の記事で画像を組み込むにあたって覚えておくと便利なノウハウは３つ
- 透過情報のあるPNG画像をシーンの中に配置する
- 透過情報のあるAPNG（連番ファイル）を使ってアニメーション画像をシーンの中に配置する
- クロマキー合成のやり方を覚えて、静止画像も動画もシーンに配置できるようにする
この3つになります。
筆者は、画像及びアニメーション画像を各シーンのソースとして組み込む時には、主にPNGとAPNGを使います。
静止画連番ファイルのアニメーションでは、アニメーションGIFを使われる方や、クロマキー合成を使う方が多いと思うのですが、筆者の場合はAPNGという、何十枚もの画像を、１つの静止画連番ファイルにまとめて、OBS Studioに組み込んでいます。
本記事では、筆者のオリジナルキャラで作ったテスト用素材もお渡しできるように整えてあります。
100%オリジナルの素材なので、安心してテスト環境に使用できます。
本記事の構成としては
- テスト素材のダウンロード
- OBS Studioのシーンへ素材を組み込む方法
- 透過PNG、透過APNG、クロマキー合成用素材の作り方
の３部構成になっています。
これらの情報がお役に立てば幸いです。
PNG形式、APNG、クロマキーのテスト用素材
まずは、本記事の説明で使うテスト用素材をダウンロードしていただければ幸いです。
まずは、今では一般的に利用されていて制作も簡単な透過PNGのデータです。
次に、１秒30フレーム（30枚の画像ファイル）の透過PNGを１つの静止画連番ファイルにしたAPNGファイルです。
最後は、これも一般的な緑色のクロマキー合成で背景を透過させる時のPNG素材です。
これに関しては、動画素材も同じ色で背景を作れば、すぐにクロマキー合成の機能が効く色にしてあるので参考になれば幸いです。
背景色の色（緑のカラーコード：#00FF00）
以上の３つがテスト用素材になります。
OBS Studioに透過させた素材をソースに登録する
それでは、各素材の登録方法をシンプルで恐縮ですが解説していきます。
透過PNG画像素材
OBS Studioの各シーンにある「ソース」エリアの「＋」ボタンから画像を選択し、組み込みたい透過PNGファイルを選ぶだけで完了です。
位置や大きさは、マウス操作などで簡単に変えられます。
透過APNG画像素材
OBS Studioの各シーンにある「ソース」エリアの「＋」ボタンからメディアソースを選択し、組み込みたい透過APNGファイルを選ぶだけで完了です。
この時、普通にファイルを選択しようとしても選べない状態になっています。
そのとき、「選択できるファイルの種類」を「すべてのファイル」にするとAPNGファイルが選べるようになります。
通常、透過情報（アルファチャンネル）のある動画ファイルをアップロードしたり、アニメーションGIFなどを利用している人が多いのですが、アニメーションGIFだとジャギったりしていることや、透過情報付き動画ファイルだとファイルサイスが大きくなってPCスペックによっては不具合が起きやすいという課題があります。
透過APNGの場合、綺麗に透過情報が維持されるのと、連番ファイルに圧縮がかけられるので、ファイルサイズも抑えられるというメリットがあります。
OBS StudioでAPNGフォーマットの素材が組み込めるというのは、本記事執筆時点ではあまり知られていないようなのですが、現在、ほとんどのアプリケーションでAPNGの対応はできるようになっているので、活用していきましょう。
クロマキー合成用PNG画像素材
クロマキー合成用PNG素材は、各シーンにある「ソース」エリアの「＋」ボタンから画像を選択し、組み込みたい透過PNGファイルを選ぶだけで完了です。
ソースに登録できたら、「フィルタ」の設定から「クロマキー」を選択します。
通常、クロマキー合成を使う時の静止画及び動画の背景色は、緑のカラーコード：#00FF00 に設定されていることが多いです。
なので、OBS studio上でクロマキー合成のフィルタを適用すると、それだけで透過状態になるはずです。
今回の合成用素材でクロマキーを適用すると、「キャラクターの緑の尾」も透過してしまうはずです。
このような場合、透過に関する調整もOBS Studioでは可能です。
その場合、「フィルタ」から「クロマキー」を選び、まずは「類似性」のところから調整してみてください。
OBS Studioで透過素材として使える画像やアニメーション素材を作る方法
続いて、先ほどまではテスト用素材を利用していたと思いますが、各素材を作る方法を簡単ですが解説していきます。
透過PNG画像素材
透過PNG素材は現在、無料で使えるデザイン系のフリーソフトでもデフォルトで書き出せるようになっています。
デフォルトの設定自体が透過PNGになっていることが多いので、そのまま書き出してOBS Studioへ組み込んでみましょう。
透過APNG画像素材
透過APNG素材も作り方自体は簡単です。
アニメーション化されたイラストやデザインファイル。
通常、これらは透過情報付きの動画ファイルに変換されて使用されることが多いのですが、これだと、容量も大きく、素材がいくつも重なると、PCスペックが高くないと配信で不具合が起きやすいです。
なので、アニメーションファイルを圧縮されたAPNG形式のファイルに変換することで、非常に軽いファイルにすることが可能になります。
APNGは、有名どころとしてLINEアニメーションスタンプで採用されているフォーマットでもあります。
具体的な作り方について下記のブログ記事でまとめてありますので、こちらの情報がお役に立てば幸いです。
APNGは、LINEアニメーション専用フォーマットではないので、OBS Studio用に作成するときは、「Web用」の設定が細かくできるようになっています。
APNGは、OBS用途以外にも色々使えるフォーマットなので、色々試して遊ぶことができます。
クロマキー合成用PNG画像素材
OBS Stuidoに限らず、クロマキー合成をするための素材作りはそれほど難しくありません。
クロマキー合成という技術は、「特定の色」を透明にして表示する技術です。
したがって、最終的には画像や動画素材に合わせた「特定の色」をクロマキー合成できるように背景色を決定します。
なので、クロマキー合成する時の背景色は必ずしも「緑 #00FF00 」だけではありません。
ただ、現在は前述の通り、「透過PNG」を用いたAPNGアニメーションの組み込みが可能なため、実際の現場において、ライブ配信としては負荷の高い透過情報のある動画（アルファチャンネル付き動画）を使うことは少ないです。
OBS Studioで画像素材を組み込む時の基本は「とにかく軽いこと」
OBS Studioは、録画によるコンテンツの収録も可能ですが、ライブ配信機能も充実しています。
ライブ配信では、PCの処理能力や通信環境などに配信の質が大きく影響するため、なるべくコンテンツ配信の負荷を軽くことを心がける必要があります。
今回は、負荷のかからない画像素材をOBS-Studioのシーンに組み込むためのノウハウも含めて解説させていただきました。
これらの情報がお役に立てば幸いです。
最後まで読んでいただきありがとうございました。
