Question White border on UI images.

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:


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.

 

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.

 

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.





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.

 

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)

Code (CSharp):

1. Shader "UI Scroll" {
2.     Properties{
3.         [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
4.         _Color("Tint", Color) = (1,1,1,1)
5.         _ScrollSpeed("Scroll Speed", Vector) = (0,0,0,0)
6.         [MaterialToggle] PixelSnap("Pixel snap", Float) = 0
7.         [HideInInspector] _RendererColor("RendererColor", Color) = (1,1,1,1)
8.         [HideInInspector] _Flip("Flip", Vector) = (1,1,1,1)
9.         [PerRendererData] _AlphaTex("External Alpha", 2D) = "white" {}
10.         [PerRendererData] _EnableExternalAlpha("Enable External Alpha", Float) = 0
11.     }
12.  
13.         SubShader{
14.             Tags {
15.                 "Queue" = "Transparent"
16.                 "IgnoreProjector" = "True"
17.                 "RenderType" = "Transparent"
18.                 "PreviewType" = "Plane"
19.                 "CanUseSpriteAtlas" = "True"
20.             }
21.  
22.             Cull Off
23.             Lighting Off
24.             ZWrite Off
25.             Blend One OneMinusSrcAlpha
26.  
27.             Pass {
28.                 CGPROGRAM
29.                 #pragma vertex SpriteVertScrolling
30.                 #pragma fragment SpriteFrag
31.                 #pragma target 2.0
32.                 #pragma multi_compile_instancing
33.                 #pragma multi_compile_local _ PIXELSNAP_ON
34.                 #pragma multi_compile _ ETC1_EXTERNAL_ALPHA
35.                 #include "UnitySprites.cginc"
36.  
37.                 float2 _ScrollSpeed;
38.  
39.         // A copy of SpriteVert() from builtin_shaders-2019.1.7f1/CGIncludes/UnitySprites.cginc
40.         v2f SpriteVertScrolling(appdata_t IN) {
41.             v2f OUT;
42.  
43.             UNITY_SETUP_INSTANCE_ID(IN);
44.             UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
45.  
46.             OUT.vertex = UnityFlipSprite(IN.vertex, _Flip);
47.             OUT.vertex = UnityObjectToClipPos(OUT.vertex);
48.             OUT.texcoord = IN.texcoord;
49.             OUT.texcoord.x += _Time * _ScrollSpeed.x;
50.             OUT.texcoord.y += _Time * _ScrollSpeed.y;
51.             OUT.color = IN.color * _Color * _RendererColor;
52.  
53.             #ifdef PIXELSNAP_ON
54.             OUT.vertex = UnityPixelSnap(OUT.vertex);
55.             #endif
56.  
57.             return OUT;
58.         }
59.  
60.         ENDCG
61.     }
62.         }
63. }
64.  

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