背景を縦スクロールでループ

2021年02月21日

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

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

▼本ページ内容は、YouTubeでも解説しています。

背景画像の用意

背景はこちらのjpg画像を使って制作しています。

こちらからダウンロードしてご利用ください。

宇宙の背景画像（CosmoWall.jpg）

背景用の画像を用意して、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.1」となっています。

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

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

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

TateScroll.csを記述します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TateScroll : MonoBehaviour
{
    private float speed = 1;
   
    void Update()
    {
        transform.position -= new Vector3(0, Time.deltaTime * speed);

        if(transform.position.y <= -11)
        {
            transform.position = new Vector3(0, 21.1f);
        }
    }
}