Unity | Vertical infinite scrolling background

You want I nice background scrolling for your next 2D game? I think you are on the right place 🙂

I have implemented a “parallax infinite vertical scrolling background” ( I don’t know the orders of the words because english is not my mother tongue) to my game Speedy Square.

Here is how you can also implement that in your project with Unity 3D

Final result

Informations

Before starting this tutorial, here are some informations :

Each images have the same height : 19
I setted 3 differents parallax effect : 0.1, 0.2 and 0.3

You can take these 3 images for testing this effect.
If you want to use your own image, be sure to adapt the imageHeight variable in the script!
This script work only when the camera goes up but can easily work when the camera goes down.

The script

The script is used to make the background moving like in the video.
It will also be able to properly reuse the previous background and then show it again.

Create a new C# script called InfiniteBackground

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

public class InfiniteBackground : MonoBehaviour {
    [SerializeField]
    GameObject camera;
    float imageHeight = 19f; // Height of one image
    float startPosition;
    [SerializeField]
    float parallaxEffect = 0.3f; // Default parallax effect

    void Start () {
        startPosition = transform.position.y;
    }

    void FixedUpdate () {
        // Used to repead the bg
        float temp = (camera.transform.position.y * (1 - parallaxEffect));    
     
        // Calculate the distance with the camera position in the Y axis (vertical) multiplied by the parallax effect variable.
        float distance = (camera.transform.position.y * parallaxEffect);

        // Change the position in the Y axis (vertical) of the current background gameObject (small, medium, big)
        transform.position = new Vector3 (transform.position.x, startPosition + distance, transform.position.z);

        // Used to repeat the background
        if (temp > startPosition + imageHeight) {
            startPosition += imageHeight;
        } else if (temp < startPosition - imageHeight) {
            startPosition -= imageHeight;
        }
    }
}

Prepare your Hierarchy

In the camera, you have to create gameObject that will contain your different images for the different levels.

In my example, I have 3 backgrounds gameObject. Each gameObject contains two respectives images that you can see in the informations parts.

Adding the backgrounds gameObjects

In your camera, create 3 new gameObject called “Background_small“, “Background_big” and “Background_big“
For each of those 3 gameObjects, insert two respective images (small, middle and big) and called Background_1 & Background_2

Settings of the background gameObjects

For each of your 3 gameObject, you need to set the position at 0 for X, Y and Z
Attach the script you created before and add the Main Camera and a value for the Parallax Effect:
– Background_small: 0.1
– Background_middle: 0.2
– Background_big: 0.3

Settings of the background images

Just said earlier, the image has a height of 19.

For each backgrounds (Background_small, Background_middle and Background_big) you need to place correctly the two images (Background_1 & Background_2).
Place the two images on top of each other like on the example.

If you select the image of the top, you will know the Y position. It will be the size of the image (19 for this tutorial)

Test

Launch the game and then drag the camera up. You will know see the parallax effect in the background.

You can create a script for the camera that moves automatically up. It will be much fun to see 🙂