Zooming out on tilemap layer?

[Babsobar]

Hello,
I've been fiddling with the new camera and tilemaps and I've encountered a problem. I have created a tile layer much like in this example for a level editor I'm working on.
 

 var controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        speed: 0.5,
        disableCull: true,
        zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
        zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
    };
    controls = new Phaser.Cameras.Controls.Fixed(controlConfig);

 

The problem with this way to handle the zoom is that it produces this kind of effect, The camera zooms out of the whole scene, including things that are fixed to it but leaves the rest of the tiles unrendered and culled.

As you can see here, zooming should show more of the green tiles; but zooming out only made the tilemap layer and the contents of the scene smaller, when I'd like it to render more of the tilemap's tiles.

I've tried updating with .setBounds, .setSize and .setViewport with a key call after zooming out but I may have missed something obvious...

Any help greatly appreciated.

EDIT: To clarify further; the camera has no trouble moving around inside the tilemap layer using the arrow keys but it shows black bars around on zooming out.

[samme]

Could you try temporarily switching to the CANVAS renderer or to a dynamic tilemap?

[Babsobar]

I've switched to canvas by switching the config of my Phaser.game but the results are the same. As for the dynamic tilemap, it already is one. The water in the screenshot is created by the game by filling the whole layer with 0, and the land is created by the player on click.

Here is my code should it interest you, there are some things commented out because this is just out of the oven so excuse the messiness.

Thanks for your time!
 

var controls;
var marker;
var map;
var mapWidth;
var mapHeight;
var cameras;
var BKey;
var width
var height
var selectedTile = 1
class Editor extends Phaser.Scene{
  constructor() {
    super({key:'Editor'});
  }
  
//PRELOAD <=======================================================================================================================
preload(){
    var spriteMap = "main"
    var textureURL = 'assets/main.png'
    var atlasURL = 'assets/main.json'
    var tileSetImage = 'terrain2'
    this.load.atlas(spriteMap, textureURL, atlasURL);
    this.load.atlas('buttons', 'assets/buttons.png', 'assets/buttons.json');
    this.load.atlas('menuButtons', 'assets/menuButtons.png', 'assets/menuButtons.json');
    //loads tileset reference file
    this.load.tilemapTiledJSON('terrain2','assets/terrain2.json', null)   
    //Load tileset image
    this.load.image('terrain2', 'assets/terrain2.png'); 
  }

// CREATE<=======================================================================================================================
create(){

    //setting Map width and height in number of tiles
    mapWidth = 150
    mapHeight = 150

    //Layer creation
    map = this.make.tilemap({ 
      width: mapWidth, 
      height: mapHeight, 
      tileWidth: 32, 
      tileHeight: 32, 
      });

    //Adding Tileset
    var tiles = map.addTilesetImage('terrain2', null, 32, 64);
    //Creating blank tilemap layer
    var layer = map.createBlankDynamicLayer('layer1', tiles);
    //Randomly creates Water
    layer.randomize(0, 0, map.width, map.height, [0 /*add tile index here to add to rng distribution*/]);

    // Create Paintbrush marker
    marker = this.add.graphics();
    //Black and 2 px wide
    marker.lineStyle(2, 0x000000, 1);
    marker.strokeRect(0,-32, 6 * map.tileWidth, 6 * map.tileHeight);

    //Set camera bounds to mapsize
    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

    
    //Create cursors to be able to move camera around and their configuration
    var cursors = this.input.keyboard.createCursorKeys();
    var controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        speed: 0.5,
        disableCull: true,
        zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
        zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
    };
    controls = new Phaser.Cameras.Controls.Fixed(controlConfig);
     
    //Some basic text to show we're awesome and show version
    var text = this.make.text({
        x: width-width+80,
        y: height-height+20,
        text: 'Biffin Editor refactor 0.01',
        origin: 0.5,
        wordWrap: { width: 300 },
        style: {
            font: 'bold 12px Arial',
            fill: 'white',
        }
       })
      // Sets anchored to screen
       text.setScrollFactor(0);
    
    //Create Back to menu Button
   

   // createButtons();
    //Create Key for testing
        BKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.B);
}//End of Create

//UPDATE <=======================================================================================================================
update (time, delta){
      width = window.innerWidth;
      height = window.innerHeigth;
      controls.update(delta);
    var worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);

      // Rounds down to nearest tile
      var pointerTileX = map.worldToTileX(worldPoint.x);
      var pointerTileY = map.worldToTileY(worldPoint.y);

      // Snap to tile coordinates, but in world space
      marker.x = map.tileToWorldX(pointerTileX);
      marker.y = map.tileToWorldY(pointerTileY);

      if (this.input.manager.activePointer.isDown)
      {
          // Fill the tiles within an area with grass (tile id = 1)
          map.fill(selectedTile, marker.x/32, marker.y/32, 6, 6);
      }
     /* if (this.input.manager.KeyCodes)
      if (BKey.isDown){
        this.cameras.main.width += 200
        this.cameras.main.x -=100
        console.log('resizing')
      }*/
   }


}

 

[samme]

I used this on tilemap tests/visual culling check (changed all layers to dynamic) and it seemed to work:

this.cameras.main
    .setPosition(-500, -400)
    .setSize(2000, 1600)
    .setZoom(0.5);

 

[Babsobar]

I've been trying to figure this out for a while now and I feel like there's a problem with tilemap Layers and zooming.

Could you try adding

 zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
 zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),

to your control config and check if that displays culled tiles? I've been pulling my hair out over this.

 

Tilemap layers have a .setDisplayheight and .setDisplayWidth but I get a phaser error telling me no frame is specifed when I try to run them.
I feel like I shouldnt have to resize the height and width of the camera every time I zoom because that would seem very clunky...
I'm looking for the same behavior as in this example but with dynamic tilemaps, right now I'm always getting the tiles culled by some sort of camera frame.

Thanks

[tongue_in_aspic]

Hi,

I'm working on a simple platformer and have the same problem, when zooming out the camera (on hero movement in my case) the tiles on the edges of screen start to disappear, the problem is only with the tiles, the opponents are drawing ok, even if the camera is zoomed out.

[Babsobar]

I'm still looking for an answer to this problem as well...

 

[Babsobar]

Just wanted to update that this problem was fixed by a recent update of Phaser.