您需要 登录 才可以下载或查看，没有账号？注册
x
《天谕》Unity程序化生成UI模型与顶点动画！ 文/游戏蛮牛
顶点动画一般指通过顶点着色器对模型每个顶点独立运动的方法。在游戏中遇到碎片爆破或者聚合一类的、涉及到大量同类物体在有序和无序之间切换的特殊效果，就非常适合将所有物体顶点每帧位移和形变的迭代交付给GPU进行并行运算制作顶点动画。 本文主要介绍借助顶点动画的思路在UI界面上的应用尝试，通过程序化生成的方法生成定制UI面片，来制作取色盘系统的顶点动画效果。
色盘效果预览 实现这样的轮盘效果需要解决两个问题： 1、 绘制圆弧极坐标排列的色块 2、 每个色块交错时序的展开动画 UI面片绘制： 从最简单的方形面片开始，使用unity 的Graphic类进行扩展帮助我们解决各种UI适配排序的问题，绘制mesh的步骤虽然有点繁琐但并不困难，为四个顶点的位置和uv坐标赋值，然后用顶点顺时针链接成两个三角形，将定点的顺序的序号依次存入indexBuffer。 我参考的是hallgrimgames的这篇文章： www.hallgrimgames.com/blog/2018/11/25/custom-unity-ui-meshes 还有Saticmotion 的对大量mesh更新的方法： saticmotion.github.io/Blog/2018/06/26/Generating-UI-Meshes-in-Unity.html 这里就不详细解释具体步骤了。
边缘锯齿处理 很快你就会发现用纯色直接填充的多边形边缘只要与xy轴方向有一点点偏差就会产生锯齿。 这样的情况在UI图片上也会发生，如果仔细观察会发现在图片上并不是所有的边缘都会产生锯齿，产色锯齿的边缘通常边界明暗对比比较大，而且过渡比较锐利，在模糊或者有外发光的边缘就比较少有锯齿。总之有一定过渡的边缘就不容易产生锯齿，通过unity的双精度采样，如果我们仅在色块周围加上像素的半透明描边，边缘的锯齿效果就可以减弱很多，两个像素过渡，锯齿就已经很难察觉了，虽然这种方法会减少图片的锐利程度（标准的矢量图消除锯齿会在边缘增强一些对比度），但在一般手机１０８０p分辨率下这种损失几乎无法察觉，而相比于后处理的消除锯齿方案我们换来的是几乎免费的消除锯齿。
本次实现的边缘处理使用了类似九宫格的处理方案，根据拉伸uv坐标绘制一个径向渐变，在多边形的边缘产生过渡，在后面我们会向外拉伸这些渐变，形成模糊的边缘。
造型和排布 当取得了对绘制色块的完全控制，绘制梯形的阵列就非常简单了，设置一个圆心和色块的高度和宽度，我们就可以根据到圆形的距离确定上底和下低的宽度，然后按照固定的角度和间距就可以用色块排出我们想要的扇形阵列。 这时候横向用直线段链接的边缘就显得非常不顺畅，然而使用线段绘制这种小段圆弧会非常不划算，我们将要把圆弧绘制的任务交给像素着色阶段，绘制圆弧需要知道圆心的位置和圆弧的半径，在绘制的时候圆心位置为所有顶点共享，可以由材质参数定义，前后圆弧半径每个顶点有所不同，可以在使用一组材质坐标分别保存在每个顶点上。在着色阶段根据每个像素到圆形的距离和圆弧半径的差值计算透明度即可绘制圆弧边缘。由于圆弧的加入，在绘制顶点时需留好余量，以免被边缘截掉。 完成基本型以后我们需要考虑如何给每个色块配置颜色，如果由现成的颜色数组我们可以直接讲颜色赋值给顶点颜色，或者也可以将颜色保存在贴图上，每个色块根据自身在色盘中的位置配置保存一个材质坐标，这个表示位置的材质坐标在之后的动画中也会派上用场。 点击和旋转 由于排布比较规则，点击的判定可以通过点击位置相对圆心的距离和角度计算。
旋转循环处理 最后在要让轮盘转起来，还需要考虑如何处理色盘的边界，由于色盘的颜色采样的是贴图，如果贴图的warpmode 设置为repeat 的话，颜色就可以自然的循环起来。而轮盘实际旋转的时候每过一列色块的角度，所有色块都会往回跳一格，并选取下一格的颜色，使得轮盘看起来在持续旋转，但实际屏幕上一直显示的是固定的一组色块。 顶点动画 完成了基本图形的绘制我们就可以开始制作动画了。
展开0.25倍数 对于展开动画其实每一个色块的运动使用的都是同一种动画，但是由于色块之间时间顺序的差异，产生了看似很厉害的感觉。 单个色块的运动是一个简单的加速减速动画，同时色块的尺寸会随着速度的变化进行响应的拉伸，作为其受力的表现。同时在运动时拉伸模糊边缘产生简单的动态模糊效果。 速度和形变都由时间控制，同简单的表达式进行配置。
每一块色块的延迟播放时间会根据其在轮盘中横向、纵向的位置以及自身配置的随机数与配置的权重累加产生： 根据配置不同的权重可以产生各种不同的顺序效果。
动画配置效果 色盘到HSB取色器的变化其实也是同样的道理，我们可以在顶点上配置好一组新的坐标然后根据新位置重新计算显示的颜色即可。在项目中只是选取了轮盘中间一块区域对HSB中心方块做了简单的映射关系，根据预设的尺寸重新计算了新坐标，省下一组顶点坐标。
色盘取色器切换效果
点击抖动扩散效果 以上这些就是色盘顶点动画实现的大致内容。这套方案其实还有很多可以扩展的效果，比如在点击的反馈上，根据点击的位置和时间可以制作扩散的抖动效果，你可以将色块的运动和形变写入RT单独计算或者进行烘培，便可以解锁做更多酷炫的模拟效果。由于本人也没有具体实践，有兴趣的同学可以自行挖掘，欢迎交流！
| 
评分
