見出し画像

【Unity】2Dゲームで簡単に背景をループさせる方法

PICKY

こんにちは！
最近2Dゲームの開発ばかりしているのですが、背景をループさせたいときにどうすればいいのか分からず、困ったことがありました。
方法を調べてもなんか面倒くさかったり、見栄えが悪かったり…。
そこで今回は備忘録も兼ねて、2Dゲーム向けの”簡単”に背景をループさせる方法を紹介します！

はじめに

本記事ではImageとマテリアルを使って背景をループさせます。
背景の移動速度を縦横自由に設定できます。


環境

  • Unity 2021.3.6f1

  • Visual Studio 2022

Step

1. CanvasとImageを作る

ヒエラルキーを右クリックして、UI > Imageを作ります。
作れたら、次はCanvasの設定に移ります。

  • Render ModeをScreen Space - Cameraに変更

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

  • Order in Layerを低く設定（任意の値でOK）

Render ModeをScreen Space - Cameraに変更したのは、2Dゲームオブジェクトを手前に表示できるようにするためです。
レイヤーの値を低くしたのも、背景を2Dゲームオブジェクトの後ろに表示させるためです。

2. 背景画像のインポート

背景にしたい画像を任意のフォルダーにドラッグ＆ドロップします。
インポートできたら、画像の設定に移ります。

  • Wrap ModeをRepeatへ

  • Applyボタンを押して適用

Wrap ModeをRepeatにしないと、背景を動かす際に変なことになります。

端っこが引き延ばされます

3. マテリアルを作る

画像を移動させるためにマテリアルを作ります。
プロジェクトタブで右クリックし、Create > Materialからマテリアルを作成、作成できたらマテリアルの設定に移ります。

  • マテリアルのShaderをUnlit > Transparentへ

Textureは設定しなくて大丈夫です。
マテリアルのOffsetは背景を移動させるのに使います。

4. Imageに割り当てる

1で作ったImageに、インポートした背景画像とマテリアルを割り当てます。

ここで試しにマテリアルのOffsetの値を変えてみてください。
以下のようになると思います。

5. スクリプトを書く

下準備は終わりました。
次はスクリプトを書いて、そこで制御していきます。
全部コピペしてもらって大丈夫です。
簡単なスクリプトなので、逃げないで…。

using UnityEngine;
using UnityEngine.UI;

public class BackGroundMover : MonoBehaviour
{
	private const float k_maxLength = 1f;
	private const string k_propName = "_MainTex";

	[SerializeField]
	private Vector2 m_offsetSpeed;

	private Material m_material;
	
	private void Start()
	{
		if (GetComponent<Image>() is Image i)
		{
			m_material = i.material;
		}
	}

	private void Update()
	{
		if (m_material)
		{
			// xとyの値が0 ～ 1でリピートするようにする
			var x = Mathf.Repeat(Time.time * m_offsetSpeed.x, k_maxLength);
			var y = Mathf.Repeat(Time.time * m_offsetSpeed.y, k_maxLength);
			var offset = new Vector2(x, y);
			m_material.SetTextureOffset(k_propName, offset);
		}
	}

	private void OnDestroy()
	{
		// ゲームをやめた後にマテリアルのOffsetを戻しておく
		if (m_material)
		{
			m_material.SetTextureOffset(k_propName, Vector2.zero);
		}
	}
}

完成したBackGroundMoverコンポーネントをImageコンポーネントがついたオブジェクトに追加してください。
ゲームでの汎用性を高めるために、縦横自由に背景をずらせられるようにしています。
マテリアルのOffsetは再生を止めたり、シーン切り替えしても元に戻らないので、OnDestroy関数で初期化してあげましょう。
ゲームによってはそのままにしておくのもアリだと思います。

また、プレイヤーの移動に合わせる場合は、プレイヤーの移動ベクトル(RigidBody2DのVelocityとか)を取得して、それをOffsetに使用してください。(値は要調整)

6. 再生してみる

では早速試してみましょう。
値は以下のようにしています。

1秒でx方向に0.1分ズレる

再生すると･･･

こいつ･･･動くぞ！
というわけで完成です！！！

いいなと思ったら応援しよう！