ファイブボックス　一分間スクラッチ講座 | #010 スクロール基本編

今回は、スクラッチでよく使われる「スクロール処理」について解説します。

スクロール処理とは、プレイヤー自身を大きく動かすのではなく、
背景やブロックなど、まわりのスプライトを反対方向に動かすことで、プレイヤーが進んでいるように見せる方法です。

たとえば、右向きキーを押したときにプレイヤーを右へ動かすのではなく、
まわりのブロックや背景を左へ動かします。

すると、画面上ではプレイヤーが右へ進んでいるように見えます。

今回の完成作品も共有しますので、動きのイメージがつかみにくい方は、まず完成作品を確認してみてください。

また、下の動画は不定期配信の
「ファイブボックス 一分間スクラッチ講座」です。
ご興味のある方は、あわせてご覧ください。

1. プレイヤーのプログラム

まずは、操作するキャラクターを用意します。
ここでは、このキャラクターをプレイヤーと呼びます。

今回は、以前作成したジャンプの作品に、スクロール用のプログラムを追加していきます。

ジャンプの動きから作りたい場合は、前回までの記事もあわせてご参照ください。

2. スクロール用の変数を用意する

まず、変数を2つ用意します。

スクロールX

プレイヤーがどれだけ移動したことにするかを管理する変数です。
実際にはプレイヤーのx座標は大きく動かさず、
このスクロールXの値を使って、まわりのスプライトを動かします。

スピードX

x方向の移動量を管理する変数です。
この数値が大きいほど、スクロールの動きが速くなります。
今回は例として、5に設定します。

3. プレイヤーの初期設定

旗が押されたとき、まずプレイヤーの初期設定をします。

• 大きさを50％にする

• 回転方法を「左右のみ」にする

• 変数「スクロールX」を0にする

• 変数「スピードX」を5にする

プレイヤーの大きさは、以前のジャンプ作品より少し小さくしています。
また、回転方法を「左右のみ」にしておくことで、左を向いたときにキャラクターが上下逆さまにならないようにします。

4. 左右のキーを押したとき

右向き矢印キーが押されたときは、プレイヤー自身のx座標は変えません。
代わりに、変数スクロールXを更新します。

右へ進んでいるように見せたいので、まわりのスプライトを左へ動かす必要があります。
あわせて、プレイヤーを右向きにして、走るアニメーションに見えるようにコスチュームを変更します。

• 右向き矢印キーが押された

  • スクロールXを「-スピードX」ずつ変える

  • 90度、右向きにする

  • 次のコスチュームにする

左向き矢印キーが押されたときも、同様にプレイヤー自身のx座標は変えずに、スクロールXを更新します。

• 左向き矢印キーが押された

  • スクロールXを「スピードX」ずつ変える

  • -90度、左向きにする

  • 次のコスチュームにする

5. まわりのスプライトを動かす

次に、プレイヤー以外のスプライトを動かします。

今回は、以前の「天井跳ね返り」の検証で使ったブロックを使用します。
このスプライトの名前を、ここではブロック1としておきます。

プレイヤーは画面上でほとんど動かさず、ブロックなどのスプライトを動かすことで、プレイヤーが進んでいるように見せます。

ブロック1には、変数初期位置Xを用意します。

この変数を作るときは、「このスプライトのみ」にチェックを入れておきます。
「このスプライトのみ」にしておくと、クローンを作ったときに、それぞれのスプライトやクローンが別々の値を持てるようになります。
スクロールゲームでは、ブロックや足場を複数並べることが多いため、
それぞれの初期位置を個別に持たせることが大切です。

6. ブロック1のプログラム

ブロック1では、まずゲーム開始時の位置を記録します。

旗が押されたとき、
変数：初期位置X を100にします。

これは、ゲーム開始時のブロック1のx座標です。
そのあと、ずっと次の処理を実行

x座標を「初期位置X + スクロールX」にする

これにより、スクロールXの値が変わるたびに、
ブロック1の位置も変わります。

たとえば、右向きキーを押してスクロールXがマイナス方向に変わると、
ブロックは左へ動きます。

その結果、プレイヤーが右へ進んでいるように見えます。

7. 今回の問題点

ここまでで、スクロールの基本の動きは完成しました。
ただし、作成したサンプルには1つ問題があります。

前回までできていた「天井跳ね返り」の動きが、うまく動かなくなっています。

これは、今回追加したコスチューム変更が原因で発生している問題です。
次回は、この問題を解決するところから解説していきます。

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

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