Question The best way to fix tile tearing

Hello. I am having some issues with Tile tearing when creating Tile pallete from the .aseprite file. It appears to be very common problem mostly in 2D game design. However, after browsing many different forum posts and watching countless Youtube videos, I am still yet to determine the most optimal solution.

When creating my Tiles in Aseprite I am simply following the steps below:


1. In Aseprite I have created 2 tiles (each 16x16) size. I have drawn them on 64x64 size canvas in aseprite just to be able to fit multiple other tiles in the future:


I haved saved this .aseprite file in my Unity project as a Tilemap1.aseprite.

2. I have changed the Import mode to Sprite Sheet, set the PPU to 16 since each tile is 16 and opened a Sprite editor.




3. In the sprite editor, I clicked Splice, then selected Grid by cell size and selected 16x16 size:




As you can see from above, my tiles are shifted to the side and required an offset. Additionally, as you can see there are 4 tiles even though I only have 2 tiles. I do not fully understand why? Anyways, if I select offset X=4 and Y=12 offset, everything seems okay despite the fact that the tiles are duplicated.

4. I have created a new pallete (named test123) using the Cell Size : Automatic option


5. I have dragged all sliced Tiles to the Tile Pallete and everything seems okay. I can place the Tiles on my Grid. When I look at my game using Scenve view, everything looks fine, but when I start playing the game or look at the Game view, some tiles have gaps between them which is quite strange:


See the Game view:


and the Scene view:



See my 2nd post for the continuation (I could not post more pictures here)

 

So far, I have discovered a few methods that might help with this common tile tearing problem but I still dont know about the most optimal solution:


Solution 1
If your tiles are 16x16, you need to set 15.9 ppu

Result 1:
I have tested it and it seems to work (although I do not think this the most optimal solution)


Solution 2
Enabling pixel snap on the tilemap material

Result 2:
Could not try this because this option is locked and I cannot modify it:



Solution 3:
Place your tiles into the Sprite Atlas

Result 3:
I have created a Sprite Atlas and added my Grass Tile into the Objects for Packing list. As soon as pressed Pack Preview, the tile tearing has dissapeared:


Solution 4:
If you are using Grid and tilemap, you can change the cell gap of the grip to a value such as -0.01 to make your tiles overlap


Result 4:
I have tried to set Cell Gap X to -0.01 and that seems to fix the tile tearing:




As you can see from above, there seems to be multiple methods to solve the tile tearing issue. However, I would like to understand what is the most optimal method. I quite like the Sprite Atlas method (Solution 3), but I cannot wrap my head around why would creating a Sprite Atlas can have such an effect on the tile tearing?

I hope someone with more knowledge can clarify this

 

all your methods except the sprite atlas are fake solutions, and will betray you when you move the camera


export as png

maybe even export tiles solo, 16x16 png files

put the png in unity

add sprites to sprite atlas

set padding = 2 on the atlas

standard fix for all tearing issue

Reason why sprite atlas is solution:
unity is 3d engine

In 3d, the textures sometimes are missing pixels to fill space

on your tiles edge, unity has some space that its not managing to fill, because of that it goes to borrow pixels to your sprite sheet

Which pixel will it borrow? the one that is directly adjacent to the edge. However what do you have adjacent to your edge? a gray tile, nothing, a transparent area? this is a problem

Padding: copies the pixels on the edge of your tile and paints it around the tile in the spritesheet ( basically it makes your 16x16 tiles 18x18 on the sprite sheet, but it still only displays the 16x16)

what happens now when space is missing? it tries to look for a pixel to fill the void and now it finds a pixel the same color as the edge = doesnt look like tearing anymore

 

Thanks for a response. I also think that sprite atlas is the most optimal solution out of the other solutions that I have found.

Additionally, can you confirm why do you suggest exporting the tilemap or the individual tiles as the png format?

I have found that using .aseprite directly is quite convenient and it looks like Unity interprets the .aseprite file very simillarly to the .png (there are some small differences). Perhaps you use Aseprite as well and have some experience with .aseprite vs .png ?

 

if its convenient for you then you can keep using it


i say only because aseprite importer is more recent and unity devs are still working a lot on aseprite implementations improvement and i wanted to rule out all outside variables for you