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

一、前言

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

二、实现前提

  1. 须使用 Image 的 UI 元素。

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

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

三、操作过程

  1. 在场景中创建一个 Image 的 UI 元素,图片是黑色有圆角的 png 图片。
  1. 在该 Image 中添加 Mask 组件(遮罩)。
  1. 在该 Image 下添加一个新的 Image 元素,Source Image 选择一个其他颜色图。
  1. 对子级 Image 的 Transform 进行上下拖动,填充住父的遮罩就可以看到子级的元素也有圆角。

四、写在后面

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

相关推荐
晓杰'18 小时前
从0到1实现 Balatro 游戏后端(2):NestJS框架搭建与项目结构设计
后端·websocket·typescript·node.js·游戏开发·项目实战·nestjs
烛阴1 天前
Unity资源加载进化论:从AssetBundle到Addressables,一文带你吃透手游资源管理
前端·c#·unity3d
SmalBox1 天前
【节点】[Arctangent2节点]原理解析与实际应用
unity3d·游戏开发·图形学
鹿鸣科技软件开发1 天前
CSGO盲盒开箱平台开发搭建|网站小程序APP定制方案
游戏开发·盲盒网站开发·饰品盲盒系统开发
烛阴2 天前
TEngine 入门系列(二):三件套环境搭建 -- Unity + TEngine + AI 助手
前端·c#·unity3d
SmalBox2 天前
【节点】[Arcsine节点]原理解析与实际应用
unity3d·游戏开发·图形学
鹿鸣科技软件开发2 天前
游戏饰品开箱平台开发指南:功能规划与方案对比
游戏开发·web开发·项目经验
晓杰'3 天前
从0到1实现 Balatro 游戏后端(1):项目规划与牌型判断实现
后端·websocket·typescript·node.js·游戏开发·项目实战·nestjs
SmalBox3 天前
【节点】[Arccosine节点]原理解析与实际应用
unity3d·游戏开发·图形学
SmalBox4 天前
【节点】[Truncate节点]原理解析与实际应用
unity3d·游戏开发·图形学