Parallax Effect Workshop with Hizagui! 🕹️✨ (Patreon)

Hello, everyone!✨

This month’s workshop is hosted by our programmer Hizagui who’s going to walk you through the parallax effect! 

1. What is parallax?

Parallax is a method of adding a 3D look and feel to a 2D scene. Simply put, parallax

takes into account the way we humans perceive objects at a distance. Objects far away 

are perceived to move slower than objects closer to us. 

For example, when you see a plane in the sky it looks rather slow but it is actually moving at incredible speeds. In 2D we can apply the same effect by having a number of layers in our maps move independently and at different speeds, effectively tricking our brains into perceiving a 2D scene as a 3D one.

So let’s get to it and see it in action:

Did you catch it?

This effect should be subtle, as it's supposed to look natural. Here we've applied the effect to some of the tree branches in the foreground!

However, as subtle as it is, once you've noticed its presence you'd definitely notice its absence. Here is the same scene without the Parallax effect.

The Parallax effect is being applied to the big foreground trees making them appear closer to the camera than they actually are. If you focus on them, they are moving in the oposite direction of the camera.

This way, the speed at which they're moving out of our field of view is greater than the speed of our character, which gives it this very natural movement. 

Slower means further and faster means closer!

The same effect can be applied to background objects. As we can see below, having applied the effect to the cliff the character is standing on makes it look a lot smoother and gives it a lot more dimension and depth!

2. So what is going on behind the scenes?

It's quite simple actually! 

Our parallax needs 2 things to work: a main Focus, and an effect intensity.

The main focus is the reference point for the effect. In our case, we use the camera position since it is centered with our main character, or other interesting points of interest.

Then our scripts calculate the distance between the objects and the Focus and apply the effect intensity to move them in the oposite direction by increasing the distance between them.

The larger the intensity the faster it will move the objects around. 

The lesser the intensity the slower it will move things arround. 

You can then play arround with the values to make it Just Right™, asset by asset!

We also added some extra helper features such as locking the parallax effect to a single axis, and also inverting the direction in which the effect is applied. This helps when creating scenes with different perspectives and making background assets behave differently to foreground assets by making them move in different directions, adding even more to the close/far effect by simulating line of sight between the assets.

This is all for this month, we hope you enjoyed Hizagui's insight on how to achieve this effect using Unity! Thank you for reading to the end!

See you next time and stay tuned! ✨