# Tilemap/Camera RoundPixel issue

**URL:** <https://phaser.discourse.group/t/tilemap-camera-roundpixel-issue/4047>\
**Category:** Phaser 3\
**Created:** [October 24, 2019, 3:19pm UTC](https://phaser.discourse.group/t/tilemap-camera-roundpixel-issue/4047 "2019-10-24T15:19:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![James](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@James](https://phaser.discourse.group/u/James)\
**Post date:** [October 24, 2019, 3:19pm UTC](https://phaser.discourse.group/t/tilemap-camera-roundpixel-issue/4047/1 "2019-10-24T15:19:00Z")

</div>

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

 ![map](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/327169eed8c2e4cd0b14268ba468b3387fd7cc70.png)

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

---

<div class="post-metadata">

**Author:** ![James](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@James](https://phaser.discourse.group/u/James)\
**Post date:** [October 24, 2019, 4:49pm UTC](https://phaser.discourse.group/t/tilemap-camera-roundpixel-issue/4047/2 "2019-10-24T16:49:53Z")

</div>

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

> **[sporadic-labs/tile-extruder](https://github.com/sporadic-labs/tile-extruder)**
>
> A tiny Node CLI/library to extrude tilesets to avoid bleeding issues - sporadic-labs/tile-extruder

Very easy to use.

---

<div class="post-metadata">

**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\
**Post date:** [October 24, 2019, 5:02pm UTC](https://phaser.discourse.group/t/tilemap-camera-roundpixel-issue/4047/3 "2019-10-24T17:02:21Z")

</div>

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! 🙂

---

<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:** [October 24, 2019, 5:33pm UTC](https://phaser.discourse.group/t/tilemap-camera-roundpixel-issue/4047/4 "2019-10-24T17:33:03Z")

</div>

> [@James](#):
>
> I tried to run using Phaser.CANVAS in config, also did not work.

CANVAS + `pixelArt` (`roundPixels` alone is not enough) should work. At least it does in [Phaser 3](http://labs.phaser.io/view.html?src=src/game%20objects/tilemap/tests/visual%20tile%20bleed%20test.js&v=3.20.1)