Search Unity

  1. Unity Asset Manager is now available in public beta. Try it out now and join the conversation here in the forums.
    Dismiss Notice
  2. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  3. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Tilemap has tearing between tiles, even with pixel snap

Discussion in '2D Experimental Preview' started by wprevett, Oct 7, 2017.

Thread Status:
Not open for further replies.
  1. wprevett

    wprevett

    Joined:
    Aug 12, 2017
    Posts:
    9
    Hey, I have a problem where my tiles have lines between them when moving around. I have tried pixel snap materials which just changes where and how frequently these occur.

    Anyone have a solution to this issue?
     
  2. danbrani

    danbrani

    Joined:
    Nov 22, 2012
    Posts:
    46
    You can round the camera's position to values that are not problematic, so relative offset of each pixel to camera is always the same. This will depend on your pixels per meter, so depending on that you need to find the rounding point at which the inaccuracies don't appear.

    This is what I'm doing.
     
    wprevett likes this.
  3. wprevett

    wprevett

    Joined:
    Aug 12, 2017
    Posts:
    9
    Makes sense. I'll give that a go then! thanks.
     
  4. Johaness_Reuben

    Johaness_Reuben

    Joined:
    Jan 27, 2016
    Posts:
    253
  5. wprevett

    wprevett

    Joined:
    Aug 12, 2017
    Posts:
    9
    So I've tried all of these suggestions, but I still have this problem.

    Even if my camera is at an integer value (no decimal place), My PPU is 16, and my ortho size is 8, so that should be a clean multiple at 1080p. In fact, no matter what I change the ortho size to the tearing stays. I'm at a loss!

    *Edit* I hadn't done the sprite atlas thing actually, I am not familiar with that. I tried just making a sprite atlas and putting the spritesheet in there and it actually seems to have improved the situation somehow? I'm not certain but it seems that way. Why does putting this in an atlas help?
     
    Last edited: Oct 10, 2017
  6. snugsound

    snugsound

    Joined:
    Mar 9, 2014
    Posts:
    17
    This is what fixed it for me as well. It's due to the fact that packing adds "padding" around each tile.

    Spritesheets are traditionally densely packed (i.e. no padding between sprites), but this doesn't translate well to a 3D engine since it works by sampling textures coordinates (0-1), not pixels. The tearing comes from oversampling a tile by a tiny bit (i.e. 0.0001), and into an adjacent tile's content. Padding repeats the border pixels of a tile to ensure the effects of oversampling can't be seen, even though it's still happening.

    It's the same reason we add padding around UV islands in textures.
     
  7. auroraDev

    auroraDev

    Joined:
    Nov 22, 2017
    Posts:
    12
    Dear Johaness, what should be done to solve the problem if I want non pixel-perfect, for example need to zoom in and out!
     
    BangJeongHyeok likes this.
  8. Johaness_Reuben

    Johaness_Reuben

    Joined:
    Jan 27, 2016
    Posts:
    253
    @auroraDev Even with non pixel-perfect you should pack the sprite tiles into an atlas. Reason is as snugsound mentioned above.
     
  9. UnuAlex

    UnuAlex

    Joined:
    Jan 30, 2018
    Posts:
    1
    I fixed this problem by unchecking the 'Allow MSAA' box in the camera component.
     
  10. Donnerberg

    Donnerberg

    Joined:
    Aug 1, 2015
    Posts:
    1
    This is a different problem.

    Anti aliasing gives you static lines that reposition when you move or zoom out. They appear as solid, black verticals and horizontals.

    This camera problem is flickering lines when the camera moves.They appear to all be vertical in my experience.
     
  11. furroy

    furroy

    Joined:
    Feb 24, 2017
    Posts:
    93
    Any luck solving this issue? I'm seeing the same thing. I got this asset from the store https://assetstore.unity.com/packages/2d/environments/2d-hand-painted-town-tileset-67346

    It includes a sample scene that doesn't use the tilemap system, it just has hundreds of sprites manually laid out. I added a test character and follow cam and can move around and it has no issues. I made my own scene with a tilemap and a test map and I get vertical black lines quite frequently. I even copied my tilemap into their test scene so I know it's using same camera etc all the same. Looking at the frame debugger, their multiple sprites cause hundreds of drawcalls but no tearing. The tilemap only has a couple dozen but tears all over the place, it doesn't make any sense to me.
     
    awsapps and Mikaru like this.
  12. DanielThomas

    DanielThomas

    Joined:
    Mar 30, 2013
    Posts:
    110
    @furroy I'm the creator of that asset. What I did was just using this guide: https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/
    So it should just be a matter of setting up the camera, make sure the sprite asset itself has correct import settings. Another thing (although maybe a stupid suggestion), make sure the game window when you run the game has correct dimensions and is 1x scale. I noticed it started tearing if you didn't have full resolution size in the game window.

    The asset was created before the Unity 2D tools, but I don't think that should make a difference.
    I hope it was of some help.
     
    Xepherys, Mikaru and Silverscale1981 like this.
  13. furroy

    furroy

    Joined:
    Feb 24, 2017
    Posts:
    93
    Maybe I wasn't clear in my post. I have two towns in the same scene in the same project side by side. Your original town renders flawless and the equivalent one I made in a tilemap gets vertical tears all over. They are using same anti-aliasing settings (none), same orthographic camera etc, so I don't see it is an issue with those things, I think there is something inherently goobered with the tilemap implementation.

    Your assets are amazing! I'm making a thing to procedurally generate maps from them and having a lot of fun!

    Here is tear even visible in the editor:

     
  14. DanielThomas

    DanielThomas

    Joined:
    Mar 30, 2013
    Posts:
    110
    @furroy Ah ok, strange for sure. My latest tileset "Mines" I did the example level in the Unity tileset tool and it worked perfectly. So maybe there is something is up with the scene itself? Did it work better if you started a new from scratch?
     
  15. furroy

    furroy

    Joined:
    Feb 24, 2017
    Posts:
    93
    i had some more time to poke at this. my camera is locked to follow the x&y of my character. the tearing is only ever vertical, never horizontal. the funny thing is, it reproduces only when my character (and hence camera) is at an exact integer X value. So it looks fine at 29.9 and 30.1, but camera at 30 shows tearing. This happens for every integer value of X.
     
  16. Aratow

    Aratow

    Joined:
    Nov 4, 2016
    Posts:
    49
    I just updated to current unity version, but it looks like the problem i had on my project using mesh plane.
    IIRC the fix was to disable anti aliasing Edit -> Project Settings -> Quality

    But now that i'm using the current version it seems like it no longer does this issue with anti aliasing on.

    My question to Unity is;
    Does the Tilemap system uses quads/mesh to render texture?
     
    Last edited: Apr 3, 2018
  17. vovx

    vovx

    Joined:
    Mar 26, 2018
    Posts:
    2
    Is current unity version is 2017.4.0f1 ?
    I'm having this issue with tilemap / tiles too. Disabling anti aliasing helped a lot, but black lines still appear sometimes when moving.
     
  18. Aratow

    Aratow

    Joined:
    Nov 4, 2016
    Posts:
    49
    @vovx
    Make sure that the elements' size in your sprite atlas matches the grid size and/or maybe try Filter Mode: Point (no filter).

    I was using unity 2016. I'm new to unity tilemap but the lack of information on what system it uses to render is bothering me, since I also want to make an in-game editor and want to know at least the basics of what's going on behind the scene.
    So I don't have much experience with it and therefor did not encounter that problem using that system.

    (current version is 2017.3.1f1)
     
  19. furroy

    furroy

    Joined:
    Feb 24, 2017
    Posts:
    93
    I've done all that and like I said, another map made from same sprites manually laid out in the same scene doesn't have. If it was a projects settings or camera setting, both would have the issue. I had to upgrade to the 2018 beta because tilemaps don't even show up on iphone in 2017.x and still same issue
     
  20. furroy

    furroy

    Joined:
    Feb 24, 2017
    Posts:
    93
    Turns out it does happen on horizontal as well, finally saw an instance of it.
     
  21. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    683
    2018-04-16 (2).png is your game window scale 1?
    sometimes when i choose a resolution larger that what fit (default behaviour) it scales it down and see lines
    but change to small res like 800x600 that filts easy with no scale and problem solved?
     
  22. furroy

    furroy

    Joined:
    Feb 24, 2017
    Posts:
    93
    yes scale is 1. thankfully it only does it while developing. once deployed on my iphone i never see it.
     
  23. furroy

    furroy

    Joined:
    Feb 24, 2017
    Posts:
    93
    also I messed around with things a bit more. it doesn't seem to happen with tilemaps made using the built in tile palette. it's only doing it on my maps i procedurally generated w/ Tilemap.SetTile()
     
  24. Salazar

    Salazar

    Joined:
    Sep 2, 2013
    Posts:
    235
    Hello,
    Assigning a packing tag to my tile-set and let unity pack my tiles solved my problem.
    Best regards,
     
  25. RunenGamer

    RunenGamer

    Joined:
    Aug 6, 2018
    Posts:
    1
    Hello,

    I experienced the same/a similar problem.

    Setting:
    Camera.projection == orthograhic
    Camera.Size = 8


    Observations:
    - SpriteAtlases did not help me.
    - Disable Camera's "Allow MSAA' reduces the problem, but it is still very visible
    - Every time the problem occurs, the camera's position is (camera.position.x % 0.1f) == 0
    - The problem does not occur on every one of these position (problem occurs on x = 5.5 and 5.3 but not on 5.4)

    Solutions:
    1. Force an offset on problematic positions: Add 0.01f to position.x, when the upper mentioned condition is met. (Only add when condition is true, otherwise x = 5.49 --> 5.5 --> Bug)
    2. Change Size of Camera: When I change Camera.Size from 8 to 8.01, I dont experience any problems. If I set size to 7.01 I experience problems, but not on 7.

    However, when I enable camera's "Allow MSAA' the game is screwed totally.
     
    dadecampo and Xape like this.
  26. laurentOngaro

    laurentOngaro

    Joined:
    Dec 1, 2012
    Posts:
    10
    It seems I had same issue. I've solved it by disabling "allow HDR" on the camera
    I'm on Unity 2017.4.17f1
     
  27. MogulTech

    MogulTech

    Joined:
    Nov 28, 2018
    Posts:
    3
    Creating an atlas with padding of 8 seems to solve the issue for me. However, there's a related issue where the background sometimes gets shown between tiles.
    One thing that seems to solve that for me is setting a tile gap of -0.001 (1/10th of a pixel). This does make the grid size slightly smaller, so you might want to compensate this by scaling the transform (the amount depends on your grid size... should be gridSize / (gridSize -0.001)).

    EDIT : the colliders don't seem to be put in the correct spots when scaling the grid's transform, so this solution might not be ideal.
     
    Last edited: Dec 28, 2018
  28. Calvacante

    Calvacante

    Joined:
    Jul 23, 2015
    Posts:
    3
    So if anyone is reading this and wondering how to create the texture atlas, it pretty simple. If you have all of the sprites you want already setup that's fine too. Simply create a Sprite Atlas from the create menu. Add all the sprites to the atlas. Build the game. It will create the atlas, and use it automatically. This fixed ALL tearing for me, and i only had to use 4px padding. You will see how it works if you notice that the padding is a stretching of the edge color. This will give the UV projection some wiggle room.
     
  29. JimLikesCookies

    JimLikesCookies

    Joined:
    Jan 15, 2018
    Posts:
    1
    If anyone is still wondering, I had a similar issue and making sure that on the texture itself that:

    Extrude Edges is 0

    fixed it for me.

    Good luck!
     
    Xepherys and Deleted User like this.
  30. Sinouhe

    Sinouhe

    Joined:
    Aug 14, 2019
    Posts:
    1
    I was faced the same issue, I found a solution but quite boring...
    I import my tile one by one why sprite mode single. Then they have to be already sliced.

    I dont know why but when I do it in sprite mode multiple and I slice correctly my sprite, it adds this 1 pixel line on the right or left totaly random, because in the game some of the tile fit perfect, other leave a 1 pixel line empty.

    At least when you import all of them one by one in your tile palette it works for me, very boring but when your tile palette is made it goes faster and works.
    I think for me it cames from the slice of sprite editor but dont found why.

    I search for 3 hours without other solution.

    hope will help
     
    threespot and danmichson like this.
  31. tbngrd

    tbngrd

    Joined:
    Jul 25, 2018
    Posts:
    12
    After fighting with this issue for way too long, I just found a surprising solution that, as far as I can tell so far, completely eliminated the problem. I say it's surprising because it's partly kind of the opposite of what is suggested in this thread. So just posting this as a heads up

    I'm using somewhat high-res Tiles, not pixel art, that are packed in a SpriteAtlas. MipMaps are enabled because I have dynamic zooming and whatnot, filter mode is biliniar because I need them to have a smoother look than with point filtering when zoomed out etc. I got these black lines, mostly vertically every time when my camera movement was smoothing/damping out (using CineMachine).

    What almost completely eliminated the problem for me was turning on Anti-Aliasing in the project settings and the camera component. The issue is considerably less noticeable when using 2x and 4x Multi-Sampling, and pretty much gone at 8x Multi-Sampling (this can be set in under Quality in the project settings).

    I imagine this is not a solution at all for anything pixel art, but for me higher res stuff, it seems to be the best solution I've found thus far.
     
  32. ChonkyPixel

    ChonkyPixel

    Joined:
    Jan 18, 2019
    Posts:
    3
  33. GuillermoAlfonso

    GuillermoAlfonso

    Joined:
    Nov 20, 2019
    Posts:
    1
    My problem was fixed by changing the cell size in the Grid. (Also you can change the Cell Gap), not the best solution, but it is actually working.
     
    PixellPat likes this.
  34. ChonkyPixel

    ChonkyPixel

    Joined:
    Jan 18, 2019
    Posts:
    3
    I looked into this issue a lot, and I heard of people having alignment issues after using that technique.

    The free plugin in the post above makes the solution quick and easy, and fixes the problem at source rather than hacking a fix in later.
     
  35. DanielThomas

    DanielThomas

    Joined:
    Mar 30, 2013
    Posts:
    110
    As mentioned by the Johaness_Reuben , packing the tiles to a sprite atlas (in unity already) with padding fixes the root of the problem. You can pack sliced up tiles from a tileset-image. It might seem hacky as you already have a tileset image, but you need to slice it up and re-atlas it with edge padding.

    I hope this helps any future readers.
     
    Last edited: Feb 14, 2020
    ilyaryzhenkov likes this.
  36. yehielc

    yehielc

    Joined:
    Oct 1, 2018
    Posts:
    3
    Changing the Tiles Pixel Per Unit from 32 to 31.99 fixed the problem for me without other issues so far...
     
    allesman, mmntlh, buf_ and 4 others like this.
  37. rc82

    rc82

    Joined:
    Jan 28, 2020
    Posts:
    44
    Is anyone else having issues? Workaround is setting the Cell Gap to -0.01 on the Grid itself. Depending on your tiles, you may get unwanted clipping, but worked for mine.
     
    BarriaKarl, breban1 and atypicalverse like this.
  38. darkusone

    darkusone

    Joined:
    Mar 12, 2017
    Posts:
    1
    u're the best :p
     
  39. slkjdfv

    slkjdfv

    Joined:
    Oct 23, 2010
    Posts:
    435
  40. cuchiX

    cuchiX

    Joined:
    May 9, 2015
    Posts:
    1
    If the textures give you a "Weird line" at the border Go to that texture and go to Advanced:
    in Filter mode choose "Point (no filter)"
     
    Chizambers likes this.
  41. pepsipwns92

    pepsipwns92

    Joined:
    Jul 29, 2020
    Posts:
    9
    This solved it for me! Thanks!
     
    Chizambers likes this.
  42. MrDoesitAll

    MrDoesitAll

    Joined:
    Oct 10, 2020
    Posts:
    1
    This solved the problem for me!
     
  43. mohr023

    mohr023

    Joined:
    Jun 27, 2020
    Posts:
    3
    Just so it might help someone else... I've got a huge tileset, with about 1000 tiles, and importing it (with every single tip and change from this thread) didn't help it, my tiles got a "semi-transparent" edge that would make it look horrible, not to mention it lost every detail the images had due to the blurring unity shoved into them.

    In the end what saved me and got everything working was splitting this huge tileset in smaller spritesheets using aseprite and creating multiple tilesets inside Unity. MSAA and Anti-aliasing are still off for me though.
     
  44. triangle4studios

    triangle4studios

    Joined:
    Jun 28, 2020
    Posts:
    33
    If this is still an issue for someone, and you havent found a solution:
    Go to your camera.
    Turn of MSAA.

    You probably noticed the viewport camera operates just fine without seams. This is because it has no msaa turned on.
     
  45. arthaqss

    arthaqss

    Joined:
    Mar 10, 2021
    Posts:
    3
    After hours of trying everything recommended by others (thanks for all the hints ya'll) this worked right away.
    Benefit of this solution is I don't need to add additional pixel to my 16x16 sprites. Amazing! Thanks million times.
     
  46. KempisGV

    KempisGV

    Joined:
    Mar 10, 2021
    Posts:
    1
    If anyone else is having this problem here is the solution I find!
    I hope it is helpful in case someone has the same problem, also if you have problems with the quality of your sprites you have to set Sprite Atlas Compression to None and the Filter Mode to Point.
     
    G2112, BarriaKarl, Olipool and 3 others like this.
  47. PixellPat

    PixellPat

    Joined:
    Jun 13, 2021
    Posts:
    9
    Hey Guillermo! Excellent fix! It worked for me! I set the 'Cell Gap' of the 'Grid' to '-0.0001' on the X and Y ! I can finally breath now THANKS !!!
     
    matheus33 likes this.
  48. PixellPat

    PixellPat

    Joined:
    Jun 13, 2021
    Posts:
    9
    Good Answer but that doesn't work for me, only thing that worked was adding a very small negative Grid Gap.
     
  49. GoldenOgre

    GoldenOgre

    Joined:
    Dec 22, 2018
    Posts:
    3
    I came here hoping there'd be a better way after using unity on and off for the last 5 years. The problem is pretty simple. when you have a tile sheet that get's split up for a tile map, it's actually looking at the outer edge of the tile(just outside). so a 16x16 tile on a sheet that is by itself or next to another sprite that has a different color, the content from the next sprite is captured along with it. When you see the lines, take a look at what's next to the sprite in the tile set. Unless it's the same color, it's going bleed in, even if it's a blank space.

    The only way I've ever fixed any of the sets was with a painstaking process of extending each tile with one more pixel of the same exact color all the way around. so a 16 by 16 spliced will have a 17th layer that is the same exact color. The sprites that don't need it are usually the tiles like grass if they are directly next to the edge pieces of grass etc. So a 9 by 9 set of green grass will have a middle piece sharing the same color with the surrounding tiles so the grass will be fine.

    It seems like Unity developers are aware of this issue but won't actually do anything about it. Probably tied into the engine too hard that it can't be fixed properly. All the settings like point filter, or creating an atlus (which is recommended regardless) won't fix this pretty "famous" issue. The thing is, the lines only appear with perfect conditions, but if you're tiles are not pixel extended, this will always happen. It's just something that's not obvious without doing a lot of testing. Once it shows up, it just makes your game look bad.
     
  50. atypicalverse

    atypicalverse

    Joined:
    Nov 9, 2021
    Posts:
    11
    I know it's old, but did the trick for me, thanks!
     
    rc82 likes this.
Thread Status:
Not open for further replies.