How to limit the camera bounds to map size

[JumpLink]

Hi, I do not want the camera to be able to go beyond the map, for this I have written the following working function:

private _limitCameraBoundsToMap(map: TiledMapResource) {
  const mapBox = new BoundingBox({
    left: 0,
    top: 0,
    right: map.data.width * map.data.tileWidth,
    bottom: map.data.height * map.data.tileHeight
  });
  this.scene.camera.strategy.limitCameraBounds(mapBox);
}

The method works but I get the following warning when the map is larger than my viewport: Camera bounds should not be smaller than the engine viewport.

Is there a better way to do this?

[eonarheim]

Hi @JumpLink

It definitely looks like the warning doesn't stop the code from executing, maybe a bug in the warning? What is your viewport and total TileMap width and height? Do you have a hidpi display by chance?

https://github.com/excaliburjs/Excalibur/blob/main/src/engine/Camera.ts#L186-L229

If I'm interpreting the code correctly, seems to indicate the TileMap should be bigger than the camera viewport dimensions you want to fit inside the TileMap bounds. The warning is definitely a bit confusing, could probably use some re-wording for clarity ☹️ I'll make an issue to address the wording shortly.

In the excalibur-tiled plugin example with the camera limit strategy turned on (no blue background showing through) I don't get the warning, I use your snippet. branch

[JumpLink]

@eonarheim I have adjusted my code accordingly and am now checking if the map is big enough for this. Thanks a lot!

  private _limitCameraBoundsToMap(map: TiledMapResource) {
    const vw = this.scene.camera.viewport.width
    const vh = this.scene.camera.viewport.height;

    const mapWidth = map.data.width * map.data.tileWidth;
    const mapHeight = map.data.height * map.data.tileHeight;

    if (vw > (mapWidth * this.scene.camera.zoom) || vh > mapHeight * this.scene.camera.zoom) {
      return; // Do nothing
    }

    const mapBox = new BoundingBox({
      left: 0,
      top: 0,
      right: mapWidth,
      bottom: mapHeight
    });
    this.scene.camera.strategy.limitCameraBounds(mapBox);
  }

[eonarheim]

Awesome! Glad it works for you!