Unity UGUI Text图文混排(聊天文字混表情),支持动态表情,出招吧表情帝

一、前言

点关注不迷路,持续输出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.pngb_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.shadershader代码见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相关的技术难题,也欢迎留言或私信~

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页