Playing Classic Game with Body Gestures using Pose Detection

Concept Development專案簡介

本專案結合 Mediapipe 與 OpenCV，開發數個利用肢體動作進行遊戲操控的系統。通過姿態檢測技術，實時捕捉玩家的動作並將其轉換為遊戲中的操作指令，例如跳躍、蹲下以及左右閃避。此系統旨在提供更直觀的互動方式，實現肢體動作與數位遊戲的無縫結合。

Implementation Resources(硬體資源)

• 有鏡頭的電腦
• CPU運算能力: i5 4210u UP

---

遊戲列表與技術概覽 Existing Library/Software

遊戲	使用技術	開發語言	部署方式
Flappy Bird	Flask, Mediapipe, OpenCV, PyAutoGUI	Python	本地伺服器部署
Ping-Pong	Socket, Mediapipe, Express	JavaScript	本地伺服器（Node.js）
Subway Surfers	Flask, Mediapipe, OpenCV, PyAutoGUI	Python	本地伺服器部署

---

Knowledge from Lecture

For Flappy Bird & Subway Surfers

• Python: 3.7 UP
• Mediapipe: 用於肢體辨識模型來即時偵測與追蹤玩家動作。
• Open-CV : 用於影像處理
• PyAutoGUI : 用指令操作鍵盤
• Gesture Mapping: 將特定手勢（如舉手、下蹲）映射到遊戲內的動作。
• Seamless Integration: 可與正在運行的遊戲配合，檢測姿勢模擬鍵盤輸入。
• mySQL: 紀錄 flappy bird 的英雄榜。

For Ping-pong

• [Mediapipe]
• cors: 2.8.5
• express: 4.21.2
• nodemon: 3.1.9
• socket.io: 4.8.1

---

架構

---

Implementation Process 遊戲的詳細介紹與使用方式

Flappy Bird & Subway Surfers Installation

1. Clone the repository:

   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer/flappy 或 subway

2. Install the required dependencies:

   pip install -r requirements.txt

   Ensure the following libraries are included in requirements.txt:
   • mediapipe
   • opencv-python
   • pyautogui
   • flask
3. Test the environment:

   python3 app.py

手勢控制

1. 姿勢檢測：
   • Mediapipe 識別身體關鍵點（肩膀、嘴巴）。
   • 處理檢測到的關鍵點以判斷手勢。
2. 手勢映射：
   • 使用 gesture_mapping.py 中的自定義邏輯將特定手勢映射到遊戲操作。
3. 鍵盤模擬：
   • 檢測到的手勢通過 pyautogui libary 觸發對應的鍵盤輸入。

---

Flappy Bird：

資料庫匯入：

• 下載XAMPP，可用以下網址下載 https://www.apachefriends.org/zh_tw/download.html

• 新增資料庫： 開啟XAMPP Control Panel，按MySQL的Admin 建立新的資料庫，名字為flappy_bird 按匯入： 選擇下載的flappy_bird.sql檔案，按匯入

• 遊戲執行： 執行python3 app.py //注意路徑要是該檔案的資料夾(flappy bird的資料夾) 輸入localhost:5000 以下為範例：

• 遊玩方式： 跳躍時肩膀的兩個點超過藍色的線，畫面中的鳥就會跳一下，通過水管就可得分，超過最高分，就可以把自己的名字輸入進我們的英雄榜

• Start Game！！！

Subway Surfers：

1. Press F5 to run /BobyGamer/subway/app.py
2. Once the program starts, click the displayed localhost URL127.0.0.1 to access the game page.
3. When the camera turns on, put your hands together and hold still until the system captures the anchor point.

4. Once everything is set, start the game!

---

Ping Pong

Installation

1. Clone the repository:

   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer/ping-pong

2. Install the required dependencies:

   cd backend
   npm init -y
   npm -i express cors nodemon socket.io

   Ensure the following libraries are included in package.json:

   • express
   • cors
   • nodemon
   • socket.io

3. Test the backend environment:

   npm run dev

4. Test the frontend environment:

   cd frontend
   live-server

---

手勢控制

1. 姿勢檢測：
   • Mediapipe 識別出手的特徵。
   • 處理檢測到的關鍵點以判斷手勢。
2. 手勢映射：
   • 使用 pose 中的自定義邏輯將特定手勢映射到遊戲操作。
3. 鍵盤模擬：
   • 檢測到的手勢通過 press_left(), press_right() 觸發對應的鍵盤輸入。

---

Hand Command

Installation

1. Clone the repository:

   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer

2. Run the program:

   python3 cam_command.py

3. Wait for camera preview show up and make the following poses

---

Usage

1. 允許 http 網站打開攝影機

• step 1.
• step 2.

3. 打開 google chrome 的實驗性功能，在 chrome 網址打上：

   chrome://flags/#unsafely-treat-insecure-origin-as-secure
   

4. 在 Insecure origins treated as secure 打上 http://serverIP，然後 enable
5. 最後 Relaunch，左上角會跳出使用攝影機的請求
6. 啟動遊戲，進入遊戲畫面。
7. 執行以下動作以控制遊戲：

• 水管鳥:
  • 跳躍: 遊戲中跳躍
• 地鐵跑酷:
  • 跳躍: 遊戲中跳躍
  • 蹲下: 遊戲中蹲下
  • 往左平移: 遊戲中左閃
  • 往右平移: 遊戲中右閃
• 乒乓球:
  • 左/右手觸碰鏡頭畫面邊框: 球拍左/右移動
• 身體指令:

  • OK手勢：執行 sl 指令

  • 鳥手勢：開啟 Flappy Bird 網頁伺服器

  • 握球拍手勢：開啟 Ping Pong 網頁伺服器

    

---

Enjoy playing Subway Surfers with your body movements! 🚀

連機版

伺服器架設

• server
  • Ubuntu 20.04
  • CPU：1 顆
  • 記憶體：2G
  • 硬碟空間：40GB

1. 設定域名指向伺服器

• 為了能夠使用 https 連線，因此需在 cloudflare 上新增 DNS 紀錄
  • 
• 設定 SSL/TLS 加密模式
  • 使用 自訂 SSL/TLS 完整 (嚴格)
    • 啟用加密端對端並在原點憑證上強制驗證。使用 Cloudflare 的原點 CA 為您的原點產生憑證。

2. 設定憑證

• 使用 Let's Encrypt 取得憑證 安裝 Certbot

sudo apt update
sudo apt install certbot python3-certbot-nginx

生成 SSL 憑證

sudo certbot --nginx -d <剛剛新增的網域名稱>

3. 在 nginx 設定檔中新增 proxy 紀錄

Nginx 設定範例

# HTTP 重定向到 HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name <剛剛新增的網域名稱>;

    # 重定向所有 HTTP 流量到 HTTPS
    return 301 https://$host$request_uri;
}

# HTTPS 服務設定

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name <剛剛新增的網域名稱>;

    # 設定 SSL 憑證路徑
    ssl_certificate /etc/letsencrypt/live/<剛剛新增的網域名稱>/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/<剛剛新增的網域名稱>/privkey.pem;

    # 設定 SSL 協議
    ssl_protocols TLSv1.2 TLSv1.3; # 強制使用 TLS 1.2 和 1.3
    ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384'; # 設定強加密套件
    ssl_prefer_server_ciphers on; # 讓伺服器優先使用指定的加密套件

    # SSL 預設選項
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # Flask WebSocket proxy 設定
    location /socket.io/ {
        proxy_pass http://< server ip 位置 >:8080; # 假設遊戲 run 在 8080 port
        proxy_http_version 1.1; # WebSocket 需要 HTTP 1.1 支援
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
    }

    # Flask HTTP proxy 設定
    location / {
        proxy_pass http://<server ip 位置>:8080; # 假設遊戲 run 在 8080 port
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
    }
}

4. 讓服務 run 在指定的 prot 上(假設 8080 port)

5. 上 browser 輸入剛剛新增的網域名稱開始遊玩

遇到問題

• 用 http 無法開啟鏡頭 解決方法：https://blog.csdn.net/qq_43530326/article/details/130974058 (也可查看 Usage )
• flappy bird 與 subway 遊戲，如果架到 server 上，server 無法控制我們自己的的鍵盤 解決方法：自己寫一個 flappy bird 遊戲，
• 架上 Server 後端運算再傳到前端會延遲 解決方法：改在前端做運算

未來展望

• 把 subway surf 也上架到我們的伺服器
• 將 flappy bird 的 clock 統一
• 能把遊戲加上音效，更有臨場感
• 修一些遊戲上的小細節，像是讓 flappy bird 可以拍翅膀等
• ping-pong 連線對戰問題
• 新增更多手勢對應開啟部分程式或輸入，例如:sudo apt install...
• 提高手勢指令辨識度的準確性

Job Assignment分工表

組員	工作內容
吳楷賀	乒乓球遊戲製作、撰寫 readme
陳子晴	水管鳥遊戲製作、Mediapipe 影像辨識、撰寫 readme
廖志賢	地鐵跑酷遊戲製作、撰寫 readme
楊立楚	用手勢或身體打指令、撰寫 readme
葉芷妤	伺服器設定、架設、撰寫 readme

感謝名單

• BlueT
• 柏瑋學長
• Josh學長
• Reg 學長
• Chat GPT

Reference

https://youtu.be/Z2EGhplFOHs?feature=shared

https://github.com/web-tunnel/lite-http-tunnel

https://blog.csdn.net/qq_43530326/article/details/130974058

https://www.youtube.com/watch?v=P_Mtzj-oLdk

https://github.com/ImKennyYip/flappy-bird?tab=readme-ov-file