UnityUGUI矩形圆角Shader(支持长方形)

挺常见的需求,但找到的 Shader 一般只考虑了 1:1 矩形,这些 Shader 用在头像等正方形图像处没问题,但用做长方形图像时会出现圆角变形。
为什么要用 Shader
如果使用 Mask,会有额外的 DrawCall。
Shader 改造
搜到的 Shader 都大同小异,随意找一个来修改。只讨论修改部分,其他内容略过不表。
将图像的宽高比作为一个 Shader 参数引入:
_RatioNum("height / width",Float) = 1
逻辑上图片 UV 坐标均为 0-1,根据上述宽高比,强行映射当前点坐标为等比例坐标:
float _RatioNum;
fixed4 frag(v2f IN) : SV_Target
{
half4 color = xxxxxxxxxxxx;
//前略
float width = 1;
float height = _RatioNum; //即 width * rationum,因 uv width 为 1,省略此步骤。
float x = IN.texcoord.x;
float y = IN.texcoord.y * height;
//判断裁切,后略
}
接下来的内容和原来的 Shader 一样,判断四个角,如果属于裁切范围,则将颜色的 alpha 设为 0(透明),代码略。
效果图
假设有一处 16:9 的运营图片位,将材质 Shader 换为我们修改过的 Shader,数值修改为如下:
将图片丢上去,效果如下:
可以见到,当引入宽高比之后,可以使得圆角 Shader 在长方形图像上显示正常。至于 1:1 方形效果,见本文章头图白色图形即可。
大哥,通过我的加群请求吧。