【Unity】背景を無限ループさせよう!多重スクロール方法

はじめに

2D背景を無限にスクロールさせる方法について解説します。

シェーダーは使わず、直感的にわかりやすい方法を紹介します。

2D背景の設定方法についてはこちらをご覧ください。

無限スクロールの仕組み

背景の画像を複製して横に並べておき、カメラが移動して画像の外に出たら画像の位置を移動させて、無限に見えているようにします。

背景の複製

背景画像を全部選択して、ctrl + D で複製します。(Macの場合は、command + D)

Sceneビューにて、複製した画像を右にずらします。左の十字矢印マークをクリックすると、矢印が表示されるので、赤い矢印を動かして移動します。

同様に再度画像を複製し、左に移動させます。

無限スクロール

以下のスクリプトを作成します。

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

public class Parallax : MonoBehaviour
{
    private float length, startpos;
    public GameObject cam;
    public float parallaxEffect;

    void Start()
    {
        // 背景画像のx座標
        startpos = transform.position.x;
        // 背景画像のx軸方向の幅
        length = GetComponent<SpriteRenderer>().bounds.size.x;
    }

    private void FixedUpdate()
    {
        // 無限スクロールに使用するパラメーター
        float temp = (cam.transform.position.x * (1 - parallaxEffect));
        // 背景の視差効果に使用するパラメーター
        float dist = (cam.transform.position.x * parallaxEffect);

        // 視差効果を与える処理
        // 背景画像のx座標をdistの分移動させる
        transform.position = new Vector3(startpos + dist, transform.position.y, transform.position.z);

        // 無限スクロール
        // 画面外になったら背景画像を移動させる
        if (temp > startpos + length) startpos += length;
        else if (temp < startpos - length) startpos -= length;
    }
}

複製した背景は複製元の子オブジェクトにしてまとめます。

それぞれの親オブジェクトに、先ほどのスクリプトをアタッチします。

CamにはMainCameraをドラッグ&ドロップします。

ParallaxEffectには、0〜1までの値を設定します。0で示唆効果なしになります。

後ろの背景になるほど値を大きくするのが良いです。

ゲームをスタートし、カメラを移動させると背景画像の位置が変わるようになります。

無限スクロールができました。

おわりに

無限スクロールを活用して、2Dゲームを作りましょう!

無限ランゲームを簡単に作れる人気エンジンもあります。

参考YouTube動画

タイトルとURLをコピーしました