# Black lines rendering bug making Phaser unusable.

**URL:** <https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780>\
**Category:** Phaser 3\
**Created:** [September 21, 2024, 6:43am UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780 "2024-09-21T06:43:36Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jammy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jammy/32/8539_2.png) [@Jammy](https://phaser.discourse.group/u/Jammy)\
**Post date:** [September 21, 2024, 6:43am UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/1 "2024-09-21T06:43:36Z")

</div>

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](https://github.com/sporadic-labs/tile-extruder)

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!

---

<div class="post-metadata">

**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\
**Post date:** [September 23, 2024, 11:51am UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/2 "2024-09-23T11:51:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 23, 2024, 2:41pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/3 "2024-09-23T14:41:43Z")

</div>

`tile-extruder` should make a new tileset image with spacing 2, margin 1. Then did you follow [Using the Extruded Tileset](https://github.com/sporadic-labs/tile-extruder?tab=readme-ov-file#using-the-extruded-tileset)?

---

<div class="post-metadata">

**Author:** ![Jammy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jammy/32/8539_2.png) [@Jammy](https://phaser.discourse.group/u/Jammy)\
**Post date:** [September 23, 2024, 7:25pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/4 "2024-09-23T19:25:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 23, 2024, 7:26pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/5 "2024-09-23T19:26:59Z")

</div>

Did you replace the tileset image in Phaser?

---

<div class="post-metadata">

**Author:** ![Jammy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jammy/32/8539_2.png) [@Jammy](https://phaser.discourse.group/u/Jammy)\
**Post date:** [September 23, 2024, 8:01pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/6 "2024-09-23T20:01:07Z")

</div>

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/](https://phaser-test-hazel.vercel.app/)

Here is the code on Git: [GitHub - MarcJamesIO/phaser-test](https://github.com/MarcJamesIO/phaser-test)

Any further help appreciated!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 23, 2024, 8:27pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/7 "2024-09-23T20:27:09Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e4594e65c57b2a1944822d88f9b6a2a1ebcef999.jpeg)

---

<div class="post-metadata">

**Author:** ![Jammy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jammy/32/8539_2.png) [@Jammy](https://phaser.discourse.group/u/Jammy)\
**Post date:** [September 23, 2024, 9:08pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/8 "2024-09-23T21:08:14Z")

</div>

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);`

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 24, 2024, 9:35am UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/9 "2024-09-24T09:35:15Z")

</div>

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~~.

---

<div class="post-metadata">

**Author:** ![Jammy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jammy/32/8539_2.png) [@Jammy](https://phaser.discourse.group/u/Jammy)\
**Post date:** [September 24, 2024, 12:04pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/10 "2024-09-24T12:04:47Z")

</div>

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

```javascript
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

---

<div class="post-metadata">

**Author:** ![Jammy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jammy/32/8539_2.png) [@Jammy](https://phaser.discourse.group/u/Jammy)\
**Post date:** [September 24, 2024, 12:12pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/11 "2024-09-24T12:12:13Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 24, 2024, 2:09pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/12 "2024-09-24T14:09:07Z")

</div>

I wrote it wrong, sorry. It should be

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

```

This works for me:

> **[Comparing MarcJamesIO:main...samme:dev · MarcJamesIO/phaser-test](https://github.com/MarcJamesIO/phaser-test/compare/main...samme:phaser-test:dev)**
>
> Contribute to MarcJamesIO/phaser-test development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 24, 2024, 2:40pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/13 "2024-09-24T14:40:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jammy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jammy/32/8539_2.png) [@Jammy](https://phaser.discourse.group/u/Jammy)\
**Post date:** [September 24, 2024, 2:54pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/14 "2024-09-24T14:54:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jammy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jammy/32/8539_2.png) [@Jammy](https://phaser.discourse.group/u/Jammy)\
**Post date:** [September 24, 2024, 5:44pm UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/15 "2024-09-24T17:44:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Asphiii](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/asphiii/32/7395_2.png) [@Asphiii](https://phaser.discourse.group/u/Asphiii)\
**Post date:** [October 14, 2024, 9:59am UTC](https://phaser.discourse.group/t/black-lines-rendering-bug-making-phaser-unusable/14780/16 "2024-10-14T09:59:32Z")

</div>

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