Zoom, tilemaps & parallax: global vs camera zoom (broken?)


Parallax seems to break when zoom is applied to the (main) camera instead of via the game config. I made two sandboxes to show the global zoom versus the per-camera zoom - videos and links below. I’ve tested on 3.24, 3.50 and 3.55.2. As explained below, I must use the per-camera approach.

  • Works properly: When the zoom is applied via the game config, then parallax layers are positioned like in Tiled, aligned with the upper left corner of the map.

  • Borken: When the zoom is applied to the camera, then parallax layers are positioned in a way that seems related to screen dimensions and sync’ing the parallax layers is impossible.

Parallax is achieved using the scrollFactor of tilemap layers in this project:

tilemap.createLayer("bg-near", tileset).setDepth(6).setScrollFactor(1, 1);
tilemap.createLayer("bg-mid", tileset).setDepth(4).setScrollFactor(0.8, 0.9);
tilemap.createLayer("bg-far", tileset).setDepth(2).setScrollFactor(0.6, 0.66);

Here is the expected result - ie. when zoom is applied via global game config:



This perfectly matches my Tiled workspace:

Now, the broken parallax.

We can see that the the leftmost tree isn’t visible. It’s actually rendered outside of the non-parallax layers’ boundaries. Parallax content are now centered based on the viewport dimensions - this is my big problem. Targeting all sorts of devices (mobile phones, tablets, steam deck, web, etc.) I need a predictable way to position my Tiled layers.




Please share your thoughts on this behavior?
It reminds of an issue when the world transform wasn’t applied properly in particle systems:

REM: My game must use a global zoom factor of 1 in order to allow dynamic zooming as well as recomputing zoom when the screen is resized / rotated.

I created the following topic with in-depth analysis of Phaser’s internals to try and pinpoint the problem: