[solved] Tilemap only renders when player x coordinate is less than some arbitrary number, and this changes based on screen width

[komali_2]

Really weird issue here, I’ve got a tilemap export with a single background image. I believe I’m importing it properly, but not only is it not zero’d correctly (it appears way below where I’d expect), it also only displays if the player (and thus camera) is at less than a certain x or y coordinate. Further weirdness: “valid” x and y coordinates changes depending on the width of the browser window. This all in chrome.

An example:

Valid:
Screen width = 1920
world x = 954
world y = 325

Invalid:
Screen width = 1920
world x = 1000
world y = 325

Invalid:
Screen width = 1920
world x = 954
world y = 516

At screen width 1000, valid x seems to be <540, and valid y is <525.

Here’s what it looks like:

I’m scratching my head here, not sure what would cause it to render or not. Not getting any console errors, neither from the web console nor webpack.

Here’s how I’m loading it all in:

export default class NeighborhoodOpening extends Phaser.Scene {
   ...
  preload() {
    this.load.image(
      "neighborhood_map",
      "assets/neighborhood_map_curved_bg.png"
    );
    this.load.tilemapTiledJSON('map', 'assets/tiled/testmap2.json');
    ...
  }
  create() {
    //  Set the camera and physics bounds to be the size of the neighborhood map
    // Switching this on and off has an effect, but I haven't nailed down exactly how yet
    // In any case, I get the issue either way, just in different places
    // this.cameras.main.setBounds(0, 0, 1552, 919);
    this.physics.world.setBounds(0, 0, 1552, 919);

    const map = this.make.tilemap({ 'key': 'map'});
    const background = map.addTilesetImage('neighborhood_map_curved_bg', 'neighborhood_map');
    // Another issue: I can't 0,0 my background, unsure why yet
    const layer = map.createLayer(0, background, 0, -919);

    this.cameras.main.startFollow(this.player.playerObj, true, 0.05, 0.05);
    this.cameras.main.setZoom(1);
   ...
  }
  ...
}

And here’s my json export:

{ "compressionlevel":-1,
 "height":184,
 "infinite":false,
 "layers":[
        {
         "compression":"",
         "data":"A{snip}",
         "encoding":"base64",
         "height":184,
         "id":2,
         "name":"background",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":273,
         "x":0,
         "y":0
        }, 
        {
         "compression":"",
         "data":"A{snip}",
         "encoding":"base64",
         "height":184,
         "id":3,
         "name":"grandmas house",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":273,
         "x":0,
         "y":0
        }],
 "nextlayerid":4,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.7.2",
 "tileheight":5,
 "tilesets":[
        {
         "columns":1,
         "firstgid":1,
         "image":"..\/neighborhood_map_curved_bg.png",
         "imageheight":919,
         "imagewidth":1365,
         "margin":0,
         "name":"neighborhood_map_curved_bg",
         "spacing":0,
         "tilecount":1,
         "tileheight":919,
         "tilewidth":1365
        }],
 "tilewidth":5,
 "type":"map",
 "version":"1.6",
 "width":273
}

Any ideas where I’m going wrong?

[komali_2]

Right so the issue was that I was trying to stamp an entire background image, and the way I was trying to do that was creating a tile layer that was the same width/height as the image, and then setting the tile width/height to be the same (so like 1920x1080 basically). This caused tons of display bugs I guess!

When I set the pixel width/height to be 5x5 it worked just fine, however, stamping an entire “tileset” (really just a single image) is a bit tedious, I have to use “selection fill” and carefully click the bottom-right square on my map, then drag up and to the right, then carefully let go on the top-right square. Hoping to find an easier way. Someone in the discord said to look into object layers so I’ll do that next.