Jump to content

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


lTyl
 Share

Recommended Posts

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!

 

no-wrap.PNG

Edited by lTyl
formatting
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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