Parallax Effect

In this guide, I will show you how to create a Parallax Background.

Erik Juico avatar
Written by Erik Juico
Updated over a week ago

I started by selecting the right Background to use. As much as possible it should have plenty of layers.

And then create a simple game with the options below.

I will then unlock the background so I can delete the pre-loaded template and replace it with our selected background.

After deleting the backgrounds, I will drag the first layer of the new background to the Object part of the Buildbox wheel as this will serve as our Platform.

As you look at the tree panel on the left, you will see that the first layer is under the category Selection Start, and at the moment, there is no background.
I also aligned layer-1 to the original platform so it will look like it is our platform.

Now I will drag Layer-2 to the Background portion of our Buildbox wheel. 

And drag Layer-2 from Foreground to Background. Now the important part here is to adjust the Speed to 0.2. I will explain why after a few illustration.

Now let us drag and drop Layer-3 to the Background potion of Buildbox wheel.

And then I adjusted the size of the dropped image so that it fits the screen well. Just like Layer-2, I dragged and dropped Layer-3 from Foreground to the top of Layer-2 in the Background category. Again, adjust the speed but this time use 0.4 so it is a bit faster than Layer-2 creating a Parallax Effect.

Illustration below shows that Layer-4 is dragged and dropped to the Background portion of Buildbox wheel.

Same as the above step, I adjusted the size of the image to fit the screen well, moved Layer-4 from Foreground to Background and using the speed of 0.6 to create a Parallax Effect.

And now Layer-5 goes to the Background portion of Buildbox wheel.

Doing the same step, adjust its size to fit the screen, dragging Layer-5 to background and adjusting the speed. if you noticed, I used the speed of 0.8.

Now the last layer goes to the Background part of Buildbox wheel.

Since Layer-6 is just a white background, I will drag it down to the bottom part of the Backgrounds.

So it will look like this.

Now when you preview your game, you will see that you background is moving in different speeds creating a Parallax effect. Here is what it looks like in GIF.

Did this answer your question?