How to make a Parallax Background in Unity

Parallax scrolling is a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene of distance.

In this blog you will learn how to create it using Unity.

The first thing to do is have all the stuff ready for the project.

In this tutorial we use a background downloadable for free from the Unity Asset Store:

https://assetstore.unity.com/packages/2d/textures-materials/foggy-mountains-parallax-background-142516

Now we can start!

Let's create an empty object called "Background".

Check that the transform values are 0.

Now drag the base image inside the object just created, in this case is the sky one, and check that the value of Order In Layout in the sprite component is 0.

Then duplicate the element, and position them to the left so that the borders match, in this case set the x position to -19.2

Duplicate it again and do the same thing, but to the right, so x position to 19.2.

After that select the two duplicated objects and drag them in the original, in this way moving the original object will automatically move the others too.

Now repeat the same process with all the other images.

You should get something like this

After that move the background object into the camera, so when the camera moves the background will too.

It's time for some script.

Create a script called ParallaxMovement and open it.

First of all let's define some variables:

    private float length;

    private float startPosition;

    public GameObject Camera;

    public float speed;

In the Start function assign the value to the length and to the startPosition:

    void Start()

    {

        startPosition = transform.position.x;

        length = GetComponent<SpriteRenderer>().bounds.size.x;

    }

In the Update function:

    void Update()

    {

        float temp = (Camera.transform.position.x * (1 - speed));

        float distance = (Camera.transform.position.x * speed);

        transform.position = new Vector3(startPos + distance, transform.position.y, transform.position.z);

        if (temp > startPos + lenght) startPos += lenght;

        else if (temp < startPos - lenght) startPos -= lenght;

    }

That's all for the script.

Now let's add the script to the parents of the clones, and drag the Camera object in the inspector variable.

Add the values to the speed, set the highest values to the back and the lowest values to the front.

If we hit play nothing seems to work, that's because the camera is not moving.

For this example we will add a simple script to the camera to make it move automatically.

So, let's create a new script and call it "CameraMovement" and open it.

Add a single variable to control the speed of the movement:

    public float speed;

In the Update function we make the camera move to the right:

    void Update()

    {

        transform.Translate(Vector3.right * speed * Time.deltaTime);

    }

And that's all we need.

Let's add the script to the Camera and assign a speed value like 5.

Now we can see that everything works.

Congratulations, you just learned how to make a Parallax Background.