格ゲー用の配信レイアウト（オーバーレイ）を作りました
表題の通りです。以前にもちらっと記事に書きましたが、ゲーム配信用の画面レイアウト（一般的にオーバーレイと呼ばれる、以下オーバーレイと表記）を作成しましたので配布と使い方を説明いたします。
このオーバーレイが役に立ちそうな方
・PCを経由してOBSなどのソフトを使い配信している
・ある程度HTMLやCSSがわかる
・多少のトラブルは自分で解決できる
・配信の解像度は1280*720px
あまり向かない方
・PS4の配信機能のみでゲーム配信（PC経由が必須なため）
・HTML・CSSの知識が全くない（なくてもいけますが、カスタマイズできて便利です）
格ゲーを配信してて、オーバーレイを使いたい！と言う方は是非とも読み進めてください。なお、今回はいふするのはwindowsのみです。
どうやってオーバーレイを実現するのか
nodeCGという、配信に特化したnodejsフレームワークを使います。
公式サイトが英語だけなので面食らうかと思いますが、日本の方が解説された記事もありますので参考に
端的に言うとjavascriptでローカルにサーバを立て、その中でwebアプリを動かし配信画面に載せると言う事です。
OBSで例えるならば、映像ソースの中に「ブラウザ」がありURLアドレスを記入する事でHTML/CSSのデザインを表示させる機能を使います。
nodeCGを起動させる事によって上記URLが稼働し、ゲーム画面と共に配信することができると言うものです。nodeCGの特徴としては、配信に映る画面だけでなくバックエンド（管理画面）も全てブラウザ上で動くところと云えましょう。
nodeCGのインストール
nodeCGのインストールはコマンドプロンプトを使用したりnode.jsを事前にインストールしたりとプログラマ以外には煩雑なため、全部入りでダブルクリックするだけで起動するファイルを用意しました。以下DLしてください
解凍したら、できたフォルダをPCの好きな場所に移動させてください。
フォルダを開くと色々ファイルがありますが、その中の「start.cmd」をダブルクリックしてください
コマンドプロンプトが開き、
のような表示になっていれば起動成功です。
終了するにはコマンドプロンプトを閉じるかctrl+Cを押します。（なので配信中はずっと閉じずに起動していてください。）
ここに表示されているhttp://localhost:9090にブラウザでアクセスしてください。
このような画面が表示されているはずです。こちらがワークスペース（管理画面）となります。見てわかる通りスコアや名前の記入を行います。
配信に写すのはgraphicsと言う画面になります。メニュー右上、目のアイコンをクリックします
このような画面になります。一覧が表示されてますので「SCORE_LONG.HTML」をクリックしてみてください
新しいウィンドウが開き、真っ白な画面の上部にスコアボードが表示されていると思います。
ここでワークスペースに戻って1P「+1」ボタンを押してみてください。リアルタイムで1数字が増えたと思われます。このようにワークスペースの変更が即座に反映されますので、配信でもリアルタイムで反映されると言うわけです。
まず、シンプルな「対戦スコアボード」から説明します。
矢印が画面の対応になります。変更して試してください。
「タイトル」「P1（名前）」「P2（名前）」はボタン「名前反映」を押すまで反映されませんのでご注意ください。スコアは即時反映です。
「紅白戦名前呼出」は後述の「紅白メンバー表」で対戦中になっているメンバーの名前が呼び出されます。その場合のスコアはリセットされます。
「紅白メンバー表」を説明します。
対応図になります。画像は紅組のみですが、白組も同様になります。
上から順に進行していくイメージで、チェックボックス が付いているのが現在対戦中のメンバーになります。グレーが敗者で白が待機中。敗者にチェックをつけることはできません。対戦中のチェックボックス を外すと全員待機になります。「消」ボタンで敗者・待機中メンバーを削除できます。人数が多い時など逐次削除や追加を行う事で運用できると思います。
テキストエリアに改行で参加者の名前を入れ、「追加」ボタンで追加できます。
対戦中のメンバーは消せません。また、待機中はドラッグで順番入れ替えができます。追加・削除・入れ替えのいずれも「保存・書き出し」ボタンを押すまでは反映されません。「全削除」ボタンのみ即反映されます。ご注意ください。
以上が基礎的なワークスペースの使い方になります。
配信の載せ方
OBSなどのソース追加で「ブラウザ」を選びgraphics一覧の任意の画面URLをソースとして貼るだけです。「COPY URL」で簡単にコピーできます。画面サイズは必ず「1280*720px」にしてください。
SCORE_LONG.HTML と SCORE_SHORT.HTML の違いですが、単純に位置や長さが違うだけです。ゲームによって使い分けてください。
参考までに
SCORE_LONG.HTML SAMURAI SPIRITS、KOF14など
SCORE_SHORT.HTML ストV、GBVSなど
他、GGXrdやBBTAGでも邪魔にならない配置を確認しましたので、ゲームに合わせて変えていただきたいと思います。現在出ているほとんどの格ゲーに対応できると思われます。
表示部分は単純なHTMLとCSSでできていますので、画像の差し替えやCSS書き換えなどでカスタマイズできます。こちらのやり方は追い追い説明したいと思います。
わからない事がありましたらここにコメントか、私のツイッターアカウント
に直接リプライください。私もnodeCGでの開発・公開は初めてなので色々不手際があるかと思いますが、何卒よろしくお願いいたします。
（追記）カスタマイズ方法を簡単ですが次の記事にしました。
この記事が気に入ったらサポートをしてみませんか？