機械学習したグーとパーで操作するFlappy Bird (フラッピーバード）っぽいゲームを作ったよ

7581 ワード
TeachableMachine JavaScript FlappyBird p5.js 機械学習 JavaScript テキストリンク

作ったもの

グーとパーで操作するフラッピーバードっぽいゲームを作りました。
握力のトレーニングにもなるかも。

なお、ゲーム部分は完全オリジナルではなくGitHubで見つけたフラッピーバードっぽいゲームを下地にしました。



ウェブアプリとして公開していますので、是非遊んでみてください。
※結構なマシンパワーを使いますので、ご注意ください。（下記動作確認PC参照）

URL：
https://adoring-jang-644f04.netlify.app/

動作確認PC

フレーム毎に機械学習モデルを走らせてます（この日本語で合ってます？）ので、結構なマシンパワーが必要です。

Dell ゲーミングノートパソコン G3 17
OS:Windows 10 Home 64bit
CPU:第8世代 Intel Core i7 8750H(コア:6/キャッシュ:9MB/最大:4.10GHz)
メモリー:16GB DDR4 2666MHz/保存装置:128GB SSD+1TB HDD
GPU:NVIDIA GeForce GTX 1050Ti 4GB

仕組み

ウェブカメラから、オリジナルの機械学習モデルにてグーとパーを識別し、グーの場合は上昇、グー以外の場合は落下します。

機械学習

GoogleのTeachable Machineでグーとパーを機械学習しました。

Teachable Machineは、めちゃくちゃ素晴らしいです。
UIがとても分かりやすく、誰でも直感で機械学習モデルを作成することができます。
マジで革命的です。

グーの画像をキャプチャーしているところ。

トレーニング（機械学習）の結果をその場でプレビューできます。

ここで作ったモデルを読み込むには、

main.js

const imageModelURL = 'https://teachablemachine.withgoogle.com/models/udstQuj_S/';

classifier = ml5.imageClassifier(
  imageModelURL + 'model.json',
  video,
  modelLoaded
);

画像を判定するコード

main.js

async function AIclassify() {
  classifier.classify(onDetect);
  function onDetect(err, results) {
    if (results[0]) {
      if (results[0].label == "グー"){
        //ここに処理を書く
      }       
   }
  }
}




resultsの内容

フラッピーバードっぽいゲーム

ここのコードをベースに改良しました。
https://github.com/CodingTrain/website/tree/master/CodingChallenges/CC_031_FlappyBird/P5

ありがとうございました。

なお、ゲーム画面は「p5.js」というライブラリが使われてます。

コード

GitHubをご覧ください。
https://github.com/tatsuya1970/Flappymodoki

「動いたらヨシ！」といったお恥ずかしいスパゲティコードですが、よろしければ、プルリクエストなどでご指導いただければ幸いです。

反省点

CSSがめちゃくちゃです。
p5.jsで設定したレイアウトとCSSで設定したレイアウトが混在して混乱の極みです。

そもそも何で作ったの？

現在受講中の ProtoOut Studioという講座で、Teachable Machineを知り、今まで機械学習での膨大な労力は一体なんだったんだという位の衝撃を受けたので、自分でも試してみました。

お好み焼き判別機とかラーメン判別機など、判別機系を作ろうと思いましたが、単なる判別機ではすぐに飽きそうですので、ゲームにしてみました。
１からゲームを作るのは大変なので、ネットの中から手頃なゲームのコードを探している中、フラッピーバードっぽいコードをGitHubで見つけたという次第です。

昔話

機械学習は、ちょっと前まで凄く大変でした。
1年前にUdemyの機械学習講座でCNN　(Convolutional Neural Network / 畳み込みニューラルネットワーク）を学んだ時の教材の Kerasのコードがこちら
https://github.com/keras-team/keras/blob/master/examples/cifar10_cnn.py
なのですが、pythonのライブラリを駆使しニューラルネットワークのいろいろな過程を経て、機械学習のモデルを作成しています。
このときはこの少ないコード数でCNNができるなんて凄い！って思いました。
私はこれからラーメンの画像を機械学習させた「ラーメン判定アプリ」や、関西風や広島風のお好み焼きを学習させた「お好み焼き判定アプリ」を作ったのですが、Pythonで作ったものをウェブアプリとして公開するには、私の知識では超困難で、ローカルで動くだけの自己満足で終わってました。

それが、先日Teachable Machineを知りました。
ニューラルネットワークを意識したコードを書かなくてもいい。そして何より重要なのが、Javascript対応ということ。つまりホームページをアップするくらいの簡便さで機械学習のアプリを公開できるということ。

AIの民主化、万歳！！