Tilemap has tearing between tiles, even with pixel snap

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?

 

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.

 

Makes sense. I'll give that a go then! thanks.

 

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?

 

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.

 

Dear Johaness, what should be done to solve the problem if I want non pixel-perfect, for example need to zoom in and out!

 

I fixed this problem by unchecking the 'Allow MSAA' box in the camera component.

 

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.

 

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.

 

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

 

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:

 

@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?

 

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.

 

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?

 

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.

 

@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)

 

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

 

Turns out it does happen on horizontal as well, finally saw an instance of it.

 

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?

 

yes scale is 1. thankfully it only does it while developing. once deployed on my iphone i never see it.

 

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()

 

Hello,
Assigning a packing tag to my tile-set and let unity pack my tiles solved my problem.
Best regards,

 

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.

 

It seems I had same issue. I've solved it by disabling "allow HDR" on the camera
I'm on Unity 2017.4.17f1

 

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.

 

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.

 

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!

 

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

 

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.

 

Anybody still suffering from this issue can try using this free asset to process tile sheets and fix the gap.

https://assetstore.unity.com/packages/2d/textures-materials/2d-tile-gap-fixing-tool-157060

 

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.

 

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.

 

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.

 

Changing the Tiles Pixel Per Unit from 32 to 31.99 fixed the problem for me without other issues so far...

 

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.

 

u're the best

 

Use this tool I made - https://forum.unity.com/threads/rel...tearing-in-game-tileset-overflow-tool.913817/

It adds overflow to the edges of your tiles in your tile set and eliminates tearing.

 

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)"

 

This solved it for me! Thanks!

 

This solved the problem for me!

 

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.

 

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.

 

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.

 

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.

 

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

 

Good Answer but that doesn't work for me, only thing that worked was adding a very small negative Grid Gap.

 

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.

 

I know it's old, but did the trick for me, thanks!