UGUI表情系统解决方案
聊天是游戏中必不可少的功能,发送表情也是聊天系统的一个重要组成部分。笔者的项目中使用UGUI开发UI,在制作表情系统时也遇到了同样的问题,可是UGUI中的Text组件本身并不支持图文混编。为此,笔者提供了一套解决方案,供大家参考。
这是侑虎科技第147篇原创文章,感谢作者邹春毅(QQ:442319386,作者博客:https://github.com/zouchunyi)供稿。如果您有任何独到的见解或者发现也欢迎联系我们,一起探讨。(QQ群465082844)同时,作者也是U Sparkle活动参与者哦,UWA欢迎更多开发朋友加入 U Sparkle开发者计划,这个舞台有你更精彩!
Unity推荐的方式是使用TextMesh解决混编问题。TextMesh的确可以实现混编,但是却存在和UGUI较难整合的问题(Mask遮罩、自适应等),同时也会因为使用多个材质导致无法使用动态批次合并。网上也有人使用Text+Image的形式来处理图文混编,但是需要解决排序等问题。最好的解决方案还是能让UGUI的Text能够自身支持图文混编。
通过查看UGUI的源代码和其Shader,可以重写Text生成Mesh的方法以及最终渲染的Shader,以此来实现图文混编的功能,后文会为大家一步步介绍实现方法。
整合表情图片
这是原始的表情资源,按照表情名_序列帧的形式统一命名,然后通过代码打成一张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,所以也可以进行动态批次合并。
工程代码笔者以上传到自己的Github中,https://github.com/zouchunyi/EmojiText,欢迎大家Clone。
文末,再次感谢邹春毅的分享,如果您有任何独到的见解或者发现也欢迎联系我们,一起探讨。(QQ群465082844)。
也欢迎大家来积极参与U Sparkle开发者计划,简称"US",代表你和我,代表UWA和开发者在一起!
相关文章
- 夏日葵电商:连锁零售店小程序o2o系统解决方案
- 机房收费系统之全局认识
- 机房收费系统之初体验
- Linux技巧--Redhat 5系统中的vim编辑器无法正常显示中文解决方案(中文显示为乱码)/Ubuntu 12.04系统gedit中文乱码
- 【血的教训】玩 Ubuntu 遇到的致命问题(进不了系统)及 解决方案
- 【Mac】系统语言切换为英文后chrome浏览器无法用国内印象笔记账号登陆印象笔记剪藏
- 系统设置 - 管理员工具 - 系统设置
- Android应用中实现系统“分享”接口
- 考试系统--底层框架发布时遇到的问题解决方案(Window7 IIS6.0)(二)
- 基于EasyDSS流媒体RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器解决方案创建视频点播、短视频、视频资源库等视频播放系统
- 你不能错过的“推荐系统”资料合集
- Atitit 在线支付系统功能设计原理与解决方案 与目录
- Atitit.vod 视频播放系统 影吧系统的架构图 架构体系 解决方案
- Atitit.vod 视频播放系统 影吧系统的架构图 架构体系 解决方案
- Atitit.vod 视频播放系统 影吧系统的架构图 架构体系 解决方案
- Android 系统AMS服务
- android 8.1 9.0 10.0 状态栏高度为0时,系统全局手势失效的解决方案
- 【微电网优化调度】目标最小化微电网成本,由太阳能电池板阵列和储能系统组成(Python代码实现)
- Mac系统下安装Tomcat,以及终端出现No such file or directory的错误提示解决方案
- 慕课网微信点餐系统之商品信息加载不出来解决方案
- SRS搭建自己的直播、点播系统
- C语言之系统函数offsetof偏移原理拆解(七十六)
- 装有Win7系统的电脑在局域网不能共享的解决方案
- CompletableFuture提高系统性能1
- 联想YOGA Air 14s笔记本怎么快速重装Win7系统教学