MediaPipeを使用して誰でも簡単にハンドトラッキングゲームの作成手順

MediaPipeとは

Googleが提供するライブストリーミングのためのオープンソースのMLソリューションです。このMediaPipeを利用すると高性能なAI画像処理アルゴリズムを利用したARアプリケーション等を簡単に作成できます。

詳細はMediaPipeの公式サイトでご確認ください。

環境構築

Android, Web, Python, iOS に対応しているそうですが、今回はPythonを使って仮想環境を作って開発していしていきます。

Pythonのインストール

公式サイトから最新のPythonをダウンロードしてインストールします。
インストール方法は別のサイトで手順を確認してください。
インストール時に「Add Python to PATH」にチェックを入れておいてください。

仮想環境の作成

仮想環境とはパソコンの中に仮想的な環境を作ることで、いろんなバージョンのpythonやライブラリを使えるようにすることです。

以下の手順を追ってください。

コマンドプロンプトなどを開いて、自分が作成したいプロジェクトディレクトリにいき、以下のコマンドで仮想環境を作成します。

python -m venv myenv

これでmyenvという名前の仮想環境が構築されます。

仮想環境の有効化

同じディレクトリ内にて、以下のコマンドで打って仮想環境を有効化します。
Windows:

myenv\Scripts\activate

macOS/Linux:

source myenv/bin/activate

必要なパッケージのインストール

仮想環境を有効化した状態で、以下のコマンドでライブラリをインストールします。

pip install mediapipe opencv-python

これで、mediapipeとopencvのライブラリを仮想環境上にインストールされます。

ゲームの実装

・ゲームの説明
目的: 右手の人差し指で赤い丸に触れてスコアを稼ぐ。
制限時間: 30秒。
操作:
'f' キーでフルスクリーンとウィンドウモードを切り替え。
'q' キーでゲームを終了。（30秒たつと自動的に終了はします。）

import cv2
import mediapipe as mp
import random
import math
import time

# MediaPipe Handsのセットアップ
mp_hands = mp.solutions.hands
hands = mp_hands.Hands()
mp_drawing = mp.solutions.drawing_utils

# スコアの初期化
score = 0

# ランダムに赤い丸を表示するための初期位置
circle_x = random.randint(100, 500)
circle_y = random.randint(100, 400)
circle_radius = 20

# カメラからの映像をキャプチャ
cap = cv2.VideoCapture(0)

# OpenCVのウィンドウを作成
cv2.namedWindow('Hand Game', cv2.WINDOW_NORMAL)
is_fullscreen = False

# ゲームの制限時間（秒）
game_duration = 30
start_time = time.time()

def is_hand_touching_circle(hand_x, hand_y, circle_x, circle_y, circle_radius):
    distance = math.sqrt((hand_x - circle_x) ** 2 + (hand_y - circle_y) ** 2)
    return distance < circle_radius

def generate_new_circle_position(frame_width, frame_height, circle_radius, exclude_area):
    while True:
        new_x = random.randint(circle_radius, frame_width - circle_radius)
        new_y = random.randint(circle_radius, frame_height - circle_radius)
        if not (exclude_area[0] <= new_x <= exclude_area[2] and exclude_area[1] <= new_y <= exclude_area[3]):
            return new_x, new_y

while cap.isOpened():
    ret, frame = cap.read()
    if not ret:
        break

    # 画像を水平方向に反転
    frame = cv2.flip(frame, 1)

    # 画像をRGBに変換
    image = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

    # 手のランドマークの検出
    results = hands.process(image)

    # 画像をBGRに戻す
    frame = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)

    # スコアとタイマー表示領域の背景を描画
    cv2.rectangle(frame, (0, 0), (200, 100), (0, 0, 0), -1)

    # 検出結果がある場合、ランドマークを描画し、右手の位置を取得
    if results.multi_hand_landmarks:
        for idx, hand_landmarks in enumerate(results.multi_hand_landmarks):
            mp_drawing.draw_landmarks(frame, hand_landmarks, mp_hands.HAND_CONNECTIONS)

            # ランドマークの座標を取得（例として8番目のランドマーク=右手の人差し指の先端を使用）
            hand_x = int(hand_landmarks.landmark[mp_hands.HandLandmark.INDEX_FINGER_TIP].x * frame.shape[1])
            hand_y = int(hand_landmarks.landmark[mp_hands.HandLandmark.INDEX_FINGER_TIP].y * frame.shape[0])

            if is_hand_touching_circle(hand_x, hand_y, circle_x, circle_y, circle_radius):
                score += 1
                # 新しい位置に赤い丸を再配置
                circle_x, circle_y = generate_new_circle_position(frame.shape[1], frame.shape[0], circle_radius, (0, 0, 200, 100))

    # 赤い丸を描画
    cv2.circle(frame, (circle_x, circle_y), circle_radius, (0, 0, 255), -1)

    # スコアを表示
    cv2.putText(frame, f'Score: {score}', (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (255, 255, 255), 2, cv2.LINE_AA)

    # 残り時間を計算
    elapsed_time = time.time() - start_time
    remaining_time = max(0, game_duration - int(elapsed_time))
    cv2.putText(frame, f'Time: {remaining_time}', (10, 70), cv2.FONT_HERSHEY_SIMPLEX, 1, (255, 255, 255), 2, cv2.LINE_AA)

    # ゲーム終了条件
    if remaining_time <= 0:
        break

    # 画像を表示
    cv2.imshow('Hand Game', frame)

    # キー入力をチェック
    key = cv2.waitKey(10) & 0xFF
    if key == ord('q'):
        break
    elif key == ord('f'):
        is_fullscreen = not is_fullscreen
        if is_fullscreen:
            cv2.setWindowProperty('Hand Game', cv2.WND_PROP_FULLSCREEN, cv2.WINDOW_FULLSCREEN)
        else:
            cv2.setWindowProperty('Hand Game', cv2.WND_PROP_FULLSCREEN, cv2.WINDOW_NORMAL)

# リソースの解放
cap.release()
cv2.destroyAllWindows()

# ゲーム終了メッセージ
print(f'Game Over! Your score is {score}')

取得できるlandmarkは以下の通りです。参考

動作確認

上記のファイルを仮想環境が作られたディレクトリ内で作成して、仮想環境を使って実行すれば動きます。VScodeではRun Python File in Dedicated Terminalを押せば仮想環境で実行されます。

結果(動作例)

感想

こんなにも簡単に、しかもローカルでハンドトラッキングができることに驚きました。他にも、いろんな機能があるようなので試してみようと思います。