Parallax scrolling featured

in Tutorials, UE4

Parallax scrolling using UE4 materials

With this tutorial we are going to create a 2D parallax scrolling background using Unreal engine 4 materials.

Parallax scrolling, is a technique where background images move by the camera slower than foreground images, creating an illusion of depth. The most common method used is the Layer method, where multiple layer background can be scrolled independently in horizontal and vertical directions and composited on one another, simulating a multiplane camera.

parallax layers

A game can produce parallax by simply changing each layer’s position by a different amount in the same direction. Layers that move more quickly are perceived to be closer to the virtual camera.

parallax scrolling sample

One way to save resources is implement a looping bitmap with two wider images than the screen, when the first image comes out of the screen it can be appended to the second image by the other side.

loop bitmap

In this tutorial we are going to use other method, the UV mapping displacement. With this method we only need one image object, we are going to move the texture of the image object instead of move the image over the scene.

UV mapping displacement

In a previous tutorial (Transitions effects part 2), we had already used the UV displacement, we can start using part of the knowledge of this tutorial. The vector displacement for horizontal scrolling is (offset, 0), where offset is a float in range [0,1].

background ice 0

Background layer 0

 

Parallax scrolling material

UV mapping displacement Material

Now we can create a surface to apply our material, a plane is a good mesh for this, just remember to scale it with the same aspect ratio than the image to avoid a background deformation.

parallax plane

Plane mesh for background

The parallax offset value will be increased in each tick call making a loop to maintain a range between 0.0 and 1.0. The Tick Event for the actor would be like this:

Parallax tick event

Actor Tick event

parallax scrolling ice

Parallax scrolling layer 0

We can repeat the same process for each background creating one plane for each layer and one Material Instance Dynamic and assigning the UV offset value independently, but it can be a bit messy.

The best way is to modify the previous material to work with multiple layers. To do this in the clearest way we will create two material functions, if you don’t know how to do it take a look at How to create Material Functions.

The first one is to encapsulate the previous texture coordinates displacement.

UV displacement

Texture coordinates displacement

The second one is to overlap 2 textures taking into account the value of the Alpha channel.

Overlap Images Function

Overlap Function for two images

Now the Material, we will set one input scalar parameter for each layer and one Texture Sample Node to store the Original Texture Layer too.

Multilayer Parallax Material

Multilayer Parallax Scrolling Material

To update the Dynamic Material Instance we can create a function to set the velocity of each layer in function of their “Z-Order”. Foreground layers moves faster than background layers.

Actor new Tick Event

Update Actor Parallax Scrolling

Update Actor Parallax Scrolling Function

Now the final result is:

Parallax scrolling result

Resources:

Background Ice Images: Download

Background Intro Images: Opengameart


Support this blog!

For the past year I've been dedicating more of my time to the creation of tutorials, mainly about game development. If you think these posts have either helped or inspired you, please consider supporting this blog. Thank you so much for your contribution!


Write a Comment

Comment

8 + fourteen =