Shader Graph制作2D Sprite溶解

一、制作原理

通过Gradient Noise节点(Perlin噪点)Shader Graph制作2D Sprite溶解减去从0~1的小数,噪点随被减数的增加黑斑会越来越大最后全部减为0Shader Graph制作2D Sprite溶解。将纹理进行Step处理Shader Graph制作2D Sprite溶解(更加锐利)再与原本纹理相乘得到消除效果Shader Graph制作2D Sprite溶解

二、制作流程

上述所说最后得到的是黑色底图。但是溶解应该是纹理透明,因此要控制Shader Graph制作2D Sprite溶解这两个输出。

AlphaClipThreshold是低于输入值的将显示透明。Alpha是当前的Alpha值。因此,根据上述原理,AlphaClipThreshold里输入逐渐增大的可视范围,Alpha直接输入处理过的噪点图即可使纹理逐渐消失。

首先将原图纹理的A通道反色,获取到纹理的透明区域Shader Graph制作2D Sprite溶解,然后用得到的值加上不断增大的0~1小数。Shader Graph制作2D Sprite溶解这样就会得到一个透明区域一直全白,纹理区域逐渐增大为1的动态纹理图。将此结果连入AlphaClipThreshold即可。

 

如果想要溶解边缘颜色,将Alpha改为噪点图,再将处理过的噪点图增加边缘和颜色相加,并与原图纹理的A通道相乘获得一个非透明区域带颜色的溶解图,再将此纹理和原图纹理相乘即可。Shader Graph制作2D Sprite溶解

 

我分别写了5个参数分别控制纹理,溶解的噪点大小,溶解颜色,溶解边缘大小,溶解速度。整体如下:

Shader Graph制作2D Sprite溶解

Shader Graph制作2D Sprite溶解

Shader Graph制作2D Sprite溶解

三、注意事项

溶解的颜色由于是和纹理色相乘,所以得到的颜色是叠加色。如何显示选择颜色的本色,暂时还不知道怎么解决。

 

由于本人也是刚开始使用Shader Graph,写这些只是为了能让自己更加巩固Shader Graph的用法,所以有些地方可能会出错,如果你有更好的方法或者我有什么错误,请帮忙指正,万分感谢。

 

================================================================================================

参考官方例子以后,发现这样的效果最好。

Shader Graph制作2D Sprite溶解