【UnityShader】图片圆角

news/2024/9/23 18:27:46/

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.最终效果

3.下载链接

https://download.csdn.net/download/qq_35064654/89194087


http://www.ppmy.cn/news/1429234.html

相关文章

使用51单片机控制T0和T1分别间隔1秒2秒亮灭逻辑

#include <reg51.h>sbit LED1 P1^0; // 设置LED1灯的接口 sbit LED2 P1^1; // 设置LED2灯的接口unsigned int cnt1 0; // 设置LED1灯的定时器溢出次数 unsigned int cnt2 0; // 设置LED2灯的定时器溢出次数// 定时器T0 void Init_Timer0() {TMOD | 0x01;; // 定时器…

Qt——Qt网络编程之TCP通信服务器端的实现(使用QTcpServer、QTcpSocket实现一个TCP服务器端例程)

【系列专栏】:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实战》

Docker中Kafka容器创建/更新Topic支持多分区

前提 自行通过docker部署好kafka&#xff0c;并启动相关容器。 假设Topic为http_capture。 #docker-kafka kafka_dir/opt/docker/kafka/build sudo rm -rf ${kafka_dir}/* cat > ${kafka_dir}/docker-compose.yml <<EOF version: "3.3" services:zookeepe…

单例模式与反射创建对象

单例模式 饿汉式单例模式 单例模式&#xff0c;就是自己先把自己创建了&#xff0c;整个程序都只有这一个实例&#xff0c;别人都没有办法创建实例&#xff0c;因为他的构造方法是private的 一次性把全部都创建了 public class HungryMan {private static int [][] s new …

用Bash变量进行sed替换

问题&#xff1a; 我试图在一个 Bash 脚本中使用 sed 改变文本文件中的值&#xff1a; sed s/draw($old_num;n_)/draw($new_num;n_)/g file.txt > tmp这行代码将在 for 循环中。为什么它不起作用&#xff1f; 回答&#xff1a; 当使用 Bash 变量进行 sed 替换时&#xff…

【数据结构】冒泡排序

冒泡排序是一种简单的排序算法。 它基于重复地交换相邻元素的位置。算法的每一步都会比较相邻的两个元素&#xff0c;如果它们的顺序错误&#xff08;即第一个元素比第二个元素大&#xff09;&#xff0c;则交换它们。这样&#xff0c;每经过一轮比较和交换&#xff0c;数组中…

20240417金融读报:金融支持制造通知外汇局修订资本项目指引碳足迹现状与痛点

1、《关于深化制造业金融服务 助力推进新型工业化的通知》强化制造业中长期贷款和信用贷款支持&#xff0c;重点服务基础/创新行业&#xff0c;支持设备以旧换新&#xff08;更绿色、更智能&#xff09; 2、国家外汇局修订资本项目外汇业务指引&#xff0c;2024版5月6日起执行&…

【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测(Matlab实现)

【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测&#xff08;Matlab实现&#xff09; 目录 【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测&#xff08;Matlab实现&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 差异创意搜索算法&…