Unity中实现自己的圆形Image组件

已于 2022-01-21 19:11:19 修改
阅读量5.9k 收藏 8
点赞数 8
CC 4.0 BY-SA版权
分类专栏： # Unity相关技术 文章标签： unity 游戏引擎
于 2021-12-19 15:27:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLLLL__/article/details/121737217

一：前言

游戏里很多图片都是以圆形展示的，例如头像、技能图标等，一般做法是使用Image组件+Mask组件实现，但是Mask组件会影响效率(增加额外的drawcall)所以不建议大量使用

UGUI的Mask实现原理：利用GPU的模版缓冲
Mask组件会赋给父级和子级UI一个特殊的材质，这个材质会给Image的每个像素点进行标记并放在一个称为Stencil Buffer的缓存内，父级每个像素点的标记设置为1，子级UI进行渲染的时候会去检查这个Stencil Buffer内的标记是否为1，如果为1则进行渲染，否则不渲染


二：实现思路

像Image，RawImage这些组件都是继承自自MsakGraphics类，MsakGraphi

了解本专栏 订阅专栏 解锁全文 超级会员免费看
UGUI案例篇第(二)节：UGUI实现圆形Image的方式(Unity官方解决方案）
专注游戏研发
09-07 5976
的
Unity3D UGUI:圆形Image组件,可用来制作头像
lvlei19911108的博客
08-19 650
昨天在改项目的时候,看到人物头像是圆形的，我就想到用UGUI的Mask组件，但是我试了一下，效果不是很好,而且性能上也不是很理想，所以我就找到一个比较好的解决办法，之前也考虑过用Image上的Material去弄，但是也不是很完美，后来看到一篇文章，说是重写Image组件，所以就有了下面我要提到的东西(只支持5.3版本以上)。 首先需要重写Image，由于继承UnityEngine基类的派生类不能...
Unity 自定义圆形图片
KindSuper_liu的专栏
11-12 2499
using System.Collections.Generic; using UnityEngine; using UnityEngine.Sprites; using UnityEngine.UI; /// <summary> ///1.为什么不用Mask组件 ///1.1 增加Drawcall ///1.2 边上有锯齿 /// ///2.Position和uv的关系 /// ...
Unity UI 性能优化终极指南 — Image篇
最新发布
qq_41179365的博客
06-03 1443
墙上挂满画。同尺寸、同材料的画布，排整齐，工人刷漆一遍就完事；尺寸乱、材料杂、半透明玻璃框还叠十层？工人得反复刷，累死。图要合，料要同，少重叠，少透明，能静不换！能合就合，能省就省，能简就简，能批必批！将多个小图整合成一张大图（纹理集合）目的：减少纹理切换、提升批处理（Draw Call降低）⚠️注意合图≠性能提升合图+合理引用+加载策略才能提升！仓库货架合并，一趟拉完。送货车+货物打包，要打一起送。把相同物品放在同一货架，混放就得多次进出仓库。🎯总原则。
【UnityShader】图片圆角
qq_35064654的博客
04-21 2693
我们在开发的时候，有时候一些按钮或者菜单栏的边角是直角的需要改成圆角，但是让美术重新绘制耽误时间不说也确实没必要，这个时候我们不妨使用一个简单的shader去解决这个问题，下面我们就讲讲这个shader要如何实现。需求1：可以将图片四角任意一角从直角变为圆角，可控制圆角大小需求2：在需求一的基础上可以选择是否给图片加上边框，颜色可变附加小需求：可更改图片透明度。
<Unity3D UGUI>用UGUI方式实现图片的遮罩，圆角图片，圆形图片效果
热门推荐
wocalage的博客
01-05 1万+
实现图片的圆角效果，圆形图片效果，是一个很常见的功能，如下 很多人会使用shader来做，但是太麻烦了，网上关于UGUI实现这种效果的方法我也一直没有找到 我这里知道一个很简单的方法，不用写一行代码 现在我打算告诉你 原理，就是通过Mask遮罩来实现 第一步： 建立如下目录结构，Avatar是需要处理的图片，如头像等 第二步： 给Mask添加俩个控件，I
Unity shader 实现图片带圆角和边线border
q1242416158的博客
12-01 2060
实现图片带圆角和边线，圆角区域不会再被点击到。
Unity+UGUI 圆形进度条
07-12
2. 添加Image：在Canvas下添加一个新的Image组件，作为圆形进度条的背景。调整RectTransform的Anchor Presets为Stretch模式，使图像铺满整个屏幕。 3. 创建Progress Image：再添加一个Image组件，作为进度条的填充...
image加载图片 ui unity_关于Unity中UI中的Image节点以及它的Image组件
weixin_29188043的博客
12-23 1112
一、图片的Inspector面板属性Texture Type：一般是选择sprite(2D and UI)Sprite Mode：一般是选择SinglePacking Tag：打包的标志值，最后打包的时候会把Tag相同的所有小图打包成一个大图。不像cocos打包图集需要用到第三方软件，这里Unity会帮我们把相同Tag的图片打包成大图，非常方便。Pixels Per Unit 100：表示100像...
Unity_UGUI实现圆形按钮的底层实现
Gary的面包屑小道
11-02 3242
在使用Unity的UGUI过程中，我们通常会遇到一种需求就是会，创建一个圆形的按钮或者图标。 先说说正常实现这么一个圆形组件的步骤： 1、创建Image组件Img1，作为父组件 2、在父组件下面创建子Image组件Img2， 3、在Img1中添加Mask（Script）组件，然后给父组件赋一个图片 这个图片的周围是透明的，中间是圆形的纯色填充，用来做父组件的image 4、然后我们给子组件img2赋上我们需要显示的图片 最终父组件中Mask组件会帮我们做遮挡，然后将子组件img2显示成圆形：
Unity | Image 自定义顶点数据实现圆角矩形
Valiancer
10-23 2250
UGUI 中的 Image 实现圆角效果通常有三种方式，Mask、Shader以及自定义顶点数据，相比于前两者，自定义顶点数据的使用方式更加灵活，同时可以减少 DrawCall，但是会增加顶点及三角形数量。最终实现方案可根据实际情况选择，水不深，自己把握。
unity 切圆角矩形
03-01
unity 切圆角矩形，通过shader编码实现图片圆角
圆角图片实现
08-13
实现圆角图片，通过setXfermode设置，显示圆角
Unity用户自定义圆角头像
12-19
Unity用户自定义圆角头像
c# imager让图片有圆角unity_Unity开发从看懂到看开
weixin_39860166的博客
11-23 630
概述 写这篇文章的本意，并非劝退Unity使用者，只是尽可能客观的指出Unity这个引擎的问题，并且希望众多Unity黑粉在黑的时候能够对症下药，不要仅仅盯着“渲染效果”这种显而易见但是无足轻重的部分，否则都是隔靴搔痒，相反，只有认识到自己手上的工具的实际问题才能对症下药考虑是否要用，以及如果要用需要注意哪些问题。一句话总结概述就是：Unity 是一个优秀的功能试验器，也是一个辣鸡引擎，如果你有能...
c# imager让图片有圆角unity_Unity实战之道具系统
weixin_39878698的博客
11-25 459
程序员那些事正在码代码ing，医院回来的同事一脸的苦逼样子，问他怎么了？他回答：得了类风湿性关节炎了，我怕会遗传给下一代啊。我一脸的问号：谁说类风湿性关节炎能遗传的？丫一脸诧异：类不是继承的吗？如果音速小子中没有金色戒指和电动鞋，超级马里奥中没有了蘑菇，或者吃豆人中没有强力豆会是什么样子呢？游戏就不会那么有趣了！道具系统是一个关键的游戏组件，因为它们增加了额外的复杂性和策略层，来保持移动...
Unity 圆形图片实现
JYliangliang的博客
01-27 880
Unity UGUI 圆形图片（通常用于用户头像） using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.Sprites; //圆形图片 public class CircleImageutils : Image { /// <summary> /// 圆形由多少个三角形组成 /.
Unity UGUI实现圆形Image
GA博客
09-01 3915
项目要实现圆形头像，用继承Image组件重写部分方法实现圆形头像 并且实现精准点击 实现原理： ①：Image如何绘制到屏幕上 cpu准备顶点数据–>GPU渲染显示，所以显示图片，需要顶点和三角形数据，由顶点组成三角形 三角形组成图形 ②：如何实现 重写 OnPopulateMesh(VertexHelper vh) 方法 ，因为没有真正的圆形，圆形是由n个三角形组成，重新计算要渲染的定点和...
unity3d显示圆形或异形背景
wuyt2008的专栏
04-05 9508
在unity3d里显示圆形的背景。有两种方式，一种是在GUI上显示，通常是用在UI上。另外一种是通过3D的Plane显示，这种时候用在游戏场景里，例如做游戏的小地图。然后，ngui的方式也比较简单。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Hello Bug.

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

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

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

打赏作者

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

抵扣说明：

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

余额充值