动效技术-超简单的“游戏UI边框流光”效果制作

近期经常有小伙伴会问一些UI边框的流光技巧，类似效果的本来并没有打算制作教程，为了给有需要的新人小伙伴提供帮助，下面就用简短的时间制作一个小教程，希望能帮迷茫的新人解决问题。

UI框体流光是一种项目中常见的表现，比如在3DMax中制作一个框体模型（圆形，方形等等），做个单一轴向的UV流动即可，又或者直接用遮罩贴图的方式来处理，除了这些以外，其实这种实现方式还有很多种，只要你了解原理了都非常的容易，下面讲一个和之前课程不太一样的做法

首先制作这种效果还是需要掌握一定的软件基础知识

1：3DMax

主要用来制作一些复杂的模型，应用于Unity引擎，UE4引擎目前界面不支持模型，需要二次开发

2：Unity

目前大部分公司使用的游戏开发引擎，很多基础操作都能搜到相关教程，重点是要理解模型UV 与材质之间的关系

通过3DMax和Unity的结合，最终用简单的模型就能实现下图这样的效果

简单的效果示意图

制作教程：

一、边框的形状线条
1：在3Dmax中制作一个线框，根据情况设置一下倒角参数

线框以及倒角参数

2：设置边框线条的参数，实现面片化

现况模型化详细参数设置

设置模型参数细节如下

• Enable In Viewport，将线条模型化
• Generate Mapping Coords，UV设置，他决定了我们展开UV 的方式
• 线条模型面数，这里数字越大，会越圆
• 平行角度，我们需要的是左边的平面，所以需要设置角度为30，右边角度为0

平行角度参数的差别对比

• 倒角细节调整：防止模型穿插严重
  
  

用同样的方法可以制作以下不同的模型，这里可以发挥你的想象力去实现

不同的模型效果

3：转成可编辑模式（Poly）格式，删掉多余的面

转编辑模式

删除多余的面

4：打开UV 编辑器，把UV往左边进行缩放，效果如下图

打开UV

设置UV比例

5：导出模型

导出选项

这里导出的时候不需要导出的参数和选项记得去掉，比如动画，相机这些

6：将模型导入到Unity（放在Unity工程文件夹里即可）

导入引擎

7：在Unity中搭建好scene环境，这里我设置了后期Bloom

后期效果Bloom设置

8：然后把对应的模型拖拽到新创建的Quad上，并赋予一个材质球

创建Quad并挂在模型

赋予材质球

都添加完成后，运行，运行后的最终结果如下图，我们通过数值参数的变化，可以设置为自己需要的结果，当然，这样的效果是非常粗糙的，我们实际制作，还需要去融入很多风格化元素，粒子等细节，还丰富设计

最终效果演示

本期超简单的技术分享就到这里，期望给新人带来帮助，关注我们官网，有更多的免费课程等着你，这里也有更多的高清动效视频剪辑

https://www.lemooui.com

动效课程

​游戏UI动效剪辑参考

随时欢迎您加入到我们的动效交流群那里有更多动效技术交流和分享