Tearing/Bleeding between tiles

Create issue
Issue #27 resolved
Nitneroc created an issue

I recently built my project for the first time, and I was surprised to see some tearing, that did not show up inside Unity Editor when running :

Tearing.png

My fix was a half-pixel correction (you did 0.001f correction, but this wasn't enough in my case) : inside TileLayer.cs Line 615 to 618 now read :

new Vector2((t.Source.xMin + 0.5f) / (float)tileSet.Texture.width, (t.Source.yMin + 0.5f) / (float)tileSet.Texture.height),
new Vector2((t.Source.xMin + 0.5f) / (float)tileSet.Texture.width, (t.Source.yMax - 0.5f) / (float)tileSet.Texture.height),
new Vector2((t.Source.xMax - 0.5f) / (float)tileSet.Texture.width, (t.Source.yMin + 0.5f) / (float)tileSet.Texture.height),
new Vector2((t.Source.xMax - 0.5f) / (float)tileSet.Texture.width, (t.Source.yMax - 0.5f) / (float)tileSet.Texture.height) 

This fixed the issue on my side

Comments (28)

  1. Nitneroc reporter

    This seems to be back again ! The new configurations options don't seem to resolve the issue for me, I always see the problem whatever my settings are. I thought I could correct this by myself, but couldn't find the problem.

    What I saw, though, is that TileLayer.cs line 603 reads :

    float tileHeightInUnits = (t.Source.height + XUniTMXConfiguration.Instance.PixelCorrection) / (float)BaseMap.MapRenderParameter.TileWidth;
    

    shouldn't it be

    float tileHeightInUnits = (t.Source.height + XUniTMXConfiguration.Instance.PixelCorrection) / (float)BaseMap.MapRenderParameter.TileHeight;
    

    EDIT : BTW, I am certain the XUniTMXConfiguration settings are properly loaded and PixelCorrection is the correct value.

  2. Nitneroc reporter

    Excuse me, but what is a unique tile ? It can be seen on every tileset I have, and on every layer. I'll try to reproduce on your clean example scenes

  3. Guilherme Augusto Almeida Filo Maia repo owner

    When importing the map, mark the "Make unique tiles?". This option generates one sprite per tile instead of a mesh.

  4. Nitneroc reporter

    Stupid me... Sorry for forgetting this :)

    Yes it happens on Unique tiles and regular ones... But I can't reproduce with your examples... Something strange must be happening in my project...

  5. Guilherme Augusto Almeida Filo Maia repo owner

    Hm, could you then send me one map and its tilesets so I can test it here?

  6. Nitneroc reporter

    I don't want to waste your time, so I'll do a bit of investigation on my side first if you don't mind... Sorry if this was an invalid bug report

  7. Nitneroc reporter

    It seems to be more obvious on my map than on yours, but I can reproduce this bug even on your example scenes. In my opinion, this bug should never happen with a 0.5 pixel correction, and I can see it in your examples at some scales, it's sometimes even worse with such a high pixel correction.

    tearing.png

    I'll send you my example map if you want. But it can be seen from your examples too.

    EDIT : If you try to reproduce, try switching from game view to maximized or run at different resolutions, this produces different results.

  8. Guilherme Augusto Almeida Filo Maia repo owner

    Seams appear if the orthographic size is not a pixel-correct value, but they (probably) should not appear using unique tiles and certainly must not appear when using a tileset with spacing... I'll make more tests while fixing other bugs...

  9. Nitneroc reporter

    I think I'm using the same camera setup you use in your examples. Anyway, I'm absolutely sure I didn't have those (I used half pixel correction) before updating to latest trunkdev (even when using half pixel correction).

  10. Guilherme Augusto Almeida Filo Maia repo owner

    I've pushed the fix to TileLayer that you mentioned in a comment above, and tested the examples here and couldn't find the seam. I will push these updates to my game project and also check it there.

  11. Nitneroc reporter

    I'll check again if that's not a problem elsewhere in my code, but since I can make them show up in your examples too, I doubt it...

    I looked again at an exe from a few weeks ago, and I had no bleeding using .5f correction. Now this settings give horrible problems, there has to be something wrong...

    I'll probably switch to spacing anyway, but it should'nt stop working from one version to the next

  12. Nitneroc reporter

    Are you sure you didn't re-introduce the bug ? I think you already had corrected the TileWidth problem, and just introduced it again ! :)

  13. Guilherme Augusto Almeida Filo Maia repo owner

    I'm not saying the problem is with your code! I'm trying to find where it is, but I'm not being able to reproduce it with the examples I have...

    And you are totally right, regressions should never occur!

    Could you send me your map through a direct message so I can test it here?

  14. Guilherme Augusto Almeida Filo Maia repo owner

    Okay, I managed to find the issue. It happens when the TileSet's Texture's (TileSet Sprite) Filter Mode is not set to Point. I'm adding this option to the "X-UniTMX Configurations", since some games might use Tiles but be a hand-painted art style where Bilinear filter mode makes sense.

  15. Nitneroc reporter

    Congratulations on tracking down and fixing this one! Sorry if I sounded reproachful in my last message, it's only my not-so-good English. I'm most thankful for the amazing work you're doing.

  16. Guilherme Augusto Almeida Filo Maia repo owner

    No problems, I was almost having nightmares from this issue :P

    I hope this is closed for good now heh

  17. Nitneroc reporter

    I'm really sorry for the nightmares, but I still have the problem... My map is here. I tested it in your OrthoMapStreamedAssetsTest scene, and bleeding happens one way or another (in the editor, in the game window, in maximized game window, or in built standalone) with any Config setting. This map used to run fine for me with .5f correction.

  18. Guilherme Augusto Almeida Filo Maia repo owner

    So, I've downloaded your map, set up a small test using the StreamingAssets folder and... see for yourself (big gif alert):

    Big-Video-GIF

    So, I've managed to load the file, scroll and zoom in/out with no seams, until I use a resolution with odd height, which breaks the orthographic size calculation. If the orthographic size is wrong, seams are expected, since floating point errors will accumulate in the mesh's UV rendering (not the best technical explanation, but I hope you understand :P )

    So, to fix this, you need to check if your orthographic size calculation is ok or you will need to add a Spacing between the tiles in the TileSet...

    Another important bit is to try to move the camera in pixel-size amounts. This might not be necessary but might help (in my game I only make sure the zoom in/out is applied in pixel-perfect values [it does not generates wrong orthographic values], but I allow the camera to move smoothly)

    But I still do not understand how it was working for you but it stopped working after my updates, since all I did was move that fixed value of 0.5f to a variable...

  19. Nitneroc reporter

    OK, so I added spacing to my tilesets... But the problem is still there.

    Sorry for bothering you more, but how should the orthographic size be calculated ?

    I'm using ScreenHeight/tileHeight/2, and I tried rounding it too... tearing happens anyway, even on unique tiles. Actually that's where they are most seen.

  20. Nitneroc reporter

    Changing TileLayer.cs lines 612 and 613 to

    float tileHeightInUnits = (t.Source.height + XUniTMXConfiguration.Instance.PixelCorrection*2) / (float)BaseMap.MapRenderParameter.TileHeight;
    float tileWidthInUnits = (t.Source.width + XUniTMXConfiguration.Instance.PixelCorrection * 2) / ( float )BaseMap.MapRenderParameter.TileWidth;
    

    Corrected the problem for normal layers. However, Unique Tiles still suffer from this, and this looks like a dirty hack... Just in case it could point you in the right direction, those two lines didn't use pixel correction before 15-05-20 (of course I tried removing pixel correction with no success).

    I guess I'll revert to an old version to investigate more.

  21. Nitneroc reporter

    Sorry If I'm spamming.

    Here was the setup that finally gave me satisfaction :

    X-UniTMX code is not modified

    • I'm using spacing in the tilesets, but with space filled with neighbouring colours.
    • 0.01f Pixel correction
    • No pixel snapping on the material (causes both tearing and jittering on Unique Tiles)
    • Camera Orthographic size set to ScreenHeight/TileHeight/2
    • Camera is limited to pixel perfect positions (what I'm calling viewCenter is the transform of the parent of the camera, but you can change that to suit your needs) :
    void OnPreRender () {
            thisTransform.position = new Vector3((Mathf.Round(viewCenter.position.x*PixelsPerUnit)+0.5f)/PixelsPerUnit, (Mathf.Round(viewCenter.position.y*PixelsPerUnit)+0.5f)/PixelsPerUnit, z);
        }
    

    This is the only setup I found that gives no tearing, and a stable display that isn't jerking around. Maybe others will be interested.

  22. Guilherme Augusto Almeida Filo Maia repo owner

    Sorry for not answering before...

    Good to know you managed to solve this problem, but I'm still uncomfortable that you had it in the first place...

    My Camera's Orthographic size calculation can be seen in CameraController.cs:

    ortographicSize = Screen.height / 2.0f / PixelsPerUnit / Scale;
    

    Where 'PixelsPerUnit' is set to the Map's TileWidth.

    I've uploaded default sprite materials with no pixel snapping as well, I noticed that problem. And can I use your 'guide' in a much needed manual/guide?

  23. Nitneroc reporter

    I'm very happy with my current setup, it works really well, even if I don't understand why it's needed.

    Feel free to to use my post above as you wish, that's why I wrote it.

  24. Log in to comment