今回つくるもの
難易度
今回作成するのは横スクロールゲームです。最終的にひと昔に流行った”フラッピーバード”を模した”フラッピービンゴおじさん”ゲームを作っていきますが、まずここではスクロールの基本を作っていきます。
※スクラッチ初心者の方は、まずこちらの、
もぐらたたきゲームの作り方(初級)
からチャレンジしてみてください。
スクロールの考え方
プログラミングに入る前にまずスクロールの考え方から理解しましょう
スクロールゲームでキャラクターが前に向かって動いているように見えるのは、背景が逆方向にスクロールしているからです。キャラクターは動いていません。スクラッチでは以下のように「背景1」と「背景2」の2つの背景を用意して
それが連なって左側に一定速度で動いていくようにプログラミングします。
そして「背景2」の右端が表示エリアの右端に来ると、「背景1」が「背景2」の右側にさっと移動して、それによりずっと背景が動いているように見えます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-02-23.01.24.png?resize=838%2C1003&ssl=1)
スクロールのプログラム
では、実際にスクラッチを使ってプログラムしていきましょう。
まずこちらをリミックスしてください。
はじめに、”おじさん”スプライトで旗を押したら(x:-150,y:0)に表示するという指示をしておきましょう。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-02-23.59.09-1024x564.png?resize=1024%2C564&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-02-23.59.23.png?resize=262%2C173&ssl=1)
ここから背景1を左方向に移動させていくプログラムを組みます。
背景を動かしていくには下図のように、「計算する」「動かす」という動きをひたすら繰り返します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-0.24.20.png?resize=893%2C361&ssl=1)
この「計算する」「動かす」をずっと繰り返すという指示を、”ステージ”のコードに書いていきます。
全体に関わるコードは”ステージ”に書いていくことがオススメです。
このとき、”スクロールx”、”スクロール速度”という変数も作って初期値を入れておきます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-0.30.06-1024x568.png?resize=1024%2C568&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-0.30.15.png?resize=302%2C299&ssl=1)
次に”計算する”、“動かす”のメッセージを受け取った時の”背景1”の指示を記載していきます。
”背景1”のスプライトのコードに移動します。
下図のようにコードを組みます。”スクロールx”が”スクロール速度”づつ変化していくことで背景の動きを作っていきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-0.44.12.png?resize=637%2C457&ssl=1)
緑の旗を押してみましょう。背景1が左側に移動することがわかります。
次に背景2の動きも設定て、二つの背景が連なって移動するようにしましょう。
背景2は前章で説明した通りX=480からスタートします。
”背景2”は”背景1”より480だけ右にいるということになるので、”背景2”にはこのようにコードを記載します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-0.49.54-1.png?resize=637%2C394&ssl=1)
緑の旗を押すと、二つの背景が連なって左側に移動するのがわかります。
しかしこのままでは連なってそのまま消えてしまうので、前章で説明した通り”背景1が左側に消えたと同時に、”背景1”を”背景2”の後ろに移動させるという動きを作らなければなりません。
再び、”背景1”のコードに戻って、
下図のように書き換えます。背景1が左側に消えた時、つまりスクロールxが-480になったときに、
反対側に大きく移動させる、つまり+960移動させるという指示になります。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-0.58.41.png?resize=838%2C480&ssl=1)
そして”背景2”も変更する必要があります。”背景1”が”背景2”の左側にあるときは、”背景1”より480右にある、という指定で良かったですが、逆に”背景1”が”背景2”の右側にきたときには”背景1”より480左側にあるという指示に書き換えなければなりません。下図のように指示をします。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-1.01.14.png?resize=837%2C533&ssl=1)
これで、”背景1”と”背景2”が連なって永遠にスクロールするようになりました。
これはスクロールの”典型的な型”ですので、覚えてしまいましょう。
背景を作ろう
前章ではスクロールの仕組みがわかりやすいように赤と青の2つの背景で学習しましたが、実際にスクロールするように見えるためには背景がひとつながりになる必要があります。
まず、背景1をつくっていきます。
好きな背景を描いてください。描くのが大変な場合は、ステージから背景をコピペして調整するのもオススメです。今回は、ステージにデフォルトで選択できるの”Blue Sky”をベースに加工しました。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-1.26.41-1024x651.png?resize=1024%2C651&ssl=1)
そして、ここから”背景2”もつくっていきます。ひとつながりになるためには
”背景1”の右端と”背景2”の左端
”背景1”の左端と”背景2”の右端
がそれぞれくっつかなければならないので注意してください。
いちばん手っ取り早いのが反転させることです。
今回は”背景1”の反転で”背景2”を作ります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-1.33.25.png?resize=935%2C755&ssl=1)
緑の旗を押してみてください、背景がスクロールしているように見えると思います。
歩いているように見せよう
今のままでは背景だけ動いていて不自然ですので。おじさんが歩いているように見せます
おじさんのコスチュームを見てもらうと2種類あるのがわかります。
これを繰り返し表示することで歩いているように見えます。
表示する高さ(Y軸の値)も調整しましょう。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-03-1.50.02.png?resize=731%2C428&ssl=1)
緑の旗を押してみてください。歩いているように見えると思います。
今回はここまでです。次回はさらにステージを作り込んでいきます。
横スクロールゲームの作り方(その2)
コメント
関係ないんですけど、You Tube見ましたが、ビンゴおじさんの声が全然おじさんじゃなくておじさんとは言えない声してるんですが、改名するほどじゃないですけど……………………………………………………………………………ほんとに関係ないです。
それは言えてるな。
すっかり返信できてませんでした。YouTube見てもらいありがとうございます!すごくうれしいです!!