How can I implement parallax scrolling with Paper2D?

Hello everyone,

I’m making a simple 2D game using Unreal’s Paper2d sprites. My game is displayed in orthographic mode. Right now, I’m totally stuck on how to get parallax scrolling working on the background. I’m still pretty new to Unreal and I haven’t really been able to understand other posts on the forums such as this and this on similar topics.

So far, all I really know is that I need to animate the background separately to the foreground, but I have no idea where to begin with that. Which Blueprints should I use? What events and functions should I use? I really have no idea. I was wondering if anybody could tell me a way to get parallax scrolling working, and explain it in a way that a beginner will understand? Thanks in advance.

Let’s forget about blueprints and Paper2D for a moment and try to understand the concept of parallax scrolling. If we can’t understand the concept, we have no hope of implementing it.

So, you have a character which can move left or right on the screen. Lets say that the character stays centered on the screen at all times. We want to show character movement by moving all other objects, relative to the character. So, if you walk to the left by 5 pixels, ALL other game objects should be shifted to the RIGHT by 5 pixels, right? So if you have a simple background, we move the background to the right by 5 pixels. This background has a 1:1 ratio to character movement. Let’s call this background “Layer 0”.

With parallax, we want to add a second background layer behind “Layer 0”. This background layer is more distant, so it should move slower relative to the character movement. Perhaps we assign a ratio of 1:2. If the player moves to the left 5 pixels, this background layer moves 2.5 pixels to the right. Let’s call this “Layer 1”. We can simplify the amount the background moves as a fraction of player movement: 1/2

Maybe we add a third background layer, such as distant mountains. This is “layer 2”, and we can give it a fractional movement amount of 1/3 or 1/4, whatever looks best.

Now, to implementation… your parallax backgrounds are really just large sprite textures with tiling. If you know how to load and move a sprite, you can implement parallax backgrounds :slight_smile: I would tie the background movement to character movement events. Generally, you move the background relative to the character, but if the character reaches the edge of the map, you move the character instead of the map. I leave that part for you to figure out, it’s pretty easy :wink:

Thanks for your help! I’m thinking of having the background move in the opposite direction of the character whenever they move, to make it look like it’s scrolling slower. Hopefully that works!

Okay, I’ve got it working now :slight_smile: I used SetRelativeLocation on every tick to change the background’s location on the X plane compared to its current location. That probably doesn’t explain it very well, so I’ll post a [picture][1] in case anybody else is stuck on this.

If you can follow that messy blueprint, I’ve made booleans in the character’s BP to tell if it’s moving left or right. Then I simply update the background’s X location every tick, subtracting if the character is moving right and adding if they’re moving left. The variable ParallaxSpeed is around 0.002, which seems to set a good speed for this project.

Then, because my character speeds up slowly when they first start moving, I got the character’s velocity and multiply it by the ParallaxSpeed variable to determine how fast it should go.

Hopefully this will be helpful to others wanting to do this too.

Hi Rhiannonnee,

I tried to follow your blueprints but my BG is just standing dead still. Any thoughts?

I have added the projectile movement component. And the 2 Boolean’s(move left&right).

Hello! I’m still pretty new to Unreal, so I may not be the best source of knowledge, but I’ll give it a shot! Make sure that you have “moveable” selected in your background’s settings, rather than “static” (should be underneath the position and rotation settings). Also make sure that the MoveRight and MoveLeft booleans are switching to true when your character is moving, by watching those values while debugging. Finally, try experimenting with different values for ParallaxSpeed. Mine was set to something like 0.015, also try setting it to a negative value because that can help make it look further away.

I should note that I actually decided to do away with this whole blueprint because of an issue with the background moving strangely when my character stopped moving (you can see the details here). Instead, I just set my camera’s view setting to “perspective” rather than “orthographic,” so now the speed of background objects is determined by how far back they are on the Y axis.

But if you’re set on using an orthographic perspective, try the things I suggested and if it still doesn’t work, check your character’s blueprint and let me know if those booleans are updating properly. I’ll try to help if I can!

You might want to switch to Perspective view instead of Orthographic, and let the perspective do the work for you. Just lay out your background on the Y axis accordingly (if X and Z your horizontal and vertical axes). Because paralax effect actually IS caused by perspective, so instead of simulating it through blueprints, why not just let it work on the lower level?

Best answer! Changing from ortho to perspective, parallax effect is achieved automatically. you can also play with the y axis of the background plane to improve the effect.

If anyone is struggling with how to do this, you just have to click on the character, then in CameraSettings, change the ProjectionMode dropdown from Orthographic to Perspective :slight_smile:

Perspective Camera can have issues with transparence sorting tho. Things will keep popping from foreground to backgroud and back, especially if they are kind of close together, and flicker like mad.

you need sort translucent along forward axis (in projectSettings/Render) to use PerspectiveCamera and control who is above who in Translucency sort Priority under Rendering options for each actor in scene, is a bit exaustly but you gain the light use habilit since that wont work good with ortographic cameras (sorry for bad english, is not actualy my idioma)

Thanks, yea, I figured that meanwhile : ]

I just use perspective view and flipbooks, not sprites. Flipbooks understand the Y-axis))) Why? I dont know))

You can use both, the difference is the material. But even with masked blending, instead of translucent, Unreal still has problems with depth and sprites. Paper 2D is filled with bugs and there is no dev team on it. Basically, don’t make the same mistake I did, don’t try to do 2D games in Unreal. Massive performance issues and major bugs that nobody will, most likely, ever fix, unless they decide to invest in their 2D tech one day.