【Unity】2D背景を無限にループスクロールさせる方法

今回説明するのは、 2D の背景イラストを無限にループスクロールさせる方法です。
(例は容量の関係で画質が荒くなっています)

環境

・Unity 2022.3.5f1

方法

ループさせたい画像をインポートして
「Texture Type」を「Sprite (2D and UI)」
「Wrap Mode」を「Repeat」にする。
変更後は「Apply」で変更を適用。

新規マテリアルを作成し、Shader を「Unlit/Texture」にする。
Texture設定は無しでOK。

シーン上にCanvasを配置して、その下にImageを作成。
先ほどインポートした画像と作成したMaterialをアタッチする。

新しくC#スクリプトを作成

using UnityEngine;
using UnityEngine.UI;

public class LoopScrollImage : MonoBehaviour
{
    private const float MAX_OFFSET = 1f;
    private const string PROPERTY_NAME = "_MainTex";

    [SerializeField] private Vector2 _offsetSpeed;
    [SerializeField] private Material _material;

    private void Reset()
    {
        // コンポーネントがアタッチされたタイミングでマテリアルを取得する
        if (TryGetComponent(out Image image))
        {
            _material = image.material;
        }
    }

    private void Update()
    {
        if (_material != null)
        {
            var x = Mathf.Repeat(Time.time * _offsetSpeed.x, MAX_OFFSET);
            var y = Mathf.Repeat(Time.time * _offsetSpeed.y, MAX_OFFSET);
            var offset = new Vector2(x, y);
            _material.SetTextureOffset(PROPERTY_NAME, offset);
        }
    }

    private void OnDestroy()
    {
        // オブジェクトが破棄されるタイミングに位置をリセットする
        if (_material != null)
        {
            _material.SetTextureOffset(PROPERTY_NAME, Vector2.zero);
        }
    }
}