Oct 29, 2015 programming game

UGUI 实现圆形环绕文字

本文使用的示例基于 Unity3d 4.6.x

美术希望在 Unity3d 中实现圆形环绕的文字。但是找了一圈没有发现比较适合的插件。于是读了一下 unity3d-ui 的源码关于文字渲染的部分，最终找到了一种简单可行的方案。

¶0x00 Solution

UGUI 的 Text 渲染的过程是由 TextGenerator 产生顶点数据，配合字体产生的贴图最终显示在屏幕上。如果我们能修改 Text 的顶点位置，就能按照需求将文字摆放到圆周上。

从 Text 类的继承树（Text -|> MaskableGraphic -|> Graphic）我们可以追溯到 Graphic 基类。在 Graphic 类中有一个 void UpdateGeometry() 方法，它会调用由子类覆盖的 void OnFillVBO(List<UIVertex> vbo) 方法产生顶点，然后从组件中获取实现 IVertexModifier 接口的脚本，按从上到下的顺序执行 ModifyVertices() 操作，以便在顶点数据更新到显存之前修改它。

protected virtual void UpdateGeometry()
{
    var vbo = s_VboPool.Get();

    if (rectTransform != null && rectTransform.rect.width >= 0 && rectTransform.rect.height >= 0)
        OnFillVBO(vbo);

    var components = ComponentListPool.Get();
    GetComponents(typeof(IVertexModifier), components);

    for (var i = 0; i < components.Count; i++)
        (components[i] as IVertexModifier).ModifyVertices(vbo);
    ComponentListPool.Release(components);

    canvasRenderer.SetVertices(vbo);
    s_VboPool.Release(vbo);
}

在 UGUI 中，使用到 IVertexModifier 这个接口的类有 BaseVertexEffect，以及它的子类：Shadow（阴影），和 Outline（描边）。恍然大悟！原来这两个特效便是通过修改顶点实现的：阴影的本质就是复制原有的文字顶点到 VBO（vertex buffer object）尾部，再修改原顶点的颜色并作一点偏移，阴影就出来了。