Unity制作曲线进度条

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 0Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" }Stencil{Ref [_Stencil]ReadMask [_StencilReadMask]WriteMask [_StencilWriteMask]CompFront [_StencilComp]PassFront [_StencilOp]FailFront KeepZFailFront KeepCompBack AlwaysPassBack KeepFailBack KeepZFailBack Keep}Cull OffLighting OffZWrite OffZTest [unity_GUIZTestMode]Blend SrcAlpha OneMinusSrcAlphaColorMask [_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_COLORstruct 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_IDUNITY_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_RECTcolor.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);#endif#ifdef UNITY_UI_ALPHACLIPclip (color.a - 0.001);#endifreturn color;}ENDCG}}}