StreamControl

[OBS]StreamControl導入およびテンプレート配布

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

どうも、み。です。今回はStreamControlの使い方を説明しつつ私が作成したStreamControlのレイアウトやテンプレートをしれっと配布したいと思います。

まず始めに

皆さんスコアボードって何か分かりますか。ウメブラやスマバトの配信画面にあるアレです。スコアが表示されている奴です。(あげはさまさん勝手に名前使いましたごめんなさい。反省はしていません。)

IMG_3319

自分の配信でもスコア表示してえって思いません???はい思いますよね。って事でOBSで配信する場合StreamControlを用いてスコアを表示する方法を書いていきます。まずStreamControlってなんぞやって事で、

StreamControl is a simple program I put together in Qt (as a learning experience) to write an XML file for use with XSplit

via – StreamControl | Farp’s Noodle Hut

ってあるようにStreamControlは.xmlファイルを出力するソフトウェアとなってます。そして出力された情報をhtmlやCSSやjavascriptやらを用いてデザインします。で、デザインされた奴をCLR Browser Source Pluginを用いて配信画面に乗っけます。この流れで配信画面にスコアボードを表示します。なんやかんや難しい話だなって感じですけどインストールすれば全てわかる(暴論)。とりあえず今回必要なソフトおよび配布するファイルをリストアップしときます。その後で各種ソフトの設定していきます。分かる人は配布ファイルだけダウンロードして勝手にやってください。

  • ソフト:StreamControl b0.4
    スコアツール本体。シンプルながら高機能で一言で言うなら作者is神って感じ。
  • ソフト:CLR Browser Source Plugin
    StreamControlで出力した情報を配信画面に乗せる奴。OBSのソースとしてwebベースのコンテンツを表示できます
  • 配布ファイル:お手製テンプレート類 ※2017/4/24 リンク切れを修正
    今回私が作成したテンプレート類。内容物は「(StreamControlの)layout.xml」「scoreboard.html」「(scoreboard.htmlに必要な)ファイル群」。ちなみにデザインは上に貼った写真の奴です。

StreamControlは安定版がv0.3ですけどベータ版の0.4をダウンロードしましょう。

StreamControlDownload

CLRBrowserSourcePluginDownload

StreamControlの初期設定

では早速StreamControlの設定へと参りましょう。StreamControlとお手製ファイルをダウンロードしたらそれぞれ解凍して、StreamControlを自分の好きな所へ配置し、その中へお手製ファイル群を配置。※この時点でsettings.xmlはなくて良いです。

FileHierarchy

で、StreamControl.exeを起動。ポップアップが出てきますが気にせずOK。

StreamControlPopup

StreamControlDefault

で、歯車アイコンをクリックしてConfigurationをクリック。

  • XML/JSON Path
    情報の出力先。Browseボタンクリックしてお手製ファイル群のbrowserfilesフォルダを選択。
  • Layout File
    StreamControlの画面のレイアウト決めるファイル。自分でドキュメントでも見て作成しろ。お手製ファイル群の、layout.xmlを選択。

OKボタンをクリックして設定画面をぬけるとStreamControlの画面がこんな感じになっていると思います。

StreamControlAfter2

さすれば万事OK。後はPlayer1とかを編集して左上のセーブボタンをクリックするのみ。以上でStreamControlの設定は終わります。

CLR Browser Source Pluginの初期設定

ダウンロードしたCLRなんとかを解凍して、

C:\Program Files (x86)\OBS\Plugins

の中へ配置。何故か知らないけどOBSは32bit版が推奨されているのでx86の方に設置するのが丸い。もし64bit版使ってるなら64bit版の方へ配置。

PlacingCLRSP

OBSでの設定

「ソース→追加→CLR Browser」を選択。名前を適当に決め、各種項目を以下のように指定。 ※2017/4/24 太字部分を書き加えました。

  • URL
    各自環境に合わせて「streamcontrolのフォルダ\browserfiles\ScoreBoard(1280 or 1920).html」を指定。
  • Width
    1280 or 1920
  • Height
    80

CLRBrowserSetting

以上でOKを押すと画面にスコアが表示されます!!や゙っ゙だね゙ぇ゙!!!

streamcontrolforexample

OBS

※StreamControlにキャラを選択する項目がありますけどスコアボードには載せてません。今後キャラ情報も表示するようにScoreBoard.htmlを作成するかもしれません。その時はその時で再度scoreboard.htmlをアップします。

まとめ

以上、OBSでのスコアツール「StreamControl」の使い方およびテンプレートの配布でした。今後テンプレートを作成したら随時アップしていきたいと思います。ありがとうございました。また、何か分からないことがあればコメントして頂くかtwitterの方まで連絡下さい。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る