1.需求
我们在开发的时候，有时候一些按钮或者菜单栏的边角是直角的需要改成圆角，但是让美术重新绘制耽误时间不说也确实没必要，这个时候我们不妨使用一个简单的shader去解决这个问题，下面我们就讲讲这个shader要如何实现。
需求1：可以将图片四角任意一角从直角变为圆角，可控制圆角大小
需求2：在需求一的基础上可以选择是否给图片加上边框，颜色可变
附加小需求：可更改图片透明度
2.实现
2.1. 准备
在实现之前，除此了解shader的同学可以去了解一下unity内置的一些shader变量和函数，熟悉了这些变量和函数的含义，对我们实现一个shader有很大的帮助。
【UnityShader预备知识】内置变量和函数
2.1.1.Tags
我们先了解一些需要使用的Tags：
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
"PreviewType" = "Plane"
"CanUseSpriteAtlas" = "True"
}这些是Unity Shader标签，用于指定渲染顺序、忽略投影、渲染类型以及预览方式。其中，“Transparent”表示该Shader将被渲染在所有不透明物体之后，因此适合用作UI元素或半透明物体的材质。如果你想让这个Shader按照标准的渲染顺序进行渲染，可以去掉“Transparent”标签并将“Queue”改为“Geometry”。
另外，“CanUseSpriteAtlas”允许该Shader使用精灵图集，这对于使用多个精灵制作复杂的图形很有用。如果你想让Shader支持精灵图集，请确保你的项目中已经启用了相应的功能。
2.1.2.Stencil
接下来我们再看一下模板缓冲区Stencil Buffer如何设置：
Stencil
{
Ref[_Stencil]
Comp[_StencilComp]
Pass[_StencilOp]
ReadMask[_StencilReadMask]
WriteMask[_StencilWriteMask]
}- Stencil Buffer（模板缓冲区）是一个与颜色缓冲区和深度缓冲区类似的额外缓冲区，可用于记录每个像素是否被绘制过。当启用模板测试时，只有满足特定条件的像素才会被绘制。
- Ref[_Stencil]指定了模板缓冲区的参考值，即只有当模板值等于该值时才绘制。
- Comp[_StencilComp]指定了模板比较函数，例如等于、不等于、小于等等。
- Pass[_StencilOp]指定了当模板测试失败时的操作，例如替换为Ref[_Stencil]或其他值。
- ReadMask[_StencilReadMask]和WriteMask[_StencilWriteMask]分别指定了读取和写入模板缓冲区的掩码。
2.1.3.基础设置
shader中需要对光照、深度等进行一些设置，比如：
Cull Off //关闭了背面剔除，使得物体的正面和背面都可以被渲染。
Lighting Off //关闭了光照计算，这意味着不会对物体表面产生光照影响。
ZWrite Off //关闭了深度写入，使得物体不会影响场景的深度信息。
ZTest[unity_GUIZTestMode] //指定了深度测试模式，对于GUI元素通常使用Less或Greater模式。
Blend SrcAlpha OneMinusSrcAlpha //启用了混合模式，用于控制透明度。
ColorMask[_ColorMask] //控制哪些颜色通道会被写入，通常用于控制透明度。这些设置关闭了背面剔除、光照计算、深度写入，并开启了混合模式，同时还设置了颜色掩码。这通常是用于渲染UI元素的标准设置。其中，Cull Off表示不剔除任何面，Lighting Off表示不进行光照计算，ZWrite Off表示不写入深度缓冲区，ZTest[unity_GUIZTestMode]表示使用Unity GUI的特殊深度测试模式，Blend SrcAlpha OneMinusSrcAlpha表示开启混合模式，使得透明度能够正确显示，ColorMask[_ColorMask]则控制哪些颜色通道会被写入。如果你希望对这些设置进行自定义，可以在Shader中添加相应的标签。
2.2.功能实现思路
2.2.1.直角变圆角
如果要将一个直角变成圆角，那么首先我们得要确定这个圆角的中心点O和半径r，然后将图片超出半径范围的像素进行剔除舍弃即使其alpha=0。以左下角为例：
//左下角
if (x < r && y < r)//x和y分别是当前像素的UV坐标
{
anc_size = (x - r) * (x - r) + (y - r) * (y - r);
if (anc_size > r * r)
{
color.a = 0;
}
}首先，我们检查当前像素是否在圆角范围内，如果是，则计算其离中心点的距离（anc_size）。
如果anc_size大于半径的平方（r*r），则说明该像素超出了圆角范围，应被舍弃。其他几个角依次类推，大家可以自己手动画一张图这样更明了一些。需要注意的是UV坐标系，左下角为(0,0),右上角为(1,1)。相信图应该都能画出来，这边我也会在下面贴出来草图以供参考。
其他三角：
//左上角
if (x < r && y > (height - r))
{
anc_size = (x - r) * (x - r) + (y - (height - r)) * (y - (height - r));
if (anc_size > r * r)
{
color.a = 0;
}
else if (edge_width > 0 && anc_size > (r - edge_width) * (r - edge_width))
{
color = edge_color;
}
}
r = _EdgeCore.z;
//右下角
if (x > (width - r) && y < r)
{
anc_size = (x - (width - r)) * (x - (width - r)) + (y - r) * (y - r);
if (anc_size > r * r)
{
color.a = 0;
}
else if (edge_width > 0 && anc_size > (r - edge_width) * (r - edge_width))
{
color = edge_color;
}
}
r = _EdgeCore.y;
//右上角
if (x > (width - r) && y > (height - r))
{
anc_size = (x - (width - r)) * (x - (width - r)) + (y - (height - r)) * (y - (height - r));
if (anc_size > r * r)
{
color.a = 0;
}
else if (edge_width > 0 && anc_size > (r - edge_width) * (r - edge_width))
{
color = edge_color;
}
}2.2.2.添加边框
添加边框是什么意思，简单点说就是把图片边上一部分的颜色进行转换，有了上面进行圆角的转换，我们只要根据边框的宽度算出对应的区域范围，将此区域范围内的颜色进行更改即可，依旧以左下角为例：
if (x < r && y < r)
{
arc_size = (x - r) * (x - r) + (y - r) * (y - r);
if (arc_size > r * r)
{
color.a = 0;
}
else if (b_width > 0 && arc_size > (r - b_width) * (r - b_width))
{
color = b_color;
}
}在上面我们已经计算出了arc_size，如果它介于半径和半径减去边框宽度之间（即边框区域），则应用边框颜色。这里的r代表圆角半径，x和y分别是当前像素的UV坐标。你可以根据需要修改r和b_width这两个变量来改变圆角大小和边框宽度。同时，你也需要在Shader的Properties块中声明对应的属性。
做到这里，你可能会发现你的效果是这样的：
哎，没错，这个效果说不定也有人有需要也是一个有意思的形状，当然，这还不是完整的边框，刚刚我们只考虑了边角，没有考虑其他地方，所以我们还要对其他地方的边框进行处理：
if (b_width > 0)
{
//下边
if (x > _RCorner.w && x < (width - _RCorner.z) && y < b_width)
{
color = border_color;
}
//上边
if (x > _RCorner.x && x < (width - _RCorner.y) && (height - y) < b_width)
{
color = border_color;
}
//左边
if (y > _RCorner.w && y < (height - _RCorner.x) && x < b_width)
{
color = border_color;
}
//右边
if (y > _RCorner.z && y < (height - _RCorner.y) && x > (width - b_width))
{
color = border_color;
}
}
2.2.3.修改图片透明度
修改透明度的方式很简单，就是对颜色的alpha进行修改：
if (_MainTex_TexelSize.z > 0)
{
color = (tex2D(_MainTex, IN.texcoord)) * IN.color;
}
color.a= _Alpha;需要注意的是alpha通道要在最后进行设置，以免后面再对颜色进行修改影响其值。
比如你只想改改边框的透明度，你就可以把这段修改放在修改边框那边。
2.3.最终效果
文章来源：https://www.toymoban.com/news/detail-858705.html
3.下载链接
https://download.csdn.net/download/qq_35064654/89194087文章来源地址https://www.toymoban.com/news/detail-858705.html
到了这里，关于【UnityShader】图片圆角的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
