プログラミング入門

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

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

1. スクロールって何?

1-1. スクロールとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

もしのところが「x座標<-460」となっているのは、理由があります。 最初「もしx座標=-480」としていたのですが、これではうまくうごきませんでした。   いろいろ試した結果、スプライトのx座標は-465以下には移動しなかったためこのように作ってあります。 地面のスクロールのプログラムはこちらにありますので参考にしてみてください。
 

2-3. スプライトを拡大して作るスクロールテクニック

先ほどは地面用スプライトを2つ使いましたが、今度はスプライト1つを拡大して使う方法です。
地面用のスプライトを次のように作ってみましょう。ただし、今回は、1つのスプライトにコース全てが収まるようにつくります。

拡大しながら作るとやりやすいと思います。

見た目の「大きさを1000%にする」を使って拡大しますが・・・じつは、大きなスプライトは1000%に拡大することができません。そこで裏技を使います。
小さな点のコスチュームを用意します。

小さなコスチュームなら「大きさを1000%にする」を使って拡大することができます。次のようなプログラムで、ちいさいコスチュームで1000%にした後、コースのコスチュームに変更します。

その後で、コースの位置をドラッグして適切な位置に決めます。そして、その位置の座標を設定するプログラムを追加します。

これで、あとは「ずっとx座標が-5づつ変わる」というプログラムを追加すればOKです。地面の最後のところまできたら、プログラムが止まるようにしておきました。

▼プログラムはこちら

この方法だと、スーパーマリオブラザーズのようなゴールがあるゲームにちょうど良さそうです。

3. まとめ

今回は、Scratchでスクロールの方法3種類をご紹介しました。

・小さなスプライトでスクロールする方法
・大きなスプライト2つを使う方法
・大きなスプライト1つを拡大して使う方法

ゴールがある、エンドレスでスクロールさせる、などゲームに応じて使い分けてみると面白いと思います。
スクロールだけなら比較的簡単に作れるので、自分で好きな方法をためしてみてくださいね。

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