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/

官方论坛:http://digitalnativestudios.com/forum/index.php

视频介绍: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目录 TextMeshProResourcesTMP 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,如需转载请自行联系原作者

相关文章
|
6月前
文本居中显示
文本居中显示
|
小程序 前端开发 iOS开发
微信小程序:多行文本溢出出现多余的文字-webkit-line-clamp
微信小程序:多行文本溢出出现多余的文字-webkit-line-clamp
464 0
微信小程序:多行文本溢出出现多余的文字-webkit-line-clamp
|
2月前
|
Android开发
Android经典实战之Textview文字设置不同颜色、下划线、加粗、超链接等效果
本文介绍了 `SpannableString` 在 Android 开发中的强大功能,包括如何在单个字符串中应用多种样式,如颜色、字体大小、风格等,并提供了详细代码示例,展示如何设置文本颜色、添加点击事件等,助你实现丰富文本效果。
186 3
|
6月前
|
前端开发
文本对齐[text-align]
文本对齐[text-align]。
57 2
|
定位技术
百度地图开发:Label文本居中
百度地图开发:Label文本居中
228 0
百度地图开发:Label文本居中
|
Web App开发 前端开发
去掉谷歌默认的input textarea边框样式
谷歌浏览器Chrome基于WebKit开源浏览器引擎,自然能够通过相关的一切方法自定义设置浏览器的默认状态。谷歌浏览器Chrome安装之后,大家应该都留意到所有的表单都会添加黄色边框特效。在某些时候这些特效还是很不错的,但是当网站本身就已经对于表单样式有一定的设计时,这种默认表单样式就会让人觉得套样了!
156 0
文字到底能玩出多少花样(二)background-clip实现hover文字填充效果
文字到底能玩出多少花样(二)background-clip实现hover文字填充效果
224 0
文字到底能玩出多少花样(二)background-clip实现hover文字填充效果
PyQt5 技巧篇-便于文字排版的等宽字体推荐:Source Code Pro的中文为英文两倍宽字体
PyQt5 技巧篇-便于文字排版的等宽字体推荐:Source Code Pro的中文为英文两倍宽字体
371 0
PyQt5 技巧篇-便于文字排版的等宽字体推荐:Source Code Pro的中文为英文两倍宽字体
|
前端开发
span内文字居中css布局方法_让span内容居中
display:block,让span形成块(独占一行),就像DIV一样,在设置内容居中css text-align:center。
2705 0