Tilemap Vertical Alpha Banding / Artifacting

[the-simian]

I'm not 100% sure what the best way to describe this issue in words is, so I will use images.

You can see here that sometimes, the Tilemap produces a vertical banding effect. Here is a gif:

A few things: I am using Tiled, as the editor for the Tilemap and loading it that way.

Here is the part to the code:

this.map = this.make.tilemap({ key: 'map' });
    const tiles = this.map.addTilesetImage(
      'rock-tilemap',
      'tilemap-rock-grass'
    );
  this.mapLayerGrass = this.map.createStaticLayer('grass', tiles, 0, 0);
  this.mapLayerGround = this.map.createStaticLayer('ground', tiles, 0, 0);

Here is the full code : https://github.com/simiancraft/create-phaser-app/blob/master/src/scenes/game.js

here is the tilemap:

I used a 1px padding around the tiles

Here is the relevant level code: https://github.com/simiancraft/create-phaser-app/blob/master/src/assets/levels/test-level.json

You can see the effect in the gh-pages, this code is running.

If this is expected, or is a side effect of a certain way I am loading this, I apologize in advance. I can't quite determine if this is my usage or if its in the engine itself.

[flowan]

I had the exact same issue and fixed it by setting the second parameter of the camerca startFollow function to true this.cameras.main.startFollow(this.player, true);

I hope this helpes.

[the-simian]

@flowan ,let me try that! Thank you so much for responding!

[photonstorm]

The tiles need to be extruded if you want to use WebGL. This will help: http://phaser.io/news/2018/05/webgl-tile-extruder

[the-simian]

@photonstorm ,thank you very much! I didn't know about this until now