Unity | 2D无限、视差背景

视差背景是一种在Unity2D中常用的背景效果。通过控制不同背景的移动速度，来制造远近不同的视差效果，让游戏场景看起来更有立体感，还可以根据玩家的移动来无限循环，给玩家一种无尽的感觉。

苔原小鱼人

2790人浏览 · 2024-01-13 10:40:17

苔原小鱼人 · 2024-01-13 10:40:17 发布

1、新建脚本ParallaxBackground.cs

2、在Start()中初始化，给变量赋值

3、添加背景跟随相机方法

4、添加背景位置重置功能（无限背景）

5、在 LateUpdate()中调用方法

6、完整代码

四、使用方法

最后

前言

仅个人学习的记录，旨在分享我的学习笔记和个人见解。

一、视差背景简介

二、效果展示

三、实现步骤

1、新建脚本ParallaxBackground.cs

先定义几个之后需要用到的变量

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

public class ParallaxBackground : MonoBehaviour
{
    private Transform mainCameraTrans; // 主摄像机的Transform组件
    private Vector3 lastCameraPosition; // 上一帧摄像机的位置
    private float textureUnitSizeX; // 背景图单位尺寸

    public Vector2 followWeight; // 跟随摄像机的权重
    // 距离越远的背景权重越高，如 天空、云、太阳等 设置0.8-1范围效果尚可
    // 距离越近的背景权重越低，如 身边的树木、花草、房子等等
    void Start()
    {
        
    }
    void Update()
    {
        
    }
}

2、在Start()中初始化，给变量赋值

主要是计算单位图片在游戏场景中的大小，在后续方法中需基于图片大小来判断。
texture.width为背景图片文件的宽度，sprite.pixelsPerUnit为图片设置中pixelsPerUnit的值。通过texture.width / sprite.pixelsPerUnit 可以计算出图片在游戏场景中的真实大小。

pixelsPerUnit: 每Unit中有多少像素点。比如一张400*400的图片，pixelsPerUnit设置为100，则将它放到游戏场景中时，它的大小为4*4Unit。

void Start()
    {
        mainCameraTrans = Camera.main.transform; // 获取主摄像机的Transform组件
        lastCameraPosition = mainCameraTrans.position; // 初始化上一帧摄像机的位置为当前摄像机的位置

        Sprite sprite = GetComponent<SpriteRenderer>().sprite; 
        Texture2D texture = sprite.texture; // 获取Sprite的纹理
        textureUnitSizeX = texture.width / sprite.pixelsPerUnit; // 计算背景图在游戏场景里的单位尺寸
    }

3、添加背景跟随相机方法

在此之前，在LateUpdate()的最后，添加
lastCameraPosition = mainCameraTrans.position; 来更新上一帧相机的位置信息。

在方法中先计算当前相机位置与上一帧相机位置的偏移量，并乘以权重，控制背景图片移动。

private void ImageFollowCamera()
    {
        // 计算摄像机位置的偏移量
        Vector3 offsetPosition = mainCameraTrans.position - lastCameraPosition;

        // 根据权重调整背景图片的位置
        transform.position += new Vector3(offsetPosition.x * followWeight.x, offsetPosition.y * followWeight.y, 0);
    }

4、添加背景位置重置功能（无限背景）

每当图片的位置与相机位置的x绝对值大于等于图片单位长度，则重置图片的x位置。即当相机离开图片边缘时，把图片重新定位到相机位置。实现背景始终存在的效果。。

private void ResetImageX()
    {
        // 检查是否需要移动背景
        if (Mathf.Abs(mainCameraTrans.position.x - transform.position.x) >= textureUnitSizeX)
        {
            // 重置背景位置
            transform.position = new Vector3(mainCameraTrans.position.x , transform.position.y, transform.position.z);
        }
    }

5、在 LateUpdate()中调用方法

大功告成！

private void LateUpdate()
    {
        ImageFollowCamera();
        ResetImageX();

        lastCameraPosition = mainCameraTrans.position; // 更新上一帧摄像机的位置
    }

6、完整代码

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

public class ParallaxBackground : MonoBehaviour
{
    private Transform mainCameraTrans; // 主摄像机的Transform组件
    private Vector3 lastCameraPosition; // 上一帧摄像机的位置
    private float textureUnitSizeX; // 背景图单位尺寸

    public Vector2 followWeight; // 跟随摄像机的权重
    // 距离越远的物体权重越高，如 天空、云、太阳等 设置0.8-1范围效果尚可
    // 距离越近的物体权重越低，如 身边的树木、花草、房子等等

    void Start()
    {
        mainCameraTrans = Camera.main.transform; // 获取主摄像机的Transform组件
        lastCameraPosition = mainCameraTrans.position; // 初始化上一帧摄像机的位置为当前摄像机的位置

        Sprite sprite = GetComponent<SpriteRenderer>().sprite; 
        Texture2D texture = sprite.texture; // 获取Sprite的纹理
        textureUnitSizeX = texture.width / sprite.pixelsPerUnit; // 计算背景图在游戏场景里的单位尺寸
    }
    void Update()
    {

    }
    private void LateUpdate()
    {
        ImageFollowCamera();
        ResetImageX();

        lastCameraPosition = mainCameraTrans.position; // 更新上一帧摄像机的位置
    }

    private void ResetImageX()
    {
        // 检查是否需要移动背景
        if (Mathf.Abs(mainCameraTrans.position.x - transform.position.x) >= textureUnitSizeX)
        {
            // 重置背景位置
            transform.position = new Vector3(mainCameraTrans.position.x , transform.position.y, transform.position.z);
        }
    }

    private void ImageFollowCamera()
    {
        // 计算摄像机位置的偏移量
        Vector3 offsetPosition = mainCameraTrans.position - lastCameraPosition;

        // 根据权重调整背景图片的位置
        transform.position += new Vector3(offsetPosition.x * followWeight.x, offsetPosition.y * followWeight.y, 0);
    }
}