Unity parallax infinite scrolling background

The parallax background actually moves with the camera , There is a certain difference between the background of each layer and the moving speed of the camera , It forms parallax . for example , The camera moved 5 grid , The first layer of background moves two spaces , The second layer of background moves one space , It forms parallax .

Post the code first ：

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

public class ParallaxBackground : MonoBehaviour
{
    
    private Transform mainCameraTransform;// The main camera's transform
    private Vector3 lastCameraPosition;// Record the position of the main camera in the last frame 
    private float textureUnitSizeX;// Get the unit length of the background image in the project 

    public Vector2 bgMoveCoefficient;// The length coefficient of the background moving relative to the main camera 

    // Start is called before the first frame update
    void Start()
    {
    
        mainCameraTransform = Camera.main.transform;// Get master camera transform
        lastCameraPosition = mainCameraTransform.position;

        Sprite sprite = GetComponent<SpriteRenderer>().sprite;
        Texture2D texture = sprite.texture;
        textureUnitSizeX = texture.width / sprite.pixelsPerUnit;// Calculate how many unit lengths the texture occupies 
    }

    // Update is called once per frame
    void Update()
    {
    
        
    }

    private void LateUpdate()
    {
    
        Vector3 offsetPosition = mainCameraTransform.position - lastCameraPosition;
        transform.position += new Vector3(offsetPosition.x * bgMoveCoefficient.x, offsetPosition.y * bgMoveCoefficient.y, transform.position.z);
        lastCameraPosition = mainCameraTransform.position;

        // If the main camera and the background image x Differ the width of the background image by one 
        if(Mathf.Abs(mainCameraTransform.position.x - transform.position.x) >= textureUnitSizeX)
        {
    
            float offsetPositionX = (mainCameraTransform.position.x - transform.position.x) % textureUnitSizeX;
            transform.position = new Vector3(mainCameraTransform.position.x + offsetPositionX, transform.position.y, transform.position.z);
        }
    }
}

Parallax effect

1. First, you need to get the main camera transform, And record the main camera position, Later, we need to calculate how much the camera moves in each frame .

mainCameraTransform = Camera.main.transform;// Get master camera transform
lastCameraPosition = mainCameraTransform.position;

2. stay LateUpdate() Continuously calculate how much the main camera moves in each frame , And add this value to the position of the background （ remarks ： It means how much the main camera moves , How much does the background image move ）, You get the effect that the background moves with the main camera .

private void LateUpdate()
{
    
	Vector3 offsetPosition = mainCameraTransform.position - lastCameraPosition;
	transform.position += new Vector3(offsetPosition.x, offsetPosition.y, transform.position.z);
	lastCameraPosition = mainCameraTransform.position;
}

3. Because the parallax is the length of each layer of background image moving is different , So let's change the above code a little

private void LateUpdate()
{
    
	Vector3 offsetPosition = mainCameraTransform.position - lastCameraPosition;
	transform.position += new Vector3(offsetPosition.x * bgMoveCoefficient.x, offsetPosition.y * bgMoveCoefficient.y, transform.position.z);
	lastCameraPosition = mainCameraTransform.position;
}

there bgMoveCoefficient（Vector2 type ） It refers to the percentage of the value of the background movement relative to the value of the main camera movement , For example, you want the background to be x The axis moves slower than the main camera , Just put it x The value setting is less than 1.
4. Hang the script on each layer of background , And set up bgMoveCoefficient Value , You can get the parallax effect .

Infinite scrolling

1. Put each layer of background Draw Mode Set to Tiled

The purpose of setting this is to change the size of the texture , You can fill the blank part with texture content .
2. take Sprite The width of is increased to the size of three screens , Make sure the background doesn't see the boundary when it moves .

The infinite scrolling here is actually when the boundary of the background image is about to enter the range of the main camera , Change the position of the background image . So in the code , We need to calculate how many units of texture in the game scene .

Sprite sprite = GetComponent<SpriteRenderer>().sprite;
Texture2D texture = sprite.texture;
// because texture.width Is the actual pixel value of the picture , But in the game , A unit length may not be a pixel （ See how much you have set in the project ）
// in other words position Move 1 Probably not only 1 Pixels , So we have to find out how many units the texture actually occupies in the project scene 
// That is, the actual texture in the project scene width
textureUnitSizeX = texture.width / sprite.pixelsPerUnit;// Calculate how many unit lengths the texture occupies 

2. In each frame, judge whether the boundary of the background image enters the range of the main camera , About to enter , Just reset the position of the background image

// If the main camera and the background image x Differ the width of the background image by one 
// Because the front put the texture width The value is set to three times the size , When the main camera and the background image differ by one background image width , It indicates that the boundary is about to enter the shooting range of the main camera .
if(Mathf.Abs(mainCameraTransform.position.x - transform.position.x) >= textureUnitSizeX)
{
    
	// Because it is possible that the difference between the background image and the main camera is not exactly the width of the background image , There may be some errors , So calculate the error here 
	float offsetPositionX = (mainCameraTransform.position.x - transform.position.x) % textureUnitSizeX;
	// Reset the position of the background image 
	transform.position = new Vector3(mainCameraTransform.position.x + offsetPositionX, transform.position.y, transform.position.z);
}

You get the background image of infinite scrolling ！
If there is any mistake or bad writing , Please give me some advice ！ thank ！ thank ！