一种UGUI的Outline描边优化方案

一种UGUI的Outline描边优化方案

1.起因

我们最近的项目使用了UGUI作为UI系统，在使用UGUI的过程中遇到了不少问题，其中一个问题是：描边的文字与美术同学出的效果图有不小的差异。效果图的描边效果连贯而且均匀，而UGUI的Outline组件的效果仅仅只是解决了“温饱问题”，Better Than Not而已，并且这种实现方式带来了其他问题，比如顶点数量的大幅增加。

图1.美术同学的效果图与实际实现的对比（放大至300%）

2.原因分析

UGUI已经部分开源，通过研究Outline的源码可以看到，Outline组件的原理是在原顶点的基础上，在effectDistance.(x,y), (x, -y), (-x,y), (-x,-y)

这4个偏移上ApplyShadowZeroAlloc实现的。亦即Outline组件是在Shadow的基础上实现的，Outline相当于4个不同偏移方向上的Shadow。

图2. UGUI Outline组件的核心源码

进一步查看Shadow的源码，发现Shadow的原理实际上是将原始的顶点

数据复制一份, 根据设置的偏移量计算复制后的新顶点的位置，并为新的顶点颜色赋值为设置的颜色值。

图3. Shadow组件的核心源码

顺便吐槽一下Shadow组件的ApplyShadow方法和

ApplyShadowZeroAlloc方法，恕我愚钝没有看出这样设计的好处。推测可能是为了跟老版本兼容。