Parallax background in 2D games using Unity
At one point of your life, you wanted to build a game and came up with ideas but couldn’t implement your ideas due to lack of knowledge or resources. Well, this article is here for the rescue.
This articles talks about how to implement a beautiful parallax effect to your game.But first, what’s parallax effect?
Parallax effect
Parallax effect is a technique that creates a 3D scrolling effect as the gamer moves across screen.Parallax is a sort of optical illusion that grabs the attention in momentum.
How does the parallax effect work?
As gamer moves in the game, different layers of content or backgrounds move at different speeds, and this creates a 3D effect.
For the real life example, when you are travelling in train, the trees near you moves at a different speed when compared to the mountains far away and the sun in the sky will appear to be still.
Prerequisites
- Unity
- Import this images to your Unity or you can download the images from any free assert store
Let’s get started then,
Create a new 2D project in unity. Then to the main camera, add new empty Game Object as the background needs to be moved relative to the camera, name it Parallax Background
Now add the layers of images one by one to the Parallax Background . Refrain from adding all the images at once as unity thinks that we are trying to create an animation which is not what we want.
As of now the images don’t look good as they are not in order, so we need to add the order by giving the top priority to front layers and then low priority to the back layers. We can do this by simply adding a number depending on number of layers to Order in Layer in Sprite Render tab.
Now we have to extend the Parallax Background as we can’t move outside the screen. We can simply create two duplicates of the image layers and add one to left and another to right. This adds some more space to work for the parallax effect.
Note:Simply add x position of the images with lengths of images i.e., +length for right side and -length for left side to position x.
For better maintenance and organisation of the images, move the duplicates to the parent Images
Now let’s start coding by creating a C# script parallax.cs for the parallax effect. We need to have lengthOfSprite ,startPositionOfSprite and amountOdParallaxEffect variables. We also need a gameObject for our Camera .
private float lengthOfSprite,
private float startPositionOfSprite;
public float amountOfParallaxEffect;
public GameObject Camera;And in the Start()function, we need to add our length and starting postion for the initial state.
// Start is called before the first frame update
void Start()
{
startPositionOfSprite = transform.position.x;
lengthOfSprite = GetComponent<SpriteRenderer>().bounds.size.x;
}To FixedUpdate() function, we need to find distance moved from starting position and move our camera accordingly
// FixedUpdate is called once per frame
void FixedUpdate()
{
float distanceMoved = Camera.transform.position.x*amountOfParallaxEffect;
transform.position = new Vector3(startPositionOfSprite+distanceMoved , transform.position.y , transform.position.z );
}After creating this C# script, add the parallax.cs by dragging and placing it in Add Component to all the layers
Add the Main Camera to Camera for all the layers and for the Amount Of Parallax Effect ,for the layer which is front we have to add 0 which means the layer moves as if the camera is moving past the layer and then gradually increase these number all the way to 1 for the rest of the layers
Example: Layer_0(Sky) -> 1,Layer_1(Clouds) -> 0.8 , Layer_2(Far Mountains) -> 0.5 , Layer_3(Near Mountains) -> 0.3 , Layer_4(Ground and Trees) -> 0
If you have done everything right till now, you will be able to visualise the parallax effect with game mode on and moving relative to Main Camera
We have successfully created parallax effect, but if we move outside of bounds, the backgrounds stop appearing .So we have to make the background repeat itself.
We have to find out how much relatively we have moved to camera and add conditions to regenerate if we moved the camera out of bounds.We can achieve this by add this piece of code to the FixedUpdate() function in parallax.cs script.
float cameraBounds = Camera.transform.position.x*(1-amountOfParallaxEffect);
if(cameraBounds>startPositionOfSprite+lengthOfSprite) startPositionOfSprite += lengthOfSprite;
else if(cameraBounds<startPositionOfSprite-lengthOfSprite) startPositionOfSprite -= lengthOfSprite;From this the background will repeat itself no matter how far the camera moves.
Here is the final parallax.cs C# script
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class Parallax : MonoBehaviour
{private float lengthOfSprite,startPositionOfSprite;
public float amountOfParallaxEffect;public GameObject Camera;
// Start is called before the first frame update
void Start()
{
startPositionOfSprite = transform.position.x;
lengthOfSprite = GetComponent<SpriteRenderer>().bounds.size.x;
}// Update is called once per frame
void FixedUpdate()
{
float distanceMoved = Camera.transform.position.x*amountOfParallaxEffect;
float cameraBounds = Camera.transform.position.x*(1-amountOfParallaxEffect);
transform.position = new Vector3(startPositionOfSprite+distanceMoved , transform.position.y , transform.position.z );if(cameraBounds>startPositionOfSprite+lengthOfSprite) startPositionOfSprite += lengthOfSprite;
else if(cameraBounds<startPositionOfSprite-lengthOfSprite) startPositionOfSprite -= lengthOfSprite;
}
}
Conclusion
Here, we have learnt how to build a parallax background. Game developers often focus on improving the character and abilities, but go with plain backgrounds. Parallax backgrounds create 3D effect for the game which makes it more alive.
