Weird Tilemap gap bug, what can I do to hide it?

Hi there, I’m having a weird problem with my tileset setup.


It looks fine and is setup quite well, in photoshop, there are no gaps, and I made sure of that.


Here is a video showing the gaps during play (A big one and a few small ones). These gaps appear on some around some tiles not all of them. And here is a screenshot too. But I want you to see the video so you can see how it appears. It is inconsistent. One time it’s there, the other it’s gone.


Video: Gap line bug - YouTube

Screenshot:

178420-screenshot-2021-04-01-025341.png


And it comes as the camera moves. I really need to fix this. I have tried to disable anti-aliasing, but it didn’t work.

I also checked the sprite editor, and there are no gaps in there either. Here are the tile sheet settings:


I did hear that it’s because unity might use a small amount of pixels from the sides, and that the fix might be to paint around those tiles, but that doesn’t work for me. Because my tiles aren’t all blocks. So painting might have the paint appear in a different block. My tiles have empty pixels and are set up to connect together in a different way.


Thank you in advance!

For now, those were all the things I tried and know. And I hope you might have some insight into this :slight_smile:

I have fixed it! Answer down here!


However, the fix is not as simple as it seems. Let me break it down for you:

1 - Since unity for some reason likes to use the surrounding pixels around tiles, when it takes those extra pixels, they come with empty gaps. Usually, for normal pixel art games where tiles are almost always full color blocks, this doesn’t cause much problems. Since the surrounding pixels around those are not “empty” and contain the colors of adjacent tiles, the gap doesn’t appear.


2 - For those kinds of tiles, the anti-aliasing fix might remove the issue or the material (pixel snap) solution or the sprite atlas. But for tiles that are not complete blocks, like mine, not every block will have an adjacent cell that it is attached to.


3 - Bottom line is, you need to give unity the pixels it needs around your blocks! So here is how I did it with mine.

I expanded the size of my sprite sheet to include more blocks, and I like to call these blocks (Gap Fixers), here’s how it looks with all these fixers in place.


The red dots can help me in removing them from the sprite editor as they aren’t for the game. But to fix the problem.



So what is this exactly? I simply created a new tile, one that can blend with any other tile, and simply placed it adjacent to tiles that had a (sharp edge).


178496-screenshot-2021-04-02-011351.png

Those blocks were the ones that could spawn the gaps. As for other tiles that didn’t fill to the very end of their own cell, those can be left alone as they would never be placed between other tiles. (They would be either heads or protruding ledges)


So, again, bottom line, if you want to fix this, find the tiles that you have that would usually connect to other tiles, and either connect them to a filler tile (Gap fixer like the one shown above). Or connect them to the tile they would be connected to in the game, (either a flipped version of themselves or another tile that connects well to it enough to completely cover its sharp edge).


And with that, make sure your tilesheet is multiples of two to allow it to get chunk compressed since I needed that myself with my tilesheet size.


Video showing the game without the gaps anymore and with more complex tiles:


Hope it helps! Thanks <3