Creating a Parallax Effect in Unity: Step-by-Step Guide

Parallax effects breathe life into game environments adding depth and immersion. In this guide, we'll explore creating these effects in Unity. Whether you're new to game development or a Unity pro, this tutorial will elevate your projects.

Setting up the scene

We used a free asset from the Unity Asset store. If you'd like to use the same background, you can download it here.

Drag and drop the background images into the scene and nest them under the main camera for your game. We’re doing this because our camera follows the player, so having it be the parent for the background objects is ideal. Stack them on top of each other and scale them so that they are the same height as the camera view port.

Sort the layers using the Order in Layer field on the Sprite Renderer. I’m going to set

• background1: -4
• background2: -3
• background3: -2
• background4: -1

Now duplicate the backgrounds and place a copy to the left and right of the camera. Be sure to line up the start and stop of each image or else you’ll get a weird jitter on your parallax effect.

Nest the left and right images into the original background object. Here’s what the Scene and Hierarchy should look like now

Creating the script

The script is actually very simple. And here it is!

using UnityEngine;

[RequireComponent(typeof(SpriteRenderer))]
public class Parallax : MonoBehaviour
{
    private float length;
    private float startpos;
    public GameObject cam;
    public float parallaxEffect;

    void Start()
    {
        startpos = transform.position.x;
        length = GetComponent().bounds.size.x;
    }

    void Update()
    {
        float temp = cam.transform.position.x * (1 - parallaxEffect);
        float dist = cam.transform.position.x * parallaxEffect;

        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;
        }
    }
}

Attach the script to each of the main background elements. Then drag the main camera onto the cam property.
The parallaxEffect property can be tweaked to fit your situation.

A value of 1 will move the image with the camera. While 0 will keep it in the same position.

Parallax Effect Values:

• background1: 0.9
• background2: 0.8
• background3: 0.5
• background4: 0.3