Unity的UGUI置灰(TMP、Image、RawImage、Spine动画)

2024-06-22 04:33| 来源: 网络整理| 查看: 265

引言

开发的过程中碰到需要置灰的功能，而给到的只有UI游戏体的路径。就需要考虑TMP、TMP图文混排、Image、Spine动画等情况进行置灰。实践发现除开TMP会特殊一点之外，其余的继承了MaskableGraphic组件的显示组件都是同一种修改方式。在网上搜索过大部分内容，没有将TMP置灰的，只好自己弄一个

TMP的置灰纯文本置灰

1.新增TMP Shader的置灰Shader，这一步只需要在目标Shader的结尾处做一个置灰处理就行。下面把我加的Shader贴出来 2.Shader代码：

// Simplified SDF shader: // - No Shading Option (bevel / bump / env map) // - No Glow Option // - Softness is applied on both side of the outline Shader "TextMeshPro/Mobile/Distance Field Grey" { Properties { _FaceColor ("Face Color", Color) = (1,1,1,1) _FaceDilate ("Face Dilate", Range(-1,1)) = 0 _OutlineColor ("Outline Color", Color) = (0,0,0,1) _OutlineWidth ("Outline Thickness", Range(0,1)) = 0 _OutlineSoftness ("Outline Softness", Range(0,1)) = 0 _UnderlayColor ("Border Color", Color) = (0,0,0,.5) _UnderlayOffsetX ("Border OffsetX", Range(-1,1)) = 0 _UnderlayOffsetY ("Border OffsetY", Range(-1,1)) = 0 _UnderlayDilate ("Border Dilate", Range(-1,1)) = 0 _UnderlaySoftness ("Border Softness", Range(0,1)) = 0 _WeightNormal ("Weight Normal", float) = 0 _WeightBold ("Weight Bold", float) = .5 _ShaderFlags ("Flags", float) = 0 _ScaleRatioA ("Scale RatioA", float) = 1 _ScaleRatioB ("Scale RatioB", float) = 1 _ScaleRatioC ("Scale RatioC", float) = 1 _MainTex ("Font Atlas", 2D) = "white" {} _TextureWidth ("Texture Width", float) = 512 _TextureHeight ("Texture Height", float) = 512 _GradientScale ("Gradient Scale", float) = 5 _ScaleX ("Scale X", float) = 1 _ScaleY ("Scale Y", float) = 1 _PerspectiveFilter ("Perspective Correction", Range(0, 1)) = 0.875 _Sharpness ("Sharpness", Range(-1,1)) = 0 _VertexOffsetX ("Vertex OffsetX", float) = 0 _VertexOffsetY ("Vertex OffsetY", float) = 0 _ClipRect ("Clip Rect", vector) = (-32767, -32767, 32767, 32767) _MaskSoftnessX ("Mask SoftnessX", float) = 0 _MaskSoftnessY ("Mask SoftnessY", float) = 0 _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 _CullMode ("Cull Mode", Float) = 0 _ColorMask ("Color Mask", Float) = 15 } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } Stencil { Ref [_Stencil] Comp [_StencilComp] Pass [_StencilOp] ReadMask [_StencilReadMask] WriteMask [_StencilWriteMask] } Cull [_CullMode] ZWrite Off Lighting Off Fog { Mode Off } ZTest [unity_GUIZTestMode] Blend One OneMinusSrcAlpha ColorMask [_ColorMask] Pass { CGPROGRAM #pragma vertex VertShader #pragma fragment PixShader #pragma shader_feature __ OUTLINE_ON #pragma shader_feature __ UNDERLAY_ON UNDERLAY_INNER #pragma multi_compile __ UNITY_UI_CLIP_RECT #pragma multi_compile __ UNITY_UI_ALPHACLIP #include "UnityCG.cginc" #include "UnityUI.cginc" #include "TMPro_Properties.cginc" struct vertex_t { UNITY_VERTEX_INPUT_INSTANCE_ID float4 vertex : POSITION; float3 normal : NORMAL; fixed4 color : COLOR; float4 texcoord0 : TEXCOORD0; float2 texcoord1 : TEXCOORD1; }; struct pixel_t { UNITY_VERTEX_INPUT_INSTANCE_ID UNITY_VERTEX_OUTPUT_STEREO float4 vertex : SV_POSITION; fixed4 faceColor : COLOR; fixed4 outlineColor : COLOR1; float4 texcoord0 : TEXCOORD0; // Texture UV, Mask UV half4 param : TEXCOORD1; // Scale(x), BiasIn(y), BiasOut(z), Bias(w) half4 mask : TEXCOORD2; // Position in clip space(xy), Softness(zw) #if (UNDERLAY_ON | UNDERLAY_INNER) float4 texcoord1 : TEXCOORD3; // Texture UV, alpha, reserved half2 underlayParam : TEXCOORD4; // Scale(x), Bias(y) #endif }; float _UIMaskSoftnessX; float _UIMaskSoftnessY; pixel_t VertShader(vertex_t input) { pixel_t output; UNITY_INITIALIZE_OUTPUT(pixel_t, output); UNITY_SETUP_INSTANCE_ID(input); UNITY_TRANSFER_INSTANCE_ID(input, output); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(output); float bold = step(input.texcoord0.w, 0); float4 vert = input.vertex; vert.x += _VertexOffsetX; vert.y += _VertexOffsetY; float4 vPosition = UnityObjectToClipPos(vert); float2 pixelSize = vPosition.w; pixelSize /= float2(_ScaleX, _ScaleY) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy)); float scale = rsqrt(dot(pixelSize, pixelSize)); scale *= abs(input.texcoord0.w) * _GradientScale * (_Sharpness + 1); if(UNITY_MATRIX_P[3][3] == 0) scale = lerp(abs(scale) * (1 - _PerspectiveFilter), scale, abs(dot(UnityObjectToWorldNormal(input.normal.xyz), normalize(WorldSpaceViewDir(vert))))); float weight = lerp(_WeightNormal, _WeightBold, bold) / 4.0; weight = (weight + _FaceDilate) * _ScaleRatioA * 0.5; float layerScale = scale; scale /= 1 + (_OutlineSoftness * _ScaleRatioA * scale); float bias = (0.5 - weight) * scale - 0.5; float outline = _OutlineWidth * _ScaleRatioA * 0.5 * scale; float opacity = input.color.a; #if (UNDERLAY_ON | UNDERLAY_INNER) opacity = 1.0; #endif fixed4 faceColor = fixed4(input.color.rgb, opacity) * _FaceColor; faceColor.rgb *= faceColor.a; fixed4 outlineColor = _OutlineColor; outlineColor.a *= opacity; outlineColor.rgb *= outlineColor.a; outlineColor = lerp(faceColor, outlineColor, sqrt(min(1.0, (outline * 2)))); #if (UNDERLAY_ON | UNDERLAY_INNER) layerScale /= 1 + ((_UnderlaySoftness * _ScaleRatioC) * layerScale); float layerBias = (.5 - weight) * layerScale - .5 - ((_UnderlayDilate * _ScaleRatioC) * .5 * layerScale); float x = -(_UnderlayOffsetX * _ScaleRatioC) * _GradientScale / _TextureWidth; float y = -(_UnderlayOffsetY * _ScaleRatioC) * _GradientScale / _TextureHeight; float2 layerOffset = float2(x, y); #endif // Generate UV for the Masking Texture float4 clampedRect = clamp(_ClipRect, -2e10, 2e10); float2 maskUV = (vert.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy); // Populate structure for pixel shader output.vertex = vPosition; output.faceColor = faceColor; output.outlineColor = outlineColor; output.texcoord0 = float4(input.texcoord0.x, input.texcoord0.y, maskUV.x, maskUV.y); output.param = half4(scale, bias - outline, bias + outline, bias); const half2 maskSoftness = half2(max(_UIMaskSoftnessX, _MaskSoftnessX), max(_UIMaskSoftnessY, _MaskSoftnessY)); output.mask = half4(vert.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * maskSoftness + pixelSize.xy)); #if (UNDERLAY_ON || UNDERLAY_INNER) output.texcoord1 = float4(input.texcoord0 + layerOffset, input.color.a, 0); output.underlayParam = half2(layerScale, layerBias); #endif return output; } // PIXEL SHADER fixed4 PixShader(pixel_t input) : SV_Target { UNITY_SETUP_INSTANCE_ID(input); half d = tex2D(_MainTex, input.texcoord0.xy).a * input.param.x; half4 c = input.faceColor * saturate(d - input.param.w); #ifdef OUTLINE_ON c = lerp(input.outlineColor, input.faceColor, saturate(d - input.param.z)); c *= saturate(d - input.param.y); #endif #if UNDERLAY_ON d = tex2D(_MainTex, input.texcoord1.xy).a * input.underlayParam.x; c += float4(_UnderlayColor.rgb * _UnderlayColor.a, _UnderlayColor.a) * saturate(d - input.underlayParam.y) * (1 - c.a); #endif #if UNDERLAY_INNER half sd = saturate(d - input.param.z); d = tex2D(_MainTex, input.texcoord1.xy).a * input.underlayParam.x; c += float4(_UnderlayColor.rgb * _UnderlayColor.a, _UnderlayColor.a) * (1 - saturate(d - input.underlayParam.y)) * sd * (1 - c.a); #endif // Alternative implementation to UnityGet2DClipping with support for softness. #if UNITY_UI_CLIP_RECT half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(input.mask.xy)) * input.mask.zw); c *= m.x * m.y; #endif #if (UNDERLAY_ON | UNDERLAY_INNER) c *= input.texcoord1.z; #endif #if UNITY_UI_ALPHACLIP clip(c.a - 0.001); #endif half grey = dot(c.rgb, half3(0.299, 0.587, 0.114)); c.rgb = lerp(c.rgb, half3(grey, grey, grey), c.a); return c; } ENDCG } } CustomEditor "TMPro.EditorUtilities.TMP_SDFShaderGUI" }

3.对TMP_Text进行修改，添加如下代码

4.获取到TMP_Text组件后调用SetGreyState函数就能实现置灰

图文混排后图片的置灰

1.上一步的置灰只能实现TMP里面文案的置灰，如果文案里面插入有图片如Emoji的话就实现不了置灰。 2.新增Shader文件 TMP_Sprite_Grey.shader，在结尾加入置灰处理

Shader "TextMeshPro/Sprite_Grey" { Properties { _MainTex ("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 _CullMode ("Cull Mode", Float) = 0 _ColorMask ("Color Mask", Float) = 15 _ClipRect ("Clip Rect", vector) = (-32767, -32767, 32767, 32767) [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 [_CullMode] Lighting Off ZWrite Off ZTest [unity_GUIZTestMode] Blend SrcAlpha OneMinusSrcAlpha ColorMask [_ColorMask] Pass { Name "Default" CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 2.0 #include "UnityCG.cginc" #include "UnityUI.cginc" #pragma multi_compile __ UNITY_UI_CLIP_RECT #pragma multi_compile __ 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 texcoord : TEXCOORD0; float4 worldPosition : TEXCOORD1; float4 mask : TEXCOORD2; UNITY_VERTEX_OUTPUT_STEREO }; sampler2D _MainTex; fixed4 _Color; fixed4 _TextureSampleAdd; float4 _ClipRect; float4 _MainTex_ST; float _UIMaskSoftnessX; float _UIMaskSoftnessY; v2f vert(appdata_t v) { v2f OUT; UNITY_SETUP_INSTANCE_ID(v); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT); float4 vPosition = UnityObjectToClipPos(v.vertex); OUT.worldPosition = v.vertex; OUT.vertex = vPosition; float2 pixelSize = vPosition.w; pixelSize /= abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy)); float4 clampedRect = clamp(_ClipRect, -2e10, 2e10); OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex); OUT.mask = half4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy))); OUT.color = v.color * _Color; return OUT; } fixed4 frag(v2f IN) : SV_Target { half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color; #if UNITY_UI_CLIP_RECT half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw); color *= m.x * m.y; #endif #ifdef UNITY_UI_ALPHACLIP clip (color.a - 0.001); #endif half grey = dot(color.rgb, half3(0.299, 0.587, 0.114)); color.rgb = lerp(color.rgb, half3(grey, grey, grey), color.a); return color; } ENDCG } } }

3.修改TMP_SubMeshUI脚本，新增下面代码

/// /// 当前是否处于置灰状态 /// private bool _curIsGrey = false; /// /// 置灰前的材质 /// private Material _oriMaterial = null; /// /// 控制置灰状态 /// /// public void SetGreyState(bool isGrey) { if (isGrey) { _oriMaterial = sharedMaterial; Shader greyShader = Shader.Find("TextMeshPro/Sprite_Grey"); Material greyMaterial = Instantiate(sharedMaterial); greyMaterial.shader = greyShader; SetSharedMaterialWhenSetGrey(greyMaterial); } else { if (_oriMaterial != null) { SetSharedMaterialWhenSetGrey(_oriMaterial); } } _curIsGrey = isGrey; } void SetSharedMaterialWhenSetGrey(Material mat) { //Debug.Log("*** SetSharedMaterial UI() *** FRAME (" + Time.frameCount + ")"); // Assign new material. m_sharedMaterial = mat; m_Material = m_sharedMaterial; //m_isDefaultMaterial = false; //if (mat.GetInstanceID() == m_fontAsset.material.GetInstanceID()) // m_isDefaultMaterial = true; // Compute and Set new padding values for this new material. m_padding = GetPaddingForMaterial(); //SetVerticesDirty(); SetMaterialDirty(); #if UNITY_EDITOR //if (m_sharedMaterial != null) // gameObject.name = "TMP SubMesh [" + m_sharedMaterial.name + "]"; #endif }

4.修改TMP_SubMeshUI里的SetSharedMaterial函数，修改后的代码如下

/// /// Method to set the shared material. /// /// void SetSharedMaterial(Material mat) { //Debug.Log("*** SetSharedMaterial UI() *** FRAME (" + Time.frameCount + ")"); // Assign new material. m_sharedMaterial = mat; m_Material = m_sharedMaterial; if (_curIsGrey) { SetGreyState(true); } //m_isDefaultMaterial = false; //if (mat.GetInstanceID() == m_fontAsset.material.GetInstanceID()) // m_isDefaultMaterial = true; // Compute and Set new padding values for this new material. m_padding = GetPaddingForMaterial(); //SetVerticesDirty(); SetMaterialDirty(); #if UNITY_EDITOR //if (m_sharedMaterial != null) // gameObject.name = "TMP SubMesh [" + m_sharedMaterial.name + "]"; #endif }

5.TMP_Text获得子节点里的TMP_SubMeshUI实例后调用SetGreyState()函数就能实现TMP文案里图片的置灰。

其它继承自MaskableGraphic组件的置灰(Image、RawImage、Spine动画) 具体实现

1.新增置灰shader,ImageGrey

Shader "Custom/UIGray" { Properties { [PerRendererData]_MainTex("MainTex", 2D) = "white" {} } SubShader { Tags { "Queue" = "Transparent" "IngnoreProjector" = "True" "RenderType" = "Transparent" } Pass { ZWrite Off Blend SrcAlpha OneMinusSrcAlpha CGPROGRAM #pragma vertex vert; #pragma fragment frag; sampler2D _MainTex; float4 _MainTex_ST; // 纹理无需编辑，可以不配置ST struct a2v { float4 vertex : POSITION; float4 texcoord : TEXCOORD0; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; }; v2f vert(a2v v) { v2f f; f.pos = UnityObjectToClipPos(v.vertex); f.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw; return f; } fixed4 frag(v2f f) : SV_Target { // 置灰 fixed3 grayRGB = dot(tex2D(_MainTex, f.uv), fixed3(0.299, 0.587, 0.114)); // 透明度 fixed grayA = tex2D(_MainTex, f.uv).a; return fixed4(grayRGB, grayA); } ENDCG } } FallBack "Diffuse" }

2.新建对应的置灰脚本，关键代码如下

private Material _oriImageMaterial; private bool SetMaskableGraphicGreyState(bool isGrey) { Shader shader = Shader.Find("Custom/UIGray"); _imageGreyMaterial = new Material(shader); _maskableGraphic = GetComponent(); if (_maskableGraphic == null || _imageGreyMaterial == null) { return false; } if (isGrey) { if (_oriImageMaterial == null) { _oriImageMaterial = _maskableGraphic.material; } _maskableGraphic.material = _imageGreyMaterial; _maskableGraphic.SetAllDirty(); } else { _maskableGraphic.material = _oriImageMaterial; _maskableGraphic.SetAllDirty(); } return true; }

3.最后调用脚本里的这个函数就能实现置灰效果了

【本文地址】

公司简介

联系我们