プログラミング入門

Scratchの自動スクロールを使って、Flappy Bird風ゲームを作ろう

プログラミング初心者の子供に何を教えたらいいの?とお悩みの保護者のためのScratch(スクラッチ)の入門講座。Scratchで猫の動かし方はわかったけど・・・次にどんなことをしたらいいの?という疑問にお答えするシリーズです。

以前、ゲームでよく使う「スクロール」についてご紹介しました。今回は、そのテクニックのうち一つを使ってFlappy Bird風ゲームを作ってみたいと思います。

1. Flappy Birdって何?

1-1. Flappy birdとは

Flappy birdとは、2013年にリリースされ世界中で大人気になった携帯ゲームです。ルールは簡単で、画面をタップして鳥をふわふわ飛ばして、上下の土管の間をすり抜けるだけ。ですがこれが結構難しいのです。

今回は、スクロールを使ってFlappy Bird風のゲームを作ってみましょう。

1-2. Flappy birdの要素

Flappy birdを作るにあたり、要素を洗い出しましょう。
携帯ゲームの方はタップして鳥が空中に浮くように操作しますが、Scratchで作るので、スペースキーで鳥が飛ぶようにします。

 ・スペースキーを押すことで鳥が浮遊する
 ・上下から伸びた土管が画面の右から左へスクロールしていく
 ・土管の幅や、隙間の位置は都度変わる
 ・土管の間を通り抜けられたら1ポイント
 ・土管や地面にぶつかったらゲームオーバー

こんなイメージです。今回は「土管の間を通り抜けられたら1ポイント」という部分は作らずにひたすら土管の間を通り抜けられるようにするだけのゲームにしたいと思います。
 

2. コースを自動スクロールさせよう

2-1. コースのスプライトをアレンジしよう

今回は大きなスプライト2種類を交互に動かしてスクロールさせる方法を使います。前回の記事で作った作品をコピーしてコースを少しアレンジしてみましょう。

▼前回のプログラムはこちら

まずは、コースのスプライトの地面の凸凹を消して、土管の絵を書き加えます。また、土管の位置と幅をいくつかかえてコスチュームを複数作りましょう。これを地面1、地面2の両方のスプライトに対して作ります。

2-2. コースのプログラムを作ろう

コースの自動スクロールのプログラムはこのようにします。
前の記事ご紹介したプログラムに「次のコスチュームにする」を加えるだけです。これで作ったコスチュームの土管が表示されます。地面1、地面2それぞれに「次のコスチュームにする」を加えてください。

そのあとは、最初の位置を設定したあとは、コースが自動的に動くようにプログラムを作ります。
詳細を解説した記事も合わせてご覧ください。
<ゲームで使える!Scratchの自動スクロールテクニック3選>

3. 自機(鳥)のプログラムを作ろう

Flappy Birdという名の通り、今回のゲーム自機は「鳥」をスプライトとして使用します。今回は下図のスプライトを使うことにします。このスプライトはScratchに標準で搭載されているスプライトです。

3-1. 重力を表現しよう

Flappy Birdでは、何も操作をしないと鳥は重力で落ちていきます。なので、重力で落ちていく動きをつくりましょう。「重力」の表現は何度も記事でご紹介しているので、そろそろ大丈夫でしょうか?
「ずっとy座標が-●ずつ変わる」です。
これのプログラムを鳥のスプライトに作っておきましょう。

こちらの重力が存在するような動きに加えて、鳥の大きさを小さめにしておきます。描いた土管のサイズに合わせて、鳥が土管の間を通り抜けられるようにサイズを調整してくださいね。

今回は「y座標を-2づつ変える」にしましたが、描いた土管の幅や土管を動かすスピードに応じて落ち方を調整してみてください。数値を大きくすると(例えば-5、-10など)重力が強くなります。逆に数値を小さくすると(例えば-1など) 重力が弱くなります。

スタートの位置もゲームの難易度に影響を与えますので、いろいろ試してみてくださいね。
 

3-2. キーで操作できるようにしよう

次に、スペースキーを押したら鳥がふわふわ飛ぶような動きを作ります。プログラムは次のように作ります。
鳥っぽい動きになるように、合わせてコスチュームを変えることで鳥が羽ばたいているように見えますよ。

今回の「y座標を30ずつ変える」の数値も、調整してみてください。大きな数値にすると大きく上の方に飛びますが、土管の間をすり抜ける時にぶつかりやすくなります。値を小さくすると、スペースキーを押した時にあまり飛ばなくなるので今度は地面にぶつかりやすくなる危険が。。。この値がゲームの難易度に大きな影響を与えますので、細かく数値を変えて調整してみましょう。

3-3. ゲームオーバーを作ろう

このゲームでは、土管にぶつかった時、地面にぶつかった時にゲームオーバーになります。
ゲームオーバーのプログラムを作りましょう。

ゲームオーバーの時の背景を用意しましょう。

鳥のプログラムに、次のような条件を追加します。

土管に触れた時=濃い緑色に触った時、あるいは地面に当たった時=黄緑色に触った時は「ゲームオーバー」のメッセージを送るようにします。

背景の方に以下のようなプログラムを追加すれば、ゲームクリアとゲームオーバーの背景に変わります。背景が変わった後は、「すべてを止める」でプログラムを停止しましょう。

ここまでできたら、何度かゲームをプレイして、土管の隙間の幅を調整したり、スクロールのスピードを調整したりしてみてください。ちょうどいい難易度でプレイできるようにしましょう!

▼完成したFlappy Bird風ゲームはこちら

 

4. まとめ

今回は、ScratchでFlappy Bird風ゲームを作りました。
以前ご紹介した次のテクニックを組み合わせています。

・大きなスプライト2つを順番に表示して、コースをスクロールさせる
・重力を表現する

土管の間を通り抜けたら得点が増えるようにするには次のような方法があります。
 
・地面と土管のスプライトを分けておき、土管のスプライトのx座標が鳥のスプライトのx座標より小さくなったら1ポイント
・土管の隙間に何か別の色を設定しておき、その色に触れたら1ポイント
など

今回は土管と地面を同じスプライトとして描いたので得点が増えていく部分はつくりませんでしたが、得点の部分も面白いのでぜひリミックスして作ってみてくださいね。

また、鳥の動きをもっと上下左右キーで自由に動かせるようにしてみても面白いと思います。リミックスしていろいろ遊んでみてくださいね。

伴野悠佳 / YUKA TOMONO
この記事の著者伴野悠佳 / YUKA TOMONO
教育ヲタクの1児の母。自称ニコニコキッズクリエーター。東京理科大学大学院卒。元SE。小学生の頃から教育書を読んでいた教育ヲタク。大学では、電池の素材の性質について実験とコンピューターシミュレーションを比較する研究を行っていたことがきっかけでSEになる。出産&育休後、子ども向けプログラミング教室講師、子どもたちの考える力を育てるオンライン塾の講師。