如何在 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 中实现无缝循环的帧动画效果。

相关推荐
应用市场1 小时前
用本机跑的开源音乐模型,给安卓小游戏做 20 秒无缝循环背景音乐
android·python·游戏开发·soundpool·音频处理
SmalBox14 小时前
07-02-打包系统-压缩与加密策略
unity3d·游戏开发
Aman198416 小时前
Claude Code做Unity项目移植(一):从零散工具到团队式
unity·游戏开发·vibe coding·claude code·项目迁移
甲维斯1 天前
白嫖Tripo3D ?Kimi 3D Make可以玩起来!
人工智能·unity3d
ZzT1 天前
vibe coding 做小游戏·玩法篇:8 句试玩反馈,变成无限关卡、局外成长和援军登场
ai编程·游戏开发
ZzT2 天前
vibe coding 做小游戏·素材篇:Claude Code 操作网页版 ChatGPT,一个对话画完全套美术
ai编程·游戏开发
SmalBox2 天前
07-01-打包系统-资源分组策略
unity3d·游戏开发
ZzT3 天前
vibe coding 做小游戏·开工篇:5 天、8400 行代码一行没手写,先让 AI 能检查自己
ai编程·游戏开发·claude
Huanzhi_Lin3 天前
资源回收源码阅读参考-上
游戏开发·gc·laya·layaair·资源回收·laya3.4
SmalBox3 天前
06-04-源码-加密解密服务
unity3d·游戏开发