软件网站是怎么做的,杭州软件开发公司排名,上海做淘宝网站设计,景征网站建设unity制作曲线进度条 大家好#xff0c;我是阿赵。 在使用Unity引擎做进度条的时候#xff0c;有时会遇到一个问题#xff0c;如果进度条不是简单的横向、纵向或者圆形#xff0c;而是任意的不规则形状#xff0c;那该怎么办呢#xff1f;比如这样的#xff1a;
一… 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 { QueueTransparent IgnoreProjectorTrue RenderTypeTransparent PreviewTypePlane CanUseSpriteAtlasTrue }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 DefaultCGPROGRAM#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}}}
