【游戏开发实战】Unity UGUI Text图文混排（聊天文字混表情），支持动态表情，出招吧表情帝

文章目录

一、前言
二、最终效果
三、具体使用
- 1、导入表情素材
- 2、设置图片格式
- 3、生成表情图集
- 4、UI-EmojiFont.shader
- 5、材质球
四、测试
五、结束语

一、前言

点关注不迷路，持续输出Unity干货文章。

嗨，大家好，我是新发。
我们在聊天中经常会使用到表情插在文字中的情况，比如下面这样：

我们在Unity中如何实现这种图文混排的效果呢？今天就来介绍下Unity UGUI Text图文混排的实现吧。

二、最终效果

本文Demo工程已上传到CodeChina，感兴趣的同学可自行下载学习。
地址：https://codechina.csdn.net/linxinfa/UnityEmojiTextDemo
注：我使用的Unity版本：2020.2.7f1c1 (64-bit)。

注：本工程改版自Github工程：https://github.com/zouchunyi/EmojiText

三、具体使用

1、导入表情素材

将表情图片素材（png格式）导入到Unity工程中的这个目录中：Assets/Emoji/Input，
注意图片命名规范：纯字母.png或 纯字母_数字.png，例：a.png, b_0.png，b_1.png。
同一个表情的序列帧图片，以_数字结尾，一个表情最多支持8帧序列帧。
确保所有表情图片的尺寸一致，且是正方形，不要有的大有的小。

2、设置图片格式

设置图片格式为Default，设置Non-Power of 2(2的n次方)为ToNearest，勾选Read/Write Enabled。
最后点击Apply按钮。

看下此时单个表情的尺寸，如下，是128*128。

3、生成表情图集

点击菜单EmojiText / Open Emoji Build Editor。

此时打开窗口如下，填写单个表情图尺寸为128。

点击生成图集按钮，生成成功。

可以看到Output目录生成了三个文件。

其中emoji.txt记录了每个表情的数据信息。

会同时自动拷贝一份到Resources文件夹中。

那个emoji_data用于记录序列帧数量，
计算公式：

half frameCount = 1 + sign(data.r) + sign(data.g) * 2 + sign(data.b) * 4;

就是用rbg来存储一个数值，例：
只有1帧，r:0 g:0 b:0，那么就是黑色，
如果有2帧，r:0.5 g:0 b:0，那么就是红色，
如果是4帧，r:0.5 g:0.5 b:0，那么就是军绿色

4、UI-EmojiFont.shader

Shader文件夹中是一个UI-EmojiFont.shader，shader代码见Demo工程。

5、材质球

Material文件夹中是一个材质球。

材质球使用上的shader脚本，设置Emoji Texture为表情图集，设置Emoji Data为

因为生成的图集的每一行是4个表情，所以设置Emoji count of every line为4，FrameSpeed是每秒播放序列帧数量，设置为4差不多。

四、测试

在Canvas子节点下创建一个空物体，挂上EmojiText脚本（脚本代码参加Demo工程）。
设置Material为上面的材质球，Text输入文本，要显示表情，则以[数字]的形式显示。

具体数字表示哪个表情，就是上文说的生成的那个emoji.txt中的key。

运行效果如下：

我们可以看到，只需要2个批次即可，效果还是不错的。

五、结束语

完毕。
喜欢Unity的同学，不要忘记点击关注，如果有什么Unity相关的技术难题，也欢迎留言或私信~