unity實戰 UGUI英雄聯盟英雄頭頂分段式血條

需求：目標是實現英雄頭頂ui的分段式顯示，就是粗細線表示玩家的血量，粗線表示1000血，細線表示200血，類似這種

實戰：最后的解決方案參考了該博客https://blog.csdn.net/cyf649669121/article/details/82117638

在此之上進行了改動，加上了粗線配置。使用shader畫線的方式

需要注意的點：

1.uv坐標擴大倍數比較准確

2.shader所在的ui transform的width要10的倍數，不然會出現粗細不一致的問題

3.此shader沒法合圖，還會打斷其他合批，盡量少用，效果是可以的。

直接貼代碼：部分代碼手打初版，可能有報錯。

Shader "UI/LifeBarSplit"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        PerSplitWidth("分割寬度：",int) = 10
        smallWidth("細寬度：",float) = 1
        wideWidth("粗寬度：",float) = 2
        SplitColor("分隔條顏色",Color)=(0,0,0,1)
    }
    SubShader
    {
        // No culling or depth
        Cull Off
        ZWrite Off
        ZTest Off
        Blend SrcAlpha OneMinusSrcAlpha
 
        Tags
    {
        "Queue" = "Transparent"
        "IgnoreProjector" = "True"
        "RenderType" = "Transparent"
        "PreviewType" = "Plane"
        "CanUseSpriteAtlas" = "True"
    }
 
 
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
 
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
 
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }
            
            sampler2D _MainTex;
            int PerSplitWidth;
            float smallWidth;
            float wideWidth;
            half4 SplitColor;
 
            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                float x = i.uv.x * 1000; // 整條長度1000
                float y = i.uv.y * 1000;
                float ins = x/PerSplitWidth;
    
                if (ins % 5 ==0)
                {
                    if ((ins == 0 || ins == PerSplitWidth)||(x%PerSplitWidth >= wideWidth))
                    {    
                        col = 0;
                    }
                     else
                    {    
                        col = SplitColor;
                    }
                }
                else
                {
                    if ((y >400 && (x%PerSplitWidth < smallWidth))//400/1000是指y軸只保留40%
                    {    
                        col = SplitColor;
                     }
                     else
                     {    
                        col = 0;
                     }
                }
                return col;
            }
            ENDCG
        }
    }
}