UGUI案例篇第(二)节：UGUI实现圆形Image的方式(Unity官方解决方案）

最新推荐文章于 2024-04-22 14:18:58 发布
置顶 最新推荐文章于 2024-04-22 14:18:58 发布
阅读量5.5k 收藏 5
点赞数 5
分类专栏： Unity客户端 文章标签： Unity UGUI 圆形Image 游戏开发 image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chongzi_daima/article/details/100602590
版权

UGUI实现圆形Image的方式(Unity官方解决方案）

绘制圆形Image的原理

   相信大家在制作UIButton或者是UI头像的时候常常想用到使用 圆形 的比较美观好看，但是呢，Unity默认的UIImage都是矩形的，那么如何做一个圆形的
   Button或者是圆形的UI头像呢？

Unity官方给出的解决方案：
创建一个Image父物体，父物体的Sprite使用圆形图片(图片有一定的格式，下面演示)，之后父物体挂载Mask组件，然后在父物体下创建要绘制成圆形的Image子物体即可。

下面演示Gif:
在这里插入图片描述

(1) 案例演示绘制圆形Image

步骤1 ：创建Image父物体，命名为MaskParent，之后使用圆形Sprite(矩形图片的底应该是以灰白拼接的格格，之后绘制的圆形)，接着为父物体MaskParent添加Mask组件。演示请看图 1-1

最低0.47元/天 解锁文章
Handling[韩镇江]
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity中实现自己的圆形Image组件
L的博客
12-19 5505
一：前言 例如圆形头像或者圆形技能图标，一般做法是使用Image组件+Mask组件实现，但是Mask组件会增加额外的drawcall影响效率并打断合批所以不建议使用 UGUI的Mask实现原理：利用GPU的模版缓冲 Mask组件会赋给父级和子级UI一个特殊的材质，这个材质会给Image的每个像素点进行标记并放在一个称为Stencil Buffer的缓存内，父级每个像素点的标记设置为1，子级UI进行渲染的时候会去检查这个Stencil Buffer内的标记是否为1，如果为1则进行渲染，否则不渲染 .
Unity UGUI学习系列(一) ------ 圆形图片实现方法
千喜
08-20 2424
本系列文章是学习siki学院UGUI整体解决方案-案例篇笔记 GitHub地址：https://github.com/BlueMonk1107/UGUISolution 本文介绍两种实现圆形图片的方法,效果如下: 一.image mask实现 准备好要显示的图片以及一张圆形图片 创建两个image,结构如下: 上面一个imag...
修改ugui之给image添加圆形显示
最新发布
weixin_39889192的博客
04-22 285
引擎下ugui源码路径：Unity\Hub\Editor\2020.3.33f1c2\Editor\Data\Resources\PackageManager\BuiltInPackages\com.unity.ugui\Runtime\UI\Core。项目下ugui源码路径：Library\PackageCache\com.unity.ugui@1.0.0\Runtime\UI\Core。建议把源码复制2份出来，一份备份，一份修改，复制出来修改是因为该路径下不允许直接保存，但可以使用管理员权限替换文件。
UGUI学习笔记（七）自己实现圆形图片组件
夜槿笙歌的博客
09-09 637
第一种实现方式是通过UGUI原生的「Mask」遮罩组件。实现起来非常简单，首先创建一个Image对象，并挂载「Mask」组件。然后将Image的Sprite设置为事先准备好的圆形图片然后再将这个Image对象设置为目标对象的父物体即可但是这种方式有个问题，Mask组件会增加额外的Draw Call调用（Shader中的概念），也就会增加额外的性能消耗。可以通过Game窗口中的Stats界面查看Draw Call调用情况。
UGUI之RawImage显示多边形或圆形贴图
yf391005的博客
01-24 742
本文转自雨松大大的博文，原文链接UGUI研究院之RawImage显示多边形或圆形贴图（二十六） 实现原理本渣渣没搞明白，下面为主要代码 using System; using UnityEngine; using UnityEngine.UI; public class UICircle : RawImage { const int FILL_PERCENT = 100; float...
丢掉Mask遮罩，更好的圆形Image组件[Unity]
weixin_30386713的博客
02-22 284
写在前面 全文解析圆形Image组件的实现原理，取关键代码介绍算法细节，源码已经上传Github下载地址，欢迎下载试用。 一、Unity原生Image组件实现圆形图片的缺陷 Mask渲染消耗 许多游戏项目里免不了有很多图片是以圆形形式展示的，如头像，技能Icon等，一般做法是使用Image组件，再加上一个圆形的Mask。实现非常简单，但因为影响效率，许多关于ui方面的Unity效率优化文章，都会建...
Unity3D UGUI:圆形Image组件,可用来制作头像
lvlei19911108的博客
08-19 496
昨天在改项目的时候,看到人物头像是圆形的，我就想到用UGUI的Mask组件，但是我试了一下，效果不是很好,而且性能上也不是很理想，所以我就找到一个比较好的解决办法，之前也考虑过用Image上的Material去弄，但是也不是很完美，后来看到一篇文章，说是重写Image组件，所以就有了下面我要提到的东西(只支持5.3版本以上)。 首先需要重写Image，由于继承UnityEngine基类的派生类不能...
Unity UGUI实现圆形Image
GA博客
09-01 3697
项目要实现圆形头像，用继承Image组件重写部分方法实现圆形头像 并且实现精准点击 实现原理： ①：Image如何绘制到屏幕上 cpu准备顶点数据–>GPU渲染显示，所以显示图片，需要顶点和三角形数据，由顶点组成三角形 三角形组成图形 ②：如何实现 重写 OnPopulateMesh(VertexHelper vh) 方法 ，因为没有真正的圆形，圆形是由n个三角形组成，重新计算要渲染的定点和...
UGUI image 圆形响应区域
楚客的学习笔记
10-22 347
需求：圆形外观按钮，圆形区域外不希望被响应。 问题：unity image 响应区域为方形范围，无法支持圆形点击限制。 处理方案：自定义 CircleEventImage 继承自 Image 复写IsRaycastLocationValid 函数，计算点击点是否处于圆形区域内。 初始方案：CircleCollider2D 检测点击点是否再 圆形区域。代码如下： public class CircleEventImage : Image { CircleCollider2D m_pCollider;
Unity 自定义圆形图片
KindSuper_liu的专栏
11-12 2171
using System.Collections.Generic; using UnityEngine; using UnityEngine.Sprites; using UnityEngine.UI; /// <summary> ///1.为什么不用Mask组件 ///1.1 增加Drawcall ///1.2 边上有锯齿 /// ///2.Position和uv的关系 /// ...
UGUI制作圆形UI
HopePower233的博客
09-16 945
UGUI制作圆形UI使用Mask来制作 使用Mask来制作 创建两个具有父子关系的Image，父物体添加Mask组件，精灵是一个圆形的遮罩，子物体是要显示的图片。 这样做有两个坏处： 1.圆形UI的锯齿感非常强烈 2.增加了Draw Call ...
Unity UGUI环形用户界面（RingUI.unitypackage）
10-28
Unity环形UI（UGUI），可按圆环轨迹拖拽圆环实现按钮环形滚动，按钮可点击，开发工具：Unity5.6.3
Unity3D UGUI特效之Image高斯模糊效果
12-31
第二个是凸显弹框效果的，将背景都模糊掉，自己将这个稍微加强了些可以指定模糊一个位置。 针对移动平台，使用高斯模糊，其实效率不是很高，如果要很好的效果，那么速度卡；如果要速度快，那么效果达不到要求。但是...
ImageAlpha(UGUI图片渐变).unitypackage
09-05
可用于UGUI image渐变效果，处理图片切换，轮播等特效处理。
unity UGUI图片任意截取和裁剪
04-07
使用ugui对图片进行任意角度，大小，缩放，以及任意位置进行截取和裁剪，还可以设置圆角或者矩形方式操作
Unity UGUI原理和优化
07-05
UGUI 的出现改变了 Unity 的 UI 开发方式，让开发者更方便地创建高质量的 UI 界面。 UGUI 的优点有： 1. 团队最擅长：UGUI 是 Unity 官方版本的 UI 系统，官方支持，流行趋势，多线程支持（UI 重建）。 2. 官方...
【Unity实战100例】用户头像圆形遮罩使用Shader不用Mask组件
纯技术流日常开发商业开发记录总结等
08-09 1005
前言：我们在使用Unity的自带组件Mask的时候会出现毛边现象很难处理掉，这里我们使用着色器shader来进行处理就不会出现毛边现象。
ugui中实现圆形按钮
weixin_30838873的博客
03-12 827
实现圆形按钮，原本是使用 alphHitTestMinimumThreshold 改成重载IsRaycastLocationValid来实现，直接贴代码 using UnityEngine; using System.Collections; using UnityEngine.UI; #if UNITY_EDITOR using UnityEditor; #endif p...
UGUI圆形UI与多边形点击范围
qq_37833413的博客
03-31 536
文章目录1.前言2.RayCrossing3.圆形UI4.多边形点击范围5.结论 1.前言 Unity默认的ugui mesh是四边形网格，若要实现圆形ui可以使用mask实现,此处提供一种更改mesh的方法，并将点击范围控制在圆形范围内。（从易用性角度并不会方便太多） 同时提供一种在不使用mask的情况下实现复杂点击范围。但此上两种方案均需要判断点击点是否在一个多边形内（圆形按多边形处理） 2.RayCrossing 若判断一个点p是否在一个多边形内，可以使用rayCrossing方法。即点p发出一条射线
Unity中的UGUI的Image的Fill360代码实现
06-09
以下是Unity中UGUI的Image的Fill360代码实现示例： ```csharp using UnityEngine; using UnityEngine.UI; public class Fill360 : MonoBehaviour { public Image fillImage; // 填充图像 private float fillAmount = 0f; // 填充进度 // 设置填充进度 public void SetFillAmount(float amount) { fillAmount = Mathf.Clamp01(amount); fillImage.fillAmount = fillAmount; } } ``` 在上述示例中，我们通过一个名为fillImage的Image对象来实现填充效果。在SetFillAmount()方法中，我们将fillAmount的值限制在0和1之间，然后将其赋值给fillImage的fillAmount属性，实现了填充效果。 需要注意的是，我们需要在Unity编辑器中将fillImage的Fill Method设置为Radial 360，并将Fill Origin设置为0,0（即中心点），才能实现360度填充效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值