Alpha Mask: UI, Sprites, Tilemaps, Particles, 3D

Hi @DominoOne I bought the assets few days ago and i'm having issues with the TextMeshProUGUI component and the mask. After following all the steps in the documentation, it still fails on doing its job. Can you please help me?

Thanks,
Funescript

 

Oops, there seem to be a few messages I missed!

Unfortunately, it doesn't work with URP or HDRP (yet).

 

There's a section in the documentation that describes how to integrate alpha masking functionality into any shader – that's just a few copy-paste steps (though, it's not always straightforward where to paste when a shader is more complex or isn't written very well). However, if you can't edit the shader, it probably won't help, sorry :/ But adding UV animation into a shader without any additional tools (so you could edit the shader further afterwards) should be pretty straightforward – there's definitely information about that online.

 

Could you reach out through our support e-mail and send us the TMP shader that you have integrated alpha masking to? We'll have a look!

 

Hello, I'm looking for something like this asset, but I wanted to know if the API was equivalent to the actual Unity Sprite Mask (but yours would include alpha support).
In particluar about the frot/back sorting layers part

 

Hi!
I bought this asset because it does look quite useful!
However, I'm having trouble making it work properly.
It doesn't seem to work correctly with my sprites in Unity 2020.3.3

Which is strange because the samples scenes do work

I'l especiall having trouble making it work with the sprite diffuse shader, not being that knowledgeable with shaders I'm a bit lost x')

 

Hi! Will this also work on mesh renderers? As in, can masksf any type be applied to game objects that use mesh renderers?

 

If I understand your question correctly, then yes, absolutely. Our Alpha Mask can mask Sprites, Meshes, Tiles, UI elements and even Particles. There is a limitation of which shaders you can use (mostly limited to Unlit), but there is also the possibility to integrate the masking into any shader (there are instructions in the documentation how to do that – they're quite straightforward, but it might still require some understanding what is what in a shader).

 

Perfect, thanks for the quick reply!

 

Was this ever solved? I am also having trouble with the latest version of Text Mesh Pro. In an empty project with nothing but the alpha masking tool, and TMP making the changes described in the docs doesn't work.

 

Hi, my project uses Universal RP and I use the default SimpleLit material (My game has a day and night system).. Is there any way to get this mask to work with the SimpleLit material?

 

Hi, @DominoOne. I have the same usecase with jess169. I'm using the URP 2DRenderer's SimpleLit Shader for my sprites too. I wonder will Alpha Mask provides officially support for URP 2D? Or can you teach me how to customize my own shader which support for URP 2D and the Alpha Mask.
Thx!

 

@DominoOne You should include tutorial how to modify TextMeshPro/Distance Field shader (TMP_SDF.shader) to make it work with AlphaMask. It's relatively simple, result file will look like this:

Spoiler: Code

Code (CSharp):

1. Shader "TextMeshPro/Distance Field" {
2.  
3. Properties {
4.     _FaceTex            ("Face Texture", 2D) = "white" {}
5.     _FaceUVSpeedX        ("Face UV Speed X", Range(-5, 5)) = 0.0
6.     _FaceUVSpeedY        ("Face UV Speed Y", Range(-5, 5)) = 0.0
7.     _FaceColor            ("Face Color", Color) = (1,1,1,1)
8.     _FaceDilate            ("Face Dilate", Range(-1,1)) = 0
9.  
10.     _OutlineColor        ("Outline Color", Color) = (0,0,0,1)
11.     _OutlineTex            ("Outline Texture", 2D) = "white" {}
12.     _OutlineUVSpeedX    ("Outline UV Speed X", Range(-5, 5)) = 0.0
13.     _OutlineUVSpeedY    ("Outline UV Speed Y", Range(-5, 5)) = 0.0
14.     _OutlineWidth        ("Outline Thickness", Range(0, 1)) = 0
15.     _OutlineSoftness    ("Outline Softness", Range(0,1)) = 0
16.  
17.     _Bevel                ("Bevel", Range(0,1)) = 0.5
18.     _BevelOffset        ("Bevel Offset", Range(-0.5,0.5)) = 0
19.     _BevelWidth            ("Bevel Width", Range(-.5,0.5)) = 0
20.     _BevelClamp            ("Bevel Clamp", Range(0,1)) = 0
21.     _BevelRoundness        ("Bevel Roundness", Range(0,1)) = 0
22.  
23.     _LightAngle            ("Light Angle", Range(0.0, 6.2831853)) = 3.1416
24.     _SpecularColor        ("Specular", Color) = (1,1,1,1)
25.     _SpecularPower        ("Specular", Range(0,4)) = 2.0
26.     _Reflectivity        ("Reflectivity", Range(5.0,15.0)) = 10
27.     _Diffuse            ("Diffuse", Range(0,1)) = 0.5
28.     _Ambient            ("Ambient", Range(1,0)) = 0.5
29.  
30.     _BumpMap             ("Normal map", 2D) = "bump" {}
31.     _BumpOutline        ("Bump Outline", Range(0,1)) = 0
32.     _BumpFace            ("Bump Face", Range(0,1)) = 0
33.  
34.     _ReflectFaceColor    ("Reflection Color", Color) = (0,0,0,1)
35.     _ReflectOutlineColor("Reflection Color", Color) = (0,0,0,1)
36.     _Cube                 ("Reflection Cubemap", Cube) = "black" { /* TexGen CubeReflect */ }
37.     _EnvMatrixRotation    ("Texture Rotation", vector) = (0, 0, 0, 0)
38.  
39.  
40.     _UnderlayColor        ("Border Color", Color) = (0,0,0, 0.5)
41.     _UnderlayOffsetX    ("Border OffsetX", Range(-1,1)) = 0
42.     _UnderlayOffsetY    ("Border OffsetY", Range(-1,1)) = 0
43.     _UnderlayDilate        ("Border Dilate", Range(-1,1)) = 0
44.     _UnderlaySoftness    ("Border Softness", Range(0,1)) = 0
45.  
46.     _GlowColor            ("Color", Color) = (0, 1, 0, 0.5)
47.     _GlowOffset            ("Offset", Range(-1,1)) = 0
48.     _GlowInner            ("Inner", Range(0,1)) = 0.05
49.     _GlowOuter            ("Outer", Range(0,1)) = 0.05
50.     _GlowPower            ("Falloff", Range(1, 0)) = 0.75
51.  
52.     _WeightNormal        ("Weight Normal", float) = 0
53.     _WeightBold            ("Weight Bold", float) = 0.5
54.  
55.     _ShaderFlags        ("Flags", float) = 0
56.     _ScaleRatioA        ("Scale RatioA", float) = 1
57.     _ScaleRatioB        ("Scale RatioB", float) = 1
58.     _ScaleRatioC        ("Scale RatioC", float) = 1
59.  
60.     _MainTex            ("Font Atlas", 2D) = "white" {}
61.     _TextureWidth        ("Texture Width", float) = 512
62.     _TextureHeight        ("Texture Height", float) = 512
63.     _GradientScale        ("Gradient Scale", float) = 5.0
64.     _ScaleX                ("Scale X", float) = 1.0
65.     _ScaleY                ("Scale Y", float) = 1.0
66.     _PerspectiveFilter    ("Perspective Correction", Range(0, 1)) = 0.875
67.     _Sharpness            ("Sharpness", Range(-1,1)) = 0
68.  
69.     _VertexOffsetX        ("Vertex OffsetX", float) = 0
70.     _VertexOffsetY        ("Vertex OffsetY", float) = 0
71.  
72.     _MaskCoord            ("Mask Coordinates", vector) = (0, 0, 32767, 32767)
73.     _ClipRect            ("Clip Rect", vector) = (-32767, -32767, 32767, 32767)
74.     _MaskSoftnessX        ("Mask SoftnessX", float) = 0
75.     _MaskSoftnessY        ("Mask SoftnessY", float) = 0
76.  
77.     _StencilComp        ("Stencil Comparison", Float) = 8
78.     _Stencil            ("Stencil ID", Float) = 0
79.     _StencilOp            ("Stencil Operation", Float) = 0
80.     _StencilWriteMask    ("Stencil Write Mask", Float) = 255
81.     _StencilReadMask    ("Stencil Read Mask", Float) = 255
82.  
83.     _ColorMask            ("Color Mask", Float) = 15
84.  
85.     [HideInInspector][PerRendererData][Toggle] _Enabled("Mask Enabled", Float) = 1
86.     [HideInInspector][PerRendererData][Toggle] _ClampHoriz("Clamp Alpha Horizontally", Float) = 0
87.     [HideInInspector][PerRendererData][Toggle] _ClampVert("Clamp Alpha Vertically", Float) = 0
88.     [HideInInspector][PerRendererData][Toggle] _UseAlphaChannel("Use Mask Alpha Channel (not RGB)", Float) = 0
89.     [HideInInspector][PerRendererData][Toggle] _ScreenSpaceUI ("Is this screen space ui element?", Float) = 0
90.     [HideInInspector][PerRendererData]_AlphaTex("Alpha Mask", 2D) = "white" {}
91.     [HideInInspector][PerRendererData]_ClampBorder("Clamping Border", Float) = 0.01
92. }
93.  
94. SubShader {
95.  
96.     Tags
97.     {
98.         "Queue"="Transparent"
99.         "IgnoreProjector"="True"
100.         "RenderType"="Transparent"
101.         "ToJMasked" = "True"
102.     }
103.  
104.     Stencil
105.     {
106.         Ref [_Stencil]
107.         Comp [_StencilComp]
108.         Pass [_StencilOp]
109.         ReadMask [_StencilReadMask]
110.         WriteMask [_StencilWriteMask]
111.     }
112.  
113.     Cull [_CullMode]
114.     ZWrite Off
115.     Lighting Off
116.     Fog { Mode Off }
117.     ZTest [unity_GUIZTestMode]
118.     Blend One OneMinusSrcAlpha
119.     ColorMask [_ColorMask]
120.  
121.     Pass {
122.         CGPROGRAM
123.         #pragma target 3.0
124.         #pragma vertex VertShader
125.         #pragma fragment PixShader
126.         #pragma shader_feature __ BEVEL_ON
127.         #pragma shader_feature __ UNDERLAY_ON UNDERLAY_INNER
128.         #pragma shader_feature __ GLOW_ON
129.  
130.         #pragma multi_compile __ UNITY_UI_CLIP_RECT
131.         #pragma multi_compile __ UNITY_UI_ALPHACLIP
132.  
133.         #include "UnityCG.cginc"
134.         #include "UnityUI.cginc"
135.         #include "TMPro_Properties.cginc"
136.         #include "TMPro.cginc"
137.         #include "Assets/Alpha Masking/ToJAlphaMasking.cginc"
138.  
139.         struct vertex_t {
140.             UNITY_VERTEX_INPUT_INSTANCE_ID
141.             float4    position        : POSITION;
142.             float3    normal            : NORMAL;
143.             fixed4    color            : COLOR;
144.             float2    texcoord0        : TEXCOORD0;
145.             float2    texcoord1        : TEXCOORD1;
146.         };
147.  
148.  
149.         struct pixel_t {
150.             UNITY_VERTEX_INPUT_INSTANCE_ID
151.             UNITY_VERTEX_OUTPUT_STEREO
152.             float4    position        : SV_POSITION;
153.             fixed4    color            : COLOR;
154.             float2    atlas            : TEXCOORD0;        // Atlas
155.             float4    param            : TEXCOORD1;        // alphaClip, scale, bias, weight
156.             float4    mask            : TEXCOORD2;        // Position in object space(xy), pixel Size(zw)
157.             float3    viewDir            : TEXCOORD3;
158.  
159.         #if (UNDERLAY_ON || UNDERLAY_INNER)
160.             float4    texcoord2        : TEXCOORD4;        // u,v, scale, bias
161.             fixed4    underlayColor    : COLOR1;
162.         #endif
163.             float4 textures            : TEXCOORD5;
164.             float2 tojAlphaUV       : TEXCOORD6;
165.         };
166.  
167.         // Used by Unity internally to handle Texture Tiling and Offset.
168.         float4 _FaceTex_ST;
169.         float4 _OutlineTex_ST;
170.  
171.         pixel_t VertShader(vertex_t input)
172.         {
173.             pixel_t output;
174.  
175.             UNITY_INITIALIZE_OUTPUT(pixel_t, output);
176.             UNITY_SETUP_INSTANCE_ID(input);
177.             UNITY_TRANSFER_INSTANCE_ID(input,output);
178.             UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(output);
179.  
180.             float bold = step(input.texcoord1.y, 0);
181.  
182.             float4 vert = input.position;
183.             vert.x += _VertexOffsetX;
184.             vert.y += _VertexOffsetY;
185.  
186.             float4 vPosition = UnityObjectToClipPos(vert);
187.  
188.             float2 pixelSize = vPosition.w;
189.             pixelSize /= float2(_ScaleX, _ScaleY) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
190.             float scale = rsqrt(dot(pixelSize, pixelSize));
191.             scale *= abs(input.texcoord1.y) * _GradientScale * (_Sharpness + 1);
192.             if (UNITY_MATRIX_P[3][3] == 0) scale = lerp(abs(scale) * (1 - _PerspectiveFilter), scale, abs(dot(UnityObjectToWorldNormal(input.normal.xyz), normalize(WorldSpaceViewDir(vert)))));
193.  
194.             float weight = lerp(_WeightNormal, _WeightBold, bold) / 4.0;
195.             weight = (weight + _FaceDilate) * _ScaleRatioA * 0.5;
196.  
197.             float bias =(.5 - weight) + (.5 / scale);
198.  
199.             float alphaClip = (1.0 - _OutlineWidth * _ScaleRatioA - _OutlineSoftness * _ScaleRatioA);
200.  
201.         #if GLOW_ON
202.             alphaClip = min(alphaClip, 1.0 - _GlowOffset * _ScaleRatioB - _GlowOuter * _ScaleRatioB);
203.         #endif
204.  
205.             alphaClip = alphaClip / 2.0 - ( .5 / scale) - weight;
206.  
207.         #if (UNDERLAY_ON || UNDERLAY_INNER)
208.             float4 underlayColor = _UnderlayColor;
209.             underlayColor.rgb *= underlayColor.a;
210.  
211.             float bScale = scale;
212.             bScale /= 1 + ((_UnderlaySoftness*_ScaleRatioC) * bScale);
213.             float bBias = (0.5 - weight) * bScale - 0.5 - ((_UnderlayDilate * _ScaleRatioC) * 0.5 * bScale);
214.  
215.             float x = -(_UnderlayOffsetX * _ScaleRatioC) * _GradientScale / _TextureWidth;
216.             float y = -(_UnderlayOffsetY * _ScaleRatioC) * _GradientScale / _TextureHeight;
217.             float2 bOffset = float2(x, y);
218.         #endif
219.  
220.             // Generate UV for the Masking Texture
221.             float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
222.             float2 maskUV = (vert.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);
223.  
224.             // Support for texture tiling and offset
225.             float2 textureUV = UnpackUV(input.texcoord1.x);
226.             float2 faceUV = TRANSFORM_TEX(textureUV, _FaceTex);
227.             float2 outlineUV = TRANSFORM_TEX(textureUV, _OutlineTex);
228.  
229.  
230.             output.position = vPosition;
231.             output.color = input.color;
232.             output.atlas =    input.texcoord0;
233.             output.param =    float4(alphaClip, scale, bias, weight);
234.             output.mask = half4(vert.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_MaskSoftnessX, _MaskSoftnessY) + pixelSize.xy));
235.             output.viewDir =    mul((float3x3)_EnvMatrix, _WorldSpaceCameraPos.xyz - mul(unity_ObjectToWorld, vert).xyz);
236.             #if (UNDERLAY_ON || UNDERLAY_INNER)
237.             output.texcoord2 = float4(input.texcoord0 + bOffset, bScale, bBias);
238.             output.underlayColor =    underlayColor;
239.             #endif
240.             output.textures = float4(faceUV, outlineUV);
241.             output.tojAlphaUV = VertCalculateMask(vert);
242.  
243.             return output;
244.         }
245.  
246.  
247.         fixed4 PixShader(pixel_t input) : SV_Target
248.         {
249.             UNITY_SETUP_INSTANCE_ID(input);
250.  
251.             float c = tex2D(_MainTex, input.atlas).a;
252.  
253.         #ifndef UNDERLAY_ON
254.             clip(c - input.param.x);
255.         #endif
256.  
257.             float    scale    = input.param.y;
258.             float    bias    = input.param.z;
259.             float    weight    = input.param.w;
260.             float    sd = (bias - c) * scale;
261.  
262.             float outline = (_OutlineWidth * _ScaleRatioA) * scale;
263.             float softness = (_OutlineSoftness * _ScaleRatioA) * scale;
264.  
265.             half4 faceColor = _FaceColor;
266.             half4 outlineColor = _OutlineColor;
267.  
268.             faceColor.rgb *= input.color.rgb;
269.  
270.             faceColor *= tex2D(_FaceTex, input.textures.xy + float2(_FaceUVSpeedX, _FaceUVSpeedY) * _Time.y);
271.             outlineColor *= tex2D(_OutlineTex, input.textures.zw + float2(_OutlineUVSpeedX, _OutlineUVSpeedY) * _Time.y);
272.  
273.             faceColor = GetColor(sd, faceColor, outlineColor, outline, softness);
274.  
275.         #if BEVEL_ON
276.             float3 dxy = float3(0.5 / _TextureWidth, 0.5 / _TextureHeight, 0);
277.             float3 n = GetSurfaceNormal(input.atlas, weight, dxy);
278.  
279.             float3 bump = UnpackNormal(tex2D(_BumpMap, input.textures.xy + float2(_FaceUVSpeedX, _FaceUVSpeedY) * _Time.y)).xyz;
280.             bump *= lerp(_BumpFace, _BumpOutline, saturate(sd + outline * 0.5));
281.             n = normalize(n- bump);
282.  
283.             float3 light = normalize(float3(sin(_LightAngle), cos(_LightAngle), -1.0));
284.  
285.             float3 col = GetSpecular(n, light);
286.             faceColor.rgb += col*faceColor.a;
287.             faceColor.rgb *= 1-(dot(n, light)*_Diffuse);
288.             faceColor.rgb *= lerp(_Ambient, 1, n.z*n.z);
289.  
290.             fixed4 reflcol = texCUBE(_Cube, reflect(input.viewDir, -n));
291.             faceColor.rgb += reflcol.rgb * lerp(_ReflectFaceColor.rgb, _ReflectOutlineColor.rgb, saturate(sd + outline * 0.5)) * faceColor.a;
292.         #endif
293.  
294.         #if UNDERLAY_ON
295.             float d = tex2D(_MainTex, input.texcoord2.xy).a * input.texcoord2.z;
296.             faceColor += input.underlayColor * saturate(d - input.texcoord2.w) * (1 - faceColor.a);
297.         #endif
298.  
299.         #if UNDERLAY_INNER
300.             float d = tex2D(_MainTex, input.texcoord2.xy).a * input.texcoord2.z;
301.             faceColor += input.underlayColor * (1 - saturate(d - input.texcoord2.w)) * saturate(1 - sd) * (1 - faceColor.a);
302.         #endif
303.  
304.         #if GLOW_ON
305.             float4 glowColor = GetGlowColor(sd, scale);
306.             faceColor.rgb += glowColor.rgb * glowColor.a;
307.         #endif
308.  
309.         // Alternative implementation to UnityGet2DClipping with support for softness.
310.         #if UNITY_UI_CLIP_RECT
311.             half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(input.mask.xy)) * input.mask.zw);
312.             faceColor *= m.x * m.y;
313.         #endif
314.  
315.         #if UNITY_UI_ALPHACLIP
316.             clip(faceColor.a - 0.001);
317.         #endif
318.  
319.           return faceColor * input.color.a * FragCalculateMask(input.tojAlphaUV);
320.         }
321.  
322.         ENDCG
323.     }
324. }
325.  
326. Fallback "TextMeshPro/Mobile/Distance Field"
327. CustomEditor "TMPro.EditorUtilities.TMP_SDFShaderGUI"
328. }
329.  

The only differences: I added properties, tag, tojAlphaUV to pixel_t struct, added calculation of tojAlphaUV in line 241, and multiplied resulted color by FragCalculateMask(input.tojAlphaUV) in line 319.