はじめに
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ゲームを作りましょう!
無限ランゲームを簡単に作れる人気エンジンもあります。