スクリーンショット 2020-02-10 0.07.53

[↑図1.]

2020年2月に開催された『ポケモン剣盾』オフ大会【オーラスフィア】で使用した オーバーレイ & Stream Control のセットです。

こちらの Google Drive を全ダウンロードされてください。(URLの頭に h を付けて下さい。)使い方は他の Stream Control と似ていますが、少しポケモン剣盾専用仕様を入れています。
ttps://drive.google.com/drive/folders/1_P-R_-ntJUUBhoxJjc3TIoCYvrzoqXoX?usp=sharing

スクリーンショット 2020-02-10 0.05.35

(↑「すべてダウンロード」ボタンを押して下さい。)

こちらのセットは全て自由に使って頂いて結構です。ご自身の 個人配信/大会 で活用されても大丈夫ですし、中のデザインを替えてアレンジ頂いてもとにかく自由です。


■ 意図したこと

① ライブ大会モード でも YY通信モードでも活用できる。
② プレイヤー名と取得スコアが表示できる。


■ 使用法

ご使用の「ライブ配信ソフト」を起動して下さい。今回は Xsplit で動作確認をしていますが OBS でも動くはずです。また、クセで 1280x720p で作成しております。

./ にございます scoreboard.html をライブ配信ソフトにドラッグドロップ。フルスクリーン(1280x720 px)にサイズを合わせてください。ポケモンの「ライブ大会モード」の観戦者視点をキャプチャしている場合、これで 図1. のようなレイアウトになります。
./StreamControl/StreamControl.exe を起動されますと準備完了です。

コメント 2020-02-10 012008

[↑図2., 画像は Dallas Regional twitch.tv/pokemon/ から拝借しました]

ここからStreamControl.exe について申し上げます。
P1行に入力し、保存ボタン 💾 を押されされますと、html の左のプレイヤー欄に反映されます。同じく P2 行に入力されますと、html で右の欄に反映されます。図2. では P1 が HIDARI 選手・P2が MIGI 選手です。図2. をクリックされて拡大しますと詳細が見易くなるかと思います。

Name 列にプレイヤー名を、Twitter 列にツイッターアカウントを入力してください。Name と Twitter に入力された文字列が5秒でローテーションするようになっています。(そのため、別に名前・ツイッターに限る必要はございません。)ちなみに Twitter に何も入力されなかった場合、Name のみが恒常的に表示されます。
Score を入力されますと対応した行のスコア(数字)が反映されます。Country は今回使用しません。

一番下の Stage を記入されますと、中央上部が書き換わります。図2. では(かぶさって見づらいですが)「Pools Bo1」と記されています。

StreamControl.exe については以上です。

おまけですが、ポケモン剣盾のライブ大会モードの観戦者視点(2020年2月現在)では、両パーティのHP 実数値が見えてしまいます。図2. では見えています。そこで、このパッケージに「モザイク1.png」という画像を入れました。こちらをライブ配信ソフトにドラッグドロップ頂くと、綺麗に実数値の箇所を隠す仕様になっています。そのため 図1. では隠れています。アナログですがご了承下さい。

■使用法 続.

しかしこれでは「ライブ大会モード」しか対応していません。こちらのパッケージには「YY通信」にも対応したものを用意しております。

./ にございます scoreboard2.html というファイルをライブ配信ソフトにドラッグドロップしてください。これで上の scoreboard.html 使用法と同様に「YY通信」でも活用可能です。以下 図3. のようになります。

コメント 2020-02-10 012733

[↑図3.]

こちらも同様にですが、「モザイク2.png」というHP実数値を隠す画像がもう一つ用意してありますので、YY通信ではこちらをご使用ください。


■ デザインをカスタマイズするには

./imgs/ に素材が入っています。ご自身で画像を作成されましたら、こちらの画像を同じファイル名で置換すればそのままご自身のデザインに変更できます。
画像は全て 1280x720 px でご作成ください。(パーツを1つ作成するというよりも、フルキャンバスで作成し、位置してほしい場所にパーツを置いて完成されてください。)

■ 動きをカスタマイズするには

Scoreboard.html は、HTML およびこのファイルが呼び出している JavaScript/CSS で動いています。文字や画像の配置は Scoreboard.css にあり、アニメーションは Scoreboard.js に jQuery で書いてございます。