Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Edges won't be displayed properly in a grid of tiles

Discussion in '2D' started by Quested, Oct 30, 2018.

  1. Quested

    Quested

    Joined:
    May 23, 2013
    Posts:
    13
    Hey,

    for quite some time I'm facing the issue that when I make a grid of tiles then the edges will be black or not shown at all. I have already searched for a solution and tried what I found(Changing the sprite to Point filtering, enabling Pixel Snap, disabling Anti Aliasing - using HDRP so this doesn't apply), but nothing did work. I'm using the HDRP and the Tiles are rendered using a SpriteRenderer Component. The Game is a 3D Game and I use the tiles to show a building grid. This is the Sprite that I'm using:

    BuildingTile.png

    This is what it looks like with Point filtering and the default "Sprites-Default" material(Left Scene View and right Game View):

    SpritesWithSprites-Default.PNG

    This is what it looks like with a custom Material of type Sprites/Default with PixelSnap checked to true:

    SpritesWithPixelSnapOn.PNG

    Also I tried changing the size of a tile from 4x4 to 3,95 to 3,95, but this didn't help either. Also I did read about changing the image dimension to be a power of 2, but this didn't help either. Here are the settings for the Tile:

    BuildingTileSettings.png
    And the settings for the SpriteRenderer for one tile prefab:
    SpriteRendererSettings.PNG
    My Unity version is 2018.2.13f and I create the grid using this C# script that I wrote:

    https://hastebin.com/qisakotete.cpp

    Would be great if someone could help, as I'm facing similar issues for quite some time now in different parts of my project, some where related to Anti-Aliasing, but in this scene I don't have any post effects, only a fresh new scene.

    Best Regards
    Niklas
     
  2. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    391
    Pixel snapping will rarely be enough. If you are using point sampling, then you'll also need the grid to be alligned to camera's pixels, e.g. you need to achieve pixel perfect resolution and scaling for them to be always manually alligned perfectly to the screen's grid. AFAIK there's no other way, besides enabling linear sampling of course. Finally, make sure that your textures/sprites are of a power of two, since non-power of two sprites tend to have bad positioning and snapping on the camera's grid. Sprite Atlases easily solve this issue.
     
    Last edited: Oct 31, 2018
    Quested likes this.
  3. Quested

    Quested

    Joined:
    May 23, 2013
    Posts:
    13
    As I said I have already tried using a texture with a power of two, this didn't help either. I have also tried Point filtering, bilinear and trilinear filtering, nothing helps. When I increase the size of the white border, then It get's a bit better, but the line width is super inconsistent.

    I have also tried to use Sprite Atlas, it does help a bit, but now I have a new problem: some edges are way more thick than others:
    SpriteAtlas.PNG
    My Sprite Atlas settings:
    SpriteAtlasSettings.PNG
    All sprites are being assigned at runtime using .GetSprite("BuildingTile128"). I have also increased the border size as you can see, but even though the border width is even and all tiles use the same sprite, still the line strength is different from row to row. Why does this happen and how can I fix this? I have tried point, bilinear and trilinear filtering, but couldn't see any differences.
     
  4. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    391
    If you don't have pixel-perfect rendering achieved and you also zoom-out like so, then mip-maps can potentially deal with this issue, but at a cost of potentially turning the image into a blurry mush if visible resolution is too low. Afraid there's no other way in your situation besides using mip-maps or not zooming at all + having pixel-perfect
     
    Quested likes this.
  5. Quested

    Quested

    Joined:
    May 23, 2013
    Posts:
    13
    But how do strategy/building games achieve this? I have seen grid building for like 15 years, but it is not possible in Unity? My other idea would be to get the outline with a shader or using OpenGL line draw, but I had like to have the tiles as a GameObject, so I can use MouseOver or Raycasting for convenience. I will try the shader approach when I can't find a way to get it working with the texture.

    Mip-Map's solve the issue, but makes it a bit blurry, as you already have mentioned:

    MipMap.png
     
    Last edited: Oct 31, 2018