Scrolling background with Tile Sprite does not wrap correctly when camera zoom <1

[lTyl]

Howdy!

 

I am having a problem with Phaser 3 (Specifically, Phaser 3.23.0). I want to draw a scrolling background texture that is always the size of the screen. Further, as the camera.zoom value changes, I expect the scrolling texture to always fill up the screen - regardless of what the zoom value of the camera is at.

What is happening is once the camera.zoom value drops to a value less than 1, then the background itself starts to be scaled so it stops wrapping around the screen.

Barebones code:
Setting the background texture. Intention: This texture wraps around the screen. This works perfect when camera.zoom is 1 or above

this.background = this.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, 'background');

this.background
  .setScrollFactor(0,0)
  .setOrigin(0, 0)
  .setPipeline('Light2D');

And in my update method, I am doing this:

this.background.setTilePosition(this.camera.worldView.x, this.camera.worldView.y);

The code that is scaling the camera (width and height corresponds to the width and height of a rectangle that I always want to appear on screen)

const projectedScale = Math.min(
	this.camera.width / width,
	this.camera.height / height
);

const scale: number = Clamp(projectedScale, 0.5, 2.0);
this.camera.zoomTo(scale, 250);

Once the scale value ends up being less than 1, the this.background stops wrapping correctly and I end up with empty space, like the attached image.

 

If someone could point out why the background texture is not being affected by the camera zoom and/or point out methods I can do to solve it, that would be most appreciated! 

 

Thanks!

 

Edited May 13, 2020 by lTyl
formatting