Parallax Background In Unity

Parallax scrolling is a 2D art technique that gives an illusion of depth by making background images move slower than those in the foreground. This motion can transform a scene into an immersive, infinite landscape, enhancing storytelling. In this lesson, I will demonstrate how to create seamless parallax animation.

Step 1: Setting Up Your Project

Before diving into the parallax effect, ensure you have a Unity project set up:

1. Create a New 2D Project: Open Unity and create a new 2D project.
2. Import Your Assets: Import the images you want to use for your background layers. These can be anything from mountains and clouds to trees and buildings.

Step 2: Organizing Your Layers

To achieve a parallax effect, you need to organize your background elements into different layers:

1. Create a Parent GameObject: In the Hierarchy, create an empty GameObject and name it ParallaxBackground.
2. Add Background Layers: For each background element, create a new Sprite Renderer GameObject as a child of the ParallaxBackground. Position them at different Z-values to separate the layers visually in the Scene view.

Step 3: Creating the Parallax Script

Now, let’s create a script that handles the parallax effect:

1. Create a New Script: Right-click in the Project window, select Create > C# Script, and name it ParallaxController.
2. Open the Script: Double-click the script to open it in your preferred code editor.

Here is the basic structure of the script:

using UnityEngine;

public class ParallaxController : MonoBehaviour
{
    private float length, startpos;
    public GameObject cam;
    public float parallaxEffect;

    void Start()
    {
        startpos = transform.position.x;
        length = GetComponent<SpriteRenderer>().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;
    }
}

Step 4: Applying the Script to Layers

1. Attach the Script: Attach the ParallaxController script to each of your background layer GameObjects.
2. Assign the Camera: In the Inspector, assign your Main Camera to the cam field of the script.
3. Set Parallax Effect: Adjust the parallaxEffect variable to control how fast each layer moves relative to the camera. A lower value means the layer moves slower, enhancing the depth illusion.

Step 5: Fine-Tuning and Testing

1. Adjust Layer Speeds: Experiment with different parallaxEffect values for each layer to achieve the desired depth effect.
2. Test Your Scene: Play the scene and move the camera (or player) to see the parallax effect in action. Adjust as needed for a smooth and immersive experience.

Step 6: Looping Backgrounds (Optional)

For endless scrolling backgrounds, you can extend the ParallaxController script to handle looping:

1. Modify the Script: Adjust the Update method to reset the position of the layer once it moves out of the camera’s view. This creates a seamless loop.

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

Conclusion

Parallax scrolling adds a dynamic sense of depth to 2D games, making scenes more engaging and visually appealing. By following these steps, you can create beautiful parallax backgrounds in Unity, enhancing your game’s aesthetic and immersing your players in richly layered environments. Experiment with different speeds and layers to perfect your parallax effect. Happy game developing!

Video tutorial can be found here : https://youtu.be/ii_BJe39rQo