Black lines rendering bug making Phaser unusable.

Phaser 3
1

There are flickering black lines in my project that I cannot remove.

Other people have reported the same bug and I’ve applied all the fixes mentioned to no avail:

  • roundPixels = true
  • pixelart = true

This utility has no effect: GitHub - sporadic-labs/tile-extruder: A tiny Node CLI/library to extrude tilesets to avoid bleeding issues

The bug happens to every tileset in the tilemap created in Tiled, exported as Json. Tilesets have 0 margin or spacing.

Unhelpfully on this forum new users cannot upload attachments as an example of the bug. Here’s a gif on Imgur of the bug:

Any help appreciated!

2

Since you are not able to upload an attachment, by chance would you be able to create an example on a site like Codepen, or share the source code via GitHub/Dropbox, etc?

3

tile-extruder should make a new tileset image with spacing 2, margin 1. Then did you follow Using the Extruded Tileset?

4

Yes, I followed those instructions. My original tileset .PNG has 0 margin 0 spacing.

I ran the extruder tool and followed the instructions using this command on the phaser side:

const tileset = map.addTilesetImage("tileset", "tileset-extruded", 48, 48, 1, 2);

No change.

I also followed the first set of instructions: Extrude the tileset and then update your existing tileset in Tiled.

This just makes gaps appear on the map in Tiled when margin is set to 1 and spacing 2 with the new extruded image. Literally nothing about that tool has worked at all.

5

Did you replace the tileset image in Phaser?

6

I’m using the same image in Phaser as tiled after extrusion etc…

Here is a stripped down basic setup of the project on Verce where you can see the glitches in real time (zoom in and out)l: https://phaser-test-hazel.vercel.app/

Here is the code on Git: GitHub - MarcJamesIO/phaser-test

Any further help appreciated!

7

I think the tileset image in Phaser is probably not extruded, because it’s 2048 × 2048 and getting the tile area mismatch warning.

phaser-test
phaser-test1920×1057 482 KB

8

I’ve added the extruded image using the tile extruder tool - no change, black lines still appear.

Mismatch error still occurs too. Even with these parameters:

const tileset = map.addTilesetImage("tileset", "tileset-extruded", 48, 48, 1, 2);

9

Make sure you’re using the arguments tileMargin = 1, tileSpacing = 2 and not the other way around. addTilesetImage("grassland", "grassland", 128, 128, 2, 1) doesn’t give the tile area mismatch warning.

10

I’m using the below settings and still the lines appear.

const grasslandTileset = this.map.addTilesetImage(
        "grassland",
        "grassland",
        128,
        128,
        2,
        1
      );

there is this error though:
phaser.js:226016 Image tile area not tile size multiple in: grassland

11

Thanks for your help, but unfortunately nothing you’ve suggested has made any difference and the lines are still rendering glitches in the project. The full code is above and if that all seems correct to you, what else is there to do other than give up and use a more stable engine?

12

I wrote it wrong, sorry. It should be

const grasslandTileset = this.map.addTilesetImage(
  "grassland",
  "grassland",
  128,
  128,
  1,
  2
);

This works for me:

13

Actually the problem doesn’t happen in Phaser v3.85.0 either, so you could use that instead.

14

Thanks I’ve switched to 3.85.0 and logged an issue on their Github for the version I was using.

15

FYI it does happen in Phaser v3.85.0 during camera panning using the camera.main.startFollow function.

Doesn’t happen in 3.80.1.

16

I can confirm it works on 3.86.0 - I had a similar problem on 3.85.0