おはこんばんにちわ🎵
ここではフィルタのイメージマスク/ブレンドを詳しく紹介していきます。
そして、DBDを配信するときにパークの表示場所を変えてみたい等をして、立ち絵等を右下に置きたいと考えた場合に必要なことを載せてみました。
よかったら参考にしてみて下さい。
ここではソースでのイメージマスク/ブレンドについて解説していきます。
イメージマスクを使っての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 | HEX 合計 | イメージマスク での挙動 | 下のレイヤーの描写 マスクを通した結果 |
|---|---|---|---|---|
| 白________White | 255,255,255 #ffffff | 765 | 完全に透過される | 該当の部分のみ描写される ⇨映し出される |
| 黄色______Yellow | 255,255,0 #FFFF00 | 510 | かなり透過される | 透過される際の色に変化なし ⇨かなり映し出される |
| マゼンタ_Magenta | 255,0,255 #FF00FF | 510 | かなり透過される | 透過される際の色に変化なし ⇨かなり映し出される |
| シアン_____Cyan | 0,255,255 #00FFFF | 510 | かなり透過される | 透過される際の色に変化なし ⇨かなり映し出される |
| 赤_________Red | 255,0,0 #FF0000 | 255 | 少し透過される | 透過される際の色に変化なし ⇨少し映し出される |
| ライム_____Lime | 0,255,0 #00FF00 | 255 | 少し透過される | 透過される際の色に変化なし ⇨少し映し出される |
| 青________Blue | 0,0,255 #0000FF | 255 | 少し透過される | 透過される際の色に変化なし ⇨少し映し出される |
| 黒_______Black | 0,0,0 #000000 | 0 | 透過されない | 非表示で透過される ⇨映し出されない |
検証した結果、おそらくHEXの数値の合計で透過度を決められているようでした。
最低値が0（0%）で、最大値が255×3の765（100%）になって、割合で透過率が変わる感じです。
なので、完全に透過するものとしないものを分ける場合は白黒画像で問題ないでしょう。
| イメージマスク 画像の色 | HEX sRGB | 内容＆備考 |
|---|---|---|
| 白________White | 255,255,255 #ffffff | 透過したい部分に塗る |
| 黒_______Black | 0,0,0 #000000 | 透過させたくない部分に塗る |
なお、今回で使うフィルタはこのアルファマスク（カラーチャンネル）になります。
アルファ値によって透過度を変えるイメージマスクです。
| イメージマスク 画像 | イメージマスク での挙動 | 下のレイヤーの描写 マスクを通した結果 | 備考 |
|---|---|---|---|
| 不透明の部分 アルファ値が255 | 透過される | 該当の部分のみ描写される ⇨映し出される | 普段の画像は基本 これになることが多い |
| 半分透過の部分 アルファ値が128 | 半分透過される | ⇨半分透過したように映し出される | |
| 透明化された部分 アルファ値が0 | 透過されない | 非表示で透過される ⇨映し出されない |
上部が透過率0%（白い）で、下部が透過率100%（背景の色になる）のグラデージョンになっています。
検証をした結果アルファ値の数値（割合）で透過率が変わってきました。
ちょっと難しいので基本的には使わないほうがいいかもしれません。
また、この機能を使うのであればアルファ値を入れたPNGファイル形式を作れるソフトが必要になるので、クリスタやイラスタなどを持っていない方にはそもそも作る難易度が高いと思われます。
アルファ値の透過情報の入った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） |
|---|---|---|---|---|---|---|---|---|
| 白 | #FFFFFF | 255,255,255 | FF | FF | FF | 255 | 255 | 255 |
| 黒 | #000000 | 0,0,0 | 00 | 00 | 00 | 0 | 0 | 0 |
| 赤 | #FF0000 | 255,0,0 | FF | 00 | 00 | 255 | 0 | 0 |
| ライム | #00FF00 | 0,255,0 | 00 | FF | 00 | 0 | 255 | 0 |
| 青 | #0000FF | 0,0,255 | 00 | 00 | FF | 0 | 0 | 255 |
上記のようにデジタル映像の色情報はHEXとsRGBの数値によってきめられていますが、この数値を計算するのがブレンドということになります。
ここではわかりやすく白と黒になる数値を1.0と0.0として説明してみます。
| 色 | 色 | HEX | sRGB | 今回使う数値 |
|---|---|---|---|---|
| 白 | _____white | #FFFFFF | 255,255,255 | 1.0 |
| シルバー | _____Silver | #C0C0C0 | 192,192,192 | 0.75 |
| グレー | _____Gray | #808080 | 128,128,128 | 0.5 |
| 黒 | _____Black | #000000 | 0,0,0 | 0.0 |
数値が大きくなるほど白に近づいて明るくなります。
数値が小さくなるほど黒に近づいて暗くなります。
この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方式のファイルに変換して使うことを検討していいかもしれません。
もちろんMP4ファイル形式でも問題ありません。
画像ももちろん使えます。
背景の一部だけを切り抜いて、枠に使うといった場合では画像を編集するよりはイメージマスクでフィルタをかける方が手間が抑えられます。
1枚のイメージマスク用の画像ファイルを用意するだけでいくつもの画像に流用することが可能です。
このプラグインを導入するメリットとしては、ゲームキャプチャでも可能だということです。
1つのゲームを取り込んだゲームキャプチャを複製（クローン）して同じ画面を使いまわせることができるので、どうしてもゲームキャプチャで使いたいというような方であればこのプラグインの導入は必要でしょう。
また、別の効果としてはOBS Studio自体の動作で軽量化することが可能な点が挙げられます。
次の2つの事例だと明らかにCPU使用量が異なっていて、Source Cloneで複製したほうが軽いということがわかっています。
こちらだと動作は軽いみたいです。
| タイトル | ソース | 備考 |
|---|---|---|
| ゲーム画面 | ゲームキャプチャ | フィルタをなにも入れない ※フィルタを入れるとすべてに影響する |
| SC_ゲーム画面_〇〇〇 | Source Cloneで『ゲーム画面』を複製 | フィルタを入れる |
| SC_ゲーム画面_〇〇〇 | Source Cloneで『ゲーム画面』を複製 | フィルタを入れる |
| SC_ゲーム画面_〇〇〇 | Source Cloneで『ゲーム画面』を複製 | フィルタを入れる |
こちらだと動作は重いみたいです。
多くのソースを作らない限りは大きな影響を受けないですが、より多くの同じウィンドウを作ってしまう場合は、Source Cloneで作成した方がいい時はあります。
| タイトル | 内容 | 備考 |
|---|---|---|
| ゲーム画面 | ゲームキャプチャorウィンドウキャプチャ | フィルタをなにも入れない |
| ゲーム画面_〇〇〇 | ウィンドウキャプチャ | フィルタを入れる |
| ゲーム画面_〇〇〇 | ウィンドウキャプチャ | フィルタを入れる |
| ゲーム画面_〇〇〇 | ウィンドウキャプチャ | フィルタを入れる |
【OBS｜応用】シーンのおすすめ設定ガイド・ソースの便利な使い方｜配信者向け
この手順については、上記に載せた通りのやり方を踏襲して載せています。
また、作成するにあたって事前に必要なことは以下にまとめています。
事前に必要な項目
| タイトル | 内容 | 備考 |
|---|---|---|
| DBD画面の大きさ | 1920×1080(1080p) | 今回作ったものがこの大きさだから デスクトップPCの基本大きさにも合わせている |
| DBDでのUI | 100% | 作成したパーク枠は100%を基本にしている また、DBDの設定の初期が100%なので合わせている |
配信用シーンと素材準備用シーンを用意します。
シーン表
| シーン名 | 内容 | 種類 |
|---|---|---|
| 配信用シーン：DBDプレイ用 | DBDを実際にプレイする時の画面 | 配信用 |
| 配信用シーン：DBDリザルト用 | DBDでリザルト画面になった時に必要な画面 | 配信用 |
| ビデオ：DBD画面 | DBDのウィンドウを表示する専用のシーン | 素材準備用 |
| ビデオ：DBD画面_パーク | DBDの右下にあるパーク枠部分だけを切り取る専用のシーン | 素材準備用 |
| ビデオ：DBD画面_リザルトチャット | DBDのリザルト時のチャット枠部分だけを切り取る専用のシーン | 素材準備用 |
ここでは配信用シーンに載せるために必要なものをまとめておくシーンとして準備をしていきます。
ウィンドウキャプチャかゲームキャプチャで入れていきます。
そしてSource Cloneで複製していきます。
素材準備用シーン
| シーン名 | 内容（名前例） | 備考（ソース） |
|---|---|---|
| ビデオ：DBD画面 | DBD画面 | ウィンドウキャプチャ orゲームキャプチャ |
| ビデオ：DBD画面_パーク | SC_DBD画面_パーク | Source Clone ➡（参照：DBD画面） |
| ビデオ：DBD画面_リザルトチャット | SC_DBD画面_リザルトチャット | Source Clone ➡（参照：DBD画面） |
ここで予め準備しておいた画像を使ってフィルタを設定していきます。
解像度：1920×1080
File Name例：DBD_Imagemask_Perk.png
解像度：1920×1080
File Name例：DBD_Imagemask_Result_Chat.png
イメージマスクでの設定内容
| タイトル | 内容 | 備考 |
|---|---|---|
| 種別 | アルファマスク（カラーチャンネル） | |
| パス | 画像ファイルのあるところを設定する | |
| 色 | #ffffff（白） | 白のままで基本はOK |
| 不透明度 | 1.0000 | 基本1.0000のままでOK |
| 画像を拡大 | 基本はOFF |
こちらでは必要な人のみお使いください。
素材準備用シーンに更にソース追加
| シーン名 | 内容 | 備考（ソース） |
|---|---|---|
| ビデオ：DBD画面 | DBD画面 | ウィンドウキャプチャ orゲームキャプチャ |
| ビデオ：DBD画面_パーク | SC_DBD画面_パーク パーク枠 | Source Clone（参照：DBD画面） 画像orメディア |
| ビデオ：DBD画面_リザルトチャット | SC_DBD画面_〇〇〇 リザルト枠 | Source Clone（参照：DBD画面） 画像orメディア |
必要な人はこれらを追加していくと見栄えで少し変化ができるでしょう。
解像度：1920×1080
File Name例：DBD_imagemask_Perk_Frame.png
解像度：1920×1080
File Name例：DBD_Imagemask_Result_Chat.png
このようにすることで動画素材の一部のところだけを切り抜くことも可能です。
ここでは準備しておいたシーンを入れて行きます。
そして下にはDBD画面を置いて、その上にパークやリザルトチャットをそれぞれ置いていきます。
配信用シーン
| シーン名 | 内容 | 備考（ソース） |
|---|---|---|
| 配信用シーン：DBDプレイ用 | ビデオ：DBD画面_パーク ビデオ：DBD画面 | シーン シーン |
| 配信用シーン：DBDリザルト用 | ビデオ：DBD画面_リザルトチャット ビデオ：DBD画面 | シーン シーン |
パークやリザルトチャットの方を好きな位置に移動させておき、右下に立ち絵などを置けるスペースを作っていきます。
立ち絵やLive2Dなどを配信画面に映すために載せて行きます。
ここからは自由に配信画面をいじって自分好みにしていくといいと思います。
配信用シーンに更にソース追加
| シーン名 | 内容 | 備考（ソース） |
|---|---|---|
| 配信用シーン：DBDプレイ用 | 立ち絵orLive2D等 ビデオ：DBD画面_パーク ビデオ：DBD画面 | 画像orゲームキャプチャ シーン シーン |
| 配信用シーン：DBDリザルト用 | 立ち絵orLive2D等 ビデオ：DBD画面_リザルトチャット ビデオ：DBD画面 | 画像orゲームキャプチャ シーン シーン |
それぞれで自作して頂く事でも可能です。
星詠れいの場合は、ペイントで作成しました。
もっと楽に作るならクリスタやイラスタなどのイラストレーターがよく使うようなものが必要になるんじゃないかなと思います。レイヤー機能があり、レイヤーまで保存することが可能なので修正が効きやすいです。
Windows標準機能のペイントだとレイヤーまで保存することができないので、再び修正する時が大変ですし、使い具合にも少し難がありました。ですので、クリスタやイラスタなどをお持ちの場合はそちらで作成して頂くことでも可能です。
イメージマスクに使う素材一覧
これの基準線が１つ下の画像になります。
非常に分かりづらくなってしまい申し訳ないですが、右下にパークの基準線を描いたものになります。
自作したい方は使ってみてくださいね。
基準線をもとに模様をつけていってもいいかもしれませんね。
File Name例：DBD_imagemask_Perk_Frame_Star.png
上記のように作ることが可能です。
参考にして作ってみてくださいね。
ちなみに星詠れいの配信中に使っているものになります。
もし使ってくれるのであれば、星詠れいにもお話を聞かせてくれると嬉しいです！
試合中の画面とリザルト用の画面を切り替えるときにオート化したいと考えた人にはこの記事が参考になるかもしれません。
自動化してくれることによって配信中に配信者がやる作業の一部を減らすことが可能になり、他のことへのタスクが増えるので楽になるかもしれません。参考にしてみたい方は見て行ってくれると嬉しいです。
この記事で参考になりましたら、ぜひともフォローしてください！
色々書かれていますが、あくまでも一例ということで皆様のOBSの構築への一つの参考となっていただければと思います。
OBS 総合まとめ
OBSの基本設定
DBD配信者におすすめ
OBS 応用設定
OBS プラグイン
おすすめ特選6記事
DBDおすすめ特選4記事
その他のおすすめ
星詠れいのTwitchリンク
こちらは主に活動しているTwitchのチャンネルです。
こちらの方で配信を行っています。
基本的にはアーティストを使って世界1位のカラスダウン数を目指していくというものになっています。
星詠れい自体はリアルの方で発達障害や社会不安障害などを抱えており、一般的に言うとものすごく人見知りします。そしてあまりしゃべらないような人です。
配信でも基本的には自発的に話すようなことはしないのですが、話題を振って頂いたら基本的にはお返しするように頑張っています。
他の多くの配信者のようにおしゃべりが得意といったそういった特徴は持ち合わせていません。
そこで配信にとっては不利になってしまいます。
それでもDBDのアーティストって楽しいんだよという魅力を伝えていくために活動しています。
よければぜひ遊びに来てください。お待ちしています！
星詠れいのYouTubeリンク
こちらはYouTubeの星詠れいのチャンネルになります。
こちらでは、配信での切り抜きがメインとなります。
主にプレイするゲームはDead by Daylightです。その中でもアーティストのみを使っています。
主に取り扱う切り抜きは以下の通りです。
・全滅をとるのに非常に大変だった試合
・難易度の高いチェイス中2連カラスを達成した試合
・一人でも通電後に逃げられた人がいた試合
になります。他の方とは異なる形のものをあげていきます。
星詠れいは負けても全然問題ないですし、それも魅力の1つだと思っています。
むしろ、負けた試合から何かを学べることも大事だと思いますので恥など感じず公開していきます。
よかったらYouTubeのチャンネルを登録してくれると嬉しいです。
よろしくお願いします。
