TextMesh Pro Emoji Align With Text(表情和文字对齐)

简介:

文章目录点击展开[+]

前言
MMO游戏中需要富文件组件,大体功能包括图文混排,表情,超链接,文字动画等富文本功能,且DC数占用少。

本文选择Unity免费提供的TextMesh Pro 解决方案。

软件环境

Unity3D 5.3.7p4

TextMesh Pro 1.0.555.0b11(Jul 06.2017)

TexturePack 3.x

TextMeshPro文档和资料

Asset Store(免费下载):https://www.assetstore.unity3d.com/cn/#!/content/84126

官方文档:http://digitalnativestudios.com/textmeshpro/docs/

视频介绍:Unity纳入TextMesh Pro,打开文本开发新世界

此插件之前是收费的,但Unity把它收购了,目前免费提供给Unity开发者。详见:TextMesh Pro Joins Unity:https://blogs.unity3d.com/cn/2017/03/20/textmesh-pro-joins-unity/

目前在AssetStore开放下载的版本,没有源码,提供的是DLL

自定义图集
我们的项目中使用自定义表情和文字,没有使用示例图集。

制作自定义图集

1、把所有的表情图片导入到TexturePack,打成图集(TexturePack打图集的设置在后面会介绍)

2、TexturePack导出的文件有两个,xxxAtlas.png和xxxAtlas.json

image

3、把Atlas.png和Atlas.json,导入Unity中,放在TMP指定的目录中

4、点击 Window – TextMesh Pro – Sprite Import

image

5、制作TextMeshPro可识别的图集后,(在TMP Settings.asset设置默认图集)

在TextMesh的Text中输入文字和表情符号,就可以解析出表情啦

image

TexturePack打图集的设置

DataFormat设置为Json(Arry) TextMeshPro能够识别的格式

Size constraints: POT (尺寸设置为2的次方) 这一点很重要,节省内存

左右和上下间隙和Border padding 、Shape Pading 、Inner Padding 都设置为0 ,目地是为保证每一个图片是对齐的。

不自动旋转图片 Auto Rotation 取消勾选

Scale mode 设置为 Smooth

最重要的是:让合成后的表情图集每一个都是对齐的

设置默认图集(Sprite Atlas )

默认情况下,图集资源要放置在相对于 Resource 目录下!

在TextMeshPro目录 TextMeshPro\Resources\TMP Settings.asset 文件可以设置默认的Sprite Atlas。

参考官方文档:http://digitalnativestudios.com/textmeshpro/docs/settings/#sprites

image

遇到的问题
在项目中我是自定义图集和文字,实现图文混排,在过程中遇到表情和文字不对齐的问题。

表情和文字不对齐

文字和表情混排时,文字和表情上下位置不对齐,表现如下所示:

$TEMYWEUV{68B_SBTJZ`1WK

找出问题

经过仔细的观察对比,发现我们打出来的表情图集和示例图集有区别。

image

1、我们打出的图集并不是2的次方

2、我们打出的图集,有的表情会有旋转

3、我们打出的图集,从上往下看,或者从左往右看,并不是排成一条线的,也就说没有对齐!

制作图集的要点

在美术同事制作过程中,强烈建议每个表情都是居中对齐:即保证上和下,左和右之间的空白间隙是一致的!

如下图所示的表情,上和下的间距很明显就是不一样的,上方间距小于下方间距。美术给出的解释是:表情底部有阴影。

wpsAF3D.tmp

图片间隙不相同?

如果你们美术同事设计的单张图片的上下留边,或左右留边是不相同的,那要如何处理呢?

在TextMeshPro的图集设置中,可以通过(Gloable)offset y 进行偏移值,让表情对齐,它会自动进行保存,并在保存后,让初始值变为0

本文出自赵青青,原文链接:http://www.cnblogs.com/zhaoqingqing/p/7471499.html,如需转载请自行联系原作者

相关文章
|
JSON 图形学 数据格式
unity使用TextMeshPro实现聊天图文混排
使用unity也能实现qq好友聊天效果
|
图形学
unity3d UI特效处理,image置灰shader
新建材质,材质指定该shader,然后将材质球拖拽到image上面,效果就显示出来了 图片.png Shader "UI/ImageGreyShader" { Properties { [PerRendere...
3476 0
|
C# 开发者
深入理解C#中的`Task<T>`:异步编程的核心
【1月更文挑战第3天】本文旨在探讨C#中`Task<T>`的使用和理解,作为异步编程模式的核心组件。`Task<T>`允许开发者在不阻塞主线程的情况下执行异步操作,并返回一个指定类型`T`的结果。通过定义返回`Task<T>`的异步方法、使用`async`和`await`关键字、处理异常以及获取任务结果,开发者可以编写出高效且响应迅速的应用程序。此外,本文还介绍了如何配置任务以及实现任务的连续性和组合,为掌握C#中的异步编程提供了全面的指导。
|
前端开发
Window对象提示框、确认框、输入框、弹窗详解
本文目录 1. 背景 2. alert提示框 3. confirm确认框 4. prompt输入框 5. showModalDialog弹窗 6. 小结
1462 0
Window对象提示框、确认框、输入框、弹窗详解
|
数据采集 Web App开发 数据处理
一步步教你用Python Selenium抓取动态网页任意行数据
使用Python Selenium爬取动态网页,结合代理IP提升抓取效率。安装Selenium,配置代理(如亿牛云),设置User-Agent和Cookies以模拟用户行为。示例代码展示如何使用XPath提取表格数据,处理异常,并通过隐式等待确保页面加载完成。代理、模拟浏览器行为和正确配置增强爬虫性能和成功率。
1783 3
一步步教你用Python Selenium抓取动态网页任意行数据
|
图形学 数据可视化 开发者
超实用Unity Shader Graph教程:从零开始打造令人惊叹的游戏视觉特效,让你的作品瞬间高大上,附带示例代码与详细步骤解析!
【8月更文挑战第31天】Unity Shader Graph 是 Unity 引擎中的强大工具,通过可视化编程帮助开发者轻松创建复杂且炫酷的视觉效果。本文将指导你使用 Shader Graph 实现三种效果:彩虹色渐变着色器、动态光效和水波纹效果。首先确保安装最新版 Unity 并启用 Shader Graph。创建新材质和着色器图谱后,利用节点库中的预定义节点,在编辑区连接节点定义着色器行为。
1177 1
|
编解码 前端开发 Java
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
1359 0
|
前端开发 JavaScript 算法
深入剖析React状态管理的优势与局限
【8月更文挑战第20天】
304 3
|
Python
【Python】已完美解决:(Python键盘中断报错问题) KeyboardInterrupt
【Python】已完美解决:(Python键盘中断报错问题) KeyboardInterrupt
800 3
|
人工智能 API 语音技术
用Python解锁微软Edge的文本转语音服务
近来,TTS模型工具给大家也分享了不少,对于一些小白或有需要的人是提供了一个额外的选项。 但作为编程人员/研发人员,或者需要集成TTS服务的人来说,好像又有点麻烦。 今天就为大家分享一个非常有趣的项目—edge-tts。