Transparent Circular Timer Shader

Unity Engine
1

Hi guys,

I’m programming a cooldown timer for an iOS action adventure game. The timer needs to be represented as a transparent, darkened overlay in the form of a clock, which rotates from fully dark, to 3/4, to 1/2, to 1/4 to fully bright (i.e. invisible).

Heres the graphic i used:

I tried implementing this using the alpha cutoff technique demonstrated here: http://answers.unity3d.com/questions...bar-timer.html

This makes the animation dead easy, but unfortunately has the side effect of using the alpha channel, meaning it can no longer be made transparent. My graphic shows as solid black.

I tried solving this with a two pass shader for the transparency. Unfortunately it didn’t work:

Shader "Transparent/VertexLitCutoutAndFade" 

{

	Properties 

	{

		_Color ("Main Color", Color) = (0,0,0,1)

		_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}

		_Cutoff ("Alpha cutoff", Range(0,1)) = 0.5

		_AlphaColor ("Alpha Color", Color) = (0,0,0,0.5)

	}



	SubShader 

	{

		Tags {"RenderType"="Transparent" "Queue"="Transparent"}

		

		// Do alpha cutoff

		Pass 

		{

			ZWrite Off

			Alphatest Greater [_Cutoff]

			AlphaToMask True

			

			SetTexture [_MainTex]

			{

				Combine texture

			}

		}

		

		// Do alpha

		Pass 

		{

			ZWrite Off

			Blend SrcAlpha OneMinusSrcAlpha

			

			SetTexture [_MainTex]

			{

				constantColor[_AlphaColor]

				Combine previous, constant

			} 

		}

	}

}

Can any of you shader gurus help me out here? I feel like I’m really close to the correct shader.

regards
draknir

2

I don’t understand what you want transparency based on, or why you want vertex lighting on a GUI element. A mockup at 3-4 stages, over a textured background of some kind, would be most helpful.

3

Hi,

I don’t want Vertex lighting, the shader just has a convoluted file name.

Heres an example of what I need:

best regards,
draknir

4

I have this shader I made:

Shader "Transparent/Cutout/AlphaDiffuse" {
Properties {
	_Color ("Main Color", Color) = (1,1,1,1)
	_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
	_Cutoff ("Alpha cutoff", Range(0,1)) = 0.5
}

SubShader {
	Tags {"Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="Transparent"}
	LOD 200
	
CGPROGRAM
#pragma surface surf Lambert alpha

sampler2D _MainTex;
fixed4 _Color;
half _Cutoff;

struct Input {
	float2 uv_MainTex;
};

void surf (Input IN, inout SurfaceOutput o) 
{
	fixed4 c = tex2D(_MainTex, IN.uv_MainTex);

	o.Albedo = c.rgb;
	o.Alpha = (c.a > _Cutoff) ? 1-(c.a-_Color.a) : 0;
}
ENDCG
}

Fallback "Transparent/Cutout/VertexLit"
}
5

I wasn’t getting good results with the alpha animation – too jagged. I did get great results with a few boolean branches, but that looked way too slow. Here’s a compromise; please tell how it performs if any of you use it on iOS – I only profiled it in PVRUniSCo. Just start putting 9’s after the decimal point, for artifact correction. You’ve got to transform the UVs to take up a -1 to 1 square, e.g. x 2 - 1 for a Unity cube.

Maybe this will help you with the fixed function shader; I don’t know. You shouldn’t be using a fixed function shader or alpha testing.

Properties {
	_Angle ("Angle", Range(0, 3.14159265358979)) = 1
	_ArtifactCorrection ("Artifact Correction", Float) = 1
	_Color ("Main Color (A=Opacity)", Color) = (.5,.5,.5, 1)
	_MainTex ("RGBA Texture  UV Transform)", 2D) = ""
}

SubShader {
	Tags {"Queue"="Overlay"}
	ZWrite Off
	Blend SrcAlpha OneMinusSrcAlpha
	Pass {
		GLSLPROGRAM
		varying mediump vec3 rotation;
		varying mediump vec2 uv, negative1to1;
		
		#ifdef VERTEX
		uniform mediump mat4 _Object2World;
		uniform mediump vec4 _MainTex_ST;
		uniform mediump float _Angle, _ArtifactCorrection;
		void main() {
			gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
			uv = gl_MultiTexCoord0.xy;
			negative1to1 = gl_MultiTexCoord0.xy * _MainTex_ST.xy + _MainTex_ST.zw;
			rotation.xy = vec2(sin(_Angle), cos(_Angle));
			rotation.z = rotation.y;
			rotation.xy *= _ArtifactCorrection;
		}
		#endif
			
		#ifdef FRAGMENT
		uniform lowp sampler2D _MainTex;
		uniform lowp vec4 _Color;
		void main() {
			lowp vec4 fragColor = texture2D(_MainTex, uv) * _Color;
			fragColor.a *= float(
				dot(normalize(negative1to1), rotation.xy) < rotation.z
			);
			gl_FragColor = fragColor;
		}
		#endif		
		ENDGLSL
	}
}