原创作品

Unity ShaderGraph学习记录分享 01 UV的中心缩放

炸天帮I基肽镁 发表于   2023-10-09 20:10:49
2132
1
10

先上效果图:

中心缩放演示.gif

BUFF:以下实现原理的描述都是以我自身的角度为方便没有TA基础的美术同学理解而采取的描述,如有同学有更好的描述或者想作一下专业性的讲解,欢迎补充

实现原理:

1.先把基础UV信息连好,此时缩放点位于左下角的0.0点

企业微信截图_16968431239548.png

在SG里我们无法直接给贴图的Tiling和Offset赋值,所以我们需要自己创建两组Vector2,用自已创建的这两组数值通过"Tiling And Offset"节点里的对应输入点来取代贴图本身的Tiling和Offset,所以这里就不再建议开启Texture2D里的“Use Tiling and Offset” 了,直接用咱们刚才自定义的Vector2来取代aaa.png

这时我们得到了一个基础的标准shader:以左下角0.0点为root点进行缩放和旋转


2.把图片的中心点调整到贴图采样器的root点

移动中心点到Root.gif


需要移动的距离=Tiling.x(或y)/2

移动的方向都为负方向(当然别的方向也行,看自己习惯和想要保留的贴图部分)

这一步的连线示意图:

企业微信截图_16968481412532.png

求Tiling.X/2的时候建议采用乘以0.5的方式,而不是除以2,原因作为思考题大家想一下吧

现在现执行缩放操作时看起来就已经是以中心点为缩放了

半步中心缩放.gif

原理:缩放本身还是围绕Root(A0点左下角),只是在每帧缩放结束后采样格会向左下移动半格,从表现上来看就像是贴图被向右上移了半格,并且以当前显示载体的中心缩放


3.还原采样格坐标,实现真正的中心缩放

采样格在缩放完成后永远会把自己归为1,所以我们现在要作的就只是把采样格向刚才移动的反方向再移动半格,就可以让贴图在载体上显示到原来的位置了,最终结果如开头的示意动画所示

企业微信截图_16968519024775.png


-------------------------------------手打的完结分割线,欢迎特效或TA同学扫码加好友一起学习、研究、合作、分享--------------------------------------

我的二维码.png



确定
评论(1)
彭师傅
真不错
回复
163天前
没有更多啦~
  • 咨询
    客服
  • 扫码加入QQ群 或搜索QQ群号: 797421367
  • 扫码关注公众号 或微信搜索: cokey游戏特效