How to remove tears appearing between tiles

When using tilemaps in Unity using pixel art assets sometimes we might experience small tears / lines appearing when we are moving:

A vertical line has appeared between 2 tiles that represents our map. The project is URP pipeline Unity 2021.1

A vertical line has appeared between 2 tiles that represents our map. The project is URP pipeline Unity 2021.1

 

Lucky for us there is a solution. Here is a video https://youtu.be/Wf98KrAyB2I by Alex Renard about using a Sprite Atlas to solve this problem. Since I have encountered this issue more times that I can count and searching the web yielded a different solution every time I though I will share what has finally worked.


Using Sprite Atlas

Since pixel art sprites are of low resolution we need to adjust how to scale them up and draw them on the screen. I suspect that if the tilemap sprites are drawn in separate draw calls this is the reason why we see those awful tears between the tiles. The solution is to use Sprite Atlas which “consolidates several Textures into a single combined Texture” which has the benefit of “Unity can call this single Texture to issue a single draw call instead of multiple draw calls”. After doing this the tears stopped appearing (with or without Cinemachine Pixel Perfect extension which I thought was meant to fix this). Here is the result:

It’s hard to show this but beside the white dot (which is my mouse corusor) no tears were appearing.

It’s hard to show this but beside the white dot (which is my mouse cursor) no tears were appearing.

 

In any case here is the setup. First lets create a Sprite Atlas:

Right click -> Create -> 2D -> Sprite Atlas

Right click -> Create -> 2D -> Sprite Atlas

 

No we need to select all the sprites that are used by our tilemap to be packed together by dragging those to the “Objects for Packing” list in our Sprite Atlas (tip drag the sprites on the name of the list not into the list - I wouldn’t say that it is the best UX solution) :

I have dragged 3 sprites that I use in my tilemsp. Now the issue is “Sprite Atlas packing is disabled.” message.

I have dragged 3 sprites that I use in my tilemsp. Now the issue is “Sprite Atlas packing is disabled.” message.

 

Enabling Sprite Atlas packing

To enable the packing functionality we need to o to project settings (just as the message suggests):

Select “Editor” category in the Project settings

Select “Editor” category in the Project settings

Here we want to select “Sprite Atlas V1 - Always Enabled” (Sorry for not selecting the correct on when taking the screenshot).

Here we want to select “Sprite Atlas V1 - Always Enabled” (Sorry for not selecting the correct on when taking the screenshot).

 

Now last step is to pack our sprite atlas. Just keep in mind to adjust the settings:

  • Filter Mode: Point Filter

  • Compression: None to have the

to have the best quality of the pixel graphic. When you are done click “Pack Preview” at the bottom.

solution_7.gif
 
 

When you are doe you should see a preview:

solution_8.jpg
 
 

If all went well the next time you play your game it should be tears / gaps free :)

The result (as shown at the start of this article)

The result (as shown at the start of this article).

 
 
 

Want to learn more about making 2D games in Unity ?

If you want to learn more about Making 2D games in Unity check out my video courses:

 
 

You can also check my other tutorials on my YT channel:

 

If you agree or disagree let me know by joining the Sunny Valley Studio discord channel :)

Thanks for reading!

Peter

Previous
Previous

How to play a different step sound based on the terrain type in a 2D top down game?

Next
Next

How to auto adjust the collider to the sprites size.