Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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.

Product Version: UE 4.9
more ▼

asked Oct 09 '15 at 01:56 AM in Blueprint Scripting

avatar image

18 7 12 15

(comments are locked)
10|2000 characters needed characters left

2 answers: sort voted first

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 :) 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 ;)

more ▼

answered Oct 09 '15 at 02:17 AM

avatar image

794 48 29 72

avatar image Rhiannonnee Oct 09 '15 at 03:09 AM

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!

avatar image Rhiannonnee Oct 09 '15 at 05:44 AM

Okay, I've got it working now :) 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 in case anybody else is stuck on this.

alt text

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.

avatar image andyv9735 Oct 15 '15 at 08:35 PM

Hi Rhiannonnee,

I tried to follow your blueprints but my BG is just standing dead still. Any thoughts? alt text I have added the projectile movement component. And the 2 Boolean's(move left&right).

outsidebg.jpg (154.3 kB)
avatar image Rhiannonnee Oct 16 '15 at 11:16 PM

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!

(comments are locked)
10|2000 characters needed characters left

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?

more ▼

answered Apr 01 '16 at 03:29 PM

avatar image

149 5 10 149

avatar image shad0w1989 Jan 05 '18 at 11:49 PM

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.

avatar image Nepture May 02 '18 at 03:12 AM

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 :)

avatar image v_i_m Jun 13 '18 at 06:46 PM

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.

avatar image lieans Dec 25 '18 at 06:54 PM

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)

avatar image v_i_m Dec 26 '18 at 02:01 AM

Thanks, yea, I figured that meanwhile : ]

(comments are locked)
10|2000 characters needed characters left
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question