🔧 阿川の電商水電行
去年（兩個月前），我用p5.js 和 ml5.js開發了一款遊戲，利用機器學習技術來辨識美國手語字母。這個專案是我在大學「物聯網與機器學習」課程上的作業，它讓我對整個流程以及物聯網如何塑造世界有了更深入的了解！
我在這個專案中使用的一項技術是 MQTT（訊息佇列遙測傳輸）。它與 Web Socket 的不同之處在於，MQTT 是專門為物聯網設計的，尤其適用於資源受限的設備，例如我在這個專案中使用的 Arduino。
但我只想用 MQTT 來實現多人遊戲功能。我之前用過 WebSocket，但後來我在想…“MQTT 的功能到底能有多強大？”
專案概述
這是一個桌面應用程式。它是一款簡單的遊戲，目標是用美國手語（ASL）拼寫出盡可能多的單字。遊戲支援單人模式和多人模式。它利用機器學習技術，透過ml5.js對使用者的手部動作進行姿態估計。您可以在 ml5.js 的文件中了解更多。
我使用的技術
為了開發桌面應用程式，我使用了Tauri框架，它可以幫助你建立自己的桌面/行動應用程式。 Tauri 非常棒，因為它支援在框架內進行 Web 開發，例如 React、Vue，或直接使用原生 HTML、CSS 和 JavaScript。在這個專案中，我選擇了原生 HTML、CSS 和 JavaScript。正如我之前提到的，我還使用了p5.js 和 ml5.js 這兩個函式庫。此外，我還使用了 SupaBase 來儲存使用者完成單字的最高分。
ASL機器學習模型
此流程圖大致展示了遊戲功能。當您進行美國手語 (ASL) 遊戲時，系統會偵測您的手勢和動作。然後，系統會將這些資料輸入機器學習模型，即時預測您正在使用的字母。遊戲結束後，系統會將您的分數和獲得的金幣資料上傳到資料庫。
Arduino 部分是一個擴展模組，它會在 LCD 螢幕上顯示資料，例如您的「每秒輸入字母數」和用戶名，如下圖所示：
MQTT 多人功能
為了實現這一點，我使用Mosquitto作為我的交易平台。下圖展示了多人遊戲的運作流程：
簡而言之，您可以建立一個房間，系統會產生一個程式碼，您可以將該程式碼分享給其他使用者加入房間。在大廳中，當所有人都點擊「準備」後，遊戲即可開始。示範影片如下所示：
我面臨的挑戰
我在建立這個專案時遇到了一些大問題。
1. MQTT 設定
我大致了解它的工作原理，但實際操作起來很困難，因為我並沒有真正使用物聯網設備與代理通訊（除非你把攝影機也算作物聯網設備）。由於它是用 Vibe 寫的，我必須花時間去理解它的流程以及資料的傳遞/接收方式。
2. 建立我自己的模型
我一開始嘗試的是影像分類。但問題在於，它不僅會捕捉你的手部動作，還會捕捉整張影像。這意味著如果我在不同的場景下使用這個模型，它就無法準確預測。後來，我在 ml5.js 的文件中學習了手部姿態，並開始建立自己的模型。為此，我專門建立了一個 Vibe 編碼專案，用於建立自訂的手部姿態模型。
3. 培訓問題
為了便於理解，我訓練了從 AZ 到 AZ 的字母（“J”和“Z”除外）。對於每個字母，它大約會收集 2000 條 Post Estimation 資料。訓練完成後，它會忘記最後兩個字母，即“X”和“Y”。我想到的解決方案是，在資料收集過程中，如果遇到“X”或“Y”，則收集超過 2000 條 Post Estimation 資料。在這種情況下，「X」將採集 4000 條，「Y」將採集 6000 條（以確保萬無一失）。如果有人知道這是為什麼，請告訴我！
概括
這是一個很有趣的專案！我不僅學到如何將 Arduino 連接到網路，還學到如何最大限度地利用 MQTT（就我所知）。如果您對這個專案感興趣，可以點擊這裡查看 GitHub 程式碼庫！
有任何問題或意見嗎？歡迎隨時與我聯絡！
原文出處：https://dev.to/francistrdev/i-vibe-coded-a-multiplayer-asl-game-using-mqtt-480
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
