image加载图片 ui unity_用ShaderGraph制作一个加载水球

哈喽大家好我是yumir。

经常看到这种扁平风的加载球。

把这个效果用在游戏上也是一种不错的动效呢~（其实就是想做）

一、准备工作

首先请使用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<Image>().material;
    }
    void Update()
    {
        text.text = value*100 + "%";
        material.SetFloat("_Value", value);
    }
}

就可以打开动图录制软件录给朋友看看了。

我还制作了一个立体版的水球，比较适合立体画风【废话】，需要在上面的扁平水球的基础上加层层特效，比较繁琐，感兴趣下载我的项目看看吧~

链接：https://pan.baidu.com/s/1lrvyditlQg7qvT5qHGdwEg

提取码：br0u

一直以来我的文章都是尽可能简单易懂希望能真正帮助到读者，希望在看我文章的你有兴趣一定要去尝试自己做一下，这样才能体会到真正的乐趣，注意到更多的细节。也欢迎更多的小伙伴加入我们，一起学习进步。

——分割线——

欢迎加入游戏开发群欢乐搅基：1082025059

对游戏开发感兴趣的童鞋可戳这里进一步了解：http://www.levelpp.com/