William Zhang2026-09-28

MediaPipe Hand Landmarker による片手ピンチ 3×3 パズルゲーム

MediaPipe Tasks Hand Landmarker モデルを用い、片手の 21 キーポイントとピンチ状態を リアルタイム検出。「親指 + 人差し指のピンチ」をそのまま「ドラッグ / リリース」の セマンティクスにマッピングし、プレイヤーはカメラの前でピンチジェスチャによって ROI の描画とパズル操作を行います。インタラクション全体はキーボード・マウス・ タッチスクリーン不要です。

CVHand TrackingGithub

reComputer-RK / Docker / RKNN / YOLO に基づく片手ピンチパズルゲーム

https://github.com/doublelf/puzzle_game


プロジェクト概要

本プロジェクトは 217 行の純粋なパズルプロジェクトです: gesture.py がピンチを検出 → drawing.RectDrawer が 2 つの矩形を集める → puzzle_game.PuzzleGame が 3×3 にシャッフルして配置 → 同じステートマシンがピンチを使ってパズルをドラッグします。


クイックスタート

1. リポジトリのクローンとディレクトリ移動

bash
git clone https://github.com/doublelf/puzzle_game 
cd puzzle_game

2. 依存関係のインストール

bash
pip install -r requirements.txt

requirements.txt には次の 4 つの依存関係が固定されています:

text
opencv-python>=4.8.0
mediapipe>=0.10.14
numpy>=1.26.0
Pillow>=10.4.0

3. ゲーム起動

bash
python main.py                  # デフォルトはカメラ 0、水平反転を有効
python main.py --cam 1          # 2 台目のカメラを使用
python main.py --no-flip        # 水平反転を無効化
python main.py --no-landmarks   # キーポイントオーバーレイを無効化(デフォルトは有効)
python main.py --hide-trails    # ジェスチャートレイルを無効化(デフォルトは有効)

起動すると最初に「Pinch-Puzzle」メニュー画面が表示され、いずれかのキーを押すとゲームが始まります。

4. 操作方法

段階プレイヤーの入力プログラムの反応
DRAW親指 + 人差し指でピンチしてドラッグ → 離すと 1 つ目の矩形が描画される矩形が半透明の緑で塗りつぶされ、左上に Draw rectangles: 1/2
DRAWもう一度繰り返して 2 つ目の矩形を描画2/2 → READY - generating puzzle...、自動的に PLAY へ移行
PLAYピンチして最も近いパズルタイルを選択(ゴールドのパルス枠)トースト Tile #N selected + ヒント drag toward blank tile
PLAY指先を 隣接する空白マス の付近までドラッグ2 つのタイルが同時に緑で点滅 + トースト SWAP!、moves が増加
PLAY9 つのタイルが定位置に揃う中央で 80 個のにじ色の粒子が破裂 + 大きなトースト SOLVED!
いつでもR で現在のパズルをリセットDRAW 段階に戻り、矩形をクリア
いつでもM でメニューに戻るカメラはキャプチャを継続、ゲームループのみ終了
いつでもESC で終了カメラを解放、MediaPipe を閉じ、ウィンドウを破棄

カメラなし環境での実行

recomputer-rk3576-devkit は工場出荷時に USB カメラが接続されていません。本プロジェクトは、カメラなしでもエンドツーエンドで動作するように 3 つのツールを同梱しています:

tools/verify_all.py — 8 ステップ検証スイート

bash
cd /home/seeed/hand/puzzle_game
python3 -m tools.verify_all

各ステップを出力します:

  • モジュールのインポート (gesture / drawing / puzzle_game / overlay / utils)
  • utils のジオメトリ・テキストヘルパー
  • RectDrawer.update(None) が例外を投げない
  • shuffle_solvable が合法な盤面を生成する
  • aarch64 上で本物の MediaPipe Hand Landmarker がロードされる(XNNPACK delegate、約 110 ms のウォームアップ)
  • HandOverlay.add_event + レンダリング
  • 合成パイプラインが 60 フレームエラーなしで完走

tools/run_synthetic.py — オフラインレンダリング (PNG)

bash
python3 -m tools.run_synthetic --frames 180 --out /tmp/puzzle_demo
ls /tmp/puzzle_demo | wc -l      # → 180

完全な PuzzleGame + HandOverlay パイプラインを動かし、各フレームを out/puzzle_XXXX.png に書き出します。カメラがない環境では feh / eog / 画像ビューアで 1 フレームずつ確認するか、ffmpeg で mp4 に連結します:

bash
ffmpeg -framerate 30 -i /tmp/puzzle_demo/puzzle_%04d.png -c:v libx264 -pix_fmt yuv420p puzzle.mp4

tools/synthetic_source.py + tools/fake_tracker.py

合成ビデオソースと合成 HandTracker で、cv2.VideoCapture / gesture.HandTracker とインターフェース等価です。後で本物のカメラに切り替えるには、次の 2 行を置き換えるだけです:

python
cap = cv2.VideoCapture(args.cam)               # SyntheticHandSource を置き換え
tracker = HandTracker(num_hands=2)              # SyntheticHandTracker を置き換え

これで tools/run_synthetic.py が本物のカメラドライバスクリプトに昇格します。