Parallax Background with Zoom and Drag

Phaser 3
1

Hi,

I currently try to add a zoom effect to the well-known horizontal parallax effect from 2D Jump&Run games.

So the common parallax effect is a slower moving background layer than the foreground layer while the player is moving to the right/left, e.g. described here: Add Pizazz with Parallax Scrolling in Phaser 3 @ Playful Game Developmet Blog by Ourcade

In contrast to that effect I have a fixed size world (like 2000x2000px) that I can zoom into (scrollwheel / rex pinch gestures) and also drag it around. Combined with the setBounds() method this works pretty smooth.

Now I added a background scene that only holds the background image with 2000x2000px and has a scrollwheel/pinch method and its own drag control. But both only with 10% strength.
=> So scrolling and dragging is reduced to 10% compared to the foreground game.

On the first view this looks pretty nice and is exactly what I wanted to do. But as soon as you start dragging the bounds get totally out of control. For example, while the foreground hits the eastern bounds of my world the background can still be dragged to the left what looks really strange.

I am afraid that the whole calculation has to be done “by hand” based on the zoom factor, the bounds and possibly the origin of the background.

Has anyone seen an example for something like this? Or is there a “simple” way of doing this, maybe a plugin or built-in method?

Thanks for any hint that leads me to some kind of solution!
Best, Jan

2

Is this done by zooming and scrolling the camera or something else?

3

@samme Yes, this is all done with the camera.

Yesterday I spent lots of time thinking about this feature and drew many pictures via pen and paper.

I came to the conclusion that two things are necessary to realize this feature:

  1. Scale the background relativ to the canvas and the maximum possible movement it can have (e.g. 10% of the overlapping “phaser world”)
  2. Working with percentages all over the place especially for positioning/centering the cameras

As this is all very special I’m pretty sure there is no out-of-the-box phaser feature or plugin that would handle this. Hopefully I get enough time today to build this feature.

4

Just to close this issue. I finally managed to build this effect while throwing my head against the wall more than once :wink:

There are many calculations necessary for correctly scaling the background and setting the bounds. All depends on a factor (for me 8%). So I needed to reduce the possible background scene movements (drag x and y) and the camera zoom to 8%. Also the background scene is only 8% larger than the canvas compared to the world size. So all those calculations depend on the canvas size.

Best, Jan