さぁ、スクラッチでナニ作る！？
速度差だけで奥行きを表現するパララックス設計が光っている。道路と街並みを-10と-1という速度の比で動かすだけで、遠近感のある夜景が生まれるのは、コスチューム設計の工夫によるところが大きい。2タイルを横に結合した1枚のコスチュームが、クローン不要の無限スクロールを可能にしている。19行のシンプルなコードにどれだけの仕掛けが詰まっているか、作り方を見ていこう。
動画で見てみよう
チュートリアルの元になった作品
小技：パララックス背景
今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1道路の無限スクロール
準備
スプライト「道路」を開く
道路| スプライトについて |
|---|
| 左方向に高速スクロールして走行感を演出する道路のスプライト。画面端に達したら右端に戻ってループする。 |
| どんな役割か |
| 道路を左に速くスクロールさせるよ！端まで行ったら右端に戻るから、ずっと走り続けてるように見えるんだ。 |
実装
夜景の背景から、道路の部分だけ切り取って横に並べたコスチュームを作る。横に並べるテクニック自体は別記事「無限スクロール背景」と同じ。
#2パララックスの仕込み
準備
スプライト「都市景観」を開く
実装
道路のコスチュームは同じ絵を2つ横に並べた構成になっている。ずっとの中でx座標を ( ) ずつ変えるを使って-10ずつ左に流しつつ、x座標が-240を下回ったら480を足してワープさせる仕組みだよ。
480はScratchの画面幅と同じで、もしこの値がずれていたら、ワープの瞬間にタイルのつなぎ目が見えてガクッと画面が飛んでしまう。2つのタイルが同じ絵だからワープしても見た目は何も変わらないんだよね。無限に道路が流れ続けてるように見えるってわけ。
#3街並みの無限スクロール
準備
スプライト「都市景観」を開く
都市景観| スプライトについて |
|---|
| 左方向にゆっくりスクロールして視差効果を生み出す都市景観のスプライト。道路より遅く動くことで奥行き感を演出する。 |
| どんな役割か |
| 街の景色をゆーっくり左に動かすよ！道路より遅いから奥行き感が出て、リアルに見えるんだよね。 |
実装
#4パララックスを実現する
「都市景観」スプライトもずっとで同じようにスクロールさせるけど、速度はたったの-1で道路の10分の1だよ。遠くのものほどゆっくり動いて見える「パララックス（視差効果）」を、この速度差だけで再現してるんだ。
#5バイクの配置
準備
スプライト「バイク」を開く
バイク| スプライトについて |
|---|
| 上下にゆらゆらと揺れながら走行感を表現するバイクのスプライト。 |
| どんな役割か |
| バイクが上下にゆらゆら動いて、走ってるみたいに見えるよ！ずっとループするから走り続けてるっぽくなるんだよね。 |
実装
が押されたときで開始したら座標(0, -60)に配置。道路のちょうど上あたりだよ。ずっとの中でy座標を1ずつ上に動かし始めるけど、このままだとバイクが空に飛んでいくから、次のステップで下に戻す処理を足して完成させるよ。
#6走行振動の完成
( ) 秒待つで0.08秒ずつ待ちを入れるのがポイント。待ちがないと上下の動きが同じフレームで処理されてプラマイゼロ、画面上は何も動かない。0.08秒の間があるからこそ、人の目に揺れとして映るんだよね。
これで完成！速い道路、ゆっくりな街並み、小刻みに揺れるバイク。たった3つのスプライトと19行のコードで、夜の高速道路を走るシーンが表現できちゃうんだ。
まとめ
パララックスって難しそうに聞こえるけど、速度を変えるだけでちゃんと奥行きが出るのが実感できたんじゃないかな。「コスチュームを2倍幅にする」っていう発想は、一度知ったら色々な場面で使えるよ。次は速度を3段階にしてみたり、昼の景色バージョンを作ってみたりして、自分なりにアレンジしてみてね！