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