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
        }
    }
}