使用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)

  • 7
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值