とぱーず茶漬のブログ

@topazgravity がtwitterの延長で書いているぞ。実質長文ツイート。

【ポケモン剣盾】OBSの配信画面を簡単にカスタマイズする

暇なとき、ちょいちょいゲーム配信する時がある。

配信ページはここ。とぱーず茶漬-Twitch

 

ポケモン対戦を配信することが多いんだけど、今まではゲーム画面をそのまま流していた。

f:id:topazgravity:20200510152755p:plain

映っているのは腕組みおじさん。

ここに自分のパーティの情報を常時表示させたいと思い立ち、カスタマイズすることに。

f:id:topazgravity:20200510153245p:plain

最終的には下部にTwitter IDと自分のパーティ情報を載せて、こうなった。

 

 

 

配信機器

Amazonのセールで16万円くらいで買ったゲーミングPC (Windows)

ピカブイモデルのSwitch(自慢)

・キャプチャーボード:Elgato Game Capture HD60 S 

・定番のSONYのマイク(このご時世だからか執筆時点では高騰してた)

SONY エレクトレットコンデンサーマイクロホン PC/ゲーム用 PCV80U ECM-PCV80U
 

 

配信用ソフト 

・配信ソフト:OBS Studio

・ゲーム画面のプレビュー:キャプチャーボードについてきたやつ

obsproject.com

 

素材作成に使ったソフト

・切り取り&スケッチ

  →Windows10標準搭載。

GIMP

  →画像編集ソフト。背景透過に利用。無料の中では最強レベル。

・DaVinci Resolve

  →動画編集ソフト。画像を動かしたかったので利用。無料なのに強い。

 

www.gimp.org

www.blackmagicdesign.com

 

 

配置するものを考える

・自分が使ってるパーティの情報

  →やりたいと思い立った主たる理由はこれ。必須。

・相手が使ってるパーティの情報

  →対戦する度にスクショ取り直さなきゃいけなくて面倒なので没。

SNSのID

  →余白ができたのでTwitterのIDを載せることに。

Webカメラの映像

  →顔バレしたくないので没。

 

画像を用意して配置する

ポケモンの情報

画像の用意

簡易的にSwitchのスクショで済ませる。ポケモンボックスの画面にパーティを配置して、もちもの整理に切り替えてスクショ。

Windows10標準搭載の「切り取り&スケッチ」を使えば、自分のパーティ部分だけ切り取れる。

f:id:topazgravity:20200510170810p:plain

 

GIMPを使って背景を切り抜く

手を抜くなら切り取った画像をそのまま使っても良いけど、オシャレ感を出したかったのでもうひと手間。背景透過させる。
画像のうちポケモン以外の場所を透明にする作業。

f:id:topazgravity:20200510171907p:plain

このようにゲーム画面にポケモンの頭を被せて配置をしても邪魔にならなくなる。

 

背景透過手順

個人的な好みで、フリーの画像編集ソフト「GIMP」を使う。 

バージョンは2.10.14。

f:id:topazgravity:20200510172451p:plain

 ファイル > 開く/インポート からスクショした画像を選択する。

 

f:id:topazgravity:20200510172945p:plain

「ファジー選択」を選択して背景の適当なところをクリックすると、だいたい同じ色の領域が選択される。

 

f:id:topazgravity:20200510173214p:plain

キーボードのDeleteを押すと選択領域が削除される。灰色のモザイク柄の部分は透明を表している。

1回だけだと端のほうが汚いままなので、色が残った部分をクリックしてDeleteを何回かやればそこそこ綺麗になる。

 

f:id:topazgravity:20200510173340p:plain

ポケモンやもちものの周りに白い部分が残っているが、配信画面では小さすぎて気にならない。そんなに丁寧にやらなくてOK。

もっと丁寧に切り抜く方法もあるが、わりと面倒なので割愛。

 

f:id:topazgravity:20200510173703p:plain

背景がだいたい透明になったら、ファイル > Export As...をクリックすると保存場所を選ぶウィンドウが表示されるので、適当な場所に画像で出力(エクスポート)する。

日本語化の影響で若干表示がおかしくなっていて、多分「名前をつけてエクスポート」って訳される予定の箇所だと思う。

ファイルの拡張子は.pngにすること。ファイル名末尾に.pngと直書きすればGIMPが勝手にpngにしてくれる。.jpgにしてしまうと透明情報が保存されないので注意。

 

f:id:topazgravity:20200510174146p:plain

エクスポート時にこんな画面が出てくるが、基本的にそのままエクスポートを押してしまってOK。

さっき選んだ保存場所に背景が透過された画像が保存されるので、これにて背景透過完了。

 

OBSに配置する

f:id:topazgravity:20200510180723p:plain

OBSでソースタブの+ボタン > 画像 > 新規作成 > OK で画像ファイルを選んで配置できる。

配置後は上のプレビュー画面でクリックすれば場所・サイズの調整ができる。

 

f:id:topazgravity:20200510191418p:plain

背景が黒だと寂しいので、同じようにして背景も追加しておく。

ソースの一覧をドラッグ・アンド・ドロップすれば表示順序を変えられるので、背景画像は一番下にしておくのが良い。

ちなみに「背景 フリー素材」とかで検索して持ってきた。

 

SNSのID

f:id:topazgravity:20200510180935p:plain

こんな感じでアイコンとIDを表示させる。

 

アイコンを用意

好きな画像を置けばそれで終わりだが、ただの四角い画像だと寂しいと思ったので丸型にして青い枠をつけることに。

 

GIMPでアイコンを編集する

パーティ画像の準備と同様にGIMPを利用。

f:id:topazgravity:20200510181559p:plain

ファイル > 開く/インポート からアイコンに使いたい画像を選択。

 

 

f:id:topazgravity:20200510181940p:plain

右下のレイヤーを右クリックして「アルファチャンネルの追加」を押す。

画像によっては、これをやらないと透明領域が作れない場合がある。

 

f:id:topazgravity:20200510181706p:plain

左上の楕円選択を選択する。

f:id:topazgravity:20200510181748p:plain

いい感じに選択。

 

f:id:topazgravity:20200510182108p:plain

選択 >選択範囲の反転 をクリック。こうすることで、円で囲った部分以外を選択状態にできる。

 

f:id:topazgravity:20200510182237p:plain

Deleteキーで削除。円の外側が透明になる。

これでアイコン自体の編集は完了。これから青い外枠を作る。

 

f:id:topazgravity:20200510182946p:plain

上部のメニューから 画像 > キャンバスサイズの変更 をクリック。こんな画面が出てくる。 

枠を作る余白が無いので、「幅」と「高さ」を1割増しくらいに増やす

この画面だと、元が280×280なので、310×310くらいかな。

オフセットの「中央」をクリックしてからリサイズ。

 

f:id:topazgravity:20200510183747p:plain

右下のレイヤーを右クリックして「新しいレイヤーの追加」。

 

f:id:topazgravity:20200510183824p:plain

 こんな画面が出てくるのでそのままOK。

 

f:id:topazgravity:20200510184540p:plain

最初に使った楕円選択ツールで、自分の画像より一回り大きな円を選択する。

 

f:id:topazgravity:20200510184619p:plain

左側の青四角部分をクリックすると塗りつぶし色を変更できるので、青色に変更する。

塗りつぶしツールを選んで、さっき作った一回り大きな円を塗りつぶす。

 

f:id:topazgravity:20200510185604p:plain

青い円がアイコン画像の上に重なった状態になっている。

塗りつぶした部分を右クリック > レイヤー > 重なり > レイヤーを最背面へ をクリックする。

 

f:id:topazgravity:20200510190105p:plain

青い円がアイコン画像の背面に行き、枠がついたように見えるようになる。

 

f:id:topazgravity:20200510191609p:plain

あとはポケモンの情報と同じように、ファイル > Export As... からエクスポートして、OBSに配置する。

 

IDを入れる

f:id:topazgravity:20200510192233p:plain

OBSのソースタブの+ボタン > テキスト > 新規作成 > OK で作成画面が出てくる。

文字入れ・フォント選択・テキスト色選択する。

 

f:id:topazgravity:20200510192519p:plain

OBSで配置する。ここまでで一旦完成。

 

アイコンをアニメーションさせる

一定時間ごとにアイコンがピョコっと動いたらオシャレなんじゃないかと思い立ち、挑戦してみることに。

DaVinci Resolveでアニメーション映像を作る

インストールし設定変更から日本語化のみ行った状態から初める。

(動画編集ソフトなんて今日初めて触ったのであんまアテにならないかも。)

f:id:topazgravity:20200510195004p:plain

右下の新規プロジェクトをクリック

 

f:id:topazgravity:20200510195042p:plain

後ほど使うグリーンバック用の画像を適当に拾ってきて、さっき作ったアイコン画像と一緒にメディアプールにドラッグ・アンド・ドロップ

 

 

f:id:topazgravity:20200510195127p:plain

右クリックで新規タイムラインを作成をする

 

f:id:topazgravity:20200510195258p:plain

下の左から3番目のマークをクリックしエディット画面に移る

 

f:id:topazgravity:20200510195748p:plain

下のビデオ1のところにグリーンバック用画像をドラッグ・アンド・ドロップする。画像サイズ・表示時間を調整して0秒-20秒までの間、画面いっぱいに緑色が表示されるようにする。

画像サイズはプレビュー左下の四角形を押すと変更できる。

 

f:id:topazgravity:20200510200238p:plain

ビデオ1の上にビデオ2があるので、アイコン画像をドラッグ・アンド・ドロップする。

サイズを小さくして、0秒-20秒までの間表示されるように調整する。

 

f:id:topazgravity:20200510200750p:plain

右上のインスペクタをクリックし、

タイムライン上 ビデオ2の横のアイコン画像をクリックし選択する。

画面右側の位置の横の◆をクリックして赤色の◆になることを確認。

 

f:id:topazgravity:20200510201015p:plain

タイムラインの波形マークをクリックすると、位置の移動の仕方を設定する画面になる。

 

f:id:topazgravity:20200510201714p:plain

なんやかんやで(投げやり)、最後のほうでピョコっと上にするように設定

 

f:id:topazgravity:20200510202501p:plain

画面下の一番右側「デリバー」画面に移動する。

左上のレンダー設定でフォーマットをMP4にし、レンダーキューに追加する。

右側の「レンダー開始」をクリックすると、動画が出力される。

 

OBSでグリーンバック透過を設定し配置する

f:id:topazgravity:20200510221125p:plain

OBSのソースタブの+ボタン > メディアソース > 新規作成 > OK

参照から先程作成した動画ファイルを選択し、繰り返しにチェックを入れてOK。

 

f:id:topazgravity:20200510221224p:plain

今追加したメディアソースを右クリックし、フィルタを選択。

 

f:id:topazgravity:20200510221527p:plain

クロマキーを選択。

 

f:id:topazgravity:20200510221712p:plain

緑色の領域が消える。

緑色に近い色が消えてしまう場合は「類似性」のバーを調整すれば解決できる。

色キーの設定を変えれば緑以外を透過することも可能なので、動画の背景と合わせて変えれば他の色で透過も可能。アイコンが緑色の人はお試しあれ。

 

f:id:topazgravity:20200510222040p:plain

アイコンの位置に配置する。

これで動画がループ再生され続け、数秒に一回ピョコっと動くアイコンが出来上がる。

 

最後に

めちゃ長いマニュアルみたいになった。多分これ、章ごとに記事分けたほうが読みやすいやつだったな。

個人ブログの記事として投稿しても誰が参考にするのか知らんけど、自己満足なので問題なし。

ちなみにここまで準備して配信したけど、いつもより視聴者少なかったしパーティが弱くて負け越した。