スクラッチで横スクロールゲームの作り方（その１）

今回つくるもの

難易度

今回作成するのは横スクロールゲームです。最終的にひと昔に流行った”フラッピーバード”を模した”フラッピービンゴおじさん”ゲームを作っていきますが、まずここではスクロールの基本を作っていきます。

※スクラッチ初心者の方は、まずこちらの、
もぐらたたきゲームの作り方（初級）
からチャレンジしてみてください。

スクロールの考え方

プログラミングに入る前にまずスクロールの考え方から理解しましょう

スクロールゲームでキャラクターが前に向かって動いているように見えるのは、背景が逆方向にスクロールしているからです。キャラクターは動いていません。スクラッチでは以下のように「背景１」と「背景２」の２つの背景を用意して
それが連なって左側に一定速度で動いていくようにプログラミングします。
そして「背景２」の右端が表示エリアの右端に来ると、「背景１」が「背景２」の右側にさっと移動して、それによりずっと背景が動いているように見えます。

スクロールのプログラム

では、実際にスクラッチを使ってプログラムしていきましょう。

まずこちらをリミックスしてください。

はじめに、”おじさん”スプライトで旗を押したら（x:-150,y:0）に表示するという指示をしておきましょう。

ここから背景１を左方向に移動させていくプログラムを組みます。
背景を動かしていくには下図のように、「計算する」「動かす」という動きをひたすら繰り返します。

この「計算する」「動かす」をずっと繰り返すという指示を、”ステージ”のコードに書いていきます。
全体に関わるコードは”ステージ”に書いていくことがオススメです。
このとき、”スクロールx”、”スクロール速度”という変数も作って初期値を入れておきます。

次に”計算する”、“動かす”のメッセージを受け取った時の”背景１”の指示を記載していきます。
”背景１”のスプライトのコードに移動します。

下図のようにコードを組みます。”スクロールx”が”スクロール速度”づつ変化していくことで背景の動きを作っていきます。

緑の旗を押してみましょう。背景１が左側に移動することがわかります。
次に背景２の動きも設定て、二つの背景が連なって移動するようにしましょう。
背景２は前章で説明した通りX=480からスタートします。

”背景２”は”背景１”より４８０だけ右にいるということになるので、”背景２”にはこのようにコードを記載します。

緑の旗を押すと、二つの背景が連なって左側に移動するのがわかります。
しかしこのままでは連なってそのまま消えてしまうので、前章で説明した通り”背景１が左側に消えたと同時に、”背景１”を”背景２”の後ろに移動させるという動きを作らなければなりません。

再び、”背景１”のコードに戻って、
下図のように書き換えます。背景１が左側に消えた時、つまりスクロールxが-480になったときに、
反対側に大きく移動させる、つまり＋９６０移動させるという指示になります。

そして”背景２”も変更する必要があります。”背景１”が”背景２”の左側にあるときは、”背景１”より４８０右にある、という指定で良かったですが、逆に”背景１”が”背景２”の右側にきたときには”背景１”より４８０左側にあるという指示に書き換えなければなりません。下図のように指示をします。