先看效果,制作版本:unity2019.4.2
制作2D图片效果,不需要用到光照信息,所以创建ShaderGraph时选用Unlit Graph。
图片一般都会有透明通道,记得修改Unlit Master的Surface为Transparent。
要实现此效果主要思路
- 扭曲效果基本是通过UV的偏移达到效果的,偏移要随机化才能达到扭曲,可使用噪声Noise来实现随机化。
- 要能有动起来的效果,要用到Time,随时间进行变化。
参数定义
效果有用到图片,扭曲有速度控制和偏移的量值,故定义3个变量。一个Texture2D和2个Vector1。
UGUI中的Image中已经有贴图,所以想要我们的Shader能依赖到Image的贴图,需要定义的Texture2D的Reference名称为_MainTex,默认图片Shader为此名称。
显示图片
红色圈中部分是顶点颜色,在UGUI中的Image里的color对应此处。最终颜色是颜色的混合,采用乘法得到。(颜色值数值范围为0-1,混合不是用加法)
随机偏移
随机使用节点SimpleNoise(Scale越大,随机粒度越精细),通过当前UV采集到偏移量,传入到offset中,即可。注:Graph中提供了Tiling And Offset进行处理,不需要自己再进行拼接。
现在会发现波动的时候往一个方向偏移,不是原始位置为中心偏移,这是因为图片颜色值为0-1,数值总是为正的,需要将偏移值转为正负变化的。
转换【0,1】区间到【-1,1】区间,只需要使用公式2x-1,即可达到目的
时间变化与最终效果
现在偏移不会随时间变化,加上时间值和速度控制,这样最终效果就完成了。
展望
本效果基本能满足一些特效上的要求,但也有一些可以改进的。
1、UV的移动方向是固定的,不能变化
2、波动偏移时两轴数值是一样的,可以做一些变化
3、可以只偏移某一部分区域,达到更炫的效果