UGUI表情系统解决方案

简介:

◆◆
整合表情图片

请输入图片描述

这是原始的表情资源,按照表情名_序列帧的形式统一命名,然后通过代码打成一张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
转载请与作者联系,同时请务必标明文章原始出处和原文链接及本声明。

目录
相关文章
|
5月前
|
XML Java Android开发
Android App开发之图像加工中给图像添加水波动态特效(附源码和演示视频 简单易懂)
Android App开发之图像加工中给图像添加水波动态特效(附源码和演示视频 简单易懂)
42 0
|
10月前
|
人工智能
像相机一样变焦、填充画面细节,还能自定义风格,AI作画神器Midjourney又更新了
像相机一样变焦、填充画面细节,还能自定义风格,AI作画神器Midjourney又更新了
148 1
|
移动开发 前端开发 JavaScript
分享8个前端可以制作360度WebVr全景视图框架
分享8个前端可以制作360度WebVr全景视图框架
1403 0
分享8个前端可以制作360度WebVr全景视图框架
|
11月前
|
图形学
【unity每日一记】--控制游戏人物移动的细节
【unity每日一记】--控制游戏人物移动的细节
152 0
|
前端开发 JavaScript
一起看跨年烟花(自定义背景+流行背景音乐+雪花)---- 系列
一起看跨年烟花(自定义背景+流行背景音乐+雪花)---- 系列
175 0
一起看跨年烟花(自定义背景+流行背景音乐+雪花)---- 系列
|
前端开发
小视频源码,可控的跑马灯,无需焦点
小视频源码,可控的跑马灯,无需焦点
262 0
|
前端开发
用MVVM模式开发中遇到的零散问题总结(4)——自制摄像头拍摄大头贴控件
原文:用MVVM模式开发中遇到的零散问题总结(4)——自制摄像头拍摄大头贴控件      一直有个疑问,为什么silverlight对摄像头支持这么好,WPF却一个库都没有....于是我各种苦恼啊,各种CodeProject啊,终于让我找到海外兄弟写的源码了,原理是通过不断向摄像头读取图片不断刷新到窗体控件上。
994 0