White border on UI images.

Unity Engine
, , ,
1

Hi there, I’ve been having this issue that I cannot find any help, every time I find any topic talking about this, the issue never gets solved. My UI images are getting white weird borders with the shader I made on shader graph, believe me, nothing really complicated, just a scrolling image, I’m not even modifying colors or anything.

Probably has something to do with the alpha of the texture, as whenever my texture goes fading, in-game the faded part gets white.

How I see on the editor:

How it looks in-game:

The shader:

837×558 31.7 KB

I’ve tried creating the same shader but on a Sprite Unlit, but the image doesn’t even appear in that case, does anyone have any ideas? I’ve seen on other topics this issue can be solved by changing the texture’s wrap mode, but nope that doesn’t work, and doesn’t attends my necessities too lol.

2

Can you show your texture’s color and alpha channel? I would imagine you might have grey cross pattern against a lighter background color, and that bleeds over when a lower mip map level is of the texture is used. If that is the case, try using a flat color in your color channel, as alpha is the thing that cuts your shape anyway.

1 Like
3

Hm to be honest I’m using the texture with alpha background as a png, white crosses and transparent background, and I’m also not generating mip maps, so that probably isn’t the problem. :frowning:

Majority of the textures I make (with transparent backgrounds) I don’t use gray scale transparency because I always thought using direct alpha on png’s would look better.

4

Tried making a version of the image to use it as grayscale, but I’m having the same white border results, although, the sprite lost some details compared to the one with transparent backgrounds. Probably something wrong with the shader?

I’ve found this script online which does the same (texture scrolling) and on this one the texture looks right, although it works, I still wanna know what’s making the sprite get white borders.

(I know shaders aren’t c# but there isn’t any option to paste shaders I think, my bad)

Shader "UI Scroll" {
    Properties{
        [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
        _Color("Tint", Color) = (1,1,1,1)
        _ScrollSpeed("Scroll Speed", Vector) = (0,0,0,0)
        [MaterialToggle] PixelSnap("Pixel snap", Float) = 0
        [HideInInspector] _RendererColor("RendererColor", Color) = (1,1,1,1)
        [HideInInspector] _Flip("Flip", Vector) = (1,1,1,1)
        [PerRendererData] _AlphaTex("External Alpha", 2D) = "white" {}
        [PerRendererData] _EnableExternalAlpha("Enable External Alpha", Float) = 0
    }

        SubShader{
            Tags {
                "Queue" = "Transparent"
                "IgnoreProjector" = "True"
                "RenderType" = "Transparent"
                "PreviewType" = "Plane"
                "CanUseSpriteAtlas" = "True"
            }

            Cull Off
            Lighting Off
            ZWrite Off
            Blend One OneMinusSrcAlpha

            Pass {
                CGPROGRAM
                #pragma vertex SpriteVertScrolling
                #pragma fragment SpriteFrag
                #pragma target 2.0
                #pragma multi_compile_instancing
                #pragma multi_compile_local _ PIXELSNAP_ON
                #pragma multi_compile _ ETC1_EXTERNAL_ALPHA
                #include "UnitySprites.cginc"

                float2 _ScrollSpeed;

        // A copy of SpriteVert() from builtin_shaders-2019.1.7f1/CGIncludes/UnitySprites.cginc
        v2f SpriteVertScrolling(appdata_t IN) {
            v2f OUT;

            UNITY_SETUP_INSTANCE_ID(IN);
            UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);

            OUT.vertex = UnityFlipSprite(IN.vertex, _Flip);
            OUT.vertex = UnityObjectToClipPos(OUT.vertex);
            OUT.texcoord = IN.texcoord;
            OUT.texcoord.x += _Time * _ScrollSpeed.x;
            OUT.texcoord.y += _Time * _ScrollSpeed.y;
            OUT.color = IN.color * _Color * _RendererColor;

            #ifdef PIXELSNAP_ON
            OUT.vertex = UnityPixelSnap(OUT.vertex);
            #endif

            return OUT;
        }

        ENDCG
    }
        }
}

Using the shader above, the sprite looks identical as the sprite image itself is.