Vitens的专栏

Unity中用Shader实现的UI特效在UGUI中的RawImage中运行良好,但是在Image中运行就奇奇怪怪的原因以及解决办法.

效果如下原理：倒影区域也用图片本体，做个镜像翻转（RectTransform中的scale的Y设为-1），然后shader对图片进行处理，达到一个透明度Y方向上渐变的效果。实现：因为是UGUI上使用，推荐直接在内置的UI-Default.shader中进行修改（官网可以下载）。要达到Y方向上的透明度渐变，可以使用UV坐标中的v作为变化因子，通过一个衰减曲线达到效果，我这里采用的指数函数（Pow），关键代码其实就下面这一句，如下：color.a...

首先感叹一下,UGUI的自适应做的还是非常不错的,RectTransform中提供了非常多种的自适应方式.对做界面来说还是很友好的.如果界面上需要有个全屏的背景图(UI界面一般都是有的吧,弹框啥的除外),那么需要简单的这样设置就可以满足屏幕的自适应了(so easy):不过这样的自适应方式是直接拉伸铺满整个屏幕的方式,并没有保障等比例拉伸,就是说背景图就会出现变形，以下面这张图为例（注意黄色的圆）：自带的自适应效果是这样的：而等比例拉伸自适应的效果是这样的：实现第一步既然是自己写代码

Unity屏幕坐标的规则是左下角为原点，然后X向右递增，Y向上递增，区间都是[0,1]。有些时候在做UI上的一些效果的时候，需要知道UI控件所处的屏幕坐标位置，就需要有些做些处理，而不像世界坐标那么容易获得。还有个问题是Canvas有三种RenderMode，内部的计算规则又不一样。。。所以在这里记录一下具体的获取UI屏幕坐标的方式。ScreenSpace-Overlay可直接获取到position的XY坐标并通过除以屏幕的宽高，映射到屏幕坐标的[0,1]区间：float x = ui.tran