Tilemap/Camera RoundPixel issue

Phaser 3
1

I’ve just switched to Phaser 3 and having an issue with the Tilemap/Camera causing weird lines on the screen

map
map.png1512×768 372 KB

I have roundpixels set to true when initiating the camera:
this.cameras.main.startFollow(this.p.sprite, false, 0.08, 0.08);

also this.cameras.main.roundPixels = true;
did not help either

I tried to run using Phaser.CANVAS in config, also did not work.

Is there any fix for this, or should I just convert my map to an image and load the image for the background to avoid this issue?

Thanks in advance,
James

2

Fixed it using this solution, in case anyone else is having trouble:

Very easy to use.

3

Extrude your tilemap. I had the same problem. if you have nodejs, open the
command prompt

Then do :

npm install -g tile-extruder

Then navigate to the folder with the tileset in it & type the following :

tile-extruder --tileWidth XX --tileHeight YY --margin YY --spacing ZZ --input drive://path/to/my-tileset.png --output 
extruded/path/to/my-tileset-extruded.png

Do not worry if you do not have an extruded folder. If you do not, the command prompt will automatically create one for you.

Of course, change the XX to the width of a single tile in the image & YY to the height of a single tile in the image. If you have NO margin OR spacing, remove the --margin parameter & --spacing parameters ENTIRELY. If your tileset DOES have a margin & / or spacing, specify that margin number in place of YY & that spacing number in place of ZZ.

Last but not least, in your code, say for example your tiles are 64x64, because you extruded your tileset, they now become 66x66 because extrusion adds 1 margin & 2 spacing.

If you extrude correctly, you should see absolutely 0 seams.

Hope this helps! :slight_smile:

4

CANVAS + pixelArt (roundPixels alone is not enough) should work. At least it does in Phaser 3