なぜカスタマイズされたスコアボードのマター

ペイントボールでは、試合は速く、決定は秒で起こります。オフシェルフスコアボードは、通常、バスケットボールやサッカーなどの伝統的なスポーツのために設計されており、ペイントボールのユニークなゲームモードに必要な柔軟性が欠如しています。カスタムシステムが提供しています。

  • ] 除去、フラグキャプチャ、またはポイントベースの目的を即座に反映するリアルタイムスコアの更新[。
  • 3〜マンチームから、硬質テンプレートを強制することなく、大きなシナリオゲームまで、複数のフォーマットのサポート。
  • 動的グラフィックス、ライブタイマー、チーム固有の統計による、スペクターエンゲージメントの強化。
  • [] タブレットやレフリーデバイスを介してデータエントリを自動化することにより、ヒトのエラーを削減しました。
  • ]スポンサーロゴ、イベント名、カスタムカラースキームを表示する機会[をブランディングする。

カスタムソリューションでは、データも所有しています。 後で、マッチの履歴、プレーヤーのパフォーマンス、トーナメントのトレンドを分析することができます。使い捨ての紙シートや独自のシステムで不可能です。 ダイレクトスのようなモダンなヘッドレスCMSは、イベント全体でのみ有効で再現可能です。

スコアボードのバックエンドのDirectusを活用

Directusは、スコアボードアプリケーション用の強力なバックエンドとして機能するオープンソースのヘッドレスCMSです。 管理者がチーム、マッチ、スコアを単一の行を書きなくても管理するためのクリーンで使いやすいインターフェイスを提供します。 RESTとGraphQL APIは、リアルタイムのWebSocketサポートと組み合わせ、ライブスコアボードシステムに最適な選択肢です。

ダイレクトスプロジェクトの設定

ダイレクトスをサーバー(セルフホスト)で実行するか、または管理されたエクスペリエンスのためにDirectusクラウドサービスを使用することもできます。 トーナメント設定では、ローカルネットワークでのセルフホストがレイテンシーを回避するのが望ましい場合があります。 以下の手順に従ってください。

  1. 直接Node.jsのデプロイメントをDockerや直接Node.jsでインストールします。[公式クイックスタートガイド]は、数分でプロセスを概略します。
  2. データベースの設定(PostgreSQL、MySQL、SQLite、SQLiteはオフラインでの使用に理想的です)。
  3. 管理者ユーザーを設定し、トーナメント用に特別にプロジェクトを作成します。
  4. WebSocketを瞬時に使用したい場合は「リアルタイム」モジュールを有効にします。

データモデルの設計

スコアボードのデータスキーマは、トーナメントの構造をミラーリングする必要があります。 ダイレクトスでコレクション(テーブル)を作成します。

  • [Teams[] - 名称、ロゴ(画像URL)、ロスター(プレーヤーとの関係)、プライマリカラー。
  • [] プレイヤー - 名称、番号、チーム(関連)、オプションのステータス(依存、死亡、ヒット)。
  • []Matches[] - ラウンド、フィールド、開始時間、ステータス(保留、ライブ、終了、過度)、期間。
  • ]スコア - マッチ(関係)、チーム(関係)、スコア値、タイムスタンプ(特にライブスコアリングに役立ちます)、スコアリングイベントタイプ(エリミネーション、フラグキャプチャなど)。
  • []ペナルティ] - 必要に応じて、プレーヤーと一致関係を持つ不法(マイナー、メジャー、失格)を追跡します。
  • [マッチイベント - 再生と監査のためのすべての重要なイベント(スコア変更、ペナルティ、タイムアウト)のログ。

これらのコレクションをリンクするために、Directusの組み込みのリレーションフィールド(many-to-one、多くの-to-many)を使用します。例えば、マッチは2つのチーム(または複数のチームフォーマットで複数のスコアエントリ)と異なる時間で記録された複数のスコアエントリを持つことができます。 ]]を追加することを検討してください同じDirectusインスタンスから複数のイベントを実行する場合は、コレクションは、各トーナメントは独自のスケジュールと規則を持つことができます。

認証されたレフリーがスコアを書くことができるよう、権限を設定します。パブリックスコアボードのフロントエンドは最新のデータへのアクセスのみを必要とします。また、マッチステータスとスコアのみへの書き込みアクセスが制限されている「スコアキーパー」ロールを作成することもできます。

リアルタイムでリアルタイムでリアルタイムでリアルタイム更新

ペイントボールのトーナメントは、スコア表示ですぐに動きます。 直接「]]]」は、任意のコレクションで変更を購読することができます。 参照がスコアを更新するか、マッチステータスが変更されると、フロントエンドはWebSocketを介して即座に更新を受け取ります。

利用する:

  • フロントエンドプロジェクトにをインストールします。
  • ダイレクトインスタンスにWebSocket接続を作成します。
  • リアルタイムイベントの「スコア」または「マッチ」コレクションを購読します。
  • , , []イベントを聞いて、UIを適切に更新します。

このアプローチは、ポーリングの必要性を排除し、スコアボードを見ているすべてのデバイスが同期し続けることを保証します。 多くの同時一致の大きなトーナメントでは、WebSocketチャンネルを使用して帯域幅を低下させるために特定のマッチIDにスコープ付けされていることを検討してください。

ディープ・ダイブ:WebSocket接続管理

堅牢なスコアボードを構築する際、接続がうまく低下します。 と のイベントを WebSocket クライアントから購読します。 接続解除時に、指数関数的なバックオフの接続を実行し、1秒の遅延で起動し、最大 30 秒まで倍増します。 Directus の Realtime モジュールは、デフォルトで 30 秒ごとにハートビートを送信します。 3 つのハートビートを逃すと、接続が失われるのを想定する安全です。 チェック 左に、WebSocket を左に残します。

フロントエンドディスプレイの構築

フロントエンドは、プレイヤー、レフリー、スペクターが実際に見るものです。 Webアプリケーション、専用のタブレットインターフェイス、または大きなスクリーンダッシュボードとして構築できます。

フレームワークの選択

現代のJavaScriptフレームワーク(React、Vue、Svelte、またはVilla JS)が機能します。もし、トーナメントのスタッフが非技術的な場合、小さなスクリプトを持つシンプルなHTML + CSSページが最も簡単になります。より高度な相互作用のために、React with Directus SDKはソリッドな選択肢です。Vue 3は、そのコンポジションAPIでは、実際の時間データとまたはカスタムReactiveを使用してペアリングすることもできます。

軽量化ソリューションを好むチームにとって、Alpine.js を使って検討してください。ビルドステップなしで静的HTMLに反応動作を追加できます。 これにより、フライでスコアボードを編集したい小さなトーナメントに最適です。

Directus SDK との統合

Directus は REST クライアントとリアルタイム クライアントの両方を提供します。スコアボードでは、通常は以下のようなことができます。

  • REST API を使用して、初期のマッチデータとチーム情報を読み込むことができます。
  • WebSocket サブスクリプションに切り替えて、ライブ更新を行います。
  • 点火なしでスコアを更新するUIを設計して下さい(CSSの転移の助け)。

導入事例:

  1. フロントエンド(必要に応じて)を認証するか、パブリック読み取り専用のAPIトークンを使用します。
  2. ダイレクトスから現在のマッチリストを取得します。
  3. 各アクティブな試合では、2つのチームと現在のスコアが表示されます。
  4. 「スコア」コレクションの変更を購読し、スコア表示を再レンダリングします。

UI のスナップキーを維持するために、バッチスコアの更新: 複数のスコアイベントが数ミリ秒以内に来る場合は、非公開状態の更新を使用して単一のレンダリングにグループ化します(例、requestAnimationFrame または 100ms の非バウンス)。

ユーザーインターフェイスの設計

クラリティはパラマウントです。スコアボードのレイアウトには、以下のものが含まれます。

  • チーム名(大文字、対照的な色)。
  • スコア番号(距離から読みやすく、プライマリスコアの最小80pxフォント)。
  • マッチタイマー(カウントダウンまたは経過時間)。
  • 「スタタス」インジケーター(例:「プレイ」、「ブレイク」、「ファイナル」)。
  • オプション: 個々の統計のための除去のカウンターかキル - 平均比。

高コントラストカラー(例えば、暗い背景の白のテキスト)を使用し、画面を乱雑にしないでください。 応答設計は、スコアボードが50インチのテレビとレフリータブレットの両方でよく見えるようにします。 テレビディスプレイの場合、単一のマッチビューで16:9のアスペクト比を考慮する。 モバイルレフリー画面の場合、複数のマッチのためのタブでよりコンパクトなレイアウトを使用します。

スコア、タイマー、マッチステータスの表示

データフローは、以下のような機能があります。

  • リーフリーは、モバイルフォームでスコア(または除去イベント)を入力します。 POSTリクエストは、Directus API に行きます。
  • ダイレクトスは、WebSocketを通じて、レコードを保存して「作成」イベントを放送します。
  • フロントエンドはイベントを受信し、ローカルの状態を更新し、スコアを再レンダリングします。
  • タイマーはクライアント側(ローカルクロックを使用して)またはサーバー側(Directusフィールドで開始/終了時刻を処理します。 精度のために、サーバー側アプローチを使用します。マッチが始まると、リーファは]フィールドを設定し、フロントエンドはそれから残りの時間を計算します。 サーバは、Directusフローまたは小さなカスタムエンドポイントを介して毎秒フィールドを更新することもできます。

マッチステータスについては、 直接 (例えば、「設定」から「プレイ」まで) のステータスフィールドを変更します。 共通パターンは、タイマー、増分スコア、およびペンタリティーの呼び出しを開始/停止するボタンで、参照先の「コントロールパネル」ビューを持つことです。 認証が必要な別のページとしてこれをビルドしてください。 ダイレクトスがロールベースの権限を使用して保護します。

カスタムスコアボードシステムの主な特徴

基本を超えて、これらの高度な機能を検討して、トーナメントを目立たせるようにしてください。

  • [複数のマッチビュー] - あなたのトーナメントが同時フィールドを実行すると、スコアボードはすべてのアクティブな試合を表示したり、フィールド間で切り替えることを可能にします。 複数のフィールドディスプレイ用の2x2または3x2パネル付きのグリッドレイアウトを使用してください。
  • ] スコアボード自体ではなく、再生またはスローモーションが、データレイヤーは「uno」アクションをサポートできるので、間違いを訂正できます。タイムスタンプですべてのスコア変更のログを実装します。コントロールパネルには、最新のイベントを反転する「uno last」ボタンが含まれている場合があります。
  • スポンサー統合 - サイドバーまたはマッチ間のスポンサーロゴを回転させます。 ダイレクトスコレクションを使用して、画像フィールドとソート順で。 フロントエンドは30秒ごとにランダムスポンサーを表示したり、ティッカーで表示したりすることができます。
  • ] ストリーミング用の公開 API] - オンラインでトーナメントを放送すると、スコアボードはiframeまたはカスタムRTMPでオーバーレイしました。 OBSのような多くのストリーミングツールは、ブラウザウィンドウをキャプチャすることができます。 スコアボードを透明な背景に設計して、ゲームフィードをオーバーレイします。
  • Paperバックアップモード] - デジタルシステムとともに、常にプリントされたスコアカードとペンの準備が整っています。 さらに、ネットワークが返したときに、ローカルストレージでスコアを格納し、同期する単純なオフラインでキャプチャ可能なフォールバックページを作成します。

アドバンスト:ライブストリームのためのスコアボードオーバーレイ

トーナメントをライブストリームにする場合は、OBSオーバーレイ用に最適化された別のHTMLページを作成します。すべての背景を削除し、絶対的な位置決めを使用し、チームカラーやスコアのCSS変数を露出して、ストリーミングチームが簡単に調整できます。[を[]で透明にします。このページをOBSでブラウザソースとして埋め込むと、スコアが変更されるとリアルタイムに更新されます。

実装工程

スコアボードをゼロからビルドして、スコアボードを移動させるための構造化されたプロセスに従ってください。

ステップ1:トーナメントルールとスキャリングを定義する

任意のコードを書く前に、正確にどのようにしてスコアリングするのかを文書化します。ポイントはフラグに触れる必要がありますか? mercyルールはありますか? オーバータイムの解決方法は? このルールは、データモデルを指示します。例えば、除去ポイントがカウントした場合、除去イベントの別のコレクションが必要です。また、時間の制限、ペナルティポイントの控除、および突然の死のような特別なシナリオを定義します。

ステップ2:ダイレクトコレクションを設定する

直接プロジェクトにログインし、先に概説したコレクションを作成します。例えば、検証ルールを追加します。例えば、スコアは非負の整数でなければなりません。スコアへのアクセスを書き込み、ステータスを一致させる「リーファー」ロールの許可を設定し、「パブリック」ロール(フロントエンドによって使用される)が読み取り専用アクセスを持っています。一部のフィールド(プレイヤーの連絡先情報など)が隠されるべきかどうかは、Directusのフィールドレベルの権限を使用してください。

ステップ3: APIエンドポイントの構築やDirectus SDKの使用

直接生成された REST エンドポイントをフロントエンドから直接使用したり、追加のビジネスロジック(例えば複数のイベントから合計を計算する)が必要な場合は、カスタム API エンドポイントを作成することもできます。ほとんどのトーナメントでは、組み込み REST と WebSocket エンドポイントが十分です。 []Directus SDK] を使用して、認証とリアルタイムのサブスクリプションを簡素化します。 エンドポイントを経由して、サーバー側同期する必要がある場合は、CFLT: または CFLT:] を経由してジョブを直接作成します。

ステップ4:フロントエンドコンポーネントを開発する

観客のための表示ページを作成し、参照のためのコントロールパネル。 観客のビュー読み取り専用を維持し、大きな明確な要素に焦点を当ててください。 コントロールパネルは、ボタンとフォームでよりコンパクトにすることができます。 スコアの変更(例えば、スコアの増分時に短いフラッシュ)のためにCSSアニメーションを使用してください。 コントロールパネルのために、手袋を着用している場合でも、簡単にタップできる大きなボタンでモバイルファーストデザインを使用して検討してください。

ステップ5:実際のマッチでテスト

練習は、参照者やプレーヤーとして行動するボランティアと一致します。クイックスコアの変更、複数のフィールド、ペナルティコール、ネットワークの問題などのさまざまなシナリオを模倣します。接続が低下すると、WebSocketが自動的に再接続されていることを確認してください。 undo機能(実装されている場合)をテストし、最終的なスコアが試合終了後に変更することはできません。また、オフラインのフォールバックをテストします。ネットワークを抜いて、スコアボードが最後に知られているスコアとコントロールパネルが後で同期するように変更することができることを確認します。

ステップ6: スタッフの展開とトレーニング

ローカルサーバーまたはクラウドホストにフロントエンドを展開します。オフラインイベントでは、DirectusとフロントエンドをWiFiホットスポットで実行します。Docker Composeを使用して、ダイレクトと軽量のWebサーバー(NginxやCaddyのような)をフロントエンドにバンドルします。コントロールパネルを使用する方法に関する列車の参照 - できるだけシンプルにしてください。チームのスコアを1つタップで増やすと、タイマーの開始/停止ボタンが1つあります。プリントクイックカード。また、手動でシステムが故障した場合、手動でシステムが停止します。

ダイレクトスにおけるセキュリティと権限

スコアボードは複数のロールでアクセスしたライブシステムであるため、セキュリティは重要である。 3つのダイレクトロールを作成することから始めなさい:

  • [管理者[]] - すべてのコレクションと設定(トーナメント主催者が使用する)にフルアクセス。
  • [Referee] - スコア、マッチステータス、ペナルティ、マッチイベントへのアクセスを書き込みます。 チーム、プレーヤー、トーナメントへのアクセスを読んでください。
  • []:パブリック - スコア、マッチへの読み取り専用アクセス(ステータス「ライブ」または「終了」を持つ人々のみ)、チーム、プレーヤー。 書き込みアクセスなし。

ダイレクトスのパーミッションシステムを使用して、コレクションレベルでこれらを強制します。追加のセキュリティのために、コントロールパネルが特定のタブレットでのみ使用される場合、IPアドレスによるレフリーアクセスを制限します。特に、ストリーミングオーバーレイのためにインターネットにそれを露出している場合は、DirectusインスタンスでHTTPSを有効にします。

ライブスコアボードのパフォーマンス最適化

トーナメントは、同時に行われるマッチの数がいくつあるかもしれません。 WebSocket フィードの応答性を維持するには:

  • 頻繁に変更するコレクション(例えば、])と[)のみを購読します。イベント中に更新しない限り、静的コレクションにサブスクライブしないでください。
  • ダイレクトスのフィルタパラメータを使用して、関連するレコードのみを購読します。例えば、フィルタ[]でを購読してノイズを削減します。
  • フロントエンドでは、UIの更新を解除します。複数のスコアイベントが同じアニメーションフレーム内で到着した場合、単一のDOMアップデートにバッチを合わせます。
  • ブラウザのローカルストレージにローカルでチーム名とロゴをキャッシュするので、すべての接続で取得する必要はありません。
  • 非常に大きなトーナメント(選手の狩猟)のために、プレイヤーの統計をパギンスし、要求に応じてそれらをロードします。

成功の実装のヒント

コンテンツ

ダイレクトスに組み込まれたカスタマイズされたスコアボードシステムは、チャオティックなマニュアルスコアからプロ、魅力的な体験へとペイントボールのトーナメントを変換します。データモデルを所有し、リアルタイムの更新を活用することで、プレイヤーや観客が試合の毎秒通知をしながら、ルールセットに適応させるためのトータルな柔軟性が得られます。ここで説明した手順では、データモデリングから展開まで、トーナメント当日に確実に実行できるスコアボードを作成して、フィールドで全員を感動させることもできます。

更に読むには、Directus Webサイト、]]APPAトーナメントルール、および]でリアルタイムダッシュボードを構築する上での実用的なWeb開発チュートリアルを調べます。]]またはReact]。あなたの次のペイントトーナメントは同じに見えることはありません。