Search Unity

Help Wanted Hairline artifacts between Sprites, when using MipMaps - how to fix?

Discussion in '2D' started by Vivien_Lynn, Mar 25, 2021.

  1. Vivien_Lynn

    Vivien_Lynn

    Joined:
    May 17, 2019
    Posts:
    18
    Info
    Unity 2020.3 LTS
    Coding for Android and Windows

    What we do

    Because of the high resolution of our player character (about 2048x~3200), we split up the character-sprite in multiple pieces and put them in a Sprite atlas.
    To avoid aliasing when zooming in/out, we generate MipMaps.

    The Problem
    Since MipMaps blur the sprites, the "cut-edge", the point where two sprites meet, becomes blurry as well. This creates a seam between two sprites, which let the background bleed through, when a lower MipMap-level is displayed.
    In the following picture you can see the seam on the chest/arms and on the feet, when we are zoomed out.
    upload_2021-3-25_14-17-7.png

    What we tried and know
    1) Using a Sprite atlas and turning off MipMaps would solve the artifact issue, but would introduce aliasing when zooming.

    2) If we turn off the Sprite atlas, and use MipMaps on the original sprites, the seam does not always appear.
    That is, because most of our "cut-edge" is at the edge of the png-file. In this particular scenario, the edge does not get blurry, because the algorithm has nothing to interpolate with.
    The following example shows the difference between cut-edge on the edge of the png-file (left) vs cut-edge with alpha value next to it (right) (10 pixel extra on top).
    upload_2021-3-25_14-28-36.png

    If we look at a lower MipMap-level, we can see that the cut-edge stays sharp on the left, while it gets blurry on the right. The sharp cut that used to be 10 pixels away from the top edge is now rather about 15 pixels away. That is the reason why the background bleeds through, when building the player character.
    upload_2021-3-25_14-39-15.png

    In theory that means that the problem could be solved if the MipMap would not blur "inwards" but "outwards". So instead of blurring the edge away, it adds blur next to the edges.

    Not using a Sprite atlas is not an option because:
    • We code for mobile, so performance is a big factor.
    • It is not always possible to generate POT (power of two) files, which is necessary to use MipMaps and Compression at the same time.

    Question
    How can we use a Sprite atlas with MipMaps enabled, for our split-up, high resolution player sprite, without having the background bleed though the seams.
    Or what would be a good solution to get the same effect?

    Here are our Sprite atlas settings:
    upload_2021-3-25_15-6-9.png
     
    Last edited: Mar 25, 2021
unityunity