unity制作曲线进度条
大家好，我是阿赵。
在使用Unity引擎做进度条的时候，有时会遇到一个问题，如果进度条不是简单的横向、纵向或者圆形，而是任意的不规则形状，那该怎么办呢？比如这样的：
一、制作方法
1、准备的素材
这个进度条的原理很简单，我们需要一张跟随这路径变化灰度的图片。这张图片大概是这样的：
我这里使用了RGB通道作为灰度，然后Alpha通道作为显示范围。结合在一起，在Unity里面会是这样的一张图：
当然，图片也有另外的做法，比如我们想在进度条上显示一些渐变色或者纹理，可以把图片的RGB通道作为纹理图片，然后Alpha通道作为灰度变化也是可以的，毕竟灰度变化其实只用一个通道就够，没必要用RGB三个通道。
2、计算过程
目的：
1.可以使用在UI上
2.通过Image的图片作为输入
3.通过Image的颜色的RGB通道作为进度条的颜色
4.通过Image的颜色的A通道作为进度条显示的进度控制
颜色的计算很简单，直接获取顶点色的RGB就可以了。如果觉得纯颜色的RGB不好看，也可以再另外做一张有颜色的图片作为显示用。
接下来是遮罩进度条的效果。因为这里我直接用了图片的RGB色的灰度渐变，所以我先取了一个RGB的灰度。如果像上面说的，RGB颜色想自己做一个有图案的进度条图片，那么其实这个进度的也可以不用RGB色，而改用图片的Alpha通道作为灰度也是可以的。
不论怎样，获得了一个图片的灰度值，然后输入一个想控制进度的值，用这个值和灰度值做减法，再用Step函数控制显示的范围。如果想过渡的地方有一个渐变的效果，可以使用SmoothStep函数。由于灰度是沿着路径渐变的，当输入的值变化时，显示范围就会沿着灰度路径而变化了。
最后，把Step的结果作为显示的Alpha值，结合需要显示的RGB颜色，就能得到进度条最终的显示颜色和范围了。
3、灰度渐变图的制作
这个方法的难点不在于shader的编写，而在于素材的制作。
我这里是用3D的方式来制作这个图片的，首先建一个面片，把它的横向段数设置到1000。
然后展UV，面片的最左边的u坐标是0，最右边的u坐标是1。然后做一张从左到右的渐变图。把渐变图赋予给面片。
最后通过路径变形，把面片沿着路径拉伸，得到了形状。
最后，把这个模型渲染出来，就得到了上面的渐变灰度图了。
这样做，勉强能得到一个分布均匀的灰度图，但并不是100%准确。如果想得到一个完全匹配百分比的变化的灰度图，比如在进度条上画上刻度，然后想输入什么百分比，图片的灰度刚好到达那个百分比，那还要想别的办法去做这张图。
三、Shader源码
Shader "azhao/CurveProgress"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {
}
_Color ("Tint", Color) = (1,1,1,1)
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255
_ColorMask ("Color Mask", Float) = 15
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
_min("min", Range( -1 , 1)) = 0
_max("max", Range( 0 , 1)) = 1
[HideInInspector] _texcoord( "", 2D ) = "white" {
}
}
SubShader
{
LOD 0
Tags {
"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" }
Stencil
{
Ref [_Stencil]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
CompFront [_StencilComp]
PassFront [_StencilOp]
FailFront Keep
ZFailFront Keep
CompBack Always
PassBack Keep
FailBack Keep
ZFailBack Keep
}
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask [_ColorMask]
Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 3.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile __ UNITY_UI_CLIP_RECT
#pragma multi_compile __ UNITY_UI_ALPHACLIP
#define ASE_NEEDS_FRAG_COLOR
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
half2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
UNITY_VERTEX_INPUT_INSTANCE_ID
UNITY_VERTEX_OUTPUT_STEREO
};
uniform fixed4 _Color;
uniform fixed4 _TextureSampleAdd;
uniform float4 _ClipRect;
uniform sampler2D _MainTex;
uniform float4 _MainTex_ST;
uniform float _min;
uniform float _max;
v2f vert( appdata_t IN )
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID( IN );
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
UNITY_TRANSFER_INSTANCE_ID(IN, OUT);
OUT.worldPosition = IN.vertex;
OUT.worldPosition.xyz += float3( 0, 0, 0 ) ;
OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
OUT.texcoord = IN.texcoord;
OUT.color = IN.color * _Color;
return OUT;
}
fixed4 frag(v2f IN ) : SV_Target
{
float2 uv_MainTex = IN.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
float4 tex2DNode1 = tex2D( _MainTex, uv_MainTex );
float grayVal = Luminance(tex2DNode1.rgb);
float remapVal = ( grayVal - ( 1.0 - (0.0 + (( IN.color.a + 0.01 ) - 0.0) * (( _max + 1.0 ) - 0.0) / (1.0 - 0.0)) ) );
float smoothstepVal = smoothstep( _min , _max , remapVal);
float4 color = (float4(IN.color.r , IN.color.g , IN.color.b , ( tex2DNode1.a * smoothstepVal )));
#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#endif
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
return color;
}
ENDCG
}
}
}