Unity TextMeshPro图文混排

笔者最近项目使用TextMeshPro完成图文混排的需求,以及图文超链接,总的来说功能很强大,没遇到什么坑。
这里记录一下图文混排实现的基本流程流程。

制作需要混排图片.asset文件

方式一

使用图集生成SpriteAsset,需要保证图集的Mode是Multiple类型,即已经裁分了精灵。
右键图集文件选择Create->TextMeshPro->Sprite Asset,会自动生成和图集同名的.asset文件。.asset文件需要放置到.../Resources/Sprite Assets 目录下。
.asset文件文件通过对图集文件引用,并包含图片对应的字符表(Sprite Character Table)和图片对应的字形表(Sprite Glyph Table)。这两个表用户都可以可视化编辑的。

方式二

使用TexturePacker软件,输出格式选择JSON(Array),拖入目标图片或者包含目标图片的文件夹。
Publish后会生成json文件和png文件各一份。这两个文件导入Unity内。
Unity内选择Window->TextMeshPro->Sprite Importer,打开Sprite Importer界面。拖入上述两个文件到指定位置,点击Create Sprite Asset即可生成会在内存中预生成,再点击Save Sprite Asset即可生成图文混排需要的.asset文件。.asset文件需要放置到…/Resources/Sprite Assets目录下。

实现图文混排

引用关系设定

  • 单独指定引用
    在TextMeshPro组件Extra Settings选项中的Sprite Asset添加对具体.asset文件的引用。
  • 全局设定引用
    Project Settings->TextMesh Pro->Settings->Default Sprite Asset内为图文混排的全局设定,即若在TextMeshPro组件中未特殊指定,会依这里的配置为准。

代码调用

对默认.asset的调用

对于设定了引用关系的可以使用下述方法调用

  • <sprite=具体索引数值>

  • <sprite name=“具体图片名”>

  • \U000Unicode

需要注意的是笔者通过方式一和方式二生成的.asset文件中图片的Unicode都是一样的,且不可修改,因此无法使用Unicode方式。但是使用TextMeshPro的自带资源的Unicode是可以图文混排的。不知道这里设置上还有哪里没有搞对!!!

另外使用Unicode调用的时候一定要选中.asset文件中的某个图片查看其Unicode,否则直接显示的Unicode多个前缀0x

对其它.asset的调用
  • <sprite=".asset文件名" index=具体索引数值>
  • <sprite=".asset文件名" name=“具体图片名”>

上文也提到这些.asset文件需要放到 …/Resources/Sprite Assets 目录下

颜色叠加

可以对图片设置颜色,比如:
<sprite=1 tint=1>//使用文字的叠加颜色/透明度。文字叠加的颜色同样被应用到图片上。tint=0 不叠加; tint=1 叠加。默认情况下文字颜色不会叠加到图片上。

<sprite=1 color=#ffffff80>//使用特定的颜色、透明度来设置图片颜色

图片大小,偏移设置

默认情况下图片可能会出现偏移问题(和文字不对齐),大小也可能不合适,可以通过在.asset文件的Global Offsets&Scale区域进行整体设置参数。对于特殊的图片要单独设置的话可以选中它再特殊设置,或者通过文本文件打开.asset文件来编辑。

注意事项

制作图集的时候最好保证小图尺寸一致,这样在生成的.asset文件中可以进行统一的缩放设置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iningwei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值