# Subpixel problem - incorrect rendering

**URL:** <https://phaser.discourse.group/t/subpixel-problem-incorrect-rendering/14680>\
**Category:** Phaser 3\
**Created:** [August 25, 2024, 4:17pm UTC](https://phaser.discourse.group/t/subpixel-problem-incorrect-rendering/14680 "2024-08-25T16:17:55Z")\
**Posts on this page:** 4\
**Page:** 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:** [August 25, 2024, 4:17pm UTC](https://phaser.discourse.group/t/subpixel-problem-incorrect-rendering/14680/1 "2024-08-25T16:17:55Z")

</div>

Hello,  
I have two problems with rendering.

The first of them is a gap between some tiles. Whenever I drag the camera I see black, empty lines between tiles. I believe it has something with the camera. I tried to use Math.RoundTo(I thought it was a subpixel problem) but it didn’t work. What is more, it destroyed the smoothness.

The second one is a problem with the size of GameObjects. If you draw lines and zoom in/out you will see that the size of these elements is cut.

What is the correct way of solving such an issues?

 ![incorrect_rendering_black_line](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/730c6829b326a530ea7241e4b1968761663afad9.png)  
 ![incorrect-rendering-close](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3bb06081c29f9fca84089a1d18901fca62e5e1cf.png)  
 ![incorrect-rendering](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d7e662954b73421d4c74bea77db23165e33ccad2.png)

---

<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:** [August 26, 2024, 3:00pm UTC](https://phaser.discourse.group/t/subpixel-problem-incorrect-rendering/14680/2 "2024-08-26T15:00:02Z")

</div>

You can try `roundPixels: false` in the game config. If that doesn’t work you probably need to extrude the tileset.

> [@Asphiii](#):
>
> If you draw lines and zoom in/out you will see that the size of these elements is cut.

Explain?

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [August 27, 2024, 9:36am UTC](https://phaser.discourse.group/t/subpixel-problem-incorrect-rendering/14680/3 "2024-08-27T09:36:44Z")

</div>

It seems you need this: [Tile Extruder](https://github.com/sporadic-labs/tile-extruder/blob/master/README.md)

---

<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:** [September 7, 2024, 6:03am UTC](https://phaser.discourse.group/t/subpixel-problem-incorrect-rendering/14680/4 "2024-09-07T06:03:56Z")

</div>

Thank you for the help,  
roundPixels and extruder helped me a lot.

After debugging I see that the camera.scrollX/scrollY is also a problem - it generates ± 12 fraction digits and it may cause a subpixel problem. My code is:

```
            this.camera.scrollX -= ((pointer.x - pointer.prevPosition.x) / this.camera.zoom); 
            this.camera.scrollY -= ((pointer.y - pointer.prevPosition.y) / this.camera.zoom);

```

I have to figure out how to move the camera smoothly, but without these bleeding effects, so my problem will be resolved.

To summarize, an extruder, roundPIxels, and correct camera code(unlike this one above) is the way to go. Thank you for the help