找回密码
 立即注册

UGUI Shader绑定多张Sprite UV问题及解决

颓哀 2025-12-22 12:00

当UI面板需要做一些动效时,则会遇到材质球Shader需要绑定多个Sprite的情况,但UGUI没有做UV匹配,默认的UV是主Sprite的UV。

之前项目中都是传Texture一把梭,再来回顾下该问题。

 

如下图,若第二张Texture传Sprite,则UV错乱。因为UGUI生成Mesh时已经帮你生成好了匹配主Sprite的Atlas UV。

q1

 

那么Unity有没有接口处理?问了ChatGpt5.2、GenMini等似乎是没有。

 

解决思路:

传入主Sprite的图集(X,Y,W,H)Rect参数,实现主SpriteUV至0-1UV的转换

传入Sprite2(或Sprite3,4...)等图集转换Rect参数,实现对应的Atlas UV映射。

 

仍存在问题:

这样做无法合批,如果要合批则需修改Canvas传入TexCoord1与2。

但传入的话,若有的Shader动效需要Sprite3、4则也无法完全解决。

如果TexCoord1存索引,将所有Rect转换参数放入全局Shader数组似乎是个方法,

但遍历Prefab收集索引非常麻烦。因此思路退回无法合批版本。

 

 

代码如下

shader:

[code]Shader "UI/DoubleSprite" { Properties { [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {} _Tex2 ("Second Sprite Texture", 2D) = "white" {} _Color ("Tint", Color) = (1,1,1,1) _StencilComp ("Stencil Comparison", Float) = 8 _Stencil ("Stencil ID", Float) = 0 _StencilOp ("Stencil Operation", Float) = 0 _StencilWriteMask ("Stencil Write Mask", Float) = 255 _StencilReadMask ("Stencil Read Mask", Float) = 255 _ColorMask ("Color Mask", Float) = 15 [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0 } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" } Stencil { Ref [_Stencil] Comp [_StencilComp] Pass [_StencilOp] ReadMask [_StencilReadMask] WriteMask [_StencilWriteMask] } Cull Off Lighting Off ZWrite Off ZTest [unity_GUIZTestMode] Blend One OneMinusSrcAlpha ColorMask [_ColorMask] Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 2.0 #include "UnityCG.cginc" #include "UnityUI.cginc" #pragma multi_compile_local _ UNITY_UI_CLIP_RECT #pragma multi_compile_local _ UNITY_UI_ALPHACLIP struct appdata_t { float4 vertex : POSITION; float4 color : COLOR; float2 texcoord : TEXCOORD0; UNITY_VERTEX_INPUT_INSTANCE_ID }; struct v2f { float4 vertex : SV_POSITION; fixed4 color : COLOR; float2 uv : TEXCOORD0; float4 mask : TEXCOORD1; UNITY_VERTEX_OUTPUT_STEREO }; sampler2D _MainTex; sampler2D _Tex2; fixed4 _Color; fixed4 _TextureSampleAdd; float4 _ClipRect; float _UIMaskSoftnessX; float _UIMaskSoftnessY; float4 _MainRect; // xy = offset, zw = size float4 _Tex2Rect; v2f vert (appdata_t v) { v2f o; UNITY_SETUP_INSTANCE_ID(v); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o); o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.texcoord; o.color = v.color * _Color; float2 pixelSize = o.vertex.w; pixelSize /= abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy)); float4 clampedRect = clamp(_ClipRect, -2e10, 2e10); o.mask = float4( v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)) ); return o; } fixed4 frag (v2f i) : SV_Target { // 主 Sprite(UGUI 已经给了正确 Atlas UV) half4 col1 = tex2D(_MainTex, i.uv) + _TextureSampleAdd; // UV Remap:Main → Tex2 float2 localUV = (i.uv - _MainRect.xy) / _MainRect.zw; float2 uv2 = _Tex2Rect.xy + localUV * _Tex2Rect.zw; half4 col2 = tex2D(_Tex2, uv2); // 示例混合方式(可自行改) half4 color = i.color * col1; color.rgb = max(color.rgb, col2.rgb); color.a *= col2.a; #ifdef UNITY_UI_CLIP_RECT half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(i.mask.xy)) * i.mask.zw); color.a *= m.x * m.y; #endif #ifdef UNITY_UI_ALPHACLIP clip(color.a - 0.001); #endif color.rgb *= color.a; return color; } ENDCG } } }[/code]

 

c#:

[code]using UnityEngine; using UnityEngine.UI; [RequireComponent(typeof(Image))] public class ImageInfoInput : MonoBehaviour { public Sprite secondSprite; Image img; Material mat; void Awake() { img = GetComponent(); mat = Instantiate(img.material); img.material = mat; ApplySprites(); } void ApplySprites() { if (img.sprite == null || secondSprite == null) return; // 主 Sprite Sprite main = img.sprite; // 绑定第二张纹理 mat.SetTexture("_Tex2", secondSprite.texture); // 传 Atlas Rect mat.SetVector("_MainRect", GetAtlasRect(main)); mat.SetVector("_Tex2Rect", GetAtlasRect(secondSprite)); } static Vector4 GetAtlasRect(Sprite sp) { Rect r = sp.textureRect; Texture t = sp.texture; return new Vector4( r.x / t.width, r.y / t.height, r.width / t.width, r.height / t.height ); } }[/code]

 

代码模板取自Unity6000.1,如需适配URP等请自行修改。


来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

路过

雷人

握手

鲜花

鸡蛋
文章点评
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。