Unity UGUI 等宽血条分隔符的制作(使用Shader)

前言：

最近需要做血条分隔符，就是在MOBA游戏里常见的那种。在网上搜索了一下，只搜到使用Raw Image来制作的方法，比如：https://blog.csdn.net/qq992817263/article/details/52871866。这种是通过RawImage的Tilling来实现血条的分段。

这里有 两个问题，一个是RawImage不好用，另一个就是这样分段之后在不同数量下，血条的格子的粗细也会跟着改变。就如刚才提到的博客的效果图：

可以看到，最上面的血条是最粗的，最下面的格子最多的是最细的。所以用这种方法来制作血条，这样的情况就几乎无法避免了。如果设计的血条就比较细，那么在血条较少的时候就会看到明显的不同。为了 制作等宽的血条，所以我打算写一个简单的Shader来制作这个血条分隔符。

 

正文：

目标效果如下：

原理就是一张黑色的图片，在需要画黑线的地方给他 显示出来，其他地方透明即可。原理十分简单，核心部分的Shader代码如下：

			sampler2D _MainTex;
			int PerSplitWidth;
			float Width;
			half4 SplitColor;

			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				float x = i.uv.x * 100;
				if (x%PerSplitWidth < Width)
				{
					col = SplitColor;
				}
				else
				{
					col = 0;
				}
				return col;
			}

最后调整格子与格子之间的间隔就能控制 血条了。具体代码还可以更多优化一些，因为这样写实际上在运算的时候要特别注意两头的格子，时有时无的。

最后附上完整代码：

Shader "UI/LifeBarSplit"
{
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}
		PerSplitWidth("分割宽度：",int) = 10
		Width("宽度：",float) = 3
		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 Width;
			half4 SplitColor;

			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				float x = i.uv.x * 100;
				if (x%PerSplitWidth < Width)
				{
					col = SplitColor;
				}
				else
				{
					col = 0;
				}
				return col;
			}
			ENDCG
		}
	}
}

 

 

 

后记：

警告：这样写必须给每个血条分隔赋值一个新的材质球，会导致不能合批！所以要谨慎……

这个Shader的写法的前提是血条分隔的图片是一张单图的Sprite，实际上项目中出于各种考虑，需要使用图集。在图集中的uv就 不是0~1了，在运算上就需要提前告知Sprite的uv范围才可以。

不过可以先就这样实现了先。