実況配信用 格闘ゲーム大会使用スコアツールの導入方法(OBS用)
こんばんは1年ぶり。
へー前回氷について書いたんだーへー…あれから1年かー…
そんなこんなで久々にブログを立ち上げたのも理由があって、某所で「海外大規模格闘ゲーム大会に使われているあのスコアツールを自分でも使いたい!」というのを見かけ導入しよう、という話から始まります。
ちなみにそれはXsplitとかOpen Broadcast Software(OBS)とか対応なんだけど、OBSの導入ができない!英語読めねえよアメリケン!ということで日本語説明テキストにして簡単に紹介したいと思います。
1.DLするもの
・よくflash系実況配信サービスで使われているやつ。これの細かい説明は省きます。
・OBSに入れる完全透明のブラウザプラグイン。これにスコアツールで出力したものを載せる。
・これが今回導入する「海外大規模格闘ゲーム大会に使われているあのスコアツール」。導入して見ればわかる。
◎browserfiles.rar - File Shared from Box
・これがスコアツールに使う画像だのいろいろはいってるテンプレ集。リンク切れてたらごめんね。
◎browserfiles_layout.xml - File Shared from Box
・これがStreamControl用ダイアログのレイアウトxml。いらなそうだけど一応必要。
2.導入
※ScoreBoard-default.htmlの動作確認のみ。bracketその他に関しては動作確認していませんのでご了承願います。
1.OBSにCLR Browser Pluginを入れる。
DLしたものを解凍し、(フォルダ1つとDLL1つ)
[インストールフォルダ]\OBS\plugin\
※私の場合 C:\Program Files (x86)\OBS\plugin\
に解凍して出てきたものをそのまま入れる。
ちなみに私がDLしたものは32bitです。使用しているOBSのアーキテクトに合わせて下さい。
2.OBS起動。DLLがはいっているか確認するため、OBS立ち上げて下部中央の「ソース」枠上で右クリック→追加→CLR Browserが項目にあることを確認。
3.確認できたら、StreamControlとOBSの連結導入。
StreamControlを立ち上げ、上部の歯車アイコンクリック→Configuration選択。
Dialogの「Xsplit Path.」にDLしたbrowsetfilesのフォルダをリンク。
例)Brouse.ボタンを押し、
C:Users\[ユーザー名]\Documents\browsetfiles\
を指定し決定。
4.同Dialogの「Layout File」にDLしたbrowserfiles_layout.xmlをリンク。
リンクし終えたらOKを押してDialogを閉じる。
3.4.をやってリンクがきちんとしていればこうなると思います。場所はそれぞれで違うと思います。
5.StreamControlのGUIが変わってると思いますので、スコアボードの動作確認。
プレイヤー名を適当に入力。
6.念のためOBS再起動し、下部中央の「ソース」枠上で右クリック→CLR Browserをクリック。ソースにCLR Browserを追加。
出てきたダイアログの「URL」内にbrowserfilesフォルダ内にある「ScoreBoard-default.html」を指定。
下の「Dimensions」を1280x100?を指定。理由は9参照。
OKを押すとシーンに追加される。ScoreBoard-default.htmlで使用されているサイズがwidth:1280固定になっているので、要調整。
以上です。たぶんこうなると思います。
こうなったら成功です。ソースをオンにした時きちんとアニメーションも適用されてるかと思います。
このCLR browser pluginとbrowserfilesの組み合わせはhtml/cssでできるので、スコアツールだけではなく、配信中のカットイン編集にも使用できたりいろいろなのでカスタマイズは無限大です。
ちょっと走り書きなので後で整理します。
一旦アップロード。