Why can I see slivers of the background behind the tilemap, at certain screen sizes?

Hi everyone.

I’m working on a 2D game that uses a tilemap. When I resize my game view, on certain screen sizes I can see a sliver of a yellow line:

The number and position of these lines change as the screen size changes.

I’ve figured out that the yellow color is the background color for my MainCamera.Environment. Why is this visible? I don’t see the yellow lines in Scene View. I would expect my tiles to just cover the entire space.

More info:

  • I am using sprites which are all 16 PPU
  • My Game View is locked at a 16:9 aspect ratio
  • Attached images also show my component settings.

Thanks in advance for the help!

Is it there when you make a build?

When rendering a tiled sprite (not just Unity tile map but also some of the SpriteRenderer draw modes and other unity drawing methods), there is a chance that gpu will grab pixels slightly outside your sprite borders. If the the sprite is surrounded by transparency it can result in gaps like in your screenshot.

In case of tilemaps specifically some developers mitigate this by tweaking cell size/cell gap so that there is slight overlap. I personally don’t like this solution.

A couple of other methods that can mitigate this:

  • if you have each tile in separate image you can set the texture wrap mode so that pixels “outside” the sprite still have the correct color due appropriate wrapping behavior. Setting wrapping mode will not help if you have single image containing multiple tiles.
  • In the tilesheet add padding (outside sprite area) in the same color as edges of tile. Doing this in original image is a bit annoying now as it makes slicing slightly more complicated (although unity sprite editor supports adding padding when slicing by cell size) and also not all drawing software supports grid with gaps. Slightly more convenient way which requires less changes to workflow is to use unity Sprite Atlas functionality to add additional padding. When adding a padding Unity Sprite atlas will copy the pixels on the edge which is exactly what you want for this. One downside to this approach is that wastes little bit of space and and your tiles won’t pack as nicely into textures.
  • Alternatively when drawing your tiles group them by color, grass next to grass, water next to water and so on. That way all the pixels on the edges of tiles will still be the same color even if they are from different sprite. No additional padding needed. Works best if you are using tileset which has multiple corner tiles for each ground type. Doesn’t work that well if you have very simple tileset where each ground type has single tile and no corner tiles.

As for why pixels outside the intended sprite bounds get used there are various factors which can influence it: floating point calculation, texture sampling mode, mipmaps, texture compression, screen and camera sizes and configuration. Sometimes it’s possible to avoid the problem by messing with those settings, and in some specific cases that may be slightly better solution, but also sometimes you don’t want to change them because that would result in worse looking pixelart.

create sprite atlas with padding = 2