UE4动态UI血条栏制作（上）
发表于2017-01-06
制作动态血条栏，首先需要准备两张图片，如下图所示：
第一张图是用来做一个胶囊体的血槽的通道图，第二张图是为了让血条动起来用的。
一、材质的制作
1），把两张图片导入到UE4中，然后右键新建材质，如图：
2）打开该材质，选中刚刚导入的两张图片，拖入到材质蓝图中，如图：
3）更改材质的相对应的模式，改为遮罩和无灯光，如下图：
然后我们可以看到，材质就只有了四个选项，我们此次只用到前两个，也就是自发光和通道。
4）新建一个纯红色，然后与第二材质图混合相乘，得出红色的纹理，如下图：
5）按住P键点击鼠标，添加一个Panner组件，该组件的作用是让UV贴图进行循环移动，左边的参数设置控制移动的方向和速度，这样子我们的红色血纹理就可以移动了。如下图：
6）再添加一个TexCoord的组件，该组件是控制贴图的大小，如下图，参数越大，UV贴图越小。
7）然后把我们刚刚做好的复制三份，分别修改三份的Panner和TexCoord的参数，都调小一点，使这三个不同，然后再混合相加，这样子看起来就有了立体的效果。如下图：
8）添加一个暗红的底色，与刚刚做好的效果叠加，这样就有了滚动血液的特效了，如下图：
二、控制血量
1）用一个数的0到1来控制血量，控制线性UV的显示，如下图所示：
2）然后我们做一个边界，实际上就是血槽再减去一点点，然后反向，把相交的那条线取出来改变一下颜色，所以我们要再复制一个血量的控制。如图：
3）然后混合上纹理与通道，再加一个边界的颜色，效果以及实现过程如下图所示：
自此，我们的材质就算是做好了。