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

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

  • リアルタイムスコアの更新 排除、フラグキャプチャ、またはポイントベースの目的を即座に反映します。
  • 複数のフォーマットのサポート—3人チームから大きなシナリオゲームまで、堅いテンプレートを強制することなく。
  • スペクターのエンゲージメントを強化 ダイナミックなグラフィック、ライブタイマー、チーム固有のステータスを通し、
  • 人件数の誤りを削減 タブレットやレフリーズのデバイスでデータエントリーを自動化することで
  • ブランディングの機会 スポンサーロゴ、イベント名、カスタムカラースキームを表示

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

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

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

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

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

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

データモデルの設計

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

  • チーム—name、ロゴ(画像URL)、ロスター(プレーヤーとの関係)、プライマリカラー。
  • プレイヤー—名前、番号、チーム(関係)、オプションのステータス(排除、死亡、ヒット)。
  • マッチ— ラウンド、フィールド、開始時間、ステータス(保留、ライブ、終了、過時間)、期間。
  • スコア—match(relation)、チーム(relation)、スコア値、タイムスタンプ(特にライブスコアリングに役立ちます)、スコーリングイベントタイプ(elimination、フラグキャプチャなど)。
  • ペンタリティープレイヤーと試合関係で、不法(マイナー、メジャー、解散)を追跡するオプション。
  • マッチイベント—再生と監査のためのすべての重要なイベント(スコア変更、ペナルティ、タイムアウト)のログ。

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

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

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

ペイントボール大会はすぐに動きます。スコア表示の傾向は混乱を作成します。Directus' リアルタイムモジュール 任意のコレクションの変更を購読することができます。 参照者がスコアまたはマッチステータスの変更を更新すると、フロントエンドはWebSocketを介して即座に更新を受け取ります。

利用するには:

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

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

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

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

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

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

フレームワークの選択

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

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

ダイレクトスSDKとの統合

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

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

導入事例:

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

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

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

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

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

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

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

このようにデータフローが機能します。

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

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

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

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

  • 複数のマッチビュー—トーナメントが同時フィールドを実行すると、スコアボードはすべてのアクティブなマッチを表示したり、フィールド間の切り替えをできるようにすることができます。マルチフィールドディスプレイ用の2x2または3x2パネル付きのグリッドレイアウトを使用してください。
  • 再生またはスローモーション— スコアボード自体ではなく、データレイヤーは「やりがい」アクション(履歴を保管する)をサポートできるため、誤りを修正できます。タイムスタンプですべてのスコアの変更のログを実装します。コントロールパネルには、最新のイベントを反転させる「完了」ボタンが含まれている場合があります。
  • スポンサー統合— スポンサーロゴをサイドバーまたはマッチ間へ回転させる。ダイレクトスコレクションをイメージフィールドとソート順に使用。フロントエンドは30秒ごとにランダムスポンサーを表示したり、ティッカーで表示したりすることができます。
  • ストリーミング用のパブリックAPI— オンラインでトーナメントを放送したら、iframe やカスタム RTMP でスコアボードオーバーレイを埋め込む。OBS のような多くのストリーミングツールは、ブラウザウィンドウをキャプチャできます。スコアボードを透明な背景にデザインすることで、ゲームフィードをオーバーレイします。
  • ペーパーバックアップモード—デジタルシステムでも、常にプリントされたスコアカードとペンを用意しています。さらに、ネットワークが返したときに、ローカルでスコアを格納し、同期するシンプルなオフラインでキャプチャ可能なフォールバックページを作成します。

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

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

実装工程

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

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

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

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

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

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

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

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

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

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

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

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

ローカルサーバーまたはクラウドホストにフロントエンドを展開します。オフラインイベントでは、Directus とフロントエンドを WiFi ホットスポットでローカルラップトップで実行します。Docker Compose を使用して、Directus と軽量の Web サーバー (Nginx や Caddy など) をフロントエンドにバンドルします。 コントロールパネルを使用する方法に関する列車の参照:チームのスコアを 1 つタップするだけで、タイマーの開始/停止ができます。 プリント クイックカード。 システムのバックアップは、システム全体でエラーが発生します。

直接におけるセキュリティと権限

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

  • 管理者—全てのコレクションや設定(大会主催者が利用する)へのアクセスに十分アクセスします。
  • リファレンス—スコア、マッチステータス、ペナルティ、マッチイベントへのアクセスを書き込みます。チーム、プレーヤー、トーナメントへのアクセスを読んでください。
  • パブリック—read-only は、スコア、マッチ(ステータス「ライブ」または「終了」のみ)、チーム、プレイヤーへのアクセスのみです。書き込みアクセスは禁止されています。

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

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

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

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

成功の実装のヒント

  • ネットワークをシンプルに保ちます。 十分な帯域幅を備えた単一のWiFiネットワークを使用します。 公共デバイスを接続しないでください。 参照のために専用のタブレットを使用してください。 5 GHzネットワークを考慮すると、干渉が低減されます。
  • 初期データをキャッシュします。 チーム名、マッチスケジュール、ロゴを、起動時にフロントエンドにロードして、WebSocket のアウトエイジがすぐに表示を破らないようにします。
  • フォールバックを使う。 マニュアル入力欄に最後のリゾートとして静的なHTMLページを、後でアップロードできるローカルJSONファイルと同期します。
  • タイマーの正確さをテストして下さい。 サーバ側タイマーを使用する場合、WebSocketメッセージには、デバイス間でのドリフトを避けるために、正確なサーバー時間が含まれることを確認してください。また、 []] より精密な間隔のためのクライアントのメソッド。
  • アクセシビリティを考慮してください。 ビジュアル・インパメンツを持つビューア用の大きなフォントとハイ・コントラストを使用します。マッチ・スタート/エンドのような重要なイベントにオーディオ・フィードバック(ブザー)を提供します。 ] 領域を使用して、スクリーン・リーダー・ユーザーに対するスコア変更をアナウンスします。
  • パワーを計画する。 デバイスは充電され、バッテリーや電源ストリップのバックアップが搭載されます。 スコアボードのラップトップをUPSで実行可能であれば。
  • データモデルを文書化します。 今後のトーナメント主催者は、簡単にシステムを変更することができますので、コレクションや関係の図を保管してください。

コンテンツ

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

さらなる読書のために、探検して下さい ダイレクトスウェブサイト, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , APPA大会ルールリアルタイムダッシュボードの構築に関する、および実用的なWeb開発チュートリアル プロフィール または 反応する. 次のペイントボール大会は、同じように見えません。