shader技能CD效果

最新推荐文章于 2023-12-27 23:07:19 发布

原创最新推荐文章于 2023-12-27 23:07:19 发布 · 511 阅读

2 ·

CC 4.0 BY-SA版权

Unity中的Shader效果专栏收录该内容

25 篇文章

订阅专栏

这篇博客详细介绍了如何通过Shader创建一个技能冷却效果，包括裁剪为圆形图片、设置旋转和控制透明度，并提供了相关代码示例。核心是利用Shader进行角度控制来实现CD遮罩的明暗变化，同时讲解了remap函数的应用。

技能冷却效果，不用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;
}

函数模型图形化表达
感觉还可以，请点赞！谢谢。