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!