Tilemap doesn't render to the screen edge when zooming in

Phaser 3
1

I have a visual problem with my tilemap in combination with the camera: In my game it is possible to zoom in/out quite far. However when zooming in, the tilemap stops rendering until the edge of the screen.

Example: https://codepen.io/MrBrogley/pen/poNjgqX (Zoom with Q/E, move camera with arrow keys)

In this example the tilemap is much bigger than the visible part, however it is not rendered completely and the there are black bars at the top and left of the screen.

2

setCullPadding() might fix that.

Could you use instead

var layer = map.createLayer("Ground", tiles, 300, 200).setScale(1);
// …
this.cameras.main.zoom = 3;

?

3

It does not seem to happen with scale=1. I think it is somehow related to the scaling. But I need to use such a small scale because I have very high resolution tiles.

Although I should probably just resize the tiles to be smaller in a image editor, since the high resolution is not visible anyway.

But as for your hint to use ‘setCullPadding’: This fixed the issue. I am using setCullPadding(3, 3) now and don’t see any problems. Thanks for your help!

1 Like