Unity Emoji表情（图文混排）2022最详细教程

Posted 荥阳兔兔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Unity Emoji表情（图文混排）2022最详细教程相关的知识，希望对你有一定的参考价值。

文章目录

前言

在忙完项目以后，我又回来了，利用一些时间和心力去总结和思考一些东西。最近项目中玩家通过微信登录，登录后的微信昵称含有emoji表情，这样直接使用会显示乱码，C#无法直接处理，网上也没有比较好的解决方案，刚好找到了图文混排开源demo，顺便优化了一下脚本。

提示：以下是本篇文章正文内容，下面案例可供参考

一、emoji是什么？

emoji （日本在无线通信中所使用的视觉情感符号）

绘文字（日语：絵文字/えもじ emoji）是日本在无线通信中所使用的视觉情感符号，绘指图画，文字指的则是字符，可用来代表多种表情，如笑脸表示笑、蛋糕表示食物等。在中国大陆，emoji通常叫做“小黄脸”，或者直称emoji

在NTTDoCoMo的i-mode系统电话系统中，绘文字的尺寸是12x12 像素，在传送时，一个图形有2个字节。Unicode编码为E63E到E757，而在Shift-JIS编码则是从F89F到F9FC。基本的绘文字共有176个符号，在C-HTML4.0的编程语言中，则另增添了76个情感符号。

自苹果公司发布的iOS 5输入法中加入了emoji后，这种表情符号开始席卷全球，emoji已被大多数现代计算机系统所兼容的Unicode编码采纳，普遍应用于各种手机短信和社交网络中。

表情符号Unicode表官网

二、使用步骤

1.将源码文件导入自己的项目中

步骤一：将Editor目录文件EmojiAtlasBaker移入到自己的项目Editor目录下

步骤二、导入Icon到自己项目中 (EmojiAtlas 跟 QQIconAtlas可先删除掉，步骤五可生成图集及xml文件)

*注意 Emojis跟QQ目录下的图片过多，打包项目时可存放到其他项目或者其他地方，减少打包的大小，这个两个目录的作用只是用于生成EmojiAtlas跟QQIconAtlas图集而已

Emojis目录下的图片

QQ目录下的文件

步骤三、导入EmojiEffect跟EmojiTextManager脚本到项目Script目录下

步骤四、在项目根目录下创建Xml文件夹，下面的两个文件是步骤五生成的文件，用于获取图集名称及信息

步骤五、在Unity选线栏Tool->Bake Emoji Atlas会有这个选项，单击这个选项，会弹出以下界面（打包图集）

路径为自己项目的路径

（一）命名方法

Emoji表情XML命名: EmojiXml			图集命名: EmojiAtlas

QQ表情XML命名: QQIconXml		        图集命名:QQIconAtlas

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

（二）生成图集效果

（三）生成XML配置文件

（四）XML配置文件内容

2.实际应用

一、在初始化时读取调用XML文件

using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using LitJson;
using UnityEngine;
using UnityEngine.UI;

public class IndexPanel : BaseUI

	public Text userNameTxt;
	# 定义图集参数并在预制体上绑定
	public Texture emojiAtlas;
	public Texture qqIconAtlas;
	
	// Use this for initialization
	void Start()
		StartCoroutine(GetReadEmojiXml());
		StartCoroutine(ReadIconXml());
	

	public static IEnumerator ReadIconXml() 
		string path = Application.streamingAssetsPath+"/Xml/QQIconXml.xml";
		#if UNITY_EDITOR || UNITY_STANDALONE || UNITY_ios
	    path = "file://"+path;
	    #endif
		WWW wWA=new WWW(path);///WWW读取在各个平台上都可使用
	    yield return wWA;
		XmlDocument XmlDoc = new XmlDocument();
		// Debug.LogError("-----------------QQ表情配置内容："+wWA.text);
		XmlDoc.LoadXml(wWA.text);
	    XmlNodeList nodeList = XmlDoc.SelectSingleNode("root").ChildNodes;
	    foreach (XmlElement xe in nodeList)
	    
	        var resStr = string.Empty;
	        resStr = xe["textTag"].InnerText + "|" + xe["rectX"].InnerText + "|" + xe["rectY"].InnerText + "|" + xe["rectWidth"].InnerText + "|" + xe["rectHeight"].InnerText + "|" + "0";
	        EmojiTextManager.Instance.ParseNormalIcon(resStr);
	    
	

    public static IEnumerator GetReadEmojiXml()
		Debug.LogErrorFormat("---------------------Application数据路径为："+Application.streamingAssetsPath);
		string path = Application.streamingAssetsPath+"/Xml/EmojiXml.xml";
		#if UNITY_EDITOR || UNITY_STANDALONE || UNITY_IOS
        path = "file://"+path;
        #endif
		WWW wWA=new WWW(path);///WWW读取在各个平台上都可使用
        yield return wWA; 
		XmlDocument XmlDoc = new XmlDocument();
		// Debug.LogError("-----------------Emoji表情配置内容："+wWA.text);
		XmlDoc.LoadXml(wWA.text);
        XmlNodeList nodeList = XmlDoc.SelectSingleNode("root").ChildNodes;
        foreach (XmlElement xe in nodeList)
        
            var resStr = string.Empty;
            resStr = xe["emojiFileNames"].InnerText + "|" + xe["rectX"].InnerText + "|" + xe["rectY"].InnerText + "|" + xe["rectWidth"].InnerText + "|" + xe["rectHeight"].InnerText + "|" + xe["textTag"].InnerText;
            EmojiTextManager.Instance.ParseEmojiInfo(resStr);

在IndexPanel预制体上绑定图集跟EmojiTextManager脚本

二、服务器回调用户信息


  "code": "20000",
  "data": 
    "phonePrefix": "+86",
    "ip": "111.111.11.111",
    "avatar": "group1/M00/00/10/rBKu4WHyN4GEfAhZAAAAAE40vZI779.jpg",
    "inGame": false,
    "userName": "\\u8365\\u9633\\uD83D\\uDE1A\\u5154\\u5154\\uD83C\\uDDE8\\uD83C\\uDDF3",
    "myInviteCode": "70436160",
    "token": "ffJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJub2NlIjoxNjQ1MjYwNTkwMDI1LCJ1c2VybmFtZSI6Iis4NjoxNTIxODk2ODMyMSJ9.CIDWw9B0IwoQQqwXcnLWkvpv8lZWdEu3-KXukQNM4ff",
    "hasThirdParty": false,
    "lastLoginTime": 1645260589987,
    "diamond": 8242,
    "phone": "11111111111",
    "gpsLat": "111",
    "inviteCode": "111111",
    "gpsLng": "111111",
    "connection": 
      "port": 00,
      "host": "11.111.111.1"
    ,
    "id": "70436160",
    "gpsLoaction": "\\u7279\\u6717\\u666e\\u5bb6",
    "status": 0
  ,
  "message": "\\u6210\\u529F",
  "requestId": "1645260589",
  "url": "gateServer::/login"

返回的json里面有userName，这里就是要处理的数据，可复制后面的Unicode字符串到Unicode编码转换开放平台上转换，转换结果如下：

三、获取数据进行处理演示

using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using LitJson;
using UnityEngine;
using UnityEngine.UI;

public class IndexPanel : BaseUI

	public Text userNameTxt;
	# 定义图集参数并在预制体上绑定
	public Texture emojiAtlas;
	public Texture qqIconAtlas;
	
	// Use this for initialization
	void Start()
		StartCoroutine(GetReadEmojiXml());
		StartCoroutine(ReadIconXml());
		string userNameStr = "\\u8365\\u9633\\uD83D\\uDE1A\\u5154\\u5154\\uD83C\\uDDE8\\uD83C\\uDDF3";
		# 传入方法中(参数: Text文本, Unicode字符串, 图集)
		EmojiTextManager.Instance.SetUITextThatHasEmoji(userNameTxt, usrNameStr, emojiAtlas);
	

	public static IEnumerator ReadIconXml() 
		string path = Application.streamingAssetsPath+"/Xml/QQIconXml.xml";
		#if UNITY_EDITOR || UNITY_STANDALONE || UNITY_IOS
	    path = "file://"+path;
	    #endif
		WWW wWA=new WWW(path);///WWW读取在各个平台上都可使用
	    yield return wWA;
		XmlDocument XmlDoc = new XmlDocument();
		// Debug.LogError("-----------------QQ表情配置内容："+wWA.text);
		XmlDoc.LoadXml(wWA.text);
	    XmlNodeList nodeList = XmlDoc.SelectSingleNode("root").ChildNodes;
	    foreach (XmlElement xe in nodeList)
	    
	        var resStr = string.Empty;
	        resStr = xe["textTag"].InnerText + "|" + xe["rectX"].InnerText + "|" + xe["rectY"].InnerText + "|" + xe["rectWidth"].InnerText + "|" + xe["rectHeight"].InnerText + "|" + "0";
	        EmojiTextManager.Instance.ParseNormalIcon(resStr);
	    
	

    public static IEnumerator GetReadEmojiXml()
		Debug.LogErrorFormat("---------------------Application数据路径为："+Application.streamingAssetsPath);
		string path = Application.streamingAssetsPath+"/Xml/EmojiXml.xml";
		#if UNITY_EDITOR || UNITY_STANDALONE || UNITY_IOS
        path = "file://"+path;
        #endif
		WWW wWA=new WWW(path);///WWW读取在各个平台上都可使用
        yield return wWA; 
		XmlDocument XmlDoc = new XmlDocument();
		// Debug.LogError("-----------------Emoji表情配置内容："+wWA.text);
		XmlDoc.LoadXml(wWA.text);
        XmlNodeList nodeList = XmlDoc.SelectSingleNode("root").ChildNodes;
        foreach (XmlElement xe in nodeList)
        
            var resStr = string.Empty;
            resStr = xe["emojiFileNames"].InnerText + "|" + xe["rectX"].InnerText + "|" + xe["rectY"].InnerText + "|" + xe["rectWidth"].InnerText + "|" + xe["rectHeight"].InnerText + "|" + xe["textTag"].InnerText;
            EmojiTextManager.Instance.ParseEmojiInfo(resStr);

三、项目运用后效果

编辑器效果

最终效果图

创作不易，记得😍一键😚三连😘支持一下！

其他博客含有表情包的链接：
博客一：unity3d在UGUI中显示带表情的微信昵称
博客二：UGUI Text组件上动态显示Emoji

*注意： 源码文本长度不够会报错
GitHub源码地址：mcraiha/Unity-UI-emoji
博主优化后源码地址：Unity开发对Emoji表情包图文混排进行处理显示（支持大多数表情）

想了解更多，可以看一下csdn的Unity商业级Emoji表情系统-11.TexturePacker的简单使用教程(付费视频) 【其实本人也没看过🙈，哈哈~】

四、每天一心灵鸡汤

放下你的浮躁，放下你的懒惰，放下你的三分钟热度，放空你禁不住诱惑的大脑，放开你容易被任何事物吸引的眼睛，放淡你什么都想聊两句八卦的嘴巴，静下心来做你该做的事，该好好努力了！有时候真的努力后，你会发现自己要比想象的优秀很多。记住一句话，越努力，越幸运。

iOS 表情键盘+gif聊天图文混排，看我的就够了

参考技术A 之前做过 【OC版本】 和 【swift版本】 图文混排和表情键盘，说实在的很low，特别是键盘，整体只是实现了效果并没有封装，很难集成使用！而且之前是使用的附件做的并不支持gif表情，我尝试各种方法，想实现类似qq的丝滑gif表情体验，真的不容易；经过各种尝试和努力最终基于 【YYText】 实现了类似qq的gif表情聊天方案，大量的表情也不会卡顿！而且这次的键盘做了比较全面的封装集成起来很方便！

单行输入：

多行输入：

键盘的集成方法：

项目github地址： LiuqsEmoticonkeyboard

2. LiuqsEmotionPageView 键盘的分页类用来放表情按钮，内部主要处理按所在行列位置的计算,需要给出当前是第几页，用来加载表情：

3. LiuqsKeyBoardHeader 全局宏定义的类。

4. LiuqsTopBarView 键盘上输入框和一些切换按钮的实体类，这个可以根据需求自定义：

5. LiuqsButton 键盘上的表情按钮，自定义是为了更好的和图片一一对应，更容易处理。

6. NSAttributedString+LiuqsExtension 富文本的分类：

getPlainString 方法主要是通过遍历富文本中的附件（在这里是指表情图片）并使用普通的字符串（比如：[大笑]）替换，得到普通的字符串编码，拿字符串编码去通讯，比如调用接口发消息；
举个栗子：
转换过的字符串是这样滴： 好害羞[害羞]！
用来展示的效果是这样滴：

7. LiuqsTextAttachment 自定义附件类，继承于NSTextAttachment。

8. LiuqsDecoder 转码的核心类：

主要方法：

详细说一下内部的实现：
首先是静态属性：

到此基本就说完了！YYText有很多强大的功能，大家自己可以随意扩展，在这里只用到了imageView附件。
可能讲不够全面，具体细节可以看 项目demo ！
写的比较辛苦，如果对你有用希望可以支持一下，记得给个star哦！
有任何意见和建议都可以提出来，我的邮箱： liuquanshui@100tal.com

以上是关于Unity Emoji表情（图文混排）2022最详细教程的主要内容，如果未能解决你的问题，请参考以下文章

UGUI-图文混排方案

将表情字符串转化成对应的emoji表情图片

iOS 表情键盘+gif聊天图文混排，看我的就够了

图文混排——用表情代替 “[文字]”显示

经验之谈—正則表達式实现图文混排

C#实现聊天消息渲染图文混排（支持WindowsLinux）