How to Create a Scrolling Background with a Parallax Effect.

In this article I am going to cover how to make a scrolling background with a parallax effect. This certainly makes the player feel they are moving forward and the environment more dynamic and interesting.

I needed to find some background images that provided a big image that would be easily looped and other images that can be layered in to give the background depth. One place when I am checking for sprite images is OpenGameArt or the Unity Asset Store. I found some great pixel backgrounds that were made for scrolling backgrounds and parallax from both, so I was able to mix and match to make my background.

First, we are going to created the scrolling background so we add the background image to the canvas and resize it to fill the screen.

We duplicate the background and make it a child of the first background. Then move it to the position above the original where it looks seamless.

We need to find the Y position of the background, where the background runs out so we grab the parent background image and move it on the Y axis until the background is about run out and take note of the Y position.

We are going to create a script that will move the background image down then when it reaches that Y position, we will reposition back to the original spot in creating this endless, scrolling background.

We will declare a Vector 3 variable that will hold the starting position of the background image before we move.

Next, we will create a float variable with a Serialize Field attribute that will hold the speed that the background and other background images will move at and we can adjust it in the Inspector.

Another variable we need to create is a private ints with Serialized Field attributes that will help us control the direction the background images will move and we can easily update it in the Inspector.

In the game Update, lets create a Vector3 local variable that will determine the the direction and since a Vector3 requires and X, Y, & Z we will pass in our _xDir variable, _yDir variable and 0 for the Zed. We could have just used Vector.Down to do this, but some of the images I used I had to rotate so I would have to constantly update the hardcode and change up the Vector. direction to Up, Right, Left or Down. Using the Serialized variable I can easily control the moving direction by assigning the following X, Y combos for the following directions

Left = -1 X, 0 Y

Right = 1 X, 0 Y

Up = 0 X, 1 Y

Down = 0X, -1 Y

Now that we have the direction and speed, we can make it move by using transform.Translate and multiply the direction by speed and time.deltaTime which is the amount of time that has passed since the last frame.

At the beginning, we took note of the Y position of background image reaches right before it runs out. We are going to store this in a float variable called offset and give it a Serialize Field attribute, so we can adjust this value for the other images will be be placing in the background.

In the game Update, we check to see if the position of the background image goes below that offset (position before the background image runs out) and when it does we reposition it back to the start position creating a endless loop.

You can see this looping effect in action below.

I add the other background images to the scene and repeat the steps of making duplicates, position them, child them and move them on the Y axis to find that offset (the Y position where we want to reset the position back to start position). This can be easily adjusted since the original script allows us to put that offset position in the Inspector and control the direction if you need to rotate the image. In creating that Parallax effect, we need to adjust the Order in Layer for each object. The background needs to be the lowest in the order and 0 is the starting layer so I put it at -20. You will need to decide the what object will be the “further” back or appear to be in a greater distance away from the camera. I have 4 objects in my background and I ordered them -20, -15, -10, -5. The objects that are further away should be moving at a slower pace compared to objects that are closer. Again, the script allows us to adjust the speed in the inspector, so we can easily do this. Once you have everything ordered and adjusted the speed of each of the background images you will get a great parallax effect that gives your scene a 3D feel with 2D sprites.