第一步，我們需要先準備好一張弧形素材圖片資源：

第二步，把該資源在unity中按照如下設定：

第三步，在unity中建立一個image，並且把資源拖給該image，就變為如下所示

需要注意點選一下set native size，圖片才會顯示真實大小

第四步，給該圖片新增一個材質，並給該材質新增一個帶透明通道的著色器，為此我們需要動手寫一個著色器

附上shaoder：

第二步，在unity中建立一個image，並且把
Shader "Custom/CircleBar" {
Properties {
_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
_Percentage("show the percentage", Range (0, 3.1416)) = 1 //傳進來角度
}


SubShader {
Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
LOD 100

ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha 

Pass {  
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"


struct appdata_t {
float4 vertex : POSITION;
float2 texcoord : TEXCOORD0;
};


struct v2f {
float4 vertex : SV_POSITION;
half2 texcoord : TEXCOORD0;
};


sampler2D _MainTex;
float4 _MainTex_ST;
float _Percentage;

v2f vert (appdata_t v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
return o;
}

fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.texcoord);
//col.a = col.a*ceil(_Percentage - i.texcoord.y);
//夾角
float jiaojiaoCos = dot(float2(i.texcoord.x - 0.5f, i.texcoord.y - 0.5f)/sqrt(pow(i.texcoord.x - 0.5f, 2) + pow(i.texcoord.y - 0.5f, 2)), float2(0, -1));
float jiajiao = acos(jiaojiaoCos);
col.a = col.a*ceil(saturate(_Percentage - jiajiao));
//if (jiajiao > _Percentage)
//{
//col.a = 0;
//}
return col;
}
ENDCG
}
}
FallBack "Diffuse"
}，

最終效果如下：

通過修改
show the percentage值，更改血量顯示