ボディートラッキングAIを利用してドライビングゲームを作る － ml5.jsとPoseNetでハンドル操作を検知 － JavaScriptでやる1分間プログラミング

さて、「恐竜ゲーム」では基本的なモノの動きのコーディングをやってきました。図形や画像を継続的に動かしたり、跳ね返りやジャンプをプログラミングで表現できるようになったと思います。

今回からそれを応用してもう一つのゲームを作っていきます。それが、

バーチャルドライビングゲーム

です。百聞は一見にしかず。どんなゲームかご覧ください。

もうどんなゲームかお分かりかと思います。青い車が左右に動き、向かってくる障害物（工事中の道路標識）を避けるという超単純なゲームです。ただ、大きなポイントとなっているのが車の動かし方です。

「恐竜ゲーム」ではスペースバーを押す動作をきっかけにネコがジャンプしましたが、ここではカメラの前でハンドル操作をする”ふり”をすると、それに応じて車が動きます。これは一体どうなっているのでしょうか？

ボディートラッキングAIを利用したハンドル操作

今回のベースになっているのはこのCoding Trainのビデオです。

ここではml5.jsとPoseNetというボディトラッキングのAIを利用して、体の動きをリアルタイムに検知します。そこからハンドルを動かすそうさにつなげています。PoseNetについてはこのビデオも参考になりますのでご覧ください。

ml5.js: Pose Estimation with PoseNet

鼻と肩だけをトラックする

このPoseNetでは体前進のポイント（目、鼻、手首、肘、腰、膝、足首など）をすべてトラックできますが、今回はゲームをシンプルにするために、カメラの前に写った自分の上半身の中で鼻と肩に絞ってトラックします。ベースのアプリでは下のように鼻が赤い点、両肩が青い点でトラックされるようにします。

ここまではPoseNetをそのまま利用して、トラッキングポイントを3つに絞っただけです。次に、キャンバスからビデオの投影を外し、トラッキングの結果だけを表示するようにします。

こうすると鼻や肩を動かすとトラックポイントの位置が変わるようになり、それを利用して何かゲームを作れないか考えてみました。ここからはCoding Trainのビデオとは別の内容になります。

ハンドル操作をすると肩が上下する

このベースアプリを利用していろいろなゲームが考えられると思います。例えば肩を動かして平たい板のようなもののバランスを取り、上から落ちてくるボールをキャッチする、などはシンプルで面白いゲームだと思います。ここでは肩のポイントだけを利用したゲームを作ります。それは、ハンドル操作の真似をすると肩が上下することを利用して、画面上の車を左右に動かすというものです。バーチャルドライビングと命名しました。

ゲーム作成のステップ

ではどのような流れでゲームを作っていくか見てみましょう。

❶ 道路を描画する
❷ 街路樹とセンターラインを動かす
❸ 車を動かす
❹ 障害物を流して完成

コアな部分はこれで完成します。では次回は静的な背景を描画するところからスタートします！