Problem with using both Font & Draggable Panel

[banzzak]

Hi, first of all, Thank you for making NGUI. It's nice!

Now I'm trying to make a draggable window which contains an item with a label.
When label's font was on the same atlas with the draggable window background, it worked fine.
But my asian font size is quite big ( 2048 * 2048 ). I tried to put the font out of the atlas. It stayed independently.
Then, two problem happened.
1. Labels are not clipped well by draggable Window
2. Labels go behind the other images.

How can I solve this problem?

[ENAY]

This is a problem I suspect with the shader, this caused me problems just only yesterday, if the shader doesn't support transparency then the objects won't be clipped.

If you are using the custom RGBA shader for your asian font (which cuts the atlas size down to 25%) then it won't work because you can no longer use the alpha channel.

[ArenMook]

Since you separated the font from the UI atlas, it will end up in a different draw call. Different draw call means Unity gets to determine what's in front of what. You need to adjust Z to tell Unity what should be in front. Read the first reply in the FAQ.

[banzzak]

Yeah, I downed label's z.
So we can't see it. But it's not clipped well like this.

Text which should be clipped doesn't disappear until drag is completely stop.
When the draggable context is moving by it's momentum, text is not clipped and looks bad.

How can I solved this?

[Nicki]

Either this is a shader problem, or your font is being drawn by a different panel.

[banzzak]

what does "your font is being drawn by a different panel" mean?

Font is not included in any atlas & materials are in just resource folder.

[ArenMook]

Check the panel tool and make sure that your labels don't have their own panels.

Check the shader on your asian font material, make sure it's using "Unlit/Transparent Colored".

[banzzak]

Thank you. With 'Unlit/Transparent' Shader it works well.

Nevertheless, it's hard to use this Shader. Because I'm developing mobile game, I have to use light Shader.
Can you recommend any other shader for this case?

[ArenMook]

Light shader?

If you're using a custom shader, you'll need to write a clipped version of it. For example, if your shader is named "Abcd", to add a soft-clipped support, you need a shader called "Abcd (SoftClip)". You'll also need to add support for clipping by modifying this shader. Look inside Unlit/Transparent Colored (SoftClip) for what to do.

[banzzak]

'Light' means non-heavy. Because the performance is critical issue, I need to use non-heavy shader.

A UI Scene with NGUI Scroll List and its Draggable contents with this shader make the scene 15 FPS on iphone4. So I worry about performance issue a lot

[ArenMook]

That's just because of alpha blending. If you modify the shader to use alpha pre-multiply logic, or simply use alpha cutout instead of alpha blend, it will be faster.

[banzzak]

Thank you so much!! If you have an example of alpha pre-multiply logic, or simply use alpha cutout shaders, it will helps me a lot as well.

[ArenMook]

Here is a shader contributed by David Whatley of Critical Thought Games. Keep in mind that in order to use it, it needs alpha pre-multiply style textures. Unfortunately I don't know much about the process, only that Texture Packer is able to spit them out.

1. Shader "Unlit/Premultiplied Alpha/Transparent Colored (AlphaClip)"
2. {
3.         Properties
4.         {
5.                 _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
6.                 _Color ("Tint Color", Color) = (1,1,1,1)
7.         }
8.  
9.         SubShader
10.         {
11.                 Tags
12.                 {
13.                         "Queue" = "Transparent"
14.                         "IgnoreProjector" = "True"
15.                         "RenderType" = "Transparent"
16.                 }
17.                
18.                 LOD 100
19.                 Cull Off
20.                 Lighting Off
21.                 ZWrite Off
22.                 ColorMask RGB
23.                 AlphaTest Greater .01
24.                 Fog { Mode Off }
25.                 Blend One OneMinusSrcAlpha
26.  
27.                 Pass
28.                 {
29.                         CGPROGRAM
30.                         #pragma vertex vert
31.                         #pragma fragment frag
32.  
33.                         #include "UnityCG.cginc"
34.  
35.                         sampler2D _MainTex;
36.                         float4 _MainTex_ST;
37.                         fixed4 _Color;
38.                         float4 _ClipRange = float4(0.0, 0.0, 1000.0, 1000.0);
39.  
40.                         struct appdata_t
41.                         {
42.                                 float4 vertex : POSITION;
43.                                 fixed4 color : COLOR;
44.                                 float2 texcoord : TEXCOORD0;
45.                         };
46.  
47.                         struct v2f
48.                         {
49.                                 float4 vertex : POSITION;
50.                                 fixed4 color : COLOR;
51.                                 float2 texcoord : TEXCOORD0;
52.                                 float4 worldPos : TEXCOORD1;
53.                         };
54.  
55.                         v2f vert (appdata_t v)
56.                         {
57.                                 v2f o;
58.                                 o.worldPos = v.vertex;
59.                                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
60.                                 o.color = v.color;
61.                                 o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
62.                                 return o;
63.                         }
64.  
65.                         fixed4 frag (v2f IN) : COLOR
66.                         {
67.                                 float2 factor = abs(IN.worldPos.xy - _ClipRange.xy) / _ClipRange.zw;
68.  
69.                                 // Sample the texture
70.                                 fixed4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
71.                                 float val = 1.0 - max(factor.x, factor.y);
72.  
73.                                 // Option 1: 'if' statement
74.                                 //if (val < 0.0) col.rgba = 0.0;
75.  
76.                                 // Option 2: no 'if' statement -- may be faster on some devices
77.                                 col.rgba *= ceil(clamp(val, 0.0, 1.0));
78.  
79.                                 return col * _Color;
80.                         }
81.                         ENDCG
82.                 }
83.         }
84.        
85.         SubShader
86.         {
87.                 Tags
88.                 {
89.                         "Queue" = "Transparent"
90.                         "IgnoreProjector" = "True"
91.                         "RenderType" = "Transparent"
92.                 }
93.                
94.                 LOD 100
95.                 Cull Off
96.                 Lighting Off
97.                 ZWrite Off
98.                 Fog { Mode Off }
99.                 ColorMask RGB
100.                 AlphaTest Greater .01
101.                 Blend One OneMinusSrcAlpha
102.                
103.                 Pass
104.                 {
105.                         ColorMaterial AmbientAndDiffuse
106.                        
107.                         SetTexture [_MainTex]
108.                         {
109.                                 Combine Texture * Primary
110.                         }
111.                        
112.                         SetTexture [_MainTex]
113.                         {
114.                                 ConstantColor [_Color]
115.                                 Combine Previous * Constant
116.                         }
117.                 }
118.         }
119. }

[banzzak]

Thank you so much. I'll try with that ^^ It is hard to get a good FPS on mobile ~.~

[banzzak]

With the shader you enclosed, every texture becomes completely transparent.
If it works weel, it should be same with alpha-blending shader, right?
Do you know why?

p.s. And I tried to combine my shader and hard clipping CGPROGRAM. But the textures just become transparent and black. It is not easy to mix and match them. T.T