Camera doesn't show scrolled tilemap part after camera.pan

Phaser 3
1

I am making a small Tilemap based game with Touch Input - by swiping i want to move the map a little, case given player walks into edges of the world
here’s what it looks like

before the swipe

grafik
grafik490×540 3.38 KB

after the swipe the camera moved - but the background color shows to the right where there should be more map visible

grafik
grafik490×603 3.62 KB

That’s the code i use and that is obvisously buggy

this.cameras.main.stopFollow();
this.cameras.main.removeBounds();
const swipeSpeed = 50;
switch (direction) {
    case "up":
    this.cameras.main.pan(this.cameras.main.x, this.cameras.main.y -= swipeSpeed, 1000);
    break;
    case "down":
    this.cameras.main.pan(this.cameras.main.x, this.cameras.main.y += swipeSpeed, 1000);
    break;
    case "left":
    this.cameras.main.pan(this.cameras.main.x -= swipeSpeed, this.cameras.main.y, 1000);
    break;
    case "right":
    this.cameras.main.pan(this.cameras.main.x += swipeSpeed, this.cameras.main.y, 1000);
    break;
}
const cam = this.cameras.main.setBounds(this.cameras.main.x, this.cameras.main.y, this.cameras.main.width, this.cameras.main.height);
this.cameras.main.width, this.cameras.main.height);
cam.setViewport(this.cameras.main.x, this.cameras.main.y, this.cameras.main.width, this.cameras.main.height);
cam.startFollow(this.player);

Hope i found the right place for my question
kind regards!

2

:wave:

Camera x, y, width, height all refer to the the camera viewport (the camera “window” on the game canvas). For panning and bounds you shouldn’t use those at all (nor setViewport()). Instead use camera midPoint or worldView, which describe the camera’s view in world coordinates.

3

thanks for the explanation! using the worldview solved the display problem.

switch (direction) {
  case "up":
  this.cameras.main.pan(this.cameras.main.worldView.x, this.cameras.main.worldView.y -=  swipeSpeed, 1000);
break;
  case "down":
  this.cameras.main.pan(this.cameras.main.worldView.x, this.cameras.main.worldView.y += swipeSpeed, 1000);
  break;
case "left":
 this.cameras.main.pan(this.cameras.main.worldView.x -= swipeSpeed, this.cameras.main.worldView.y, 1000);
 break;
case "right":
  this.cameras.main.pan(this.cameras.main.worldView.x += swipeSpeed, this.cameras.main.worldView.y, 1000);
break;
}
this.cameras.main.setBounds(this.cameras.main.worldView.x, this.cameras.main.worldView.y, this.map.widthInPixels, this.map.heightInPixels, true);
this.cameras.main.startFollow(this.player);

the only problem remaining is that the camera is stopping to follow the player after its been moved - but that’s a different topic i guess - nevertheless are any comments on the subject heavily appreciated.

Edit: best way to avoid the problem i was running in is setting up the camera right in the first place:

this.cameras.main.setBounds(0, 0, map.width * TILE_DIM.width, map.height * TILE_DIM.height);

solved my problem with the player moving far away from the gameworld and into the “void” solved it for me