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

**URL:** <https://phaser.discourse.group/t/camera-doesnt-show-scrolled-tilemap-part-after-camera-pan/8867>\
**Category:** Phaser 3\
**Created:** [February 11, 2021, 4:28pm UTC](https://phaser.discourse.group/t/camera-doesnt-show-scrolled-tilemap-part-after-camera-pan/8867 "2021-02-11T16:28:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lupo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/lupo/32/4808_2.png) [@Lupo](https://phaser.discourse.group/u/Lupo)\
**Post date:** [February 11, 2021, 4:28pm UTC](https://phaser.discourse.group/t/camera-doesnt-show-scrolled-tilemap-part-after-camera-pan/8867/1 "2021-02-11T16:28:16Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/590709adecfd9c6f55ebdbcaeec9845a3719f877.png)

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

 ![grafik](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/da8dd7db0a96f09b29679682f57390c58e1e2995.png)

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!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 11, 2021, 4:48pm UTC](https://phaser.discourse.group/t/camera-doesnt-show-scrolled-tilemap-part-after-camera-pan/8867/2 "2021-02-11T16:48:02Z")

</div>

👋

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.

---

<div class="post-metadata">

**Author:** ![Lupo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/lupo/32/4808_2.png) [@Lupo](https://phaser.discourse.group/u/Lupo)\
**Post date:** [February 11, 2021, 6:47pm UTC](https://phaser.discourse.group/t/camera-doesnt-show-scrolled-tilemap-part-after-camera-pan/8867/3 "2021-02-11T18:47:34Z")

</div>

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