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 方形效果,见本文章头图白色图形即可。

梓喵出没博客(azimiao.com)版权所有,转载请注明链接:https://www.azimiao.com/8373.html
欢迎加入梓喵出没博客交流群:313732000

我来吐槽

*

*