Search Unity

How to prevent seams between tiles?

Discussion in '2D' started by DeadStack, Dec 3, 2021.

  1. DeadStack

    DeadStack

    Joined:
    Dec 3, 2021
    Posts:
    9
    Hi,

    How can I configure Unity to render a tilemap without seems?

    I have a tilemap and my spritesheet doesn't use any transparent gutter between sprites, nor does it have an extruded color gutter. I'm not doing pixel perfect rendering either, as it introduces strong edge flicker/aliasing when the camera is moving slowly. So anti-aliased is the choice.

    The way I would resolve this outside of Unity would be to...

    a) Use a texture array which doesn't suffer from color bleeding issues, or
    b) render the visible part of the tilemap to an intermediate texture and then render that texture to the screen at the correct position using sampling.

    I've read that Unity doesn't have full support for texture arrays, which I think is a mistake as they are so useful and superior to sprite atlas' IME for fixed size tile rendering. I believe there is an API and I might look into coding up a texture array solution at some point. But as I'm very new to Unity I want to stick to using the editor right now. So thinking about solution 'b', how can I configure Unity to render off screen and then present that?

    There is mention of chunk support in the editor, but chunks may also suffer from some edge rendering issues. But I just don't know enough about Unity to know which is the right way forward. What are my options for solving this?
     
  2. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    38,692
    I guess first thing is to identify where the seam is coming from.

    Is it from filtering bleed from an adjacent tile? Perhaps your UVs need to be cropped inwards a bit.

    Or is it compression artifacts leaking over from an adjacent tile? Try set texture compression to None

    Or is there something wrong with the tile geometry itself versus the spacing of the tiles?

    Another option is to make an editor script to reprocess your source texture into one with gutters between the tiles, pixel-extending outwards, and then recut all the sprites from there. This would be a one-time deal, and then you could continue to edit and improve the original "no gutter" tileset and run it through the reprocessor.
     
    DeadStack likes this.
  3. DeadStack

    DeadStack

    Joined:
    Dec 3, 2021
    Posts:
    9
    So ok, thinking there may be something wrong somewhere, I brought in a plain gray texture as a single sprite rather than as a multi-sprite, and I don't see any seem when painting with that. Let me bring in some new sprites as multi-sprites, see if I reproduce the seams.

    Edit: Yep, making a fresh multi-sprite I still see the seems. Of note though, is that the seems are only along the verticals, there are no horizontal seems - that makes sense because my sprite sheet is 3 x 1, so the bleed is left to right.

    This is where texture arrays stand out as a better solution, because they isolate each texture, you just don't get this issue.

    Checking properties...

    Sprite Inspector for GroundTiles_1
    (64x64)
    Pivot 0,0
    Border 0,0,0,0

    And for the multi-sprite Ground Tiles (Texture2D)
    Pixels Per Unit = 64
    Mesh Type = Full Rect
    Extrude Edges = 1
    Wrap Mode = Clamp
    Filter Mode = Bilinear
    Resize Algo = Mitchel
    Format = Auto
    Compression = None.
     
    Last edited: Dec 3, 2021
  4. DeadStack

    DeadStack

    Joined:
    Dec 3, 2021
    Posts:
    9
    I asked elsewhere about multi-sampling, and although the center point is clamped to sprite region, the subsamples don't clamp and reach outside that region into the neighboring textures. So I'm not quite sure how using anything but texture arrays is meant to work.

    @Kurt-Dekker mentions that the textures can have their outer edge extended by 1 pixel so that the sampling gets a repeat of the edge pixel color. But I would presume Unity would internally deal with this issue. I haven't read anything in the docs yet about having to specially prepare textures.

    Just to experiment, I can set the filter mode to Point, and that greatly reduces the seams, but even then, I see a seam flash every now and then - probably due to floating point issues at the boundary.

    And further, I've noticed that even if I do get rid of the issue with adjacent textures being sampled, AA at the edge of the sprite geometry is really noticeable where there is high contrast, while sampling internal the texture is smoother with less noticeable jitter. That leads me to the conclusion that the best solution to rendering tilemaps is rendering the whole view to an intermediate texture - pixel perfect - and then rendering that texture respective to the camera (non-pixel perfect). That way you lean on the good inner-texture sampling and completely remove both texture edge sampling issues as well as AA issues at the edge of sprite geometry.
     
    Last edited: Dec 4, 2021
  5. DeadStack

    DeadStack

    Joined:
    Dec 3, 2021
    Posts:
    9
    I remember reading a solution once where the geometry for each sprite is oversized, with transparency at the edge. I guess that can remove the need for AA and lean on the inner-texture sampling behavior. But I don't think that fixes the seams issue.
     
  6. rarac

    rarac

    Joined:
    Feb 14, 2021
    Posts:
    570
    you have to add an extruded color gutter to your sprite sheet(padding)

    unity is a 3d engine and the textures will bleed thats just how it is( unity is not made for 2d games)

    the seams will just be coming from your other sprites or the edges of your texture