Parallax Backgrounds in Unity

One of the common features found in 2D games are scrolling backgrounds. This is where the background scrolls (either
horizontally or vertically). This gives the impression of movement for the character and can be used in a variety of game
situations.

A parallax background is a series of background images stacked on top of each other with transparent areas. The further
away backgrounds scroll at different speeds than the foreground which gives the impression of distance in a 2D
environment.

This is done in Unity with the following general steps:

1. Load a set of parallax designed background image into an Asset folder.

2. Convert each of the parallax images to continuous repeatable.
3. Create a Quad and load the image into the quad and set the Quad scale to the image
4. Configure the shader information in the Quad to accommodate the image
5. Write a script to access the Quad object renderer and scroll the material

In the following example you will create a series of background images and a simple player. The player script will
reference the background images and will control their scroll speed. This allows the player to stop, which will also stop
the movement of the background images.

1. Download the zip file accompanying this lecture and unzip the file.
2. Start a new Unity project and create the following folders:
Sprites
Backgrounds
Scripts
Animations.
3. Drag the files for the character animation into the Sprites folder and drag the background images into the
Backgrounds folder.
 You will next convert the background images.

4. Click one of the background images.

5. In the Inspector click the Texture Type option and set it to default.
6. In the Inspector click the Wrap Mode to Repeat.
7. Click Apply to change this image.
8. Repeat these steps for the other background images.

You will next create a series of Quads and set these images to the Quad objects.

9. Right click in the Hierarchy tab, choose 3D object, and choose Quad. Name the Quad object back1.
10. Drag the first layer (with the label layer01) and drop it on the quad.

You will set the quad size to match the background image and set the shader. The background image size is 1920x1080.
Converting this to Unity units is dividing by 100 with gives 19.2x10.8.

11. For the scale for the Quad set the X value to 19.2 and the Y value to 10.8
12. Click the Shader drop-down and select Particles. In the Particles menu choose Standard Unit.
13. Under rendering method choose Transparent.
 14. For the transform.position.z value set a number corresponding to the layer (back1 quad uses 1 for the
transform.position.z value).
15. Repeat these steps for the other background images and create quads named back2 to back7.

You will next create a character using the animated sprite and set the camera size.

1. Select the four images for the animated sprite and drag them into the scene.
2. Save the animation in the Animations folder with the name playeranimations.
3. Click the Main Camera object.
4. Set the size to the image 1080/100/2 which is 5.4.
You will next create a script for the player that controls the scrolling speed of the backgrounds.

1. Create the following script and name it PlayerScript

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

public class PlayerScript : MonoBehaviour

{
// Start is called before the first frame update
private Renderer[] renderarray;
private float basescroll;
private float reducepct;
private float[] scrollinc;
private float playerspeed;
private float scrw, scrh;
private Vector2 spsize;

void Start()
{
basescroll = .1f;
reducepct = .25f;
scrollinc = new float[7];

SetLimits(); // set screen and sprite size

SetupBackgrounds(); // set backgrounds and renderers
LoadScrolling(); // load the scrolling data

void SetupBackgrounds()
{
renderarray = new Renderer[7];
renderarray[0] = GameObject.Find("back1").GetComponent<Renderer>();
renderarray[1] = GameObject.Find("back2").GetComponent<Renderer>();
renderarray[2] = GameObject.Find("back3").GetComponent<Renderer>();
renderarray[3] = GameObject.Find("back4").GetComponent<Renderer>();
renderarray[4] = GameObject.Find("back5").GetComponent<Renderer>();
renderarray[5] = GameObject.Find("back6").GetComponent<Renderer>();
renderarray[6] = GameObject.Find("back7").GetComponent<Renderer>();
}

void LoadScrolling()
{
int num=0;
float val = basescroll;
do
{
scrollinc[num] = val;
val = val - (val * reducepct);
num++;
} while (num<7);

// Update is called once per frame

void Update()
{
for(int i=0; i<renderarray.Length; i++)
{
ScrollBack(i);
}

}
 void ScrollBack(int b)
{
Vector2 offset = new Vector2(Time.deltaTime * scrollinc[b], 0);
renderarray[b].material.mainTextureOffset += offset;
}

Vector2 ClampToScreen(Vector2 p)
{
p.x = Mathf.Clamp(p.x, -scrw / 2 + spsize.x / 2.0f, scrw / 2 - spsize.x / 2.0f);
p.y = Mathf.Clamp(p.y, -scrh / 2 + spsize.y / 2.0f, scrh / 2 - spsize.y / 2.0f);
return p;
}
void SetLimits()
{
// static sprite size
spsize = GetComponent<SpriteRenderer>().bounds.size;

Camera m = Camera.main;
scrh = 2f * m.orthographicSize;
scrw = scrh * m.aspect;
}

This script does a number of things. It first defines the variable that will hold the data. Notice that there is an array for
the render objects from the background objects and an array to hold the render speeds.

The start method calls a number of methods. One of these is the SetupBackgrounds()
The SetupBackgrounds() method finds the seven background objects and saves their renderer components.

The SetLimits() sets the size of the player sprite and the size of the screen.

The LoadScrolling() method loads the scrolling data into the float array. This is done by starting with the base scrolling
(the foreground) and then reducing the scrolling speeds by a fixed percentage.
We now have an array of floating point values that are indexed from 0 to 6 with values decreasing from element zero
(the base) by a fixed percentage.

In the Update() method the ScrollBack() method is called for each element in the two arrays.

Notice that the scrolling happens by setting the offset of the material.mainTextureOffset. You can now control the
scrolling speed by setting the basescrolling value and then calling the LoadScrolling() method.

When you run the program you see the background image scrolling at different speeds.