よりよいスコアボードにするために

ブログ

どうも。YMです。
普段はストリートファイター5(以下SFV)やバーチャファイター(以下VFes)を嗜みつつ、YMSBというOBS用対戦スコアボードオーバーレイを作ってます。

ご存知ない方もおられるかと思いますので、ざっくりYMSBを説明すると……。

まずスコアボードというのは、対戦格闘ゲームの大会・イベントなどで、現在対戦しているプレイヤーの名前やスコアを表示しているアレのことです。
そしてYMSBは団体戦や10先戦にも対応しており、下の画像のようにゲーム画面に合わせたデザインや、ゲーム画面に干渉しないものまで用意しております。現在では用意しているテンプレート(SFV、VFes、メルブラ、グラブルVS、KOFXV、GGST、鉄拳7)以外でも、マキオン、スマブラ、果てはポーカーにまで使っていただいております。

ゲーム画面のゲージなどに合わせたレイアウトのYMSB(上はforSFV)
ゲーム画面に干渉しないレイアウトのYMSB(forFGC)

さて、早いもので2022年も12月。今年も【こみゅリポ Advent Calendar】の季節になりました。この機会に、今年のYMSBがどんな思いで更新されていったかを纏めていきます。
YMとしては1年の振り返りで自分語りとなり恐縮ですが、この記事を読んだ方が「えっ?!YMSBってこんな機能もあるの?」みたいに思ってもらえれば幸いです。

多くの人に使ってもらうスコアボードに(上半期)

昨年のブログ投稿でも触れた通りYMSBには、大会を行う切っ掛けになったり助けになればいいという思いが根底にあります。

2022年当初はTwitterでちょくちょく呟いていた通り「もうこれ以上張り切ることはないかな」というのもチラチラ思っていたのですが、以下3つののご要望を聞きまだ需要はあるかと思い「YMSBを使う切っ掛けを増やす」というコンセプトで制作を続けておりました。

「ストリートファイター5だけ?」「〇〇に対応したら使い倒すのに!」
   →じゃあ他のゲームでも使えるようにしよう!

「Macでは動かないんですか?」
   →Macでも使えるようにしよう!

「機能が多すぎて何やっていいかわからん!」
   →じゃあシンプルなやつも作っちゃえ!!

SFV以外のゲームにも対応

2020年末、紆余曲折を経てYMSB1.0をリリースしました。
それまではSHIG版StreamControlをベースとして開発していましたが、ソースを整理してテンプレートを増やしやすくしていきました。

というのもテンプレートがSFV用しかなく、他のゲームは全てゲーム画面を縮小して表示させる「forFGC」テンプレートしかなかったのです。もちろん「forFGC」も周りの装飾など工夫すれば独自性が出せるものですが、既に持っている配信画面にスコアボードを重ねたいという要望も出ておりました。その為、色々なゲームの配信者さんに使ってもらえるべくテンプレートを増やしていきました。
2022.12.15現在、YMSBは以下の7つのゲームに対応しています。

・Street Fighter V Champion Edition
・Virtua Fighter eSports
・MELTY BLOOD -TYPE LUMINA-
・グランブルーファンタジーヴァーサス
・the King Of Fighters XV [KOFXV]
・GUILTY GEAR -STRIVE-
・鉄拳7

WindowsだけでなくMacでも使えるように

StreamControlが制作環境依存でWindowsしか使えなかったYMSB。
昨年の記事投稿時点でも「Macでは使えないのか?!」というお問い合わせを多数いただいており、YM自身もなんとかできないかとずーっと考えておりました。

2021年の9月辺りからずーっと模索し続けていたのですよ!


結果、スコアボード開発当初から使っていたStreamControlから離れ、Webブラウザ上でコントローラーを作ることで、OSに縛られることなくYMSBを使えるようになったのです。

……と文字にすればアッサリできたと思われるかもしれませんが、最初はWebブラウザを使う発想はなく、発想が生まれても技術的に実現方法がまったくわかっていませんでした。そのためWebブラウザ版開発のメリットがなく、作成する決断をするまでかなり時間がかかりました。またStreamControlというツールが素晴らしいものだったので、これを手放す発想が生まれてこなかったのです。

最終的にはMacでStreamControlを使うのを諦め、すべてWebブラウザ版コントローラーで動作しています。これでOS依存の問題はなくなりました。

開発時にはMacユーザーの方にもテストしてもらいました。感謝!!

必要最低限の機能だけで動作するスコアボードも

YMの思い付きと要望から機能が増えていき、今では多機能スコアボードとなったYMSBですが、もっとシンプルなものでもいいのでは?という声もいただいていました。そこで、名前・スコア・ステージ名という最低限のものが表示、切り替えできるスコアボードも制作しました。

「機能が多すぎてちょっと……」とYMSBを敬遠していた人にも使いやすいコントローラーを用意したことで、更に多くの人がスコアボードを使う切っ掛けになったと思っています。

本当に必要な機能だけを絞ったYMSBシンプルバージョンのコントローラー。これなら誰でも使える?!

更に便利なスコアボードにするために(下半期)

多くの人に使ってもらえる切っ掛けが増えたYMSBですが、ここで一つ新たな疑問が生まれました。

「YMSBは本当に大会の助けになっているのか?」

利用者からは好評は頂いていたYMSB。しかしYM自身が実際に使ってない上、大会運営すらしたことがないのです。これでは真価を実感することができません。

主催大会「YMCUP」を開催

そこでやりました。主催大会「YMCUP」!
企画・告知・運営・配信・進行・実況などなど全て一人!
参加者はなんと94名!もう大変でした。これをずっと続けている方々は本当にすごい……。
途中ちょいちょい止まりましたが、参加者の皆さんのご協力もあり、予定通りの3時間で終了することができました。また多くのスポンサードやガチサプ様、tonamel様の援助もあり華やかな大会となりました。本当に感謝です。

YMCUPを経験して得た「気付き」

なんとか無事に終了したYMCUPですが、YMSBとしては課題を残しました。これは実際に運営しないと得ることができない「気付き」だったと思います。

スコアボードを更新することを忘れてしまう

まずYMSBに関わらずスコアボードに慣れていない者や、実況や進行もワンマンで行っている物にとっては、スコアボードの操作自体に意識が行きにくくなります。まさか開発者がスコアボード操作に意識が行かないことがあるとは……。

名前の入力に時間がかかってしまう

YMSBでは参加者を番号付けしてCSVファイルに保存しておくことで、1から名前を入力しなくても番号を入力すれば参加者の名前を出力することができますが、結局のところ名前と番号の紐づけが必要となり、予めCSVファイルを用意していたとしてもトーナメント表を見ながら「えっと、○○さんは何番だっけ?」と探す必要がありました。これでは便利なのか不便なのかわかりません。

スコアボードの入力をもう少し楽にできないか?

そんなわけで、スコアボードの操作自体をもっと楽にできる方法がないか模索しました。スコアボードへの意識が少なくても、操作や入力内容が少なくなれば進行作業に組み込みやすいはず。もっと便利に使いやすく……。そうして開発されたのが「ショートカットキー機能」「オートコンプリート機能」でした。

ショートカットキー機能の実装

スコアを更新する・1P2Pを入れ替える・メンバーの表示を切り替える、といった単純な作業であれば、キーボードのキーで代用できるようにしました。これによりマウス操作以外にキーボード操作だけでもYMSBを操作できるようになりました。対戦中にスコアを加算させたい場合も、常にYMSBのコントローラーをアクティブにしておき、キーボード操作だけで簡単に更新できます。

オートコンプリート機能の実装

個人的にイチオシ機能。

事前に参加者のCSVファイルを用意しておき、YMSBコントローラーから読み込んでおけば、名前の入力候補が出るようになり、さらに他の項目も自動で埋めてくれる機能を実装しました。

これでトーナメント表を見つつ、プレイヤーの名前をそのまま入力し始めればいいだけになりました。

この後、名前以外にロゴやシンプルバージョンにも対応するようにしました!

今後は「使ってみたくなるスコアボード」に

2022年のYMSBはざっくりこんな感じで開発を進めていました。

今後というより、現在進行形で行っている改修があります。それは画面切り替えの「スティンガー」機能を拡張すること。どんな機能なのかは下のツイートを見てもらうとして……

スコアボード自体が見やすい、使いやすいは当たり前として、もっと使う側が「こんなのがあるなら使ってみたい」と思われる機能を充実していこうと思っています。
YMSBの前身「SCforSFV」もアニメーションが気持ちいい!という声を沢山いただいていました。コントローラーのスイッチを押すと、スコアボードが動いてくれる。自分のアクションに対して大きなリアクションがあると嬉しくなるもの。今はその辺りを重心を置いて開発中です。

それ以外でも便利だと思うような機能などがあればどんどん取り入れようと思っています。

YMSB以外のスコアボード(2022年末版)

昨年の投稿でも、YMSB以外のスコアボードを紹介させてもらいましたが、今年もやります!
今回はStreamControl以外のコントローラーを使ったスコアボードを2つご紹介します。

BraceBracket

BraceBracket – Webベースの対戦ゲーム用スコアボードツール
BraceBracketは、Webベースの対戦ゲーム用スコアボードツールです。OSを問わず、ブラウザ上でスコアボードを作成・編集できます。

マジですごいスコアボード。

トップページを見るだけで、どれだけ便利なのか伝わってきます。
他のスコアボードと大きく違う長所は「複数人での運用ができる(遠隔操作可能)」「トーナメントツール(start.gg)と連携できる」というところです。
レイアウトは主にスマブラを意識したものとなっておりますが、工夫次第で他のゲームにも使えます。
取り扱い方法についても充実しており、ダウンロードも不要。ネットワーク上で全て行うのでOSを問わず誰でも使えるのも魅力の一つです。

Googleスプレッドシート

【OBS Studio】を使ったスポーツ配信で外部からリアルタイムに得点を表示させる方法Google Spread SheetのImportrange関数を使ってみよう。
配信中の試合映像の得点表示を外部から更新するそんな必要あるの?って鼻で笑われそうですが、そんな必要がある人だけ見てください(笑)でも、配信をみているひと達で、お家から得点を更新できたら盛り上がると思いませんか?また、試合会場にいる場合でも、

この発想はなかった!なスコアボード運用例。

こちらはGoogleSpreadシートを使って野球のスコアボードを表示するという記事ですが、対戦ゲームにも応用できる技術です。
少し手間はかかってしまいますが、自分なりのオリジナル表示ができ、対抗戦などの星取表示や「〇〇先」のスコア表示に向いています。

スコアボードでもっと大会配信を便利に、華やかに!

今では多くのスコアボードが公開されています。
自分のスタイルに合ったスコアボードを採用し、大会を彩ってください。

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


長文にお付き合いくださいまして、ありがとうございました!
明日以降もまだまだ【こみゅリポ Advent Calendar 2022】は続きます。お楽しみに!

こみゅリポ Advent Calendar 2022 - Adventar
Tonamelの前コミュニティマネジャーのさとけんさんが、いろいろなゲームコミュニティのイベントオーガナイザーが集まって、ゲームコミュニティの魅力や謎を、プレゼン/ディスカッションを通じて明らかにしていく「こみゅリポ」。 コミュニティマネージャーがさとけんさんから私、山田哲子に引き継がれ、 引き継いだばかりなこともあ...
タイトルとURLをコピーしました