リアルジャンプでDinoゲームチャレンジ第二弾！(MediaPipe Pose版)

# はじめに

Chromeブラウザでインターネットにつながらない場合に遊べるDinoゲームをご存知でしょうか。
他の名称でDinoランナー、T-REXゲームと呼ばれる場合もあります。
基本的にスペースキーのみで遊べますが、レベルが上がるとコンドル(飛来物)が飛んできて、矢印キーの下でしゃがむ必要もあります。

前回はM5StickC、または、M5StickC Plusの腕時計マウンタを足首につけて実際にジャンプしてDinoゲームを遊ぶことで運動不足解消を狙いました。

https://qiita.com/kitazaki/items/be29e4265cd12e26a822

https://protopedia.net/prototype/2847

# MediaPipe Pose版

人が大勢いるイベント会場でBluetoothは電波の影響を受けたので、今回はデバイス(M5StickC、または、M5StickC Plus)が不要で、パソコンのカメラでジャンプを検出してDinoゲームを遊ぶことで運動不足解消を狙います。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f37323437392f32333864633962622d613932332d353332332d326162352d3166393338326364386434312e6a706567.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3b1069d0-e614-a609-10ae-b621903e90d8.jpeg)

## MediaPipe Poseとは

カメラの映像から人間の姿勢を推論するライブラリで、全身の33個のランドマーク位置、または、上半身の25個のランドマーク位置を予測できます。
身体の胴体(ランドマーク位置の11, 12, 23, 24)を使用して、ジャンプを検知します。

![picture_pc_d52f232d75a3595083c4f793a586a933.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8623f2fc-6dcc-5d57-fade-dd5b62477177.jpeg)

# 構成

大きく2つのパートから構成されます。
①ローカル環境にHTTPSサーバを起動します。
②ブラウザを起動し、起動したHTTPSサーバへアクセスします。GitHubページへアクセスしても問題ありません。
カメラアクセスの許可を求められるので許可します。MediaPipe Poseのライブラリを読み込み、ジャンプを検知するJavascriptが実行されます。

![スクリーンショット 2023-05-02 17.25.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/12d929d4-9894-0769-434f-82f04857d0f1.png)

③キー入力を行うためのPythonプログラムを起動します。
④ジャンプを検知すると、キー入力を行うためのPythonプログラムへ通知(HTTP POSTリクエスト)を送信します。
⑤通知を受信するとキー入力を行います。(スペースキーを入力します。)
ジャンプを検知するブラウザ画面はバックグラウンドに移し、キー入力を行うブラウザ画面(Dinoゲーム)を選択します。(フォアグラウンドに移します。)

![スクリーンショット 2023-05-02 17.27.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/62411940-da87-2192-e259-e002db9712a5.png)

# コード

ジャンプの検知ロジックについてはmain.jsの内容を確認してください。

https://github.com/kitazaki/mediapipe_pose_dino_game

最初、以下のプログラムを参考にしましたが、静止した状態だとジャンプの誤検知が酷かったので、ロジックはほとんど書き換えました。

https://github.com/aminnj/jumpcount

# 手順

プログラムをGitHubからダウンロードして、①HTTPSサーバを起動します。

```bash
$ git clone https://github.com/kitazaki/mediapipe_pose_dino_game
$ cd mediapipe_pose_dino_game
$ python3 scripts/run_https.py
```

③キー入力用サーバを起動します。
pythonプログラムからキー入力を可能にするため、事前にpyautoguiモジュールをインストールします。

```bash
$ pip3 install flask pyautogui
$ python3 scripts/logger.py
```

macOSの場合、ターミナルからキー入力を検知すると警告が表示されます。
キー入力を許可するため、システム環境設定→セキュリティとプライバシー設定→アクセシビリティ→ターミナル.appを許可します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/7019e983-c733-a801-0b72-9077763674ce.png" width="50%">

# 動作確認

①HTTPSサーバの実行画面

```bash
$ python scripts/run_https.py
Generating a RSA private key
.........++++
..........................................++++
writing new private key to 'key.pem'
-----
Server running on https://0.0.0.0:443
127.0.0.1 - - [02/May/2023 12:43:27] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [02/May/2023 12:43:27] "GET /main.js HTTP/1.1" 304 -
...
```

③キー入力用サーバの実行画面

```bash
$ python scripts/logger.py 
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 736-922-939
127.0.0.1 - - [02/May/2023 17:00:45] "OPTIONS /logger HTTP/1.1" 200 -
data: {'njump': 1}
127.0.0.1 - - [02/May/2023 17:00:46] "POST /logger HTTP/1.1" 200 -
data: {'njump': 2}
...
```

実際にDinoゲームを行なっている様子です。

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/265e8178-cef0-543e-6e3d-1ba4d50646b0.jpeg)

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/f2a5ecc3-f4fb-d543-dbf6-5a358bb55b75.jpeg)

![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a30bda5a-d66e-5055-0fef-a4e2e8aa8724.jpeg)