- スターター作品
- なし
- 今回の完成サンプル
- なし
さぁ、スクラッチでナニ作る！？
速度差だけで奥行きを表現するパララックス設計が光っている。道路と街並みを-10と-1という速度の比で動かすだけで、遠近感のある夜景が生まれるのは、コスチューム設計の工夫によるところが大きい。2タイルを横に結合した1枚のコスチュームが、クローン不要の無限スクロールを可能にしている。19行のシンプルなコードにどれだけの仕掛けが詰まっているか、作り方を見ていこう。
動画で見てみよう
[talk]チャンネル登録して応援よろしく！チャンネル登録する[/talk]チュートリアルの元になった作品
[prj-embed prj="1311571658" mini="1" title="プレイしておこう" prj-title="小技：パララックス背景" prj-author="ok-scratch"]今回の[prj-link prj="1311571658" title="小技：パララックス背景" author="ok-scratch"]スクラッチを作る参考作品[/prj-link]です。[/prj-embed]今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1道路の無限スクロール
[talk class="m-l-n"]夜の道路がどこまでも流れ続ける「無限スクロール」を作るよ。普通ならクローンを2体使ってやるところだけど、この作品ではコスチュームの工夫だけで実現してる。[/talk]準備
スプライト「道路」を開く
道路| スプライトについて |
|---|
| 左方向に高速スクロールして走行感を演出する道路のスプライト。画面端に達したら右端に戻ってループする。 |
| どんな役割か |
| 道路を左に速くスクロールさせるよ！端まで行ったら右端に戻るから、ずっと走り続けてるように見えるんだ。 |
実装
夜景の背景から、道路の部分だけ切り取って横に並べたコスチュームを作る。横に並べるテクニック自体は別記事「無限スクロール背景」と同じ。
#2パララックスの仕込み
準備
スプライト「都市景観」を開く
実装
道路のコスチュームは同じ絵を2つ横に並べた構成になっている。ずっとの中でx座標を ( ) ずつ変えるを使って-10ずつ左に流しつつ、x座標が-240を下回ったら480を足してワープさせる仕組みだよ。
480はScratchの画面幅と同じで、もしこの値がずれていたら、ワープの瞬間にタイルのつなぎ目が見えてガクッと画面が飛んでしまう。2つのタイルが同じ絵だからワープしても見た目は何も変わらないんだよね。無限に道路が流れ続けてるように見えるってわけ。
[talk]この「2枚のタイルをループさせる」テクニック、実はプロのゲーム開発でも超定番の手法で、マリオみたいな横スクロールゲームの背景も同じ原理で動いてる。普通はクローンで2枚用意するけど、この作品みたいにコスチューム自体を2倍幅にしちゃうのはかなり賢い解法だよ。クローン管理のコードがまるごと不要になるから、たった6行で無限スクロールが完成しちゃうんだよね。[/talk]
#3街並みの無限スクロール
[talk class="m-l-n"]道路ができたから、次は奥に見える街並みを追加するよ。構造は道路とまったく同じだけど、速度だけが違う。[/talk]準備
スプライト「都市景観」を開く
都市景観| スプライトについて |
|---|
| 左方向にゆっくりスクロールして視差効果を生み出す都市景観のスプライト。道路より遅く動くことで奥行き感を演出する。 |
| どんな役割か |
| 街の景色をゆーっくり左に動かすよ！道路より遅いから奥行き感が出て、リアルに見えるんだよね。 |
実装
#4パララックスを実現する
「都市景観」スプライトもずっとで同じようにスクロールさせるけど、速度はたったの-1で道路の10分の1だよ。遠くのものほどゆっくり動いて見える「パララックス（視差効果）」を、この速度差だけで再現してるんだ。
[talk]パララックスって、実は毎日体験してるんだよね。車や電車に乗ってるとき、近くの電柱はビュンビュン飛んでいくのに、遠くの山はほとんど動かないっしょ？ゲーム開発ではこの現象を複数レイヤーの速度差で再現していて、たった2層でもかなりリアルな奥行き感が出せるんだ。[/talk]
#5バイクの配置
[talk class="m-l-n"]背景が完成したから、次は主役のバイクを配置するよ。走行中の振動をつける準備に入るんだ。[/talk]準備
スプライト「バイク」を開く
バイク| スプライトについて |
|---|
| 上下にゆらゆらと揺れながら走行感を表現するバイクのスプライト。 |
| どんな役割か |
| バイクが上下にゆらゆら動いて、走ってるみたいに見えるよ！ずっとループするから走り続けてるっぽくなるんだよね。 |
実装
#6走行振動の完成
[talk class="m-l-n"]バイクの揺れを仕上げるよ。1ピクセル上がったあと少し間を置いて、1ピクセル下がってまた間を置く。この小さな往復がバイクの走行振動になるんだ。[/talk]
( ) 秒待つで0.08秒ずつ待ちを入れるのがポイント。待ちがないと上下の動きが同じフレームで処理されてプラマイゼロ、画面上は何も動かない。0.08秒の間があるからこそ、人の目に揺れとして映るんだよね。
これで完成！速い道路、ゆっくりな街並み、小刻みに揺れるバイク。たった3つのスプライトと19行のコードで、夜の高速道路を走るシーンが表現できちゃうんだ。
まとめ
パララックスって難しそうに聞こえるけど、速度を変えるだけでちゃんと奥行きが出るのが実感できたんじゃないかな。「コスチュームを2倍幅にする」っていう発想は、一度知ったら色々な場面で使えるよ。次は速度を3段階にしてみたり、昼の景色バージョンを作ってみたりして、自分なりにアレンジしてみてね！
