Unity事例ノート

UNITY

背景を縦スクロールでループさせる方法

2Dのシューティングゲームでよくある、背景画像の無限スクロールをつくってみましょう。

3枚の画像を順にループさせて、背景が動いているように表現しています。

関連記事:
床のスクロールを無限ループ
2つのオブジェクトを順繰りで動かす
音ゲーのノーツみたいなオブジェクト動作

背景画像の用意

背景用の画像を用意して、Unityにインポートしましょう。

右クリック> 新しいアセットをインポート。

画像を、ヒエラルキーにドラッグ&ドロップ。

画面サイズによって、カメラの視野範囲が変わらないように、アスペクトを設定しておきました。

ここでは、16:9に設定しています。

続いて、画像のサイズを調整しましょう。

カメラの視野範囲よりも大きめに、背景を配置します。

背景ということなので、レイヤーの順序を「-1」にしておきました。

3枚の画像を並べてみる

ここから、画像を複製して3枚つくり、画面上に並べていきます。

まずは、画像の名前を「CosmoWall1」に変更しました。

これを1番目の画像とします。

カメラの視界よりも下に、移動させます。

このときの、Y座標をメモしておきましょう。

この例では、Y座標が-11です。

続いて、画像を複製していきます。

「CosmoWall2」という名前にしました。

これが2番目の画像になります。

2番目の画像を移動させて、1番目の上にピッタリくっつけましょう。

同じ手順で、「CosmoWall3」もつくり、2番目の上にピッタリとくっつけます。

1番目の画像を移動

3枚の画像を並べ終われば、1番目の画像を上に動かしていきます。

1番目の画像を、3番目の画像の上にピッタリとくっつけます。

この時の、1番目の画像のY座標をメモしましょう。

かなり細かい数字なのですが、ここではY座標「21.33」となっています。

メモできれば、1番目の画像を、元のところに戻します。

最初にメモしたY座標「-11」のところなので、簡単に戻せます。

縦スクロールのスクリプト

TateScroll.csという名前でスクリプトを作成しました。

これを、CosmoWall1~3にそれぞれ追加します。

プレイしてみましょう。

下まで動いていいた画像が、ふたたび最上部にジャンプ。

これをループして、背景のスクロールを表現しています。

スクロール速度を変えたいときは、インスペクターで変更することもできます。

ヒエラルキーの画像が多くなってしまったので、空のゲームオブジェクトをつくって、まとめましょう。

ヒエラルキー > 空のオブジェクト。

GameObjectの名前を、「BackWall」という名前に変えました。

CosmoWall1~3を、BackWallにドラッグ&ドロップ。

見た目もすっきりしました。

関連記事:
床のスクロールを無限ループ
2つのオブジェクトを順繰りで動かす
音ゲーのノーツみたいなオブジェクト動作