Unity中实现UI描边

已于 2022-05-14 18:12:21 修改
阅读量6.1k 收藏 18
点赞数 5
CC 4.0 BY-SA版权
分类专栏： # Unity相关技术 文章标签： unity 游戏引擎 c#
于 2022-01-10 15:08:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LLLLL__/article/details/122406549

一：效果演示

 二：使用


MaterialPath：材质路径(需要自己创建材质并设置Shader为UI/Outline)
Outline Color：描边颜色
Outline Width：描边宽度

三：为什么尽量避免使用UGUI的Outline和Shadaw组件 

UGUI源码解析——Shadow
UGUI源码解析——Outline
不论是Outline还是Shadow，它的实现原理都是

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效，描边及阴影特效
努力前行，总会成为自己心中的那道光
04-25 4万+
在Unity中 UGUI 的使用几乎是必不可少的，虽然也有NGUI、FGUI等可以使用，但使用UGUI的还是占多数。 而在使用UGUI的过程中，除了一些基础的UI交互页面及逻辑，学习一些UGUI特效的使用也是很有必要的。 接下来会分享一些UGUI中比较简单且实用的特效，供有需要的小伙伴学习使用。
Unity Shader - 2D描边效果
起个名字好难啊
11-30 2673
2D描边效果： 上面是实现2D描边效果的3种不同效果，左边为原图，右边为效果图 方式一：平均透明度法 原理：取每个像素及其周围的Alpha值进行平分，边界处因为对边界外也进行了采样，所以叠加后透明度小于原有透明度，将小于一定阈值的alpha设置为描边色；（适用于周围为透明效果的2D贴图） 代码实现如下： Shader "Custom/...
Unity UGUI的Outline(描边)组件的介绍及ABP框架提供的增删改查的基类使用
hijoppo58745的博客
02-17 2310
最大检测距离
Unity的Ui空物体渐变色描边UIoutline.unitypackage
05-12
Unity的Ui空物体渐变色描边UIoutline.unitypackage
Unity高亮显示系统打造指南
最新发布
weixin_29997223的博客
06-07 1019
在Unity中实现高亮效果，是提升游戏或应用程序交互体验的重要手段。高亮系统能够通过视觉效果突出特定元素，指导用户注意或进行下一步操作。本章将探讨Unity中高亮系统的基本概念、用途和如何实现基础的高亮效果。在计算机图形学中，材质是指定对象外观的属性集合，它决定了对象对光的反射和吸收方式，从而在3D模型上产生特定的视觉效果。材质通常由一系列参数控制，如漫反射颜色、高光反射、不透明度、粗糙度、金属感等。这些参数共同作用，创造出从粗糙、暗淡到光滑、闪亮的各种表面效果。材质可以分类为：漫反射材质。
Unity3D实现描边框效果
08-19
主要为大家详细介绍了Unity3D实现描边框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Unityunity2017之后的shader实现的UGUI外描边方案，复用材质球保证能合批(修正了mask的问题）
08-27
基于Shader实现的UGUI描边解决方案，解决unity 自带outline 顶点数过多、overdraw过大问题。 且改进了一下实现， 用一个材质球绑定所有描边，保证文字描边能合批。 实例项目用的unity2018 具体实现代码文章在：https://blog.youkuaiyun.com/zhenmu/article/details/88821562 这次修正了 mask的问题 渐隐的问题。
Unity UGUI的Outline(描边)组件的介绍及使用所以说是玩具，
ghhhd954236的博客
09-03 409
相当于利用泛型函数保存了类型信息
【Unity】用shader做UGUI字体描边的算法改进
热门推荐
zhenmu的专栏
03-26 1万+
Unity自带的Outline 效率实在太差。 找了基于Shader实现的UGUI描边解决方案http://www.cnblogs.com/GuyaWeiren/p/9665106.html 效果还不错，overdraw和顶点数都不高。 不过方案有2个问题，自己尝试调整了一下， 代码放在这以供参考吧。 (注：把ui存储prefab，运行时动态挂到一个canvas上， 这个canvas 如果...
unity实现描边效果
10-12
在unity中实现物体描边的效果，亲测可用。
Unity Text文字实现描边效果
不在同一频道上的呆子的博客
12-23 8448
Unity Text文字实现描边效果
Unity Shader实现描边OutLine效果
08-25
主要为大家详细介绍了Unity Shader实现描边OutLine效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
unity找到的最好的描边着色器shader
10-14
unity找到的最好的描边着色器shader,平常的描边shader加上去后物体没了高光效果,里面的Standard那一款完美解决此问题.
Unity 卡通描边Outline Shader
11-02
模型描边Shader 详细效果请导入看
【亲测免费】 Unity UI描边组件UIOutline
gitblog_00580的博客
01-08 324
Unity UI描边组件UIOutline 项目基础介绍 UIOutline 是一个开源项目，主要使用 C# 和 ShaderLab 编程语言开发，旨在为 Unity UI 元素添加描边效果。该组件易于集成和使用，能够为开发者提供灵活的 UI 设计工具。 核心功能 动态生成描边网格：组件能够根据设定的尺寸和密度动态生成描边网格，使 UI 元素具有清晰的轮廓。 内置Shader支持：项目提供了几种...
【Unity】【UI Shader】关于用Shader实现字体的描边和阴影
魔术师Dix的博客
07-06 7702
前言 描边和阴影，Unity本来是由自带的组件的（Outline和Shadow）。Unity自己的实现方式如下： Outline：把原文字/图片以往的网格复制4份，然后上下左右各偏移一点距离（相当于多绘制了4遍）。 Shadow：把原文字/图片的网格复制1份，然后往某个方向偏移一点（相当于多绘制了1遍）。 我觉得是挺蛋疼的，所以就突发奇想干脆用Shader来实现会不会好一点。 正文： 由于本人水平有限，所以大部分代码都是参考网上的。这里先上代码： // Upgrade NOTE: re.
Unity实现UGUI空物体颜色渐变的描边方法
他在试图用代码书写这个世界，字里行间温柔尽显。勿忘初心，努力做有价值的技术文章。
05-12 2885
当我们有UI描边需求时，可以考虑使用Unity原生自带两个组件的Outline和Shadow实现对于UI的描边，但是弊端还是很大的，因为这个两组件会造成顶点数和三角面数加倍，导致就是很耗电脑性能！而且挂载到UI空物体上是没有描边效果的。我们只能另寻他法，UGUI为我们提供了一个类MaskableGraphic帮助我们可以自定义重构UI组件,博客将演示如何重写其 OnPopulateMesh方法绘制线框，实现ui空物体的描边，并且可以实现渐变色的UI描边。
Unity UGUI的Outline(描边)组件的介绍及使用
alianblank的博客
07-29 4261
Outline(描边)组件是Unity UGUI中的一种特效组件，用于给UI元素添加描边效果。通过设置描边的颜色、宽度和模糊程度，可以使UI元素在视觉上更加突出。
Unity UGUI的Outline(描边)组件的介绍及使用实现对业务用户
oplq9866666的博客
02-20 819
传统关系型数据库
unity的ui描边高亮
02-25
### 实现 Unity UI 元素的描边高亮效果 为了在 Unity 中为 UI 元素添加描边和高亮效果，可以利用 Highlight Plus 插件来简化这一过程。该插件提供了强大的工具集，能够快速有效地创建高质量的视觉反馈。 #### 使用 Highlight Plus 添加描边和高亮效果 安装并配置好 Highlight Plus 后，在 Inspector 面板中找到目标 UI 组件，并为其添加 `HLOutline` 或者 `HLLitShaderEffect` 组件[^1]。通过调整这些组件中的参数选项，比如颜色、宽度以及发光强度等属性，即可轻松定制所需的描边与高亮样式。 对于更复杂的场景需求，还可以编写自定义脚本来动态控制高亮状态的变化逻辑。下面是一个简单的 C# 脚本例子，展示了如何根据玩家交互行为触发UI元素的高亮显示： ```csharp using UnityEngine; using HighlightingSystem; public class UIButtonHighlight : MonoBehaviour { private HLBase highlighter; void Start() { highlighter = GetComponent<HLBase>(); } public void OnMouseEnter() { if (highlighter != null) highlighter.enabled = true; } public void OnMouseExit() { if (highlighter != null) highlighter.enabled = false; } } ``` 此段代码实现了当鼠标悬停于按钮之上时自动开启其高亮特效；而一旦移开，则关闭相应效果。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hello Bug.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值