【Unity】ugui图文混排实现

C#

浏览数:128

2019-8-30

AD:资源代下载服务

写在前面,最近在写聊天系统,这里面就有一个很重要的环节就是表情与文字混排需要解决。前段时间有客户说微信登录,有的人微信名字含有emoji,这样直接使用会显示乱码。就一起解决了。

功能

◆打包图集
◆图文混排
◆使用输入法直接输入emoji转化显示

怎么用?

打包图集

点击Tool->Bake Emoji Atlas然后设置好各个选项点击生成即可。

显示emoji

EmojiTextManager.Instance.SetChatTextEmoji(Emoji, "{emoji:54}Emoji表情{emoji:4}", "54|4|", emojiAtlas);

使用这个是已知emoji的id,用于聊天表情框选择等。

EmojiTextManager.Instance.SetUITextThatHasEmoji(inputEmoji, "自行车: \U0001F6B4, 国旗: \U0001F1FA\U0001F1F8", emojiAtlas);

使用于用户直接用输入法输入emoji或者获得网络消息中含有emoji的Unicode的时候。

EmojiTextManager.Instance.SetUITextThatHasIconByAtlas(qq, "{emoji:44}QQ{emoji:55}表情{emoji:4}", iconAtlas);

与第一个同样,区别在于这是使用自定义的图集。

EmojiTextManager.Instance.ConvertInputFieldText(str);

用于用户使用输入法输入emoji,显示输入框中的表现。

填充数据

EmojiTextManager.Instance.ParseEmojiInfo(resStr);
EmojiTextManager.Instance.ParseNormalIcon(resStr);

这个需要在使用显示图片之前调用。

具体实现

打包图集

图集工具

设置好上面的参数。生成会把图片文件夹中的图片遍历打到一个Texture2D中,然后把每张图片在图集的位置大小记录下来,然后把这些数据存入xml文件中。在生成每个表情时可以设置UV来确定哪一个图片。

图文混排

这个功能在网上看到大多是使用的富文本加重写Text组件来实现的。这次并没有使用这个方案,
使用的Git上面的这个开源方案,但是这个方案有一个致命问题——只适用于一个分辨率。解决这个问题的方案是使用了NGUI中的使文字渐变的功能的原理。

public class EmojiEffect : BaseMeshEffect{
       public override void ModifyMesh(VertexHelper vh){}
}

继承与BaseMeshEffect抽象类,然后重写ModifyMesh方法。这个方法会在你修改文字时调用。值得注意的是这个方法在编辑器下也会调用。然后使用下面的代码获得文字的顶点。

var vertexList=newList<UIVertex> ();
vh.GetUIVertexStream(vertexList);

这里的每一个文字有6个顶点。第一个和最后一个顶点在一个位子,以顺时针增加,第三个和第四个顶点是在一起。如下示意图:

顶点示意图

根据顶点位子来确定表情位置,在表情的位置使用了占位符替换。

private const char emSpace = '\u2001';

根据字符串匹配判断表情在那个字符的后面。可以看看这篇文章使用正则表达式匹配,当然也有使用直接遍历比对。

写在后面

这个里面还有很多没有优化,一些东西也没有改,等后面有时间了再来修改吧。:-)
先写这么多吧。
嗯,一定要好好锻炼,好好减肥!
这个是工程地址

2017/11/24更新

这里有一个小提示,这个显示功能需要在物体激活状态才会正常运行,当然这里有一个特殊情况就是打开一个界面需要运行此方法,但是立马又关闭了这个界面,会有一个小的报错,如果是切页类型的话,就会造成显示错误。

2017/12/14更新

如果文字被截断了,这里需要做一下判断,不然会报空。应该是文字没有被渲染出来,所以顶点也不会有,所以这里顶点列表中就会越界。

作者:黒可乐