為什麼自訂的分數牌事件

彩彈比賽的時間很快, 決定會在幾秒內發生。 Off the shelf 分數板通常會為传统運動設計, 如籃球或足球, 缺乏彩彈獨有的比賽模式所需的灵活性。 自訂系統提供:

  • 反映消滅、旗子抓取或點數目標的 Real time recorded [[FLT: 1]] 更新。
  • 支持多樣型 [[FLT: 1]] —— 從3 ⁇ man 隊伍到大型情景遊戲, 而不強硬的樣本 。
  • 通过动态圖像、活的定時器和隊伍的特有數據,增强觀眾的接觸 。
  • 以平板或裁判器的數據輸入自動化,
  • 帶出機會 顯示赞助商標誌、事件名稱和自訂顏色方案。

使用自訂的解答, 您也擁有此資料。 您可以在之後分析相對歷史、 玩家的表現和比賽的走向, 某些是不可使用的紙片或密閉的專有系統。 像 Directus 這樣的現代無頭的CMS , 不仅讓這項工作有可能, 而且可以跨過不同事件重複 。

利用Directus來取您的分數板後端

Directus 是一款開放的無頭型 CMS, 作為您的分數板應用程式的強大的後端。 它提供一個清潔的、 方便使用者的界面, 供管理者管理球隊、 匹配和分數而不寫單行碼。 它的 REST 和 GraphQL API , 再加上实时的 WebSocket 支援, 使它成為一個活的分數板系統的理想選擇 。

建立直線專案

您可以在自己的伺服器( 自主辦) 上執行 Directus , 或是使用 Directus Cloud 服務來做管理下的工作。 對於比賽的設定, 自主辦本地網路可能更可取, 以避免空間。 循這些步態 :

  1. 透過 Docker 或直接的節點部署安裝 Directus 。 [[FLT: 0]] 官方快速啟動導覽 [[[FLT: 1] 以分鐘為例概述此行程 。
  2. 設定您的數據庫( PostgreSQL, MySQL, SQLite - SQLite 是理想的下線使用) 。
  3. 建立管理用戶, 並為您的比賽建立專案 。
  4. 如果您打算使用 WebSockets 更新即時分數, 啟用「 重新啟動」 模組 。

數據模型的设计

您的分數牌數據計算法應該會反射您的比賽結構。 在 Directus 中建立收藏檔( 表) :

  • 隊——名,徽(圖象網址),名單(與玩家的關係),主色.
  • layers ——姓名,數字,隊伍(關係),可選的數據(消除,死亡,命中).
  • 磁碟 回合、球場、起始時間、狀態(等待、直播、完成、加班)、期限。
  • 分數 ——比對(關係),隊(關係),分數值,時間戳(尤其是用于直播得分),得分事件類型(消除,旗子抓取等).
  • 处罚——可選擇,以追蹤玩家的違法(小,大,取消),并匹配關係.
  • Match Events——所有重大事件(分數變更、罰罰、超時)的紀錄,以重新播放和審查.

使用 Directus 建置的關係字段( many to one, many to many) 連結這些收藏。 例如 Match 可以有兩個參賽隊( 或更多為多隊格式) , 以及不同時段的多分數項目。 如果您打算從同一個 Directus 實驗中執行多項活動, 請考慮加入一個 [FLT: 0] [FLT: 1] 。

設定權限, 只有經證的參考者才能寫分, 而公開的分數板前端只需要讀取最近數據。 您也可以建立「 分數守護者」 角色, 寫入限制只符合狀態和分數 。

实时更新與 Directus 实时

彩彈大賽動作快 - 分數顯示的延遲會造成混亂。 Directus 的 [[FLT: 0]] realtime 模組 [[[FLT: 1]] 允許您订阅任何收藏的變更。 當裁判更新分數或匹配狀態變更時, 前端會立即通过 WebSocket 接收更新 。

用它:

  • 在您的前端專案中安裝 [[FLT: 0]] 。
  • 建立與您的 Directus 實體的 WebSocket 連接 。
  • 訂閱「 分數」 或「 分數」 的現時事件集 。
  • 注意, 注意 , 注意 。 [[FLT: 1]]、 [[FLT: 2]] 和 ] 事件, 並依此更新 UI 。

這種方法可以消除投票需求, 并确保每一個觀察分數牌的裝置保持同步。 对于很多同时比賽的大賽, 請考慮使用標準為特定匹配的 網頁通道來降低頻寬 。

深潜: WebSocket 連接管理

建立強硬的分數牌時, 處理連接會輕輕的下降。 訂閱從 WebSocket 客戶端傳入 [[FLT: 4] 和 [[FLT: 5] 的事件。 斷線後, 執行 指数回連接 —— 以1秒的延遲開始, 并雙倍的30秒。 Directus 的实时模組默认會每30秒送出心跳; 如果您錯過3秒, 就可以安全地假定連接會失掉 。 在分數牌上顯示一個小的「 連接失」 指示器, 讓工作人员知道檢查網路。 如果 WebSocket 仍舊在下, 前端可以每幾秒回投票一次 REST API 。

建構前端顯示

前端是玩家、裁判和觀眾所看到的。 您可以把它建為網絡應用程式、 专用平板介面, 甚至大型的螢幕儀表板 。

選擇框架

任何現代的 JavaScript 框架( React, Vue, Svelte, 甚至是vanilla JS) 都會成功。 如果您的比賽員員不是技术性的, 簡單的 HTML + CSS 頁面, 包含小的文稿可能會很容易。 更進一步的互動, 和 Directus SDK 的互動是坚实的選擇。 Vue 3 及其构成 API 也與使用 [[FLT: 6] 的实时資料或自訂的相對 。

對偏愛輕量级解決的球隊, 請考慮使用 [[FLT: 0]] Alpine.js [[[FLT: 1]] —— 它讓您可以在不建階段的靜态 HTML 中加入反應行為。 這對小賽會是理想的, 您可以在飛行區編輯分數牌 。

和 Directus SDK 集成

Directus 提供 REST 客戶端與实时客戶端。 對於分數牌, 你通常會:

  • 使用 REST API 來載入初始匹配資料與團隊資訊 。
  • 切換到 WebSocket 訂閱以进行直播更新 。
  • 設計UI以更新分數而不閃烁( CSS 轉換說明) 。

示例集成流程:

  1. 認真前端( 如果需要) 或使用只讀 API 令牌的公開 。
  2. 從 Directus 中取取目前的匹配清單 。
  3. 顯示兩支隊伍及其目前的分數 。
  4. 訂閱「 分數 」 收藏的變更, 並重新交換分數顯示 。

要保持 UI 的 snappy, 批次分數更新: 如果多個分數事件在幾毫秒內出現, 使用已解開的狀態更新( 例如, 要求 AnimationFrame 或 100ms debounse) 将它们組成單個渲染 。

設計使用者介面

明確度是最重要的,好的分數板布局包括:

  • 團隊名稱( 大, 反差的顏色) 。
  • 分數( 非常大, 很容易從遠處讀取—— 初等分數最少80px字型) 。
  • 匹配的定時器( 計算下或過時 ) 。
  • 一個「狀態」指示器(例如「玩」、「碎」、「最後」)。
  • 選擇: 消除數據或殺人率

使用高相對顏色( 如在深色背景上使用白文本) , 避免遮蔽屏幕。 反應性設計可确保分數板在50英寸電視和裁判平板上都好看。 对于電視展覽, 考慮16: 9 的視窗, 單一對比; 对于可動裁判屏幕, 使用更緊凑的布局, 并用分頁來對多對比 。

顯示分數、 定時器和匹配狀態

數據流是這樣運作的:

  • 裁判用手機表單輸入比分( 或消除事件) 。 POST 的要求會直接輸入 Directus API 。
  • Directus保存唱片,
  • 前端接收此事件, 更新其本地狀態, 並重新傳送比分 。
  • 定時器可以處理客戶端%%s( 使用本地時鐘) 或伺服器%side, 以 Directus 字段來做起始/ 結束時間。 精確化, 請使用伺服器%side 方法: 當比賽開始時, 裁判員設定 [[FLT: 7] 字段, 前端會計算剩下的時間。 伺服器也可以每隔一秒通过 Directus 流或小自訂的端點更新一個字段 。

相對狀態 : 讓參考者將Directus的狀態域( 例如從「 設定 」 變為「 玩法 」 ) 。 一個共同的模式是讓有按鈕的參考者有「 控制面板 ” 的視角, 以啟動/ 停止定時器、 增量分數和呼叫罰金。 建立此功能為需要認證的單一頁, 用Directus 建置的 角色來保護它 。

自訂分數板系統的關鍵特性

對於你的比賽,

  • 多重匹配檢視 [[FLT: 1] — 如果您的比賽是同時執行的, 計分牌可以顯示所有正在使用的符合或允許在字段之間切換。 多位置顯示使用 2x2 或 3x2 面板的格子佈局 。
  • 重放或慢放 [[FLT: 1] —— 不是對分牌本身, 但數據層可以支援「 取消」 動作( 儲存歷史) , 以便您可以校正錯誤。 用時間戳執行所有分數變更的紀錄; 控制面板可以包含一個「 取消最後一個 ” 按鍵, 以回傳最近的事件 。
  • 主動集結 [[FLT: 1]] —— 旋轉副列或相對之間的赞助者標誌。 使用 Directus 收集的「 赞助者 」 , 并附有影像字段和排序排序 。 前端可以每隔30秒顯示一次隨機的贊助者, 或是用勾選符顯示 。
  • 流動公用API [[FLT: 1]] — 如果您在網路上播出此比賽, 請用 iframe 或 自訂 RTMP 嵌入 計分牌覆蓋。 OBS 等許多流動工具可以捕捉瀏覽器視窗; 設計 計分牌的背景透明, 以覆蓋遊戲的輸入 。
  • 頁面備份模式 [[FLT: 1] — 即使有數位系統, 也總有印表卡和筆。 此外, 建立簡單的离線可倒轉頁面, 以網絡回傳時的分數儲存在本地Storage與同步 。

高级: Livestreams 的分數板覆蓋

如果您打算用實際流動您的比賽, 請建立一個對 OBS 覆蓋的 HTML 頁面。 移除所有背景, 使用绝对定位, 并曝光 CSS 變數的隊形顏色和分數, 讓流動隊可以輕易地調整它們。 使用 [[ FLT: 9] 的透明 [FLT: 10]] 。 把这个頁面嵌入 OBS 中, 並且會隨分數的變更而实时更新 。

步

跟著這個結構的流程 從零開始建立你的分數牌 一直到去活

第1步: 定義比賽規則與分數

在寫入任何代碼之前, 記錄一下分數的確如何工作。 一個點需要觸摸旗子嗎 ? 是否有寬恕規則 ? 加班關係是如何解決的 ? 這規則是您數據模型的定義 。 例如, 如果除點數值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值值

第二步: 建立直立收藏

登入您的 Directus 專案, 建立前面概述的收藏。 加入驗證規則, 例如, 分數必須是非 {負式整數 。 配置「 referee」 角色的權限, 以便寫入分數與匹配狀態, 而「 公用」 角色( 前端使用) 只能讀取 。 如果要隱藏一些字段( 如玩家聯絡信息) , 使用 Directus 的 字段─ 等級權限 。

第3步:建立 API 端點或使用 Directus SDK

您可以直接使用 Directus 產生的 REST 端點, 或是在您需要額外商業邏輯時建立自訂的 API 端點( 例如, 計算多項活動總和 ) 。 對於大多的聯賽, 已建的 REST 和 WebSocket 端點已經足夠了 。 請使用 [[FLT: 0] 的 Directus SDK [[FLT: 1]] 简化認證與实时訂閱。 如果您需要伺服器%side 定時器同步, 請建立 Directus 端點, 每秒一次通過 cron 或 flound 更新 [[FLT: 11] 。

第4步: 發展前端元件

建立觀眾的顯示頁面, 建立裁判員的控制面板。 保持觀眾只讀取 {> , 專注於大而清晰的元素。 控制面板可以更緊凑按鈕和表格。 使用 CSS 動畫來改變分數( 例如, 分數增長時的簡短閃光) 。 对于控制面板, 請考慮使用一個具有大按鈕的移动首款設計, 即使在戴手套時也能輕易地被敲擊 。

第5步: 試驗與真正的匹配

執行實驗與志愿者的參考人和玩家相匹配 。 模擬不同的方案: 快速分數變更、 多字段、 罰則呼叫、 網路問題 。 請檢查WebSocket 是否在連接率下降時會自动連接。 試驗取消功能( 如果已實施) , 并确保在比賽結束後不能變更最後的分數 。 另外, 試驗下線回落: 解開網絡, 并檢查分數板是否仍然顯示了最後已知的分數, 控制面板是否可以排隊變以同步 。

第6步:部署和火車工作人员

在本地伺服器或云端主機上部署前端。 在下線事件中, 執行 Directus 和前端的電腦, 并使用 WiFi 熱點。 用 Docker 編譯來捆綁 Directus 和一個輕量级的網頁伺服器( 如 Nginx 或 Caddy ) 。 教練如何使用控制面板- 尽可能簡單: 一次敲擊來增強一隊的分數, 一次按鍵來啟動/ 停止定時器。 列印快速的參考卡。 並且在紙面手冊系統上訓練一個備分器, 以防系統完全故障 。

安全與權限

安全性很关键。

  • 管理員[——完全可以使用所有收藏和設置(由聯賽組織者使用).
  • [ [FLT: 0] 參考 [[FLT: 1]] —— 寫入分數、 比賽狀態、 懲罰和比賽。 讀取參賽球隊、 球員和比賽的參考權限 。
  • 公開 ——只讀取分數、比對(只有地位為 " 活的"或 "完成的" ) 、 球隊和球員。 沒有寫入權限 。

使用 Directus 的權限系統來在收藏階段執行這些。 附加安全性時, 限制裁判員使用 IP 位址, 如果控制面板只用於特定的平板上。 開啟您 Directus 的 HTTPS 實例, 尤其是當您將它曝光到網路上以進行串流覆蓋 。

活的分數板的性能优化

比賽可能會有數十個比賽發生。

  • 只訂閱常變的收藏( 例如 [[ FLT: 12] ] 和 [ [ FLT: 13] ] ) 。 避免簽署像 [ [ FLT: 14] ] 這樣的靜态收藏, 除非在事件發生時更新 。
  • 使用 Directus 的過程參數只訂閱相關紀錄。 例如, 訂閱 [[FLT: 15] ] 的過程, 以減少噪音 。
  • 在前端, 解開 UI 更新。 如果多個得分事件在同一個動畫框內到達, 則分批進行為 DOM 更新 。
  • 以至不需要在每次連接上取得快取群名與標誌。
  • 對於非常大的比賽(數百名球員),

成功執行提示

  • [ [FLT: 0] 保持網路簡便。 [[FLT: 1]] 使用一個帶有足夠頻寬的 WiFi 網路。 避免連接公共裝置; 使用专用平板來裁判。 考慮使用5 GHz 網路來降低干扰 。
  • 取取初始資料。 [[FLT: 1] 啟動時, 將所有團隊名稱、排程表和標誌載入前端, 以免WebSocket停用立即折斷顯示 。
  • 使用倒置。 [[FLT: 1] 有一個有手動輸入字段的靜態 HTML 頁面, 作為最后手段, 同步到本地的 JSON 檔案, 可以在稍后上傳 。
  • 測試定時器的精度。 [[FLT: 1] 如果使用伺服器 + side 定時器, 請確保您的 WebSocket 訊息包含精确的伺服器時間, 以避免裝置之間漂移。 或者在客戶端上使用 方法, 以更精确的间隔 。
  • 考慮存取。 觀眾視障者使用大字型和高反差。 提供相對啟動/ 終點等重要事件的音效回應( 響聲器)。 使用 [[FLT: 18] 區域來宣布屏幕讀取器使用者的分數變更動 。
  • 電源計劃。 [[FLT: 1] 所有裝置應全部充電, 并有電池和電源條的備份。 可能的話, 使用 UPS 操作計分板筆記號機 。
  • 記錄您的資料模型。 保留一個收藏和關係圖, 這樣未來的比賽組織者就可以輕易地修改系統 。

結 论

建立於Directus上的定制分數牌系統可以將彩球大賽從混亂的手動分數轉為專業的,有經驗的。 擁有你的數據模型, 利用实时更新, 你就能完全灵活地适应任何規則, 同时讓玩家和觀眾每秒都了解比賽的情況。 在這裡概述的步子, 從數據模型到部署, 你就可以建立一個分數牌, 能在比賽日上可靠運作, 令場上所有人印象深刻 。

參考一下 Directus網站,APPA锦标賽規則[,以及用Vue.js或[反射[建造实时儀表板的實際網路發展教訓。你的下一個彩彈大賽永遠不會保持原樣 。