UGUI文字效果实现（Shadow\Gradient\Outline）

NGUI直接在UILabel组件中接入了Shadow、Gradient和outline选项&＃xff0c;但在UGUI中是通过另外的组件单独提供&＃xff0c;比如outline、shader等。这篇文章主要记录这几个文字效果实现的思路和流程。

1. 实现思路

1. UGUI源码分析

UGUI 的 Text 渲染的过程是由 TextGenerator 产生顶点数据&＃xff0c;配合字体产生的贴图最终显示在屏幕上 . 下图为Text组件的继承树。

UGUI中很多渲染相关的组件都是继承自Graphics&＃xff0c;而Graphics还在Canvas绘制之前进行重建。Graphics中定义了渲染框架&＃xff0c;核心代码如下。Text、Image组件的需要自己实现 protected virtual void OnPopulateMesh(VertexHelper vh) 方法来填充需要的数据。Unity提供了IMeshModifier接口供外部使用&＃xff0c;如果在Text组件所在物体中存在IMeshModifier类型的组件&＃xff0c;则会调用ModifyMesh方法允许你获得渲染数据。也就是说可以通过这种方式进行mesh、贴图等数据的修改。

protected virtual void UpdateGeometry(){if (useLegacyMeshGeneration)DoLegacyMeshGeneration();elseDoMeshGeneration();}private void DoMeshGeneration(){if (rectTransform !&＃61; null && rectTransform.rect.width >&＃61; 0 && rectTransform.rect.height >&＃61; 0)//获取数据OnPopulateMesh(s_VertexHelper);elses_VertexHelper.Clear(); // clear the vertex helper so invalid graphics dont draw.var components &＃61; ListPool.Get();GetComponents(typeof(IMeshModifier), components);//检测是否存在IMeshModifier接口类型组件for (var i &＃61; 0; i .Release(components);//填充渲染数据s_VertexHelper.FillMesh(workerMesh);canvasRenderer.SetMesh(workerMesh);}

2. 实现接口

Unity提供了BaseMeshEffect类型&＃xff0c;继承自IMeshModifier&＃xff0c;提供 public abstract void ModifyMesh(VertexHelper vh); 接口。不过从4.7到现在这个接口修改了很多次&＃xff0c;5.3版本是这个&＃xff0c;5.5版本似乎又做了修改。文字的各种特效就可以通过这个接口获得渲染数据并进行修改即可。

2. 颜色渐变&＃xff08;Gradient&＃xff09;

渐变其实就是根据需要进行渐变的方向和颜色修改顶点的颜色值。 如果只考虑上下方向的渐变&＃xff0c;可以计算字符上下最大和最小值&＃xff0c;然后进行插值即可计算出需要的颜色。对于多方向的渐变实现稍稍麻烦点&＃xff0c;原理类似。核心代码如下&＃xff1a;

public override void ModifyMesh(VertexHelper vh){var vertexList &＃61; new List();vh.GetUIVertexStream(vertexList);int count &＃61; vertexList.Count;ApplyGradient(vertexList, 0, count);vh.Clear();vh.AddUIVertexTriangleStream(vertexList);}private void ApplyGradient(List vertexList, int start, int end){float bottomY &＃61; vertexList[0].position.y;float topY &＃61; vertexList[0].position.y;for (int i &＃61; start; i topY) {topY &＃61; y;} else if (y

3. 阴影&＃xff08;Shadow&＃xff09;