◆◆◆

整合表情图片

这是原始的表情资源，按照表情名_序列帧的形式统一命名，然后通过代码打成一张Atlas，为了能够支持动态表情，需要在Shader中使用UV动画，但是因为所有的表情都在一张Atlas中，帧数又不统一，因此需要再生成一张可以标识每一个表情有多少帧的数据贴图。

表情和数据Atlas，这两张图片会在最终渲染的Shader中使用。

当然还需要生成一张数据表，用户标识表情名和Text替代符的对应关系，以及每一个表情的UV位置。其中Key中的内容就是在Text中的表情替代符，至于为什么使用这种格式会在后面内容介绍。

---

◆◆◆

重写Text中生成顶点的方法

这是比较关键的步骤，UGUI中Text生成顶点的规律是每个字符生成4个顶点，构成2个面。例如字符串：这是一个Text，在UGUI中会生成8x4=32个顶点，中文、英文、其他字符都是等价的，只是顶点之间的间距不同。因此可以在将表情替代符中的多个顶点修改成适合表情的4个顶点，使用第二套UV标识这部分顶点引用表情贴图，而非字体贴图。例如一个字符串：这里是表情[

读取配置文件，用于后面替换表情符。

利用正则表达式找出全部的表情符，并且匹配是否为系统所支持的表情符（上面读取的配置文件）。

重新生成顶点位置和UV坐标。

---

◆◆◆

重写渲染部分

这是最后一步，重写一个Shader用来渲染。相较于原始Shader增添了几个新的属性。

其中_EmojiSize表示EmojiTexture每一行拥有几个表情，因为本示例中每一行有4个表情，所以这个位置填写4。其他的属性就不做阐述了。

引入第二套uv坐标。

VS几乎没多大变化，只是传递第二套UV坐标。

PS中先判断第二套UV坐标是否有数值，有数值则表明是表情，从_EmojiTex中绘制，从_EmojiDataTex中读取表情帧数，用于做uv动画。

至此，就实现了UGUI的表情系统，可以和原生的其他UGUI控件使用。同时因为只有一个材质，一个Pass，所以也可以进行动态批次合并。

原文出处：侑虎科技 本文作者：admin 转载请与作者联系，同时请务必标明文章原始出处和原文链接及本声明。