はじめに
2D背景を無限にスクロールさせる方法について解説します。
シェーダーは使わず、直感的にわかりやすい方法を紹介します。
2D背景の設定方法についてはこちらをご覧ください。
無限スクロールの仕組み
背景の画像を複製して横に並べておき、カメラが移動して画像の外に出たら画像の位置を移動させて、無限に見えているようにします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_400/https://umistudioblog.com/wp-content/uploads/2023/02/スクロール-1.gif)
背景の複製
背景画像を全部選択して、ctrl + D で複製します。(Macの場合は、command + D)
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_411,h_415/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-01-20.13.23.png)
Sceneビューにて、複製した画像を右にずらします。左の十字矢印マークをクリックすると、矢印が表示されるので、赤い矢印を動かして移動します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_840,h_502/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-01-20.21.01.png)
同様に再度画像を複製し、左に移動させます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_996,h_596/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-01-20.25.19.png)
無限スクロール
以下のスクリプトを作成します。
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;
}
}
複製した背景は複製元の子オブジェクトにしてまとめます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_321,h_446/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-02-7.46.57.png)
それぞれの親オブジェクトに、先ほどのスクリプトをアタッチします。
CamにはMainCameraをドラッグ&ドロップします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_718/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-02-7.49.13-1024x718.png)
ParallaxEffectには、0〜1までの値を設定します。0で示唆効果なしになります。
後ろの背景になるほど値を大きくするのが良いです。
ゲームをスタートし、カメラを移動させると背景画像の位置が変わるようになります。
無限スクロールができました。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_400/https://umistudioblog.com/wp-content/uploads/2023/02/スクロール.gif)
おわりに
無限スクロールを活用して、2Dゲームを作りましょう!
無限ランゲームを簡単に作れる人気エンジンもあります。