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

相关推荐
UWA17 小时前
Gears实测室:第一期·音游跨设备性能表现与工具价值实践
信息可视化·性能优化·游戏开发·uwa
红红大虾1 天前
Defold核心概念之Message Passing
游戏开发
红红大虾2 天前
Defold核心概念之Building Blocks
游戏开发
Mr_1477 天前
【独游开发必备】游戏开发资源宝藏网站(美术篇)
游戏开发
Aoife婳8 天前
【Bug】UE5中纹理和地形一直闪烁
游戏开发
龚子亦9 天前
【Unity开发】丧尸围城项目实现总结
unity·游戏引擎·游戏开发
小哈里12 天前
【Game-Infra】游戏开发的流程,游戏发布的打包与构建(硬件选型,SDK与操作系统,包体管理,弹性构建,构建调优)
游戏·游戏开发·后端开发·基础设施·打包构建·游戏发布·弹性构建
小强Fnsy12 天前
一款将GIF、序列帧的指定选区转换成新的序列帧,并导出为Plist、PNG、GIF的工具
前端·游戏开发
泉城老铁13 天前
VUE2实现加载Unity3d
前端·vue.js·unity3d