unity实战 UGUI英雄联盟英雄头顶分段式血条

需求：目标是实现英雄头顶ui的分段式显示，就是粗细线表示玩家的血量，粗线表示1000血，细线表示200血，类似这种

实战：最后的解决方案参考了该博客https://blog.csdn.net/cyf649669121/article/details/82117638

在此之上进行了改动，加上了粗线配置。使用shader画线的方式

需要注意的点：

1.uv坐标扩大倍数比较准确

2.shader所在的ui transform的width要10的倍数，不然会出现粗细不一致的问题

3.此shader没法合图，还会打断其他合批，尽量少用，效果是可以的。

直接贴代码：部分代码手打初版，可能有报错。

 1 Shader "UI/LifeBarSplit"
 2 {
 3     Properties
 4     {
 5         _MainTex("Texture", 2D) = "white" {}
 6         PerSplitWidth("分割宽度：",int) = 10
 7         smallWidth("细宽度：",float) = 1
 8         wideWidth("粗宽度：",float) = 2
 9         SplitColor("分隔条颜色",Color)=(0,0,0,1)
10     }
11     SubShader
12     {
13         // No culling or depth
14         Cull Off
15         ZWrite Off
16         ZTest Off
17         Blend SrcAlpha OneMinusSrcAlpha
18  
19         Tags
20     {
21         "Queue" = "Transparent"
22         "IgnoreProjector" = "True"
23         "RenderType" = "Transparent"
24         "PreviewType" = "Plane"
25         "CanUseSpriteAtlas" = "True"
26     }
27  
28  
29         Pass
30         {
31             CGPROGRAM
32             #pragma vertex vert
33             #pragma fragment frag
34             
35             #include "UnityCG.cginc"
36  
37             struct appdata
38             {
39                 float4 vertex : POSITION;
40                 float2 uv : TEXCOORD0;
41             };
42  
43             struct v2f
44             {
45                 float2 uv : TEXCOORD0;
46                 float4 vertex : SV_POSITION;
47             };
48  
49             v2f vert (appdata v)
50             {
51                 v2f o;
52                 o.vertex = UnityObjectToClipPos(v.vertex);
53                 o.uv = v.uv;
54                 return o;
55             }
56             
57             sampler2D _MainTex;
58             int PerSplitWidth;
59             float smallWidth;
60             float wideWidth;
61             half4 SplitColor;
62  
63             fixed4 frag (v2f i) : SV_Target
64             {
65                 fixed4 col = tex2D(_MainTex, i.uv);
66                 float x = i.uv.x * 1000; // 整条长度1000
67                 float y = i.uv.y * 1000;
68                 float ins = x/PerSplitWidth;
69     
70                 if (ins % 5 ==0)
71                 {
72                     if ((ins == 0 || ins == PerSplitWidth)||(x%PerSplitWidth >= wideWidth))
73                     {    
74                         col = 0;
75                     }
76                      else
77                     {    
78                         col = SplitColor;
79                     }
80                 }
81                 else
82                 {
83                     if ((y >400 && (x%PerSplitWidth < smallWidth))//400/1000是指y轴只保留40%
84                     {    
85                         col = SplitColor;
86                      }
87                      else
88                      {    
89                         col = 0;
90                      }
91                 }
92                 return col;
93             }
94             ENDCG
95         }
96     }
97 }
98                        

 

转载于:https://www.cnblogs.com/leilei-weapon/p/10338849.html