Jump to content

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


Recommended Posts



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');

  .setOrigin(0, 0)

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! 





Edited by lTyl
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...