一分間スクラッチ講座｜背景画像をずっとスクロールさせる方法

今回は、スクラッチで背景画像を途切れることなく、ずっと横方向に移動させる方法を作っていきます。

スクラッチのステージ背景は、そのままでは動かすことができません。
そのため、背景として使いたい画像をスプライトにして動かすことで、背景がスクロールしているように見せます。

横スクロールゲームや、ランニングゲームの背景などでよく使う考え方です。

こちらのYoutubeショートカット動画「ファイブボックス 一分間スクラッチ講座」も併せてご参照ください。

1．背景画像をスプライトとして準備する

まずは、背景に使いたい画像を用意します。

スクラッチの「背景」は動かせませんが、スプライトならx座標を変えて移動できます。

そのため、背景画像をスプライトのコスチュームとして登録して使います。

背景画像を2枚使う理由

背景をずっとスクロールさせるには、1枚の画像だけでは足りません。

1枚の画像を左へ動かしていくと、やがて画面の外へ出てしまい、右側に空白ができてしまいます。
そこで、同じ背景画像を2枚用意して、横に並べます。

1枚目が左へ移動している間に、2枚目も一緒に左へ移動させます。
そして、1枚目が画面の外へ出たら、また右側へ戻します。

この動きを繰り返すことで、背景がずっと流れているように見えます。

同じ画像をそのまま並べると切れ目が目立つ

ただし、まったく同じ画像をそのまま横に並べると、画像と画像のつなぎ目が目立つことがあります。
たとえば、左側の画像の右端と、右側の画像の左端がうまくつながっていない場合、スクロールしたときに不自然な切れ目が見えてしまいます。

そこで今回は、片方の画像を左右反転させます。
同じ画像を2枚そのまま並べるよりも、つなぎ目が自然に見えやすくなります。

画像によっては完全に自然にならないこともありますが、簡単なスクロール画像を作る方法としては分かりやすく、扱いやすい方法です。

2．背景画像を作成する

まず、使いたい背景画像を用意します。
背景画像を選択したら、コピーします。

コピーの方法は、次のどちらでも大丈夫です。

• Windowsの場合 - Controlキー ＋ Cキー

• Macの場合 - Commandキー ＋ Cキー

または、画面上のコピーボタンを使ってコピーしてもかまいません。

次に、スプライトの選択ボタンから、「描く」を選びます。
これで、新しいスプライトを作成できます。

作成したスプライトのコスチューム画面で、先ほどコピーした背景画像を貼り付けます。
貼り付けの方法は、次のどちらでも大丈夫です。

• Windowsの場合 - Controlキー ＋ Vキー

• Macの場合 - Commandキー ＋ Vキー

または、画面上の貼り付けボタンを使って貼り付けます。
これで、背景画像をスプライトとして使えるようになります。

3．コスチュームを2つ用意する

次に、背景画像のコスチュームを2つ用意します。

まず、作成した「コスチューム1」を複製します。
複製すると、「コスチューム2」が作成されます。

そして、「コスチューム2」を選択した状態で、左右反転ボタンを押します。
これで、
コスチューム1：元の背景画像
コスチューム2：左右反転した背景画像

という2つのコスチュームができました。

4．背景スプライトのプログラムを作る

ここからは、背景スプライトにプログラムを作っていきます。

今回は、クローンを使って背景を2枚表示します。
本体のスプライトは隠しておき、コスチューム1のクローンと、コスチューム2のクローンを作ります。

クローンを作成するプログラム

まずは、旗が押されたときのプログラムです。
次のように作ります。

• 旗が押されたとき

  • 隠す

  • コスチュームを「コスチューム1」にする

  • 自分自身のクローンを作る

  • コスチュームを「コスチューム2」にする

  • 自分自身のクローンを作る

ポイントは、最初に本体を隠すことです。
今回は、本体ではなくクローンを表示して使います。
そのため、本体は画面に表示しないようにしておきます。

なぜクローンを使うのか

クローンを使うと、1つのスプライトから複数の背景を作ることができます。
今回の場合は、

コスチューム1のクローン
コスチューム2のクローン

この2つを横に並べて動かすことで、背景がずっと流れているように見せます。

5．クローンされたときのプログラム

次に、クローンされた後の動きを作ります。

クローンが作られたら、まず表示します。
そして、コスチューム番号によって、最初の位置を変えます。

コスチューム1なら、画面の中央に配置します。
コスチューム2なら、1枚分右側に配置します。

• クローンされたとき

  • 表示する

  • もし コスチュームの番号 = 1 なら     x座標を 0、y座標を 0 にする

  • でなければ     x座標を 480、y座標を 0 にする

スクラッチの画面は、横幅が480です。

そのため、1枚目を x = 0 に置き、
2枚目を x = 480 に置くことで、横に2枚並べることができます。

背景を左に動かす

次に、背景を左に動かしていきます。

x座標を少しずつ小さくすると、スプライトは左へ移動します。

今回は、次のようにします。

• ずっと

  • x座標 < -464 まで繰り返し x座標を -2 ずつ変える

  • x座標を 480、y座標を 0 にする

x座標を -2 ずつ変えることで、背景が左へ流れていきます。
そして、背景が画面の左側へ出たら、もう一度右側へ戻します。
この動きをずっと繰り返すことで、背景が途切れずにスクロールしているように見えます。

完成するプログラム

クローンされたときの全体の流れは、次のようになります。

x座標を戻す位置に注意する

今回の例では、画面の左側に出たら、x座標を 480 に戻しています。
これは、背景画像をもう一度右側に移動させるためです。
2枚の背景画像が交互に左へ流れていくことで、画面上では背景がずっと続いているように見えます。

7．今回のまとめ

今回は、スクラッチで背景画像をずっと横にスクロールさせる方法を作りました。
ポイントは、次の3つです。

・背景画像はステージではなく、スプライトとして使う
・2つのコスチュームを用意し、片方を左右反転させる
・クローンを2つ作り、横に並べて左へ移動させる

スクラッチのステージ背景は直接動かせません。
そのため、背景を動かしたい場合は、画像をスプライトにして、x座標を変える方法を使います。

この仕組みを使うと、横スクロールゲームやランニングゲームの背景を作ることができます。

背景を動かすだけでも、ゲーム全体に動きが出て、プレイヤーが進んでいるような演出になります。

ファイブボックス一分間スクラッチ講座 の記事はこちらでまとめてあります。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。