あったら嬉しい配信用スコアボード

ブログ

どうも。YM(ワイエム)と申します。主夫です。
元プログラマで元P屋の副店長で、箏が弾けたり靴が磨けたりと色々やってます。
現在はStreamControlというアプリを使った配信用スコアボード「YMSB」の開発・配布をしています。

「YMSB」はこんなやつです。対戦者名やスコアなどを表示できます。

このYMSB。最初はストリートファイター5(以下、SFV)向けに、自分の好奇心で調査して細々と開発していたのが色んな方の目に留まり、様々な個人配信やイベント、さらにはプロゲーマー主催の大規模大会にまで取り入れられるまでになりました。今ではSFV以外にもスマブラ、GGST、マキオンなど他の対戦格闘ゲームや、ビデオゲームの枠を超えてカードやコインゲームといった対戦配信にまで使っていただいています。更に、日本だけでなく海外の方にも使っていただくまでに広がりました

目に留め、使ってくださった方々から好評を得て、更に拡散してくださっての現在です。皆さんには感謝するとともに、1年を満たさないコンテンツがここまで広がることに驚く次第です。(コロナ禍から個人配信というライフスタイルが広がった影響もあるかと思いますが、それはさておきます。)

さて。
今回は「こみゅリポ」のさとけんさんに機会をいただき、俺がYMSBの開発を通して感じたことや想いなどを語れればよいかと思い、このブログを書いております。しばらくお付き合いいただければ幸いです。

スコアボードがもたらす効果

必須ではない配信用スコアボード

いきなり質問です。
イベント配信の対戦画面にスコアボードは必須なのでしょうか。
俺の考えとしては

スコアボードは必須ではないけど、使えるなら無いと損じゃない?

です。
スコアボードがなくても配信画面は彩れるし、実況やガヤ・コメントなどで盛り上げることも可能です。また配信者さん自身がメインコンテンツとなる配信であれば、むしろスコアボードが邪魔になるケースもあるでしょう。さらにPS4などのコンソール機のみの配信では、そもそもスコアボードを載せることもできません。

主催・運営側としても、優先度はかなり低いのではないのでしょうか。
まずはいかに参加者を集めるか、日程の調整、当日の運営・配信方法などなど……もしかしたらスコアボードが必要ではないケースもあるかもしれません。

でも使わない手はないスコアボード

ただ、まったくの不要なのかと言えばそうでもありません。
視覚的にイベント名、参加者、対戦の状況を提示することで視聴者に対して状況やルールの理解を助けることができ、普段の対戦画面とまったく異なる演出が配信画面に乗るだけで、参加者には高揚感や緊張感を演出でき、それらが配信やイベント全体の訴求力を高めると考えています。

左が普段の対戦画面、右がスコアボード有りの対戦画面。かなり変わりますね。

というわけで、スコアボードがもたらす効果と影響は以下だと考えます。

・配信・イベント自体の訴求力を高める効果
・高揚感、緊張感を含めた、イベントの楽しさを参加者・視聴者に演出する
・視聴者に対してゲームの勝敗や楽しさを伝える一助になる

ただスコアボード一つを配置するだけでこれだけの効果があるのであれば、使わない手はないかと思うのです。冒頭の「使えるなら無いと損じゃない?」というのはまさにこれです。

ただ配信用のスコアボードを作ることは、技術的(どうやって作るの)・時間的(そんなヒマないよ)な不安がありますし、配信中に操作しなければならないという負担がありますよね。俺もそこはよーくわかります。経験してきましたから。

というわけで。
俺が初めてスコアボードを作った時の事からお話させていただきます。

配信用スコアボードを作るきっかけ

イベント感を演出するためのExcelスコアボード作り

2020年の11月。俺が所属していたSFVのコミュニティで、初心者も含めた内輪のリーグ戦イベントを開く!となった時のことです。
主催者が企画やハンデルールを決めたり、参加者も集まって配信日などもトントン拍子に決まったのですが、せっかくならお祭り感を出したいなと思った俺は、勝手にフライヤーや配信用のルール説明ボードなどを作ったりしていました。それこそ無いよりあったほうが盛り上がるだろうし、何より初心者さん達にも大会の緊張感とか高揚感とかを楽しんでもらいたかったから。

配信用のスコアボードも用意したかったのですが、配信者さんがPS4版だったことに加え、当時はまだスコアボードツールの存在を認識していませんでしたので、Excelでスコアボードを作りました。

スコアボード自体を作成したのも初めてでした。
個人戦のスコアを入力したら自動的にチームのスコアを更新するように関数を組み、見た目が飽きないようにレイアウトを工夫し、さらに誰がどのキャラクターを使うのかのアイコンを用意し……できる限り進行が滞らないように、配信中の負担を少なくするように工夫して作成しました。

作成すること自体は楽しかったです。モノ作りの、ちょっとずつ完成させていく感じは好きですし。
ただ時間が掛かり過ぎましたし、他のイベントへの流用もできないので費用対効果ならぬ時間対効果が悪すぎました。(自分も参加者だったので練習の時間が……これは言い訳ですね。はい。)

もちろん、スコアボードがなくても大会は成立していたでしょう。配信コメントでも随時スコアを書いたりしていましたし。でも何も飾りのない対戦画面だけよりも……

自分の対戦カードが表示されている。
チームメンバーの名前や、総合スコアが表示される。
対戦結果がリアルタイムで更新される。

これだけが実現するだけでも参加者や視聴者に対して、普段のオンライン対戦とは違うイベント感ーー日常とは違う非日常感、特別感ーーを演出できると考えた俺は、本配信とは別の配信でスコアボードをリアルタイムで更新するようにしていきました。本配信者に逐一こちらの画面を映してもらったり、視聴者さんには2窓で映してもらったりしていました。

実際に使ったスExcelのスコアボード。負けてもちゃんとリアルタイム更新しました。

より良いスコアボードを探して

これらの告知画像やスコアボード自体はイベントを盛り上げる一助になったはずで、一定の効果があったと思います。参加してもらったメンバーや視聴者さんに楽しんでもらえたと思っています。後日、このシステム(?)を応用して配信してくれたメンバーもいましたし。

ただ対戦中の画面にスコアボードが載せられなかったことは、個人的に不満というか反省が残りました。これが実現できていれば、もっとイベント感を演出することができたのに!

ところがその後、残念ながら所属していたコミュニティは自然消滅してしまい、この反省を活かすような機会は失われてしまいました。
それでも、配信画面のスコアボードについて知りたいという欲求は収まりませんでした。

StreamControlについて

StreamControlスコアボードとの出会い

そういえば、よく公式の大会などで表示されているスコアボードはどういう仕組みで表示されているのだろう。それがあれば2窓の必要もないし、対戦画面をもっと演出できるのではないか?と思い立ち、Google検索を繰り返すうちに「StreamContol」スコアボードを発見したのです。

StreamControlスコアボードを見つけてからというもの、好奇心が溢れてきました。これの仕組みが分かれば、オリジナルのスコアボードが作れるんじゃないだろうか?どんな仕組みになっているんだろう?どういう動きをしているのだろう?
そしてStreamControlスコアボードの調査が始まりました。

その時も今も、俺は配信をあまりしません。気分転換くらいにやるくらい。
誰かから依頼があったわけでもありません。
単純に自分の好奇心から、あくまで俺が知りたいから、調査したのです。

StreamControlと既存のStreamControlスコアボード

よく誤解される方がおられるのですが、StreamControlは俺が作ったものではありません!!

StreamControlは、Farpenoodle氏によって作成されたアプリです。
オープンソースとしてGithubにも公開されています。
YMSBで使っているStreamControlは、このソースにちょっとだけ改変したものです。

StreamControl | Farp's Noodle Hut

StreamControlを使ったスコアボードは、既に国内ではSHIGさん製のテンプレートが配布されていました。2021年12月現在でも、最も使われているテンプレートだと思います。

また、日本StreamControl学会さんが忍ism主催のSFV3on3大会「TOP」のテンプレートも配布されていました。

3on3プレイヤーコメント出力テンプレート : 日本 StreamControl 学会
先日、ももちさん/チョコさん主催のTokyo Offline Party で使用したSTREAM CONTROLテンプレートを展開します。イメージとしては、フィギュアスケート中継でよくみる選手ごとの大会成績テロップみたいな感じのものができないかと思い、プレイヤー情報に紐づくコメン

YMSBは利用・拡散・宣伝してくださった方々により知名度を高めてきましたが、StreamControlの本体に加え、この2つのテンプレートがなければ今のYMSBはありません。この場を借りて謝辞を申し上げます。

この2つのテンプレートをダウンロードし、どういう仕組みで表示されるのか調査を始めました。後にStreamControlのソースコードもダウンロードすることになるのですが、それはまた別のお話。

StreamControlスコアボードの大まかな仕組み

さて。
StreamControlって何?!というところも軽く触れておきましょう。

StreamControlのデフォルト画面

誤解されがちなのですが、StreamControlはスコアを表示させるためのアプリではありません。

この小題でもStreamControl「スコアボード」と書いているように、StreamControlは配信用スコアボードを表示させるための一部でしかありません。StreamControlスコアボードは、StreamControlからプレイヤー名やスコアなどを入力し、色々な処理を経て画面に反映させるという仕組みです。

ここで、俺が理解できたStreamControlスコアボードの大まかな処理の流れを見てみましょう。

理解できたStreamControlスコアボードの流れ。

この図の通り「StreamControl」「JavaScript」「HTML」の三者によってスコアボードが成り立っており、StreamControlは最初のデータ(JSONファイル)を出力する役割を担っているだけです。もちろん、どんなデータを出力するかという設定はStreamControl側で行うのですが、実際の処理は主にJavaScriptが行っています。

配信者さんの負担を少なくするスコアボードを目指して

ということは。
StreamControlスコアボードを作成するとなると、最低限StreamControlだけでなく、JavaScriptとHTMLの仕組みも理解する必要があるのです。JavaScriptもHTMLもプログラム言語であり、これはプログラマないしHPの作成や運営を経験していないとなかなか難しい領域です。

そこで過去の経験が活きました。実は前職はプログラマ・SEだったのです!某社のアレのあのシステムは俺が支えたと言って過言ではない!詳しくは言えないけど!!

そして大まかな仕組みを理解したところで「もしかしたら、〇〇を▲▲して◇◇すれば?」とカスタマイズの手順を思いつき、トライ&エラーを何度も繰り返してさらに理解を深めていったのです。やっぱりこのちょっとずつ積み上げていくような感じが楽しいんです。

何度目かのトライ&エラーを繰り返し、ようやく成果が出てきたのでTwitterで上げて反応を見て。それをさらに何度か繰り返して第1弾のYM製StreamControlスコアボードはリリースできたのです。

調査開始当時のツイート。

思った以上に反響は大きく、需要はあると感じました。それならば俺がスコアボードを作ることで、前述した配信者さんのスコアボードに対する不安や負担(技術的、時間的、リアルタイム更新)を軽減させることができるのではないか?それと自分の好奇心も相まってスコアボードとStreamControlの更新を続けていきました。

そうして試行錯誤とバージョンアップを経て、11月にYMSBとして正式版をリリースする形となりました。色々な方の目に留まり、拡散されていったのは冒頭にお話しした通りです。

展開されているStreamControlスコアボード

ここからは、2021年12月現在展開されているStreamControlスコアボードを紹介します。
配信者さんのスコアボードに対する不安や負担(技術的、時間的、リアルタイム更新) がかなり軽減されること間違いなしです!

YMSB

現状はWindows向けのみです。OBS/Xsplitにて動作確認をしています。
Macの方はごめんなさい……現在対応方法を検討中です。コンソール機でも使えるといいのですが、こればっかりは難しいです。

ツリーには別バージョンの動作イメージ動画があります。

YMSBには技術と時間が詰まってますが、無料です。

調査を始めたのは1月半ば、そしてYMSBとしてまとまったパッケージが完成したのは11月27日。それまでもベータ版としていくつもリリースしてきましたが、正式版のリリースまでに11か月もかかりました。俺自身が遅筆であることや体調的な問題もあれど、オリジナルのスコアボード作成にはやはり時間がかかってしまいます。これがさらにプログラム未経験な人がやるとなると、どれだけ時間がかかるかわかりません。

そんなYMSBには、色んな機能が実装されています。
それでも驚きの無料です。フリーツールなんです。

そもそもStreamControlも、元となったSHIGテンプレートなども無料公開されていますから、これだけ有料にするのも違和感がありました。それよりもYMSBが配信者さんにとってイベントを開くきっかけになったりして欲しいんです。

なので少しでも興味が出てきた方はダウンロードして、触ってみてください。
導入方法についても纏めてありますので、参考にしてみてください。

機能は豊富だけど、使いたいものを使えばOK!

YMSBのStreamControlは3ページに機能を分けています

YMSBはプレイヤー名、団体戦のプレイヤー名を表示させるだけでなく以下のような機能が実装されています。

  • 1P2Pの表示切り替え
  • 個人戦、団体戦のどちらにも対応可能
  • 10先スコア表示
  • 団体戦での対戦中メンバー名の表示
  • 団体戦メンバーの敗退者をグレーアウト
  • 次の試合のカードを表示
  • テキストor画像表示
  • スキン、フォント変更
  • 団体戦メンバー、スコアの表示/非表示切り替え
  • スコアボード全体の表示/非表示切り替え
  • スティンガー
  • コメント(意気込み)表示
  • 勝利アニメーション

これらすべての機能を使いこなす必要はありません。自分が使いたい、必要な機能だけを使えばいいのです。正直なところ、これらの機能のほとんどは俺の思い付きから実装されていますし、俺としてもあなたの襟首掴んで「使えぃ!」と強要するつもりもありません。

使いたい!→大会やってみたい! になれば嬉しい

また「これ以外で自分でレイアウトを作ってみたい」という方も当方にご相談ください。カスタマイズのポイントなどをお教えできます。ポイントは多いものの、かなり整理しましたのでまだ楽!なはず。

本当に、あなたの使いたいように使ってみてください。
そのうちに「こんなイベントができそう!」とか「こうすればこんな演出できるかも」といったインスピレーションに繋がれば幸いです。

StreamControl テンプレート SHIG仕様

先ほども紹介したスマブラシリーズの日本発/初の配信クルー「SHIG」さんによる、恐らく最も有名なStreamControlスコアボードです。
とてもシンプルで使いやすいレイアウトで、色々なゲームにマッチするのでお勧めです!

3on3 プレイヤーコメント出力テンプレート(SFV向け)

こちらも先ほど紹介した、日本StreamControl学会さんによるSFV向け3on3用テンプレートです。
団体戦に特化しており、さらにはプレイヤーのコメントも出力できます。

3on3プレイヤーコメント出力テンプレート : 日本 StreamControl 学会
先日、ももちさん/チョコさん主催のTokyo Offline Party で使用したSTREAM CONTROLテンプレートを展開します。イメージとしては、フィギュアスケート中継でよくみる選手ごとの大会成績テロップみたいな感じのものができないかと思い、プレイヤー情報に紐づくコメン

SCforGGST

YMSBの前身となったテンプレートを元に、GUILTY GEAR -STRIVE-(以下、GGST)のwiki管理人「ひろとさん」がGGST向けに改造されたものです。
YMSBのフルスクリーン用は2021年12月現在SFV用しかありませんので、GGSTでイベント配信をされる場合はこちらをお使いになるのをお勧めします。レイアウトぴったりなので使いやすいです。

StreamControl for GGST

Hiroさん作成のテンプレート。こちらもGGST用のStreamControlスコアボードで、テンプレートが3つ用意されています。ゲーム画面に干渉しないタイプもありますので、他のゲームでも使えるかと思います!
また、10先スコア表示も30戦まで表示可能という独自機能を備えています。(ちなみにYMSBは19戦まで)

StreamControl for GGST|Hiro|note
前置き 「StreamControl」とは、主に対戦型格闘ゲームなどに利用されておりOBSやXsplit等の配信ソフトに出力したオーバーレイを制御するために使用される アプリケーションです。 下記のサイトよりオープンソースで公開されており、様々な場面で利用されています。 StreamControl | ...

SUTOKON

かるぴすさん作成。
こちらは大乱闘スマッシュブラザーズでよく見かけるStreamControlテンプレートです。
シンプルながらもスタイリッシュなデザインで、ステージ名(Grand Final Reset等)をワンボタンで設定できるなどユーザーフレンドリーな設計となっています。
また、StreamControlから対戦者名の背景色やスポンサー名の文字色を変更できるなど、カスタマイズ部分もフォローしてくれています。

最強スコアボードへの道 in 2019|かるぴす|note
かるぴす(@karupist)と申します。 こちらの記事は1300文字程度でお読みいただけます。 ・この記事は寝椅子(@newenwere)さんの企画であるスマブラ Advent Calendar 2019の参加記事となっています。 今回書いていく記事は配信で使われるスコアボードの使い方を説明する記事です。以下画...

最後に

最近では様々な配信でイベントが行われており、それぞれで楽しさが伝わっています。ただ、スコアボードがないイベントを見ると「今どういう状況だろう?」とか「実はランクマ配信かな?タイトルが違うだけ?」なんて思う時もあります。とはいえ前述した通り、StreamControlスコアボードをオリジナルで作成するとなると、技術的にも時間的にも苦労があるかと思います。

また、参加者や視聴者に対していかに高揚感・緊張感、ひいてはイベント感を提供するか、いかに「楽しそうだな」「やってみようかな」「次も参加したいな」と思わせたいかは、イベント主催・運営側は苦慮するところではないでしょうか。

そんな配信者さんの苦労をYMSBで少しでも緩和できれば嬉しいです。YMSBでなくとも、StreamControlスコアボードはそんなに難しいものではありません。使ったことがない方は怖がらずに是非とも一度試してみて欲しいです

使ってみてから、取捨選択をしていただいていいのです。少なくともYMSBや上で紹介したStreamControlスコアボードは無料なのですから。この機会にStreamControlスコアボードに触れてみて「あ、これで大会やってみたい!」って思ってもらうきっかけになればと思っています。

そして視覚的にも楽しいイベントが増え、イベントの主催者も参加者も増えて、さらにはゲームに興味を持つ人やプレイする人口が増えること。
それが俺のふんわりとした願いです。
自分達の好きなゲームを、皆で楽しみましょう!

こんな思いを実況者のアールさんが代弁してくださいました。

ちなみに俺は自作のヒットボックスでSFVとバーチャファイターesをゆるゆると楽しんでいます。マッチしたら手加減せずにボコボコにしてください!

自作ヒットボックスはこれ。全部ボタンのコントローラーです。

長文にお付き合いくださいまして、ありがとうございました。
明日16日の「こみゅリポ Advent Calendar 2021」は「たいが」さんです!お楽しみに!

こみゅリポAdvent Calendar 2021 Advent Calendar 2021 - Adventar
Tonamelのコミュニティマネジャーのさとけんと、いろいろなゲームコミュニティのイベントオーガナイザーが集まって、ゲームコミュニティの魅力や謎を、プレゼン/ディスカッションを通じて明らかにしていく「こみゅリポ」 昨年に引き続き、年度末の締め括りとして、Advent Calenderをやります!大会やイベントを通じて...
タイトルとURLをコピーしました