技能冷却效果,不用UGUI或者NGUI自带的filling效果,直接通过一个shader,一张技能图来控制
效果分析:
(1)裁剪为圆形图片 圆形遮罩。 图片大小2的n次方(POT,在不同的平台下格式不同:要求被4整除ETC1,ASTC),正常来讲是方图,在shader中切成圆形
(2)确定圆心 和 旋转。旋转的控制方式:通过夹角的大小来控制,或者tan角度来控制
(2.5)通过角度 控制 cd遮罩的明暗变化!!!!!!!!
(3)黑色遮罩的透明度。
(4)技能图 * 圆形遮罩* cd遮罩 = 》 最终颜色
代码如下:
Shader "Unlit/SkillCD"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_progress("_progress",Range(0,1)) = 0.5
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 pos : SV_POSITION;
};
sampler2D _MainTex;
float _progress;
v2f vert (appdata v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
float2 centerUV = i.uv.xy * float2(1,1) - float2(0.5,0.5);
float cir = frac(length(centerUV) * 5);
float circleMask = smoothstep(0.0,0.5,(1.0 - (length(centerUV) * 2.0)));
// 裁剪为圆形
clip(circleMask - 0.5);
float deg = atan2(centerUV.x,(centerUV.y * -1));
// deg 的值 [-PI,PI] 将其remap到 (0,1)
deg = (0 + (deg - -3.18)*(1-0) / (3.1415926 - -3.18 ));
float cdMask = smoothstep(0,0.002,deg -(1-_progress));
// 太黑了,将(0,1) remap到 (0,0.3)
cdMask = (0.3 + (cdMask - 0) * (1-0.3)/(1-0));
float4 rawColor = tex2D(_MainTex, i.uv);
fixed4 col = rawColor * (circleMask * cdMask);
// 如果有哪一步不明白,请 return fixed4(这个参数的颜色),看效果
// 例如 return fixed4(deg.xxxx)
return col;
}
ENDCG
}
}
}
这里说一下remap函数吧:
//将x 从(t1,t2)映射到(s1,s2)的范围
float remap(t1,t2,s1,s2,x)
{
return (x-t1/t2-t1) * (s2-s1) + s1;
}
函数模型图形化表达
感觉还可以,请点赞! 谢谢。