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

相关推荐
烟花落o6 小时前
贪吃蛇及相关知识点讲解
c语言·前端·游戏开发·贪吃蛇·编程学习
云边散步2 天前
godot2D游戏教程系列二(5)
笔记·学习·游戏·游戏开发
云边散步2 天前
godot2D游戏教程系列二(6)
学习·游戏·游戏开发
云边散步4 天前
godot2D游戏教程系列二(4)
笔记·学习·游戏开发
云边散步5 天前
godot2D游戏教程系列二(3)
笔记·学习·游戏·游戏开发
Thomas_YXQ6 天前
Unity3D中提升AssetBundle加载速度的详细指南
java·spring boot·spring·unity·性能优化·游戏引擎·游戏开发
云边散步6 天前
godot2D游戏教程系列二(2)
游戏开发
云边散步9 天前
godot2D游戏教程系列一(9)-终结
学习·游戏·游戏开发
Android出海11 天前
Google Play“先试后买”功能曝光:解决买断制游戏试玩痛点
游戏·游戏开发·android开发·google play·app出海·游戏出海·android出海
云边散步11 天前
godot2D游戏教程系列一(7)
游戏开发