http://streamcontroljapan.blog.jp/
上記は、日本向けの Stream Control の使い方・使用方法をまとめたサイトです。対戦型ゲームで配信する時、Xsplit上で動的にプレイヤー名を変更する際に用いる Stream Control 。この資料共有が日本語では殆どされていないため、この度SHIGで作成しました。
こんな感じになります：
プレイヤー名の動的変更・スコアの表示・プレイヤー名を表示するバーのアニメーション化。説明文の挿入・文章の動的変更。応用すればシーン変更までアニメーションで思いのまま。動作は軽いクセにかなり役立ちます。
[知識なしでバリエーションを活用できます。画像を作れる方は独自のデザインに出来ます。javascript の知識があれば独自のアニメーションを実装できます。]
1.まずはダウンロード
（追記）ttps://drive.google.com/drive/folders/0B4s8bczvnihxekdSXzN1OWRydms?resourcekey=0-On7wZmE4WtX4i0bg8G5lOQ&usp=sharing
※2021年10月、URLを更新しました
こちらのURLから。冒頭に h を加えてアクセスしてください。ディレクトリをまるごとそのままダウンロードしましょう。ローカルに展開して出来た UMBR_Style_SC というディレクトリが、この説明の土台になります。
2.使う
配信するのでまずはXsplitを起動。
UMBR_Style_SC内にある scoreboard.html を Xsplit にドラッグドロップしましょう。早速プレイヤー名表示のボードが登場したと思います。
UMBR_Stule_SC/StreamControl 内にある StreamControl.exe を起動しましょう。使い方は直観の通りです。入力欄にプレイヤー名を打ち、保存ボタンを押せばプレイヤー名がその場で変わります。Score も数字を上下し、保存すれば切替わります。
Country 欄がありますが、これは国旗を表示するための欄です。JPで日本, USでアメリカ, CA でカナダ etc のように替わります。（註：UMBR_Style_SC/GoSquared/expanded の中に大量に国旗画像があるので、ここの画像ファイル名が対応しています。）
タブがあるので説明。Match がプレイヤー名。Scoreboard.html に対応です。
タブl3rdは l3rd1.html（Lower 3rd「下三分の一」のこと）に対応。l3rd1.html をドラッグドロップすると、左下に字幕が現れるモノが登場します。
l3rd は 1~4 まで複数用意したので、違うシーンで違う字幕を入力したい場合（例：1では大会情報、2では実況者名、など）に用います。
【註】もしXsplit上にスクロールバーが出てしまう場合は、Xsplit内で .html ファイルを右クリックしてください。詳細が現れます。そこにある disable scroll bars にチェックを入れると、スクロールバーは消えます。
[ 基本 : 完 ]
→ OBS の人はこちらを参照し、CLR Plugin を利用して下さい：http://kindai-ssb.xyz/archives/182
3.誰でも選べるデザインバリエーション
色については、別バリエーションを用意しました。
UMBR_Style_SC/imgs/ を見て下さい。l3rd01 – 02, scoreboard02 – 04 は色バリエーションを入れています。l3rd01.png や scoreboard02.png のように、末尾に _blue, _pink といった余計な名前が付いていないファイルが呼び出されます。
例えば scoreboard.html（プレイヤー名を表示するボード）でピンク色のバックが欲しい人は、scoreboard02.png を 別名に改名し、scoreboard02_pink.png を scoreboard.png へと襲名させてください。
[一番上のサンプル動画は、ピンク色のバージョンで撮影しています。]
（ご自分で画像を用意されれば、自分のデザインを使うことも可能です！1280*720pxの透過背景画像にしてください。詳しくは以下で。）
4.【中級】デザインを自分の画像へ
国旗の自作はラクです。
104*40px の画像ファイルをご自身で用意し、/UMBR_Style_SC/GoSquared/expandedに置けばOKです。（なるべく文字数の少ない英語で名前を付けましょう。）
さすればこの通り。私が作った LG, LQD といった国旗（チームバナー）を、StreamControlで指定し、Xsplit上に反映させています。こうやって、プロの所属チームのみならず、出身アーケードや所属団体・大学といった属性を表示できます。帰属意識で競技に花を添えるのです。
そしてボードについて。
ボードを自分のオリジナル画像にするには、同じ要領です。1280*720px の背景透過ファイルを作成し、UMBR_Style_SC/imgs/ に配置すればＯＫです。名前はそれぞれに当てはまるモノを襲名しちゃってください。
…デザインはいいけれど、動きは？ と思った方は、次のパートへ。
5.【応用】解説
アニメーションの定義：
html ファイルのアニメーションは、jsのライブラリである GSAP の TweenMax を用いています。例えば scoreboard.html ならば、中に css, js の両方が入っているのでご覧あれ。250行目あたりに TweenMax の引数をjson形式で書いています。しかしこれはアニメーションの終点。始点は10-180行目に広がるcssで定義します。面倒くさいですが、私のせいです。苦情はある方はご自身で書いて。どうぞ。（TweenMaxの仕様はコメントにも書きましたがここにも： http://qiita.com/ANTON072/items/a1302f4761bf0ffcf525 ）
【意味が分からなかった方へ】htmlの知識が無い方は、ここでゲームオーバーです。
…それでは余りに殺生なので、概要を説明します。まずはテキストエディタでscoreboard.htmlを開いてください。テキストエディタが分からない場合は、、、Atom という緑色の無料ソフトをインストールしてください。（私はMacユーザーなので実は詳しくありません。）このAtomでhtmlファイルを開くと、中身が見られます。
一番下がhtmlエリアになっています。ここにて id=”board1″ のように、召喚式の羅列があるのが分かりますか？様々な要素の宣言がされています。
ここにあるidで召喚したモノは、上部のcssで定義し（<style>10行目から</style>180行目まで）、中部のjs(javascript)で動かします（<script type=”—“>180行目あたり から</script>477行目まで）。そのため、css で id 毎に始点を決めて、js で終着点を決めています。（例：cssでも js でも#board1がありますよね？この2つで動作を決定し、これがhtmlでid=”board1″で召喚され、正式に動作します。）
js は長くて怖そうに見えますが、TweenMax.to() のようになっているところだけ見れば良いです。
ちなみに、どの画像を用いるかの決定も、css で行っています。#board1 は imgs/scoreboard01.png になっていますよね？
フォント：
そんなscoreboard.html。16行目にfont-family: ‘Gadugi’,’Mona’; という行がありますね？ここがフォントを読み込んでいます。scoreboard.html で使いたいフォントがあれば、UMBR_Style_SC/font/ にフォントファイル（.woff ファイル）を置いて、この行で指定すればOKです。
6.【応用】オリジナルトランジション
これに関しては、まず以下の公式ツイートから。こんなことが可能です。
皆様、知っておりますか？ご自身のMov動画をなんとXSplit内でトランジションとして変換する事ができます！自分のトランジションを作成して適用するだけで、放送の雰囲気が大分変わりますよ！ #XSplit新機能 pic.twitter.com/QcRy1p7yxZ
— XSplit Japan (@XSplitJP) August 9, 2016
Xsplit のシーン切り替え＝トランジションは、デフォルトではフェードになっていますが、このように独自のトランジションも作れます。Xsplit v2.7 以前でも、.webm ファイルさえあれば、動きます。
お試しいただくために、UMBR_Style_SC には無駄にもwebmファイルが詰まっています。UMBR_Style_SC/webm/ をご覧あれ。試しにUmeburaTransition_1000.webmを活用してみましょう。
– Xsplit のあるディレクトリ（たぶん ProgramFiles(x86)/SplitmediaLabs/XsplitBroadcaster/XsplitBroadcaster）に、.webmファイルを置きます [この場合は UmeburaTransition_1000.webm]。
– Xsplit を再起動
– Xsplit のシーン郡の上にある Transition （デフォルトは Fade:700ms となっている）をクリックすると、UmeburaTransition_1000ms というトランジションが増えている。
– UmeburaTransition_1000ms を選択している状態でシーンを切り替えると、間に独自アニメーションが挿入される。
こんな感じです。（ほか、SHIG LOGO_2500.webm も動きますが、5000msを超えている SHIG LOGO_5100_webm は動きません。）
OBS
（2017年2月）OBSでこのプラグインが作動しないという報告を受けていますが、
・「OBSのbrowsersource内にあるCSSのテキストを全削除し、下の方にある２つのチェックボックスにチェックを入れたところ動く様になりました」
という報告をいただいています。参考になさってください。
以上
これで、SHIG 仕様のStreamControlパック解説は以上です。特にライセンスをつけていないので、ご自身のイベントに独自性を彩り、装飾性にモノを言わせたい方はぜひご活用ください。コードを替えて利用してもＯＫです。