如何在 Unity3D 中实现圆角效果?

AI摘要
Unity3D中通过遮罩实现UI元素(如进度条)的圆角效果:父级Image使用圆角PNG图并添加Mask组件,子级Image填充父级遮罩即可。也可用Shader实现更平滑效果。

一、前言

有时候在 Unity3D 中,要实现一些组件的圆角效果,比如进度条,不像普通按钮是静态不动的,可以直接将图片做成圆角。但是进度条是有那种色块流动的效果,如果不做处理,里面的色块会溢出四个角落。

二、实现前提

1. 须使用 Image 的 UI 元素。

2. 父层 Image 元素须遮罩组件。

3. 父层 Image 元素图片须有圆角 png 图。

三、操作过程

1. 在场景中创建一个 Image 的 UI 元素,图片是黑色有圆角的 png 图片。

2. 在该 Image 中添加 Mask 组件(遮罩)。

3. 在该 Image 下添加一个新的 Image 元素,Source Image 选择一个其他颜色图。

4. 对子级 Image 的 Transform 进行上下拖动,填充住父的遮罩就可以看到子级的元素也有圆角。

四、写在后面

以上的操作都是在 Unity3D 2020.3 中实现,除了用遮罩的方式实现圆角效果外,还可以用 Shader,在效果上还没有锯齿,弧度更丝滑。后面有时间我再更新,以及如何在 Unity3D 中实现无缝循环的帧动画效果。

本作品采用《CC 协议》,转载必须注明作者和本文链接
公众号: ZERO开发, 专注后端实战技术分享,致力于给猿友们提供有价值的内容。
北桥苏
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
UP @ 公众号: ZERO开发
文章
81
粉丝
2
喜欢
22
收藏
13
排名:1060
访问:4889
私信
所有博文
社区赞助商