Friday, February 21, 2014

Creating Parallax effect in Unity 4.3 2D game

I was checking out Unity3D's 2D workflow and I seen the were able to implement Parallax effect for game background without much effort.

In this post I will show I they achieved parallax effect without single line of code for Unity2D game.

Final effect looks like shown in below video.

First, I created a sample project in 2D mode and imported Sky background in asset and created a sky game object.

This is how it looks after importing Sky background.


I wanted to show clouds moving in the sky, so I created image with clouds and imported those to Unity. Now we need to create a two sprite of cloud image and put those side by side. Once that is done we need to animate both cloud background such that at end of animation second could background image is at the place of first cloud background.

To make this movement process easy, we will create a empty game object and name it Clouds.


Now we will create two object of cloud background image and place those image under empty gameobject which we just created.


We need to arrange those side by side, like below.


We can move Clouds object( the empty gameobject) and both cloud object will move together. This empty gameobject make things easier for movement and its easy way to group object together.

So, now we are ready to make parallax animation, first make sure Animation window is visible, you can make it visible like shown in blow pic.


Select the Clouds empty gameobect, we need to create initial key for animation, which is our current default position.


Once initial animation key is created, right click on time on timeline and select add key, it will add animation key, now you can move Clouds game object to create animation. This key is out intermediate animation key.


Finally, we need to add final animation key, right click on another time on timeline and add key, and move Clouds gameobject such that second cloud image is at place of first one.


We are done, now if you press play button you can see cloud moving continuously as shown in video.

2 comments: