使用UnityShader实现图片沿中心缩放的功能(附UE4中的3种实现方法)
原理
在网上搜了一下贴图沿中心缩放的代码,发现并没有,自己研究了一下午,最后得出了结论
对原理不感兴趣的同学可以直接跳到第二部分的shader实现上,下面讲原理部分
首先,在Unity中创建一个Cube,一个Standard模式的Material,然后导入我下面这张用PS制作的测试图(中心稍微有一丢丢对不齐,不过用于测试足够了)
把图片赋给新建材质的Albedo上,然后把材质赋给新建的Cube,如下图所示
接下来进行几组UV的缩放和平移的测试
默认情况下,Tiling值都是(1,1),而Offset是(0,0),如下图所示
先试试将Tiling值调为大于1的情况
将Tiling逐渐调为2(Tiling为(2,2)时,如下图所示),可以看到图片在沿着左下角进行缩小,最后图片变成2x2的形式
但这不是我们要的效果,接着进行Offset的调整,使左下角的图案移动到正中心
移动完成后,会发现Offset的数值为(-0.5,-0.5)
得出第一组数据
Tiling(2,2)
Offset(-0.5,-0.5)
接着试试Tiling为(3,3),出现如下图片
看起来似乎是我们要的效果,但还是要把左下角的图像向中心移动
移动完之后可以得出数据
Tiling(3,3)
Offset(-1,-1)
Tiling为(4,4)
Offset(-1.5,-1.5)
如下图
试试非整数缩小的数据(比如1.5)
Tiling为(1.5,1.5)
Offset(-0.25,-0.25)
看到这里,应该有点感觉了
试试小于1的情况
Tiling为(0.5,0.5)
Offset(0.25,0.25)
Tiling为(0.8,0.8)
Offset(0.1,0.1)