6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

フラッピーバードを自動操縦してみる!

Last updated at Posted at 2015-12-17

#フラッピーバードを自動操縦してみる!

こんにちは。プログラミングスクールTENTOで講師こうしをしている谷岡です。OtOMOの倉本さんが誰か書かないか?とつぶやいていたので、おもこしを上げて参加さんかすることにしました。

TENTO : http://www.tento-net.com/
OtOMO : http://otomo.scratch-ja.org/

普段ふだん、教室内ではビジュアル言語のビスケットやスクラッチはあんまり教えてなくて、主にJavaScriptなどのテキスト言語を教えてるので、お高くとまって見えるかもしれませんが、結構けっこうフレンドリーなので、もっと気さくに話しかけてほしいです。みんなが想像そうぞうするよりスクラッチもできます(とおもっています)し、ちびっ子もきらいじゃないです。

とはいえ、どんくらいスクラッチできるんだよ!?と言われたらことばでは証明しょうめいのしようがないので、以前いぜんに、大人の威厳いげんを見せるためにつくったフラッピーバードもどきと、それを魔改造まかいぞうしたバージョンを紹介しょうかいしたいと思います。

フラッピーバードとは?

フラッピーバードについては、Hour of Code などでも紹介しょうかいされているので、わたしが説明するより、そちらを参考さんこうにしてもらったほうがいいですよね。Hour of Code では、全10ステージをクリアすると、自分好みじぶんごのみのフラッピーバードがつくれてしまいます。(対象年齢は4歳以上となっていますが、漢字が多いので未就学児には少し難しいかもしれません。)

Hour of Code

もし、フラッピーバードがどんなものかよくわからないのであれば、スクラッチを使ってフラッピーバードをつくるまえに、一度 Hour of Code で Flappy Code(フラッピーゲーム)をつくってみることをおすすめします。

Flappy code : https://code.org/flappy
image

完成かんせいすると、URLでシェアすることができます。

Flappy ゲーム : https://studio.code.org/c/139076578
image

Scratch 2.0

さて、フラッピーバードがどんなものかわかったところで、スクラッチでつくってみましょう。今回のスクラッチの開発環境かいはつかんきょうは、Web版の Scratch 2.0 です。Webページを開いたら、「Scratchに参加しよう」でアカウントを作成し、サインインします。

Scratch : https://scratch.mit.edu/
image

フラッピーバードをつくる

スクラッチでの開発方法かいはつほうほうや、フラッピーバードのつくりかたは、ここではくわしく説明せつめいしませんが、「中を見る」でスクリプトの中身なかみをみると、けっこう簡単かんたんにつくれることがわかると思います。

Flappy Bat : https://scratch.mit.edu/projects/25083768/
image

フラッピーバードをつくる手順

開発手順かいはつてじゅんだけ、まとめておきますね。なが自体じたいは、Flappy Code と大差たいさありません。

  1. キャラクターをつくる
  2. キャラクターに加速度かそくどをつける
  3. 地面じめんにぶつかるとゲームオーバー
  4. クリックイベントでパタパタする
  5. 障害物しょうがいぶつをつくる
  6. 障害物しょうがいぶつをクローンする
  7. 障害物しょうがいぶつ移動いどうさせる
  8. 障害物しょうがいぶつにぶつかるとゲームオーバー

Flappy Bat

キャラクターを『とり』じゃなくて『こうもり』にしたので、Flappy Bat という名前にしました。完成かんせいするとこんなかんじになります。ぜひ挑戦ちょうせんしてください!100点までいくにはそうとう練習れんしゅう必要ひつようですよ。

Flappy Bat : https://scratch.mit.edu/projects/25083768/#fullscreen
image

自動操縦じどうそうじゅうとは?

さて、本家ほんけフラッピーバードは、その難易度なんいどの高さで有名ゆうめいになりましたが、つくってみた Flappy Bat の難易度なんいど相当そうとうのものです。かなりがんばっても10点とか20点くらいまでしかいかない人も多いと思います。どうにかして最高得点さいこうとくてん更新こうしんしたいので、機械学習きかいがくしゅうとか人工知能じんこうちのう(AIえーあい)をつかって自動操縦じどうそうじゅうできないか?とおもったわけです。

当時つくったプレゼン資料(修正版) : 「auto flight flappy bat」
image

最近さいきんは、人工知能じんこうちのうとか、機械学習きかいがくしゅうとか、すごくはやってて、気になっている人もおおいかもしれません。その入門編にゅうもんへんをスクラッチでやろう!というこころみです(でした)。(今回実装したのは、学習機能がないルールベースのオートパイロットです。)

自動操縦じどうそうじゅうしてみる

自動操縦じどうそうじゅうといえば、最近さいきんでは、Google社が実験じっけんしている自動車じどうしゃ自動運転じどううんてんなんかが有名ゆうめいですよね。でも、じつは旅客機りょきゃくきなどの飛行機ひこうきでは、すでに自動操縦じどうそうじゅう(オートパイロット)は一般的いっぱんてきで、なんらかのしかけで自動的じどうてき操縦そうじゅうされています。

というわけで、最終目標さいしゅうもくひょうである機械学習きかいがくしゅうによる自動操縦じどうそうじゅうはいったんおいといて、まずはルールベースでやってみようというわけです。フラッピーバードの操作方法そうさほうほうはじつは簡単かんたんで、障害物しょうがいぶつとの距離きょり高低差こうていさを見ながら、クリックするだけです。自動操縦機能じどうそうじゅうきのう実装じっそうするための入力を「キャラクターと障害物の距離」と「キャラクターと隙間すきまの高低差」と定義ていぎし、出力をクリックするタイミングと定義ていぎします。

  • 《入力》
  • キャラクターと障害物しょうがいぶつ距離きょり
  • キャラクターと隙間すきまs高低差こうていさ
  • 《出力》
  • クリックするタイミング

image

定義ていぎさえできてしまえば、この入力と出力のあるスクリプトをつくればいいわけです。(実際じっさいには、もうちょっと複雑ふくざつになってしまいますが...)数式であらわすと、入力 $x$ にたいして、出力 $y$ が、式 $y = \phi(x)$ であらわされるシステムがあったとき、この $\phi$ を定義ていぎすることが機械学習器きかいがくしゅうきをつくるということです。本格的ほんかくてき機械学習きかいがくしゅうをやろうとするなら、この枠組わくぐみは、たもったほうがよいです。

Flappy Bat 0.3

そして、三日三晩みっかみばんなべをして完成かんせいしたのがこちら。ジャジャーン!

Flappy Bat 0.3 : https://scratch.mit.edu/projects/25295560/
image

HARDモードと、EASYモードがあります。また、画面左上がめんひだりうえの[AUTO ON / OFF]を切り替えるきりかえることで、自動操縦じどうそうじゅうを ON / OFF できます。自動操縦じどうそうじゅうに勝てるかな?

てなかんじで今回はここまでです。もうちょっとまとまった時間じかんと、やる気があれば人間にんげん操作そうさをモニタリングして、学習がくしゅうする機能きのう追加ついかできると思ってますが、それはまた次回のおたのしみということで、それではよいお年を!

関連書籍案内

子どもにプログラミングを学ばせるべき6つの理由
image
著者: 神谷 加代 著/できるシリーズ編集部 著/竹林 暁 監修

12歳からはじめるHTML5とCSS3
image
TENTO (著)

略歴

TENTOスタッフ : http://www.tento-net.com/staffs

picture
谷岡広樹(たにおかひろき)
千葉大学工学部卒。大学卒業後、プログラマーとして自然言語処理や、
情報検索のシステム開発に携わる。TENTOの設立者である草野、竹林
両氏の志に共感し、2013年3月よりTENTOをお手伝い中。

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?