【OBS|応用】フィルタでイメージマスクを使った切り抜き|DBD特化・配信者向け

星詠れい
星詠れい

おはこんばんにちわ🎵

ここではフィルタのイメージマスク/ブレンドを詳しく紹介していきます。
そして、DBDを配信するときにパークの表示場所を変えてみたい等をして、立ち絵等を右下に置きたいと考えた場合に必要なことを載せてみました。

よかったら参考にしてみて下さい。

OBS Studio

ここではソースでのイメージマスク/ブレンドについて解説していきます。
イメージマスクを使ってのDBDの画面の配置換えについても解説しています。
よければ参考にしていただいてもOKですし、使って頂けたらとても嬉しいです。よろしくお願いします。

その他総合的なOBS Studioの設定については以下のサイトにて紹介させてもらっています。
また、OBS Studioにおけるプラグインの総合まとめについても紹介させていただいています。

イメージマスク/ブレンド

イメージマスク/ブレンド

イメージマスク
⇨任意の形に映像を切り抜き、一部を隠して透明にできるフィルタです。
ブレンド
⇨描かれた画像に対して、上から効果を付けられるレイヤーの機能です。

切り抜き用の画像(イメージマスク用画像)と合成することによって、透明にする部分としない部分を分けることが可能になります。

インフォメーション
イメージマスクでの設定内容:デフォルト
タイトルデフォルト備考
種別アルファマスク(カラーチャンネル)デアルファマスク(カラーチャンネル)
アルファマスク(アルファチャンネル)
合成(乗算)
合成(加算)
合成(減算)
パス未掲載イメージマスク/ブレンドに使う画像ファイルを選ぶ
#ffffff(白)選択した色が透過された後の色の上に載る
#000000(黒)になると真っ黒になる
不透明度1.0000イメージマスクを適用した後の透過率を設定する
0に近いほど透明になる(ソースが見えない)
1に近いほど不透過になる(ソースが見える)
画像を拡大OFF基本はOFF
イメージマスクでの設定内容
色の設定について

OBSのWikiでは全く違う記述になっているので注意が必要です。
実際の挙動としては、イメージマスクやブレンドをした後のマスク画像に色がさらに乗算するいった感じです。

そうすると#ffffff(白)のままだとして、乗算なので全て1.0倍されて不変になるので変わらないですし、
#000000(黒)だとすると、全て0.0倍されて全ての数値が0になるので真っ黒になります。

#FF0000(赤)なら、Red部分が1.0倍でそのまま、GreenとBlueが0.0倍で0になるので、全体的に赤くなります。
基本色が#808080のグレーとしたら、80×1.0と80×0.0と80×0.0で#800000になります。黒に近い赤ですね。

イメージマスク系

アルファマスク(カラーチャンネル)

特定の色を透過させるイメージマスクになります。
白色の部分が一番透過されているようでした。

イメージマスク
画像の色
HEX
sRGB
イメージマスク
での挙動
下のレイヤーの描写
マスクを通した結果
白________White255,255,255
#ffffff
完全に透過される該当の部分のみ描写される
⇨映し出される
黄色______Yellow255,255,0
#FFFF00
かなり透過される透過される際の色に変化なし
⇨かなり映し出される
マゼンタ_Magenta255,0,255
#FF00FF
かなり透過される透過される際の色に変化なし
⇨かなり映し出される
シアン_____Cyan0,255,255
#00FFFF
かなり透過される透過される際の色に変化なし
⇨かなり映し出される
赤_________Red255,0,0
#FF0000
少し透過される透過される際の色に変化なし
⇨少し映し出される
ライム_____Lime0,255,0
#00FF00
少し透過される透過される際の色に変化なし
⇨少し映し出される
青________Blue0,0,255
#0000FF
少し透過される透過される際の色に変化なし
⇨少し映し出される
黒_______Black0,0,0
#000000
透過されない非表示で透過される
⇨映し出されない
検証結果
インフォメーション

検証した結果、おそらくHEXの数値の合計で透過度を決められているようでした。
最低値が0(0%)で、最大値が255×3の765(100%)になって、割合で透過率が変わる感じです。

なので、完全に透過するものとしないものを分ける場合は白黒画像で問題ないでしょう。

イメージマスク
画像の色
HEX
sRGB
内容&備考
白________White255,255,255
#ffffff
透過したい部分に塗る
黒_______Black0,0,0
#000000
透過させたくない部分に塗る
実際に塗り分けるときの方法
アイデア

なお、今回で使うフィルタはこのアルファマスク(カラーチャンネル)になります。

アルファマスク(アルファチャンネル)

アルファ値によって透過度を変えるイメージマスクです。

イメージマスク
画像
イメージマスク
での挙動
下のレイヤーの描写
マスクを通した結果
備考
不透明の部分
アルファ値が255
透過される該当の部分のみ描写される
⇨映し出される
普段の画像は基本
これになることが多い
半分透過の部分
アルファ値が128
半分透過される⇨半分透過したように映し出される
透明化された部分
アルファ値が0
透過されない非表示で透過される
⇨映し出されない
キャプション
インフォメーション

上部が透過率0%(白い)で、下部が透過率100%(背景の色になる)のグラデージョンになっています。

検証をした結果アルファ値の数値(割合)で透過率が変わってきました。

ちょっと難しいので基本的には使わないほうがいいかもしれません。
また、この機能を使うのであればアルファ値を入れたPNGファイル形式を作れるソフトが必要になるので、クリスタやイラスタなどを持っていない方には使う難易度が高いのかもしれません。

用語:アルファチャンネル

デジタル画像処理において、透過度の情報を扱うために用意された補助的なデータ領域

通常のRGB方式では赤(Red)・緑(Green)・青(Blue)の3種類の各色の強さを組み合わせて色を表現します。
(255,255,255)は白、(255, 0, 0) は赤、(0, 0, 255) は青、(0, 255, 0) はライム、と表現されています。

それに追加される形で、その画素がどのくらい透けているかを表す「アルファ値」を格納します。
Alphaの頭文字のAを入れて、RGBA方式と言われています。
アルファ値はパーセンテージとして0%-100%、数値として0-255の256段階で示すことが可能です。
0に近くなるほど透明化され、255に近くなるほど不透明のままです。
RGB方式での(255,255,255)とRGBA方式での(255,255,255,255)や(255,255,255,1)、(255,255,255,100%)は全く同じです。
一番右の4番目の数値が省略されているだけで、同じになります。

使えるファイル形式はPNG形式かWebm形式、Mov形式など色々とあります。
画像では基本、PNG形式を使います。
映像系では最も軽いのはWebm形式と言われています。

合成モード(ブレンド)

ここでは元々あるレイヤーにある色とブレンドする画像の色の組み合わせる時の計算式によって合成後の色が決定されるという特徴を持っています。

HEX
(16進数)
sRGB
(10進数)

(HEX)

(HEX)

(HEX)

(sRGB)

(sRGB)

(sRGB)
#FFFFFF255,255,255FFFFFF255255255
#0000000,0,0000000000
#FF0000255,0,0FF000025500
ライム#00FF000,255,000FF0002550
#0000FF0,0,2550000FF00255
色のHEX,sRGBの表(3原色ver)

上記のようにデジタル映像の色情報はHEXとsRGBの数値によってきめられていますが、この数値を計算するのがブレンドということになります。
ここではわかりやすく白と黒になる数値を1.0と0.0として説明してみます。

HEXsRGB今回使う数値
_____white#FFFFFF255,255,2551.0
シルバー_____Silver#C0C0C0192,192,1920.75
グレー_____Gray#808080128,128,1280.5
_____Black#0000000,0,00.0
色のHEX,sRGBの表(白黒ver)

数値が大きくなるほど白に近づいて明るくなります。
数値が小さくなるほど黒に近づいて暗くなります。
この2点をしっかっり覚えておきましょう。

合成(乗算)

下にあるレイヤーの色と、合成用レイヤーの色を掛け合わせて合成します。
合成後は、元の色より暗い色になります。影などを塗る際に使用されます。

計算式としては、 0.5 × 0.5 = 0.25や0.5 × 0.9 = 0.45となりますので、必ず暗くなります。
※1.0 = (255,255,255) = (#FFFFFF)を超える数値は基本的に存在しないので、必ず暗くなります。
※この計算式なので乗算(設定中)のレイヤーの色が(255,255,255)の白だった場合にいくらかけても1.0倍なので色は不変になります。

参考になったブログを紹介します。

合成(加算)

下にあるレイヤーの色と、合成用レイヤーの色を足します。
デジタルで色を加算すると明るい色に変化します。

計算式としては、0.5 + 0.25 = 0.75や0.5 + 0.5 = 1.00 となりますので、必ず明るくなります。

合成(減算)

下にあるレイヤーの色と、合成用レイヤーの色を引いて合成します。
合成後は、元の色より暗い色になります。

計算式としては、0.5 – 0.25 = 0.25や0.5 – 0.5 = 0.00 となりますので、必ず暗くなります。

参考ブログサイト

以下参考記事ですが、クリスタの解説としてブレンド(合成モード)について数値を実例に出して解説されているページがあるので、より詳しく知りたい方はこちらへ飛んでいただけると幸いです。

こちらでは面白いブレンドの仕方を紹介してくれています。

こちらではOBS Studioの公式ガイドでの説明になっています。

予め準備しておく予備知識とプラグイン

ソース

ウィンドウキャプチャとゲームキャプチャ

基本的にはどちらでも構いませんが、注意点としてはゲームキャプチャの場合だと
1つのゲームウィンドウにつき1つのゲームキャプチャしか読み取ってくれないことが注意点です。

今回使うやり方の場合は、複数のゲームキャプチャを使うことができません。
やり方次第ですが、プラグインを使わないやり方であれば、ウィンドウキャプチャで取り込む必要が出てきます。

メディアソース

映像を流して、その中から一部だけを切り抜きたいといった時でもメディアソースは使えます。
この時はMov方式のファイルでは重くなるのでWebm方式のファイルを使うことを推奨されています。
Mov方式のファイルでも問題はないのですが、重くなってきたらWebm方式のファイルに変換して使うことを検討していいかもしれません。

画像

画像ももちろん使えます。
背景の一部だけを切り抜いて、枠に使うといった場合では画像を編集するよりはイメージマスクでフィルタをかける方が手間が抑えられます。
1枚のイメージマスク用の画像ファイルを用意するだけでいくつもの画像に流用することが可能です。

さらに軽量化を目指すならプラグイン導入

このプラグインを導入するメリットとしては、ゲームキャプチャでも可能だということです。
1つのゲームを取り込んだゲームキャプチャを複製(クローン)して同じ画面を使いまわせることができるので、どうしてもゲームキャプチャで使いたいというような方であればこのプラグインの導入は必要でしょう。

また、別の効果としてはOBS Studio自体の動作で軽量化することが可能な点が挙げられます。
次の2つの事例だと明らかにCPU使用量が異なっていて、Source Cloneで複製したほうが軽いということがわかっています。

Source Cloneで複製した場合

こちらだと動作は軽いみたいです。

タイトルソース備考
ゲーム画面ゲームキャプチャフィルタをなにも入れない
※フィルタを入れるとすべてに影響する
SC_ゲーム画面_〇〇〇Source Cloneで『ゲーム画面』を複製フィルタを入れる
SC_ゲーム画面_〇〇〇Source Cloneで『ゲーム画面』を複製フィルタを入れる
SC_ゲーム画面_〇〇〇Source Cloneで『ゲーム画面』を複製フィルタを入れる
Source Cloneで複製した場合

Source Cloneで複製しない場合

こちらだと動作は重いみたいです。
多くのソースを作らない限りは大きな影響を受けないですが、より多くの同じウィンドウを作ってしまう場合は、Source Cloneで作成した方がいい時はあります。

タイトル内容備考
ゲーム画面ゲームキャプチャorウィンドウキャプチャフィルタをなにも入れない
ゲーム画面_〇〇〇ウィンドウキャプチャフィルタを入れる
ゲーム画面_〇〇〇ウィンドウキャプチャフィルタを入れる
ゲーム画面_〇〇〇ウィンドウキャプチャフィルタを入れる
Source Cloneで複製しない場合

実際のやり方手順

【OBS|応用】シーンのおすすめ設定ガイド・ソースの便利な使い方|配信者向け

この手順については、上記に載せた通りのやり方を踏襲して載せています。
また、作成するにあたって事前に必要なことは以下にまとめています。

インフォメーション
事前に必要な項目
タイトル内容備考
DBD画面の大きさ1920×1080(1080p)今回作ったものがこの大きさだから
デスクトップPCの基本大きさにも合わせている
DBDでのUI100%作成したパーク枠は100%を基本にしている
また、DBDの設定の初期が100%なので合わせている
事前に必要な項目
シーンを複数用意する

配信用シーンと素材準備用シーンを用意します。

インフォメーション
シーン表
シーン名内容種類
配信用シーン:DBDプレイ用DBDを実際にプレイする時の画面配信用
配信用シーン:DBDリザルト用DBDでリザルト画面になった時に必要な画面配信用
ビデオ:DBD画面DBDのウィンドウを表示する専用のシーン素材準備用
ビデオ:DBD画面_パークDBDの右下にあるパーク枠部分だけを切り取る専用のシーン素材準備用
ビデオ:DBD画面_リザルトチャットDBDのリザルト時のチャット枠部分だけを切り取る専用のシーン素材準備用
シーン表
素材準備用シーンにソースを設置する(ver1)

ここでは配信用シーンに載せるために必要なものをまとめておくシーンとして準備をしていきます。
ウィンドウキャプチャかゲームキャプチャで入れていきます。
そしてSource Cloneで複製していきます。

インフォメーション
素材準備用シーン
シーン名内容(名前例)備考(ソース)
ビデオ:DBD画面DBD画面ウィンドウキャプチャ
orゲームキャプチャ
ビデオ:DBD画面_パークSC_DBD画面_パークSource Clone
➡(参照:DBD画面)
ビデオ:DBD画面_リザルトチャットSC_DBD画面_リザルトチャットSource Clone
➡(参照:DBD画面)
素材準備用シーン
ソースにフィルタを入れる

ここで予め準備しておいた画像を使ってフィルタを設定していきます。

インフォメーション
イメージマスクでの設定内容
タイトル内容備考
種別アルファマスク(カラーチャンネル)
パス画像ファイルのあるところを設定する
#ffffff(白)白のままで基本はOK
不透明度1.0000基本1.0000のままでOK
画像を拡大基本はOFF
イメージマスクでの設定内容
素材準備用シーンにソースを設置する(ver2)

こちらでは必要な人のみお使いください。

インフォメーション
素材準備用シーンに更にソース追加
シーン名内容備考(ソース)
ビデオ:DBD画面DBD画面ウィンドウキャプチャ
orゲームキャプチャ
ビデオ:DBD画面_パークSC_DBD画面_パーク
パーク枠
Source Clone(参照:DBD画面)
画像orメディア
ビデオ:DBD画面_リザルトチャットSC_DBD画面_〇〇〇
リザルト枠
Source Clone(参照:DBD画面)
画像orメディア
素材準備用シーンに更にソース追加
パークの枠にフィルタを入れる

必要な人はこれらを追加していくと見栄えで少し変化ができるでしょう。

この場合では、「メディアソース」で動画movで再生しているものをイメージマスクでフィルタしています。
このようにすることで動画素材の一部のところだけを切り抜くことも可能です。
配信用シーンにソースを設置する(ver1)

ここでは準備しておいたシーンを入れて行きます。
そして下にはDBD画面を置いて、その上にパークやリザルトチャットをそれぞれ置いていきます。

インフォメーション
配信用シーン
シーン名内容備考(ソース)
配信用シーン:DBDプレイ用ビデオ:DBD画面_パーク
ビデオ:DBD画面
シーン
シーン
配信用シーン:DBDリザルト用ビデオ:DBD画面_リザルトチャット
ビデオ:DBD画面
シーン
シーン
配信用シーン
設置したソースを配信画面の好きな位置に移動させる

パークやリザルトチャットの方を好きな位置に移動させておき、右下に立ち絵などを置けるスペースを作っていきます。

リザルト画面
配信用シーンに更に好きなソースを設置する(ver2)

立ち絵やLive2Dなどを配信画面に映すために載せて行きます。
ここからは自由に配信画面をいじって自分好みにしていくといいと思います。

インフォメーション
配信用シーンに更にソース追加
シーン名内容備考(ソース)
配信用シーン:DBDプレイ用立ち絵orLive2D等
ビデオ:DBD画面_パーク
ビデオ:DBD画面
画像orゲームキャプチャ
シーン
シーン
配信用シーン:DBDリザルト用立ち絵orLive2D等
ビデオ:DBD画面_リザルトチャット
ビデオ:DBD画面
画像orゲームキャプチャ
シーン
シーン
配信用シーンに更にソース追加

フレームについて他の素材が欲しい場合

それぞれで自作して頂く事でも可能です。
星詠れいの場合は、ペイントで作成しました。
もっと楽に作るならクリスタやイラスタなどのイラストレーターがよく使うようなものが必要になるんじゃないかなと思います。レイヤー機能があり、レイヤーまで保存することが可能なので修正が効きやすいです。
Windows標準機能のペイントだとレイヤーまで保存することができないので、再び修正する時が大変ですし、使い具合にも少し難がありました。ですので、クリスタやイラスタなどをお持ちの場合はそちらで作成して頂くことでも可能です。

インフォメーション
イメージマスクに使う素材一覧

非常に分かりづらくなってしまい申し訳ないですが、右下にパークの基準線を描いたものになります。
自作したい方は使ってみてくださいね。
基準線をもとに模様をつけていってもいいかもしれませんね。

上記のように作ることが可能です。
参考にして作ってみてくださいね。
ちなみに星詠れいの配信中に使っているものになります。

もし使ってくれるのであれば、星詠れいにもお話を聞かせてくれると嬉しいです!

シーン遷移について

【OBS|プラグイン】画像認識してシーンを自動切り替えする|DBD特化[Advance Scene Switcher]

試合中の画面とリザルト用の画面を切り替えるときにオート化したいと考えた人にはこの記事が参考になるかもしれません。
自動化してくれることによって配信中に配信者がやる作業の一部を減らすことが可能になり、他のことへのタスクが増えるので楽になるかもしれません。参考にしてみたい方は見て行ってくれると嬉しいです。

おわりに

この記事で参考になりましたら、ぜひともフォローしてください!
色々書かれていますが、あくまでも一例ということで皆様のOBSの構築への一つの参考となっていただければと思います。

OBS 総合まとめ

OBSの基本設定

DBD配信者におすすめ

OBS 関連記事

星詠れいのおすすめ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です