今回つくるもの
難易度
前回の続きです。
横スクロールゲームの作り方(その1)
を作っていない方はまずそちらからはじめてください。
もしくは、こちらをリミックスして始めます
前回はスクロールでおじさんが歩くところまで作りましたが、最終的な目標はフラッピーバードのようなゲームですので、ここではおじさんがジャンプしながら障害物(きのこの山)を越えていく部分を作っていきます。
きのこのコースをつくる
まずは障害物のきのこの山をつくっていきます。
新しいスプライトを作りましょう。
このような感じでいろいろな大きさのきのこを作りました。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-17.15.17.png?resize=820%2C689&ssl=1)
コードを書いていきます。
背景と同じ速さで左側に流れていくことで背景と一体になってスクロールするように見えます。
下図のようにコードを組みましょう。
旗が押された時に”自分自身のクローン”を3秒ごとにつくります
そしてクローンされた時に画面の右端(つまりX=240)に出現させます。
さらに、スクロール速度の2倍の速さで移動させます。
そうすることで、きのこが背景と一緒にスクロールするように見えます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-17.23.49.png?resize=541%2C535&ssl=1)
緑の旗を押してみてください。下図のように順番に背景と一緒にきのこが出てこれば成功です。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-17.31.29.png?resize=491%2C370&ssl=1)
左端にきたときに、そのままきのこが残ってしまっているので、きのこが左端に到達したら(つまりX<-240)そのきのこを隠すという指示を追加します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-11.41.23.png?resize=654%2C618&ssl=1)
つぎに、いろんなサイズのきのこがランダムに出てくるようにしましょう。クローンをつくったときに、コスチュームの番号を1〜4の乱数に設定するだけです。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-11.53.53.png?resize=654%2C618&ssl=1)
このようにランダムな大きさできのこが流れてくれば成功です。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-11.54.34.png?resize=357%2C266&ssl=1)
次に逆向きのきのこも作って、おじさんが通るコースを作っていきます。
”下きのこ”のスプライトを右クリックして複製を作り、”上きのこ”と名付けましょう。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-12.10.35.png?resize=494%2C355&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-12.10.55.png?resize=494%2C355&ssl=1)
上きのこのコスチュームを作っていきましょう。下図のように下きのこのコスチュームを上下反転させます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-12.14.32.png?resize=936%2C808&ssl=1)
緑の旗を押して、みてください。上下にきのこが現れれば成功です。しかし、同時に出てきてしまっているので、下きのこと上きのこが順番に出てきてコースになるようにしましょう。
下図のようにそれぞれの出現感覚を10秒にして、上きのこの出現を5秒遅らせます。
最後にステージのスクロール速度を-0.5に修正しましょう。
(ここの設定は難易度に影響しますので、お好みで設定してください)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-13.05.21.png?resize=343%2C374&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-13.05.15.png?resize=343%2C374&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-13.05.31.png?resize=343%2C374&ssl=1)
このように互い違いに下からと上からきのこが現れ、コースが完成します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-12.44.45.png?resize=476%2C357&ssl=1)
ビンゴおじさんを飛ばそう
では、ここから、画面をタップするとビンゴおじさんが飛ぶようなコードを組んでいきます。
ビンゴおじさんのスプライトに移動してコードを組みます。
マウスを押したら、上方向に飛ぶ(=Y軸プラス方向に動く)
そうでないときには、下方向に落ちる(=Y軸マイナス方向に動く)
というコードを組みます。
またループの間隔を0.05に設定しましょう。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-13.15.21.png?resize=461%2C575&ssl=1)
次に、ビンゴおじさんの大きさを少し小さくして、
ゲーム開始時に上から飛んでくるように設定します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-13.24.48.png?resize=464%2C596&ssl=1)
これで、おじさんの動きも完成です。このような動きになれば成功です。
ゲームオーバーを設定
ここから、きのこに当たったらゲームオーバーにするプログラムを追加していきます。
まずは、ビンゴおじさんのスクリプトで、きのこに当たったときに”きのこにあたった”というメッセージを発して、おじさんの動きを止めます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-13.58.38-1-1024x625.png?resize=1024%2C625&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-13.58.57-1.png?resize=457%2C257&ssl=1)
このままだと、背景は動きっぱなしなので、背景の動きを止めます。
”ステージ”、”下きのこ”、”上きのこ”すべてに、以下のコードを追加していきます。
同じコードを使うときは、バックパックを活用しましょう。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-14.04.51-1.png?resize=401%2C182&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-14.06.47-1.png?resize=951%2C890&ssl=1)
次に、きのこに当たった時に、ゲームオーバーの感じを出すようにしましょう。
もともとよういしていた、目がバツになっているスプライトを活用します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-14.16.57-1024x551.png?resize=598%2C321&ssl=1)
おじさんがきのこに当たった時に同じ場所に”やられた”のスプライトを表示するように設定します。
まずきのこにあたったときの座標を取得します。x座標は-150で固定されているので、取得するのはY座標だけで大丈夫です。ビンゴおじさんのスプライトに以下のコードを追加します。
きのこに当たった時に、スプライトを隠すのと、スタートした時に”最前面に移動させる”のも忘れないようにしましょう。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-14.54.14.png?resize=838%2C527&ssl=1)
次に、”やられた”のスプライトに以下のコードを書き、きのこに当たった時に、このスプライトが、同じ場所に表示されるようにします。表示された時にコスチュームを繰り返すことでアクションをつけます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-15.20.53.png?resize=685%2C558&ssl=1)
緑の旗を押してゲームをしてみてください。フラッピーバードのようなゲームになってきました。
以下の動画のようになれば成功です。
BGMの設定
さいごに、BGMの設定です。
BGMの設定はステージのコードで行いましょう。全体にかかわることはステージで行うのがオススメです。今回はClassical Pianoを選択しました。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-15.30.10.png?resize=756%2C553&ssl=1)
次におじさんがジャンプしたときの音もつけましょう。ビンゴおじさんのスプライトにコードを追加していきます。今回はZoopの音を選択しました。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-15.44.17.png?resize=732%2C509&ssl=1)
最後に、きのこに当たった時の音も設定します。やられたのスプライトに追加していきます。
今回はBonkを選択しました。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-04-15.44.33.png?resize=733%2C510&ssl=1)
今回はここまでです。
次回はスコアやスタートボタンなどを作っていきます。