unity 2d tutorial on parallax effect and infinite background scrolling
Unity

How to create Parallax effect using Infinite Scrolling Background in Unity 2d 2020 in super easy way

Hello guys, today I came with another tutorial how to create Parallax effect using Infinite Background Scrolling in Unity 2d with super easy way. To start this tutorial, first i want to highlight the need of infinite background scrolling and parallax effect. In unity there is concept of Skybox for background view in game but problem is skybox is for 3d games not 2d games and for 2d games we need 2d background image as our game background. For this purpose we need to add customized code (scripts) and 2d image as it look like 2d background for entire 2d game environment. Now the question is why we need parallax effect. The parallax effect will give realistic look to background and improve gaming experience.

Practical Implementation:

First add background image in scene view

infinite scrolling in 2d unity
infinite scrolling in 2d unity

You will see in game view that there is gap in image background , fill it by going to inspector then sprite renderer then draw mode. Change value of draw mode from simple to tiled. it will show width or height values for size. Increase it width values only, don’t touch height value (it will effect image quality).

unity 2d infinite background scrolling
unity 2d infinite background scrolling
infinite background scrolling in unity 2d
infinite background scrolling in unity 2d
parallax effect in unity 2d
parallax effect in unity 2d
parallax effect in unity 2d part2
parallax effect in unity 2d part2
parallax effect in unity 2d part 3
parallax effect in unity 2d part 3
parallax effect in unity 2d part 4
parallax effect in unity 2d part 4
parallax effect in unity 2d part 5
parallax effect in unity 2d part 5
parallax effect in unity 2d part 6
parallax effect in unity 2d part 6
parallax effect in unity 2d part 7
parallax effect in unity 2d part 7

There is one more important concepts in unity 2d gaming that is sorting layer. Sorting layer is similar to layer in photoshop (if you used photoshop before, you will know it). Why we need sorting layer in 2d, we need it because if you put two game object ( ui element ) at same place, you will notice one game object is not showing it is because it share same layer (render on same layer). To solve this problem there is two option. First option is to create new sorting layer and prioritized it (up or down to decide which layer will be above other). The second option is to not create any sorting layer, there is option of order in layer in sprite renderer, just make increase value of it in order to make layer above the other layer.

How I solve 2d background image issue, I will explain in very simple way in three step, that is


1. drag and drop 2d image (sprite)  to scene view


2. you have to check that 2d image is covering all area of camera field of view if yes, go to step 3 else you need to select tile mode and change option from simple to tiled and increase width and height to cover all area of camera field of view.


3. Last step is to make 2d image child of camera object , when camera moves left or right, the 2d image will also move smoothly with it and it will show same image for background in all scene of game.

Now lets implement Parallax effect in unity 2d game. Parallax effect is basically game object moving with different speed in background (focus on moving with different speed). So how i create parallax effect, I will explain in very easy words.

unity 2d tutorial on parallax effect and infinite background scrolling
unity 2d tutorial on parallax effect and infinite background scrolling

I have parallax effect script below I will explain it,  this script takes 3 input (parameter), first is background speed. Higher the background speed slower it will move in background in game. Second is main camera game object. Why is main camera, reason of main camera is that it handle all rendering stuff and player moves camera will player, so i need to moves background object in opposite direction to camera for parallax effect thats why i need camera position and background game object position to slide it when player moves ( left or right ). It will give parallax effect. Third thing, the script need is offset value in float. I used this task for additional reason, that is to move background object ahead the camera field of view when camera field of view passed from it (for making infinite gaming world) and place to change will decided on value of offset.

control parallax effect script
control parallax effect script

Parallex Effect On Background script

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ParallexbackgroundMovement : MonoBehaviour
{
  
    [SerializeField]
    private Transform mainCameraPosition;

    [SerializeField]
    private float backgroundMoveSpeed;
    private float directionX;
    [SerializeField]
    private float offsetByX = 13f;

    // Start is called before the first frame update
    void Start()
    {
      
    }
    // Update is called once per frame
    void Update()
    {
    
     directionX = Input.GetAxis(“Horizontal”) * backgroundMoveSpeed * Time.deltaTime ;
     transform.position = new Vector2 ( transform.position.x + directionX , transform.position.y ) ;
     if( transform.position.x – mainCameraPosition.position.x < -offsetByX ){
        transform.position = new Vector2( mainCameraPosition.position.x + offsetByX  , transform.position.y );
     }
     else if( transform.position.x – mainCameraPosition.position.x > offsetByX ){
        transform.position = new Vector2( mainCameraPosition.position.x – offsetByX  , transform.position.y );
     }

    }

}

I have some other script for character movement and camera follow character.Below script is for character movement.

 using System.Collections;

using System.Collections.Generic;

using UnityEngine;


public class CharacterMovement : MonoBehaviour{

private float CharacterMoveSpeed;   

private float DirX;

// Start is called before the first frame update   

void Start()    {       

CharacterMoveSpeed = 6f ; 

  }


    // Update is called once per frame   

void Update()    {             

DirX = Input.GetAxis(“Horizontal”) * CharacterMoveSpeed * Time.deltaTime ;
transform.position = new Vector2 ( transform.position.x +  DirX , transform.position.y  ) ; 

    }

}

Below script is for camera follow character.

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

public class MainCameraMovement : MonoBehaviour
{
[SerializeField]
private Transform characterPosition ;
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
transform.position = new Vector3 ( characterPosition.position.x , transform.position.y , transform.position.z );
}
}

If you still don’t understand it. There is last option for you, take project source code from me through facebook messenger or instagram. Thank you.

Facebook page: https://web.facebook.com/saify3333/
Instagram : https://www.instagram.com/saify9999/