無限スクロール背景の作り方

さぁ、スクラッチでナニ作る！？

夜景コスチュームに同一グラフィックを2つ横並びで収めておくことで、X座標が-240を下回った瞬間の+480ワープが視覚的に見えなくなっている設計が光っている。「端で跳び返る」発想をコスチューム幅と座標空間の関係に落とし込んだこのパターンは、速度差を加えればパララックスにも展開できる汎用の土台になっている。コスチューム設計とコードがどう噛み合っているのか、作り方を見ていこう。

動画で見てみよう

チュートリアルの元になった作品

今回の目標

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#1バイクの走行振動

準備

スプライト「バイク」を開く

バイク

スプライトについて
バイクのスプライト。旗クリック後に指定座標へ移動し、上下に微妙に揺れるアイドルアニメーションをずっと繰り返す。
どんな役割か
バイクを画面に置いて、ずっとゆらゆら上下に揺らし続けるよ。走ってるときのアイドルアニメーションって感じ！

実装

動きx座標を ( ) 、y座標を ( ) にするで座標(0, -60)にバイクを置く。

#2

準備

スプライト「夜の街」を開く

実装

制御ずっとループの中でY座標を1上げて→0.08秒待って→1下げて→0.08秒待つ、これを延々繰り返す。たった1ピクセルの上下でも、0.08秒間隔で往復するとエンジンの振動っぽい小刻みな揺れになるんだ。

走行中みたいにゆらゆら揺れるアニメーションをつけるよ。止まってるスプライトでも、これだけで「動いてる感」がガラッと変わるんだ。

#3背景を用意する

バイクの揺れができたところで、次は夜の街を流れるように動かしていくよ。普通なら背景は固定にしがちだけど、この作品ではスクロールさせて走行中の臨場感を出すんだ。見た目( ) へ移動するで最背面に送って、バイクの後ろで背景が動くようにしよう。

コスチュームには背景画像をステージから借りたものを使う。ステージから背景をスプライトにドラッグアンドドロップすれば借りられる。で、この背景画像を複製して横並びにするだけ。これが今回の無限スクロールのポイント！

#4背景を動かす

制御ずっとループの中でX座標を-10ずつ動かすと背景が左にどんどん流れるけど、このままだと画面外に消えて終わりだよね。

#5ワープで無限スクロールさせる

だからX座標が-240を下回ったら動きx座標を ( ) ずつ変えるで一気に480を足して右端にワープさせる——これが480px無限ループスクロールの仕組みなんだ。コスチュームは同じグラフィックを横に2つ並べた480px幅の画像だから、ワープしても見た目はシームレスに繋がる——もしこのワープを入れなかったら、背景が途切れて何もない空間が丸見えになっちゃう。

[talk]背景の移動量を-10にしてるけど、この数値ひとつでゲームの印象がガラッと変わるよ。-3ならのんびり散歩風、-15以上ならレースゲームっぽいスピード感で、しかもこの移動量をキー操作と連動させればアクセルやブレーキまで実装できちゃうんだ。数値ひとつで世界観が変わるの、ゲームデザインの面白いところだよね。[/talk]

まとめ

480px無限スクロールの仕組み、バッチリつかめた？コスチューム設計とワープを組み合わせるこの発想は、横スクロールゲームでも丸ごと応用できる汎用テクニックだよ。速度を変えてみたり、複数の背景レイヤーで速度差をつけてパララックスに挑戦したりと、発展の方向はいくらでもあるから、ぜひいろいろ試してみてね！