用ShaderGraph制作一个加载水球
把这个效果用在游戏上也是一种不错的动效呢~(其实就是想做)
一、准备工作
首先请使用2019.1以上的Unity版本并新建URP项目。
在Project面板右键新建Sprite Unlit Graph。
在新建的ShaderGraph上右键新建材质球,并将该材质球拖动到一个新的Image上,就可以得到一个引用了该Shader的UI图片了。
二、制作过程
可以看到除了表面的百分比是直接用了UI的Text之外(这个最后自己加),有底面白色,中间浅一点的蓝色,和最前面的蓝色三部分,形状上是一个圆圈两个波浪。
显然我们需要三种颜色节点,把他们分别和形状相乘。
而圆圈是很好实现的,使用Procedural>Shape>Ellipse节点可以得到一个可以控制宽高的圆形,将他输出设置为透明度,也就是实际上只是把非圆形的区域设置为透明,这样就可以得到一个圆了。
波浪的形状需要一点骚操作,他需要UV和噪声图的协同合作。
我们只需取UV的G通道(Preview用于展示当前的效果,可以自己把不同通道显示出来看看),这是一个纵向渐变的通道。
再用老办法Time+TilingAndOffset让SimpleNoise的UV动起来,记得把SimpleNoise的Scale调小,他看起来像是一团移动的雾。
最后用经典的Step节点将前面两个结果互相比较输出0or1,就可以得到波浪,为了让波浪的幅度不要太大,用Remap对数值进行重定向(对值限制区间)。
我使用了一个公开变量用于控制水面,因为是作为CD使用,所以值的范围是0到1,再用Remap重定向为正确的数值以控制。
想要实现多层波浪的方法很多,我是先对上面得到的这个带有波浪的图添加颜色。
利用这个黑白的图片上的数值只有1和0的特点,分别将1和0的位置赋值为不同的颜色,但是显然Shader中是没有if的,我们用Lerp来做出IF的效果:
欸?你发现了吗,因为波浪黑白图是0和1组成的,所以当这个波浪彩色图和一个波浪黑白图相乘,波浪黑白图中为1的位置就还是原来的(r,g,b,a),而数据为0的位置就会变成(0,0,0,0)。
我们只需要将原本用来生成波浪黑白图的节点复制粘贴,加上一些偏移就可以得到一张新的波浪图,这样两个波浪之间就会有高低差。
用同样的原理,对透明度赋值。
但是小球的头顶凉凉的,比较容易感冒,得把帽子戴上,所以我将黑白波浪图和圆形图相乘,又将1重定向为0,0反之。得到了图的背景区域,再给他点颜色看看,加上之前已经对透明度进行过设置,就出现了右下角的效果。
点击左上角的Save Asset,添加一个Text,写一个控制Value的脚本。
public class BallCDController : MonoBehaviour
{
[Range(0,1)]
public float value;
public Text text;
private Material material;
void Start()
{
material = gameObject.GetComponent().material;
}
void Update()
{
text.text = value*100 + “%”;
material.SetFloat("_Value", value);
}
}
就可以打开动图录制软件录给朋友看看了。
我还制作了一个立体版的水球,比较适合立体画风【废话】,需要在上面的扁平水球的基础上加层层特效,比较繁琐,感兴趣下载我的项目看看吧~
链接:https://pan.baidu.com/s/1lrvyditlQg7qvT5qHGdwEg
提取码:br0u
一直以来我的文章都是尽可能简单易懂希望能真正帮助到读者,希望在看我文章的你有兴趣一定要去尝试自己做一下,这样才能体会到真正的乐趣,注意到更多的细节。也欢迎更多的小伙伴加入我们,一起学习进步。