やりたいこと

Unity で背景ループアニメーションを作りたい。

完成形 ⬇︎

環境

• OS : macOS Sequoia 15.2
• Unity : Unity6(6000.0.34f1)

Canvas 設定と Image の作成

UI > Image から Image を作成。

Render Mode を Screen Space - Camera に変更。

Render Camera に Main カメラをアタッチ。

背景画像の設定

シームレス画像を作成する。
シームレス画像とは、連続で並べた時に継ぎ目なく繋がる画像のことです。今回は画像をループさせるので必要。

Unity の Assets 内のどこかに使用する背景画像をドラッグ＆ドロップでインポート。
インポートした画像を選択し、インスペクター上でWrap Mode を Repeat へ変更。

Wrap Mode とはテクスチャの境界をどのように処理するかの設定である。
デフォルトは Clamp(固定)になってるので、画像が無理やり横に引き延ばされてしまう。

変更後は「Apply」で変更を適用。

Material の設定

Assets 内で Create > Material で Material を作成。
その Material をクリックしてインスペクターから Material のShader を Unlit > Transparent へ変更。

Unlit はシーン内のライトなどの影響を受けず、常に一定の見た目に保ってくれる為、背景に適している。

作った Material を先程の Image の Material の欄に割り当てる。

スクリプトを書く

using UnityEngine;
using UnityEngine.UI;

public class BackGroundMover : MonoBehaviour
{
private const float MAX_LENGTH = 1f;
private const string PROPERTY_NAME = "\_MainTex";

    [SerializeField] private Vector2 offsetSpeed;

    private Material material;

    private void Start()
    {
    	if (GetComponent() is Image img)
    	{
    		material = img.material; // imgのMaterialを割り当て
    	}
    }

    private void Update()
    {
    	if (material)
    	{
    		// xとyは0 ~ 1を取り続ける
    		var x = Mathf.Repeat(Time.time * offsetSpeed.x, MAX_LENGTH);
    		var y = Mathf.Repeat(Time.time * offsetSpeed.y, MAX_LENGTH);

    		//　offsetの値をMaterialに設定
    		var offset = new Vector2(x, y);
    		material.SetTextureOffset(PROPERTY_NAME, offset);
    	}
    }

    private void OnDestroy()
    {
    	// ゲームを終了後にMaterialのOffsetを戻す
    	if (material)
    	{
    		material.SetTextureOffset(PROPERTY_NAME, Vector2.zero);
    	}
    }

}

PROPERTY_NAME はシェーダーに定義されているものを使わなければいけない。 _MainTex とするのが無難。

[SerializeField]により、インスペクター上で offsetSpeed を編集できるようにする。

if (GetComponent() is Image img)は GetComponent()で現在の GameObject の画像を取得し、 返されたオブジェクトが Image 型であれば img という変数にそのオブジェクトを格納する。

Time.time はゲームが開始してからの秒数を表す。

Mathf.Repeat(t, L)は、指定した範囲で値をループさせるための関数。 与えられた t を0 以上 L 未満の範囲に収める（繰り返す）ようにできる。

t 以上 L 未満の場合はそのままの数字を返し、それ以外は t の値を L で割った余りの値になる。 OnDestroy メソッドはシーンからオブジェクトが削除される時に呼ばれる。

このスクリプトを作成したイメージに割り当て、offsetSpeed を任意で設定して完成！

参考

Unity - テクスチャの描画
（参照日: 2025 年 02 月 1 日）

Unity Documentation - Mathf-Repeat
（参照日: 2025 年 02 月 1 日）

PICKY - 【Unity】2D ゲームで簡単に背景をループさせる方法
（参照日: 2025 年 02 月 1 日）

hirouC - Unity テクスチャの繰り返し
（参照日: 2025 年 02 月 1 日）

フーシャ -【Unity】2D 背景を無限にループスクロールさせる方法
（参照日: 2025 年 02 月 1 日）