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

已于 2022-02-19 18:34:12 修改
阅读量1w 收藏 33
点赞数 9
分类专栏： Unity C# 文章标签： unity 游戏引擎 c# 原力计划
于 2022-02-19 17:46:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45786770/article/details/123018037
版权
Unity 同时被 2 个专栏收录
6 篇文章 2 订阅
订阅专栏
C#
5 篇文章 0 订阅
订阅专栏

文章目录

前言

在忙完项目以后，我又回来了，利用一些时间和心力去总结和思考一些东西。最近项目中玩家通过微信登录，登录后的微信昵称含有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图集而已
导入Icon图标
Emojis目录下的图片
Emojis目录下的图片
QQ目录下的文件
QQ目录下的文件

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

导入脚本

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

xml目录

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

路径为自己项目的路径
打包图集界面
（一）命名方法

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

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

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

（二）生成图集效果
生成图集
（三）生成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);
        }
	}
}

三、项目运用后效果

编辑器效果
编辑器效果
最终效果图
emoji效果图
创作不易，记得😍一键😚三连😘支持一下！
抱着键盘女孩

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

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

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

四、每天一心灵鸡汤

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

荥阳兔兔
关注
专栏目录
unity实战之TextMeshPro实现聊天图文混排
爱上游戏开发
07-11 4346
unity使用TextMeshPro实现聊天图文混排
基于Unity2019版本的UGUI图文混排组件
YearsGo的博客
02-23 3537
该组件是基于Unity2019.4.1f1版本的图文混排组件，实现了静态表情，动态表情，超链接，多图集加载等功能。该组件属于学习用途，不完善的地方可以提取源码自行修改。其中关于超链接点击响应部分关于lua的消息广播如果报错可以自行注释或者删除 链接：https://pan.baidu.com/s/1_0lMjSPlnBxggBOL2swRPQ 提取码：p27x ...
Unity UGUI实现图文混排组件——EmojiText（支持图标，动态表情，按钮，超链接）
11-27
Unity UGUI实现图文混排组件——EmojiText（支持图标，动态表情，按钮，超链接）
Unity(2022.3.38LTS) - 初步学习C#
最新发布
一然明月的博客
08-13 1124
Unity 中使用的 C# 是一种面向对象的编程语言，具有强大的功能和广泛的应用。特点类型安全：在编译时进行严格的类型检查，减少运行时错误。面向对象：支持类、对象、继承、多态等面向对象的特性，使得代码组织更加清晰和可维护。丰富的库和框架：.NET 框架提供了大量的类库，方便实现各种功能。在 Unity 中的应用控制游戏逻辑：编写脚本控制游戏对象的行为、状态和交互。处理用户输入：响应玩家的操作，如键盘、鼠标输入等。实现动画效果：通过代码控制动画的播放、暂停和切换。基本语法控制结构：包括。
Unity开发对Emoji表情包图文混排进行处理显示（支持大多数表情）
01-22
1、开源案例源码，刚好找到，里面自己优化了一下脚本 2、适用于微信登录含有Emoji表情进行处理显示
Unity-EmojiText-master
08-14
Unity-EmojiText-master,unity3d的图文混编emoji表情工程，可供参考
Unity图文混排EmojiText的使用方式和注意事项
Aili_Xiao的博客
05-08 1442
Unity UGUI Text图文混排，支持动态表情，支持多行
Unity中使用TextMeshPro打出Emoji表情
hmf532123602的博客
10-01 7500
Unity中使用TextMeshPro打出Emoji表情。
GText：Unity UGUI Text的表情符号和超链接，图文混排，超链接，下划线的UGUI解决方案
02-04
图文混排，超链接，下划线的UGUI解决方案 支持： * 图集动态表情 * 动态加载图片 * 超链接 * 下划线效果 * 自定义加载动画或特效 除动态加载图片，整体只有1个DrawCall 图中4个DC：Unity本身1个，文本整体只有1个，...
UGUI 图文混排demo
05-09
在"EmojiText-master"这个文件名中，我们可以推测这个Demo可能包含了表情符号（Emoji）的图文混排示例。这可能涉及到特殊字符的处理和渲染，因为标准的文本组件可能不支持所有类型的Unicode表情。 总结来说，"UGUI ...
Unity3D.EmojiText：Unity3D中的EmojiText
02-05
Untiy3D.EmojiText 表情文字 从UnityEngine.UI.Text扩展 如果未附加EmojiConfig，则具有相同的性能。 由UnityEngine.UI.Text处理的布局仅替换生成的文本网格的UV。 因此，您可以使用RichText更改文本的大小和颜色。 （Emoji Sprite不会更改颜色。我禁用了它。您还需要在EmojiConfig中将sizeFactor设置为1） 不需要子GameObject（实际上需要一个子对象来附加CanvasRenderer）。 使用CanvasRenderer渲染表情符号网格。 支持带有markdown链接语法的超链接单击事件。
EmojiText：这是Unity3D UI的EmojiText解决方案
02-05
表情文字 这是Unity3D UI的EmojiText解决方案。 如果您可以从中受益，请给我个星星。 谢谢！ 例： 提示： 本工程基于Unity2017构建，对于低于该版本的Unity引入工程后可能会出现无法正确序列化问题，解决方案很简单，就是删除EmojiData文件，重新生成立即即可。。具体步骤： 1.删​​除工程视图中文件夹“ EmojiText / Resources / EmojiData /”下的EmojiData文件2.列出工程视图中的EmojiData文件夹，右键单击Create / CreateEmojiData 3.在菜单中点击EmojiHelper / FillEmoji
unity ugui 图文混排
10-13
unity ugui 图文混排
unity实现图文混排功能.zip
04-17
实现在Text文本中添加图片表情功能
EmojiText：Unity UGUI Text的Emoji和超链接，继承自UGUI中的Text组件，实现超链接和图文混排
02-05
EmojiText（Emoji，用于UGUI的超链接） Emoji和用于Unity UGUI的超链接文本，继承自UGUI中的文本组件，实现超链接和图文混排， 参考了 相较于GText修改了： 新增点击超链接范围外的一部分 优化下划线表现 新增了超链接颜色渐变 删除了单独的下划线 删除了自定义加载动画 效果图： 输入内容： 测试[E1]默认大小且无点击表情 测试[E2|40#E2Cclick]自定义大小且可点击表情 测试[A1|40#AnimationClick]自定义大小且可点击动态表情 测试[0x01#ff0000#ff00ff#ClickLink=HyperLink超链接]可点击且渐变
在Unity的UGUI中使用EMOJI表情
hmf532123602的博客
03-13 1239
在unity中的ugui使用emoji，支持text和inputfield，同时emoji可以批量处理和更新
Unity图文混排
weixin_30446613的博客
09-27 171
http://blog.csdn.net/akof1314/article/details/49028279 http://blog.csdn.net/akof1314/article/details/49077983 https://docs.unity3d.com/Manual/StyledText.html 源码： https://github.com/akof13...
Unity UGUI TextMeshPro实现输入中文和表情包(Emoji)表情
Dore__的博客
12-07 2232
​。
Unity使用TextMeshPro加载Emoji
不定时记录知识，所以没必要关注啦
06-10 729
我在网上搜索“TextMeshPro如何加载Emoji”，找到这篇文章。文章中说要使用的Pre版本。但实际上我们可以不升级版本也能够让加载Emoji。
unity C#图文混排
07-17
在Unity使用C#进行图文混排，主要是指在游戏中创建包含文本和图像的用户界面元素。通常会利用Unity的UI系统，如UI Text（用于显示文本）和Image（用于加载图像）。以下是基本步骤： 1. **创建UI Canvas**: 首先，在项目中创建一个新的Canvas对象作为所有UI组件的容器。 2. **添加Text和Image**: 在Canvas上拖拽或编写脚本来添加Text组件（输入文本），并添加Image组件（设置背景图或图标）。 3. **布局管理**: 使用RectTransform组件调整Text和Image的位置、大小以及它们之间的相对关系。可以设置Anchor Presets（锚点）或者手动设置Transform属性。 4. **动态更新**: 如果需要程序控制文本或图像内容，可以在C#代码中设置Text.text属性或Image.sprite属性。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值