圆形进度条的简单制作

【图1】【图2】

【图片素材】

1.可以有两种思路（这里只提这两种^ _ ^）

A.从组件出发，修改UGUI中的组件比较方便下手的就是<滑块>组件

因为<滑块>自带背景内容与填充内容所以改起来十分容易，还有一点就是其自带了进度值设置代码调用起来就十分方便

UGUI中的<滑块>结构

背景内容 - 可设计为圆形进度条的背景

填充填充内容 - 其可根据<Slider>的进度值改变其Image在背景中的大小所以可设计为圆形进度条的前景

【步骤】

1.更改背景的图片

2.更改填写的图片并更改其类型为填充的

扫描二维码关注公众号，回复： 5019501 查看本文章

3.删除不需要的Handle Slide Area及其子内容

【效果】

实现效果如图1所示使用起来和<滑块>方式相同

[Tip]
    Handle Slide Area 就不需要了可以删除，其包含Slider的手柄内容本目标不需要

    Image Type是<Image>组件的属性决定了图片的显示类型，而要制作圆形的进度条效果就需要选择
Filled（填充类型）并将其填充模式改为Radial 360(线轮360)
 
    如果最后实现的转动方向与你的不相同可更改<Image>组件的Fill Origin(填充方向，只在Filled类型中生
效)

    想要实现颜色过度的话使用Color.Lerp()即可

B.从图形出发，利用着色器写一个简易的动态图层（优点是良好）

不说话直接上代码，效果如图二，使用方法就是着色器做材质球使用

Shader "Shader Forge/Basics" {
    Properties {
        _node_3453 ("node_3453", Color) = (1,0,0,1)
        _node_827 ("node_827", Color) = (0.07586192,1,0,1)
        _Health ("Health", Range(0, 1)) = 0.7863248
        [HideInInspector]_Cutoff ("Alpha cutoff", Range(0,1)) = 0.5
    }
    SubShader {
        Tags {
            "Queue"="AlphaTest"
            "RenderType"="TransparentCutout"
        }
        Pass {
            Name "FORWARD"
            Tags {
                "LightMode"="ForwardBase"
            }
            
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #define UNITY_PASS_FORWARDBASE
            #include "UnityCG.cginc"
            #pragma multi_compile_fwdbase_fullshadows
            #pragma multi_compile_fog
            #pragma only_renderers d3d9 d3d11 glcore gles 
            #pragma target 3.0
            uniform float4 _node_3453;
            uniform float4 _node_827;
            uniform float _Health;
            struct VertexInput {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float2 texcoord0 : TEXCOORD0;
            };
            struct VertexOutput {
                float4 pos : SV_POSITION;
                float2 uv0 : TEXCOORD0;
                float3 normalDir : TEXCOORD1;
                float3 tangentDir : TEXCOORD2;
                float3 bitangentDir : TEXCOORD3;
                UNITY_FOG_COORDS(4)
            };
            VertexOutput vert (VertexInput v) {
                VertexOutput o = (VertexOutput)0;
                o.uv0 = v.texcoord0;
                o.normalDir = UnityObjectToWorldNormal(v.normal);
                o.tangentDir = normalize( mul( unity_ObjectToWorld, float4( v.tangent.xyz, 0.0 ) ).xyz );
                o.bitangentDir = normalize(cross(o.normalDir, o.tangentDir) * v.tangent.w);
                o.pos = UnityObjectToClipPos( v.vertex );
                UNITY_TRANSFER_FOG(o,o.pos);
                return o;
            }
            float4 frag(VertexOutput i) : COLOR {
                i.normalDir = normalize(i.normalDir);
                float3x3 tangentTransform = float3x3( i.tangentDir, i.bitangentDir, i.normalDir);
                float3 node_8874 = lerp(_node_3453.rgb,_node_827.rgb,_Health);
                float3 normalLocal = node_8874;
                float3 normalDirection = normalize(mul( normalLocal, tangentTransform )); // Perturbed normals
                float2 node_9814 = (i.uv0*2.0+-1.0);
                float2 node_8562 = node_9814.rg;
                float node_5755 = ((atan2(node_8562.r,node_8562.g)/6.28318530718)+0.5);
                float node_8087 = (1.0 - ceil((((1.0 - node_5755)*-1.0+1.0)-_Health)));
                float node_1879 = length(node_9814);
                clip((node_8087*floor((0.3+node_1879))*(1.0 - floor(node_1879))) - 0.5);
////// Lighting:
////// Emissive:
                float3 emissive = node_8874;
                float3 finalColor = emissive;
                fixed4 finalRGBA = fixed4(finalColor,1);
                UNITY_APPLY_FOG(i.fogCoord, finalRGBA);
                return finalRGBA;
            }
            ENDCG
        }
        Pass {
            Name "ShadowCaster"
            Tags {
                "LightMode"="ShadowCaster"
            }
            Offset 1, 1
            Cull Back
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #define UNITY_PASS_SHADOWCASTER
            #include "UnityCG.cginc"
            #include "Lighting.cginc"
            #pragma fragmentoption ARB_precision_hint_fastest
            #pragma multi_compile_shadowcaster
            #pragma multi_compile_fog
            #pragma only_renderers d3d9 d3d11 glcore gles 
            #pragma target 3.0
            uniform float _Health;
            struct VertexInput {
                float4 vertex : POSITION;
                float2 texcoord0 : TEXCOORD0;
            };
            struct VertexOutput {
                V2F_SHADOW_CASTER;
                float2 uv0 : TEXCOORD1;
            };
            VertexOutput vert (VertexInput v) {
                VertexOutput o = (VertexOutput)0;
                o.uv0 = v.texcoord0;
                o.pos = UnityObjectToClipPos( v.vertex );
                TRANSFER_SHADOW_CASTER(o)
                return o;
            }
            float4 frag(VertexOutput i) : COLOR {
                float2 node_9814 = (i.uv0*2.0+-1.0);
                float2 node_8562 = node_9814.rg;
                float node_5755 = ((atan2(node_8562.r,node_8562.g)/6.28318530718)+0.5);
                float node_8087 = (1.0 - ceil((((1.0 - node_5755)*-1.0+1.0)-_Health)));
                float node_1879 = length(node_9814);
                clip((node_8087*floor((0.3+node_1879))*(1.0 - floor(node_1879))) - 0.5);
                SHADOW_CASTER_FRAGMENT(i)
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
    CustomEditor "ShaderForgeMaterialInspector"
}

这段代码是用Shader Forge生成的但不影响理解

UGUI_Tools_圆形进度条

圆形进度条的简单制作

猜你喜欢