Scroll parallax in Unity.
One way of doing scroll parallax in unity is to create a new Gameobject and place the objects you want to have the parallax effect as childs. Like this:
Then, you make a script to handle the parallax movement and attach it to the gameobject you just created. This script will "transform" our gameobject into a sort of a layer. Then, from the script we will move the layer to the correct position, taking into account the amount of parallax effect desired.
Vertical and horizontal parallax.
This is the script you need to attach to our "layer" object:using UnityEngine;
using System.Collections;
[ExecuteInEditMode]
public class ScrollParallax : MonoBehaviour
{
public Camera camera;
public float xParallax = 0.4f;
public float yParallax = 0.4f;
void LateUpdate ()
{
Vector3 tempPos = transform.position;
tempPos.x = camera.transform.position.x * xParallax;
tempPos.y = camera.transform.position.y * yParallax;
transform.position = tempPos;
}
}
As you see is pretty straightforward. You can set the camera from the editor or use Camera.main, that's up to you. Note that we put the [ExecuteInEditMode] so the placement of the objects is WYSIWYG. Just move the camera to the desired position in the editor and place the background objects as you like.
For the parallax effect we use two variables:
- xParallax: control the amount of parallax to the x axis.
- yParallax: control the amount of parallax to the y axis.
So depending on the values, the layer will move that amount with respect to the camera.
- parallax=1: means the layer will move the same amount as the camera. The effect is like having a static background.
- parallax=0: means the layer does not move, So it will be like a normal image placed on the scene, no movement applied.
- 0<value<1: Values closer to 0 appears to be in the foreground, while values closer to 1 appears to be further away.
- other values can be useful for fancy and trippy effects. Just try it, experiment!
This is the result:
Notes:
- Be sure the camera is in orthographic mode.
- After you have attached the parallax script you will be unable to move the layer object. You need to move the child objects to place them.
Adding zoom.
Until now it's a pretty straightforward-everyday scroll parallax. For the zoom part, we need to add a couple variables, set the size of the layer, and set the resulting position taking into account the displacement derived from the scale applied.
using UnityEngine;
using System.Collections;
[ExecuteInEditMode]
public class ScrollParallax : MonoBehaviour
{
public Camera camera;
public float referenceSize = 2;
public float xParallax = 0.2f;
public float yParallax = 0.2f;
public float sizeParallax = 0.2f;
void LateUpdate ()
{
float sizeRatio = (camera.orthographicSize/referenceSize);
float newSize = (sizeRatio - 1) * sizeParallax + 1;
Vector3 tempScale = transform.localScale;
tempScale.x = newSize;
tempScale.y = newSize;
transform.localScale = tempScale;
Vector3 tempPos = transform.position;
tempPos.x = camera.transform.position.x * (1 -newSize + newSize*xParallax );
tempPos.y = camera.transform.position.y * (1 -newSize + newSize*yParallax );
transform.position = tempPos;
}
}
To zoom in/out you only need to change the size of the camera. After changing the size value, the layer will be set to the correct scale and position.
To make the zoom part we added a couple more variables:
- sizeParallax: variable to control the amount of parallax applied, this time to the zoom.
- referenceSize: variable set as the reference size for the camera (the size the camera will normally have). Of course you can set the reference size on the start method of the script. But for testing purposes is easier to set it manually.
- sizeParallax = 0: No parallax effect applied to zoom. The objects will zoom normally.
- sizeParallax = 1: Full size applied. If you make the camera twice as big, the layer will also be twice as big. The effect is that even though the camera zooms, the layer and his contents keeps the same in the screen.
- for the rest of values just play with them for strange effects.
And the result:
Notes:
- Although you can set the xParallax, yParallax and sizeParallax individually, if you don't want strange effects you must set them to the same amount (or be extra-careful).
- Recommended values for (xParallax, yParallax, sizeParallax):
- (1,1,1) for background objects.
- from (0,0,0) to (1,1,1) to objects between foreground and complete background.
- (0,0,0) for objects belonging to the foreground.
- negative values for objects in front of the foreground.
I hope you like this mini tutorial. Bye!
