この度は SHIG で作成しましたポッ拳用テンプレートの紹介です。ダウンロード・使用が出来ます。
「カントートーナメント」という大会で実際に使用しました。
生放送:twitch.tv/shi_gaming
youtube : https://www.youtube.com/channel/UCsHLcoF_UALWqZxBOFCJ9uQ/videos

20



【ダウンロード】
以下のURLです。頭に h を付けてアクセスしてください。
ttps://drive.google.com/drive/folders/0B4s8bczvnihxQThDNWpWR0VrU3c?usp=sharing
こちらのファイルを、全てまるごとダウンロードして下さい。(上のバーにある PokkenKanto の文字をクリックして Download を選択しましょう。)

【使い方】
解凍しましたら、中にある StreamControl.exe を起動しましょう。(既にXML/JSON および Layout の設定はしてあります。)
そして、./browserfiles に移動しましょう。ついでにXsplitを起動。
Blog01

↑browserfiles の中にある scoreboard.html をXsplitの画面内にドラッグ&ドロップすると、上の画像のようになっているはずです。
...このように、ゲーム画面の上にプレイヤー名が載ります。

StreamControl から、プレイヤー名を入力して「保存ボタン」を押すと、プレイヤー名が更新されます。数字のところを更新すれば数字も変わるので、取ったゲーム数も表示できます。

【注意】
1. このままでは、html ファイルを読み込む度にスクロールバーが表示されてしまいます。
Blog02

scoreboard.html をXsplit上で右クリックして、disable scroll bars をチェックしましょう。これで解決です。

2. 「カントートーナメント」が邪魔
大会ロゴが邪魔だと思います。そこで、/browserfiles/images の中に「scoreboard18_sub.png」というファイルが有ります。今の「scoreboard18.png」をテキトーな名前に替えて、socoreboard18_sub.png を scoreboard18.png に名前変更すれば、大会ロゴは消えます。

<以上です!これで皆さんのポッ拳の配信がカッコよくなりますね!>

【応用】

1. scoreboard.html を、いじる
Xsplit に置いた scoreboard.html(および./css/stylesheet.css)によってオーバーレイは作成されているので、html および css をいじれば皆さん独自のアニメーションを作ることが出来ます。
javascript は scoreboard.html の中にあります。40行目以降にある、jQuery の部分がアニメーションの定義です。.tween を用いています。


2. オリジナルトランジッション
Xsplit ではシーンを切り替える際は、デフォルトではフェードになっています。
https://www.xsplit.com/broadcaster/manual/scenes ← ここ参照。
しかし、一番上にあるカントートーナメントの動画のように、独自のアニメーションを挿入することも可能です。
/browserfiles 内にサンプルファイル(PokkenKanto_1000.webm)があるので試して下さい。

- Xsplit のあるディレクトリ(たぶん ProgramFiles(x86)/SplitmediaLabs/XsplitBroadcaster/XsplitBroadcaster)に、.webmファイルを置きます [この場合は PokkenKanto_1000.webm]。
- Xsplit を再起動
- Xsplit のシーン郡の上にある Transition (デフォルトは Fade:700ms となっている)をクリックすると、PokkenKanto:1000ms というトランジッションが増えている。
- PokkenKanto:1000ms を選択している状態でシーンを切り替えると、間に独自アニメーションが挿入される。

3. オリジナルトランジッションを、創る
https://twitter.com/XSplitJP/status/762883674220081152
こちらにあるように、Xsplit v2.8 ならば、自分で作った mov ファイルをXsplitトランジッションへ保存出来ます。



(投稿 SHIG