Unreal Engine 4 —— 冷却UI的制作

这篇博客介绍了如何使用Unreal Engine 4的材质编辑器中制作通常游戏中的技能冷却的UI。

该UI材质通常用于直接蒙在对应的技能图标之上,接收一个浮点参数Percentage,用于表现其冷却情况,1表示冷却完毕,0表示开始冷却。

材质效果

左、中、右分别的Percentage分别为0.2,0.4,0.9.

Unreal Engine 4 —— 冷却UI的制作_第1张图片

材质说明

VectorToRadialValue

这个材质中使用到VectorToRadialValue这个材质函数,该函数接收一个float2向量,输出这个向量在二维径向坐标中的表示。

因此这里可以将TexCoord - 0.5作为参数输入这个函数,可以得到的值如下:

Unreal Engine 4 —— 冷却UI的制作_第2张图片

看来是我们想要的,但是角度不对,因此再加上CustomRotator对坐标进行预操作:

Unreal Engine 4 —— 冷却UI的制作_第3张图片

有了这样的值后就很容易进行功能的实现了。我这里将其封装为CoolDownUI函数,可供其他材质调用。

CoolDownUI函数如下:

Unreal Engine 4 —— 冷却UI的制作_第4张图片

Color为蒙在技能栏上那一层的颜色,这里取了灰色。

这样一来,对应的UI材质为:

Unreal Engine 4 —— 冷却UI的制作_第5张图片

值得一提的是:

Percentage由于进行了浮点操作,所以如果直接取1的话往往会有一些误差,因此往往将冷却完毕的值设定为略大于1,我这里取了1.05。

<全文完>

你可能感兴趣的:(游戏,UI,Engine,Unreal,UE4)