U4S5L17——精灵图片资源(图文混排)
U4S5L17——精灵图片资源(图文混排)
精灵图片资源
精灵图片资源是配合富文本标签使用的资源,它可以让我们在 TMP 文本中显示图片,达到图文混排的目的
我们只需要创建并配置好精灵图片资源,便可以利用 富文本标签 在文本中显示图片
精灵图片资源的创建
-
根据自己的需求建立一个图集纹理
图集的参数需要设置为: Texture Type 为 Sprite、Sprite Mode 为 Multiple
并且我们需要在 Sprite Editor 中将图集中的图片划分为单独的 Sprite(需要导入2D Sprite包)
-
准备好图集文件后
在Project窗口中选中图集后 —> 右键 —> Text Mesh Pro —> Sprite Asset
创建后,一般我们需要为每个图片进行以下的设置:
- 名字设置
- 位置宽度相关设置
最好边使用边配置,默认创建的位置很可能存在问题,需要调整
其中的参数和字体参数类似,关键参数:
- BX、BY:相对于基线的原点的左上角
- AD:放置下一个内容时往右前进的位置
为了方便,可以通过最下方的全局偏移 OX、OY 和缩放 SF. 进行设置
Sprite Asset 参数相关
基本信息
Sprite Asset 的前三类参数和 字体资源 是几乎一致的
-
Face Info:字形消息
-
Point Size:字体(图片)大小(以磅Point,简写pt为单位)
1磅即1/72英寸(约0.353毫米)
在字体设计中一般用来表示字体的高度
这个单位是一种用于测量字体大小和印刷文本的单位 -
Scale:缩放
对字体进行缩放,1为原始大小
-
Ascent Line:上升线
字形中最高点到基线的垂直距离,表示了字母中最高部分的位置
(最高部分指大写字母或某字母的上部)
控制字形可以延伸到基线上方的最大距离,它对应了线条的顶部 -
Base Line:基线
所有字母字符所处的水平线,大多数字符都在这条线的上方
除了下延字符(g,y,q等)
控制基线高度就是控制字符所在的水平线 -
Descent Line:下行线
字形中最低的点打基线的垂直距离,表示字母中最低部分的水平线
(例如字母 g 的底部)控制字形可以延伸到基线以下的最大距离
-
-
Atlas & Material:图集和材质
- Sprites Atlas:生成精灵图片资源时使用的精灵纹理图集
- Default Material:生成精灵图片资源时创建的材质
-
Fallback Sprite Assets:后备精灵图片资源
-
Fallback List:列出所有后备精灵图片资源资产
当主字体中缺少某些精灵图片时,系统会按顺序尝试使用这些后备精灵图片资源进行查找
-
图片字符设置
-
Sprite Search:图片查找
-
Index:索引
不能直接修改,可以使用下方的 Up, Down, Goto 来修改索引
-
Unicode:精灵图片的Unicode编码
-
Name:图片的名字,后续需要通过这个名字来获取图片
-
Glyph ID:精灵图片的纹理中的ID
-
Edit Glyph:修改图片字形,参数详见图片字形表
-
Scale:字符缩放
图片字形设置
最好边使用边配置,默认创建的位置很可能存在问题,需要调整
对于图片的字形,为了方便,可以通过最下方的全局偏移和缩放进行设置(前提是精灵图片纹理的图片大小都一样大)
以下四个参数不会保存,一旦调整就是对所有的图片进行调整,因此需要优先调整这些参数,然后再单独不同图片的调整
- OX:调整此资源内所有图片的BX
- OY:调整此资源内所有图片的BY
- ADV.:调整此资源内所有图片的AD
- SF.:调整此资源内所有图片的Scale
如果源图片纹理内图片大小不一致,这时也需要单独手动调整图片字形以确保显示正确
-
Sprite Search:图片查找
-
X、Y、W、H:图片在纹理中对应的位置范围
-
W、H:图片的宽高
-
BX、BY:相对于基线原点的图片左上角偏移位置
-
AD:放置下一个内容时往右前进的位置
-
Scale:缩放大小
-
Atlas Index:图集索引 在第几个图集中(开启了多图集时)
精灵图片资源的使用
直接在TMP文本控件中输入 <sprite>
相关的富文本标签便可以使用
-
从默认资源中获取图片
有三种方式:
- 通过
index=图片ID
:<sprite index=图片ID color=#RGBA的16进制(可选)>
- 通过 图片名:
<sprite name="图片名" color=#RGBA的16进制(可选)>
- 通过 图片ID:
<sprite=图片ID color=#RGBA的16进制(可选)>
- 通过
-
从指定资源中获取图片
- 通过 图片ID:
<sprite="资源名" index=图片ID color=#RGBA的16进制(可选)>
- 通过 图片名:
<sprite="资源名" name="图片名" color=#RGBA的16进制(可选)>
- 通过 图片ID:
也可以将精灵图片资源直接关联给对应的 TMP 文本,若不关联,将使用默认资源
对于全局的默认资源,在 Project Settings —— TextMesh Pro —— Settings 内设置
对于某个特定 TMP 组件的默认资源,需要在 Sprite Asset 参数内关联
显示文本示例(没有使用默认的EmojiOne资源):
显示效果: