ゲームで使える！Scratchの自動スクロールテクニック3選

2024年5月12日

プログラミング初心者の子供に何を教えたらいいの？とお悩みの保護者のためのScratch（スクラッチ）の入門講座。Scratchで猫の動かし方はわかったけど・・・次にどんなことをしたらいいの？という疑問にお答えするシリーズです。
今回は、ゲームでよく使う「スクロール」について。Scratchでスクロールする方法はいろいろありますが、その中で代表的なテクニックをご紹介しましょう。

1. スクロールって何？

1-1. スクロールとは

スクロールとは、本来「巻物」という意味だそうです。コンピューターの画面を巻物を読むように左右に（もしくは上下に）動かしながら表示することです。
ゲームでは、主人公の動きに合わせて背景が動くことをスクロールといいます。
一度先に進むと後ろの方向に２度と戻れないスクロール、自動的に背景が動いていくスクロールなど、ゲームによっていろいろなスクロールがあります。
今回は、自動的に背景が動くスクロールを作ってみたいと思います。

1-2. ゲームとスクロール

スクロールがよく使われるゲームとしてスーパーマリオブラザーズのようなアクションゲーム、またシューティングゲームがあります。
RPGで主人公がマップ上を動くと、マップが動きますがこれもスクロールですね。まさに、ゲームにスクロールは欠かせませんね。

2. スクロールテクニック

2-1. スプライトを使ったスクロールテクニック

まずもっとも簡単なスクロールテクニックです。正確に言うとスクロールではないのですが・・・・、「スクロールしているように見える」テクニックです。
それは、スプライトをクローンさせて動かすことで背景が動いているように見える方法です。
下の図のように、ビルや木のスプライトをクローンさせて自動的に右から左へ動かすことで、鳥がどんどん前に進んでいるように見せています。

ビルのプログラムはこのようになっています。

ポイントは「ずっと」「x座標を-5ずつ変える」というところです。これで自動的に右から左へスプライトのクローンが動いていきます。
作品はこちらです。

このような使い方をすると、スプライトをスクロールしているように見せるだけでなく、障害物としても使うことができるので簡単に障害物避けゲーを作ることができます。

2-2. 大きなスプライトを使ったスクロールテクニック

続いては大きなスプライトを使ったスクロールテクニックです。背景と同じ大きさの大きなスプライトを使ってスクロールさせてみましょう。
まずはスプライトのペイントエディタで、横幅いっぱいに地面を描きます。形を変えて2種類作りましょう。
この時、地面の高さが合うように作るのがポイントです。スプライトの複製で作るとうまくたかさを合わせることができます。

つづけてプログラムを作りましょう。考え方は次のような感じです。
まず最初の位置ですが、地面1はx座標が0、地面２は画面の外になりますがx座標が480になります。

上の図をプログラムで表現すると、こうなります。
こちらは地面1のプログラム

つづいて地面2のプログラム

その後はずっと-5づつx座標が変わり続けることで、地面が動いているように見せます。

そして、下の図のようになった時に、地面1を地面2の右隣に動かさないといけません。

ここまでの流れをプログラムで表現すると、地面1はこうなります。

もしのところが「x座標<-460」となっているのは、理由があります。
最初「もしx座標=-480」としていたのですが、これではうまくうごきませんでした。

いろいろ試した結果、スプライトのx座標は-465以下には移動しなかったためこのように作ってあります。
地面のスクロールのプログラムはこちらにありますので参考にしてみてください。