U4S5L17——精灵图片资源(图文混排)

精灵图片资源

精灵图片资源是配合富文本标签使用的资源,它可以让我们在 TMP 文本中显示图片,达到图文混排的目的

我们只需要创建并配置好精灵图片资源,便可以利用 富文本标签 在文本中显示图片

精灵图片资源的创建

  1. 根据自己的需求建立一个图集纹理

    图集的参数需要设置为: Texture Type 为 Sprite、Sprite Mode 为 Multiple
    并且我们需要在 Sprite Editor 中将图集中的图片划分为单独的 Sprite(需要导入2D Sprite包)

    image

  2. 准备好图集文件后

    在Project窗口中选中图集后 —> 右键 —> Text Mesh Pro —> Sprite Asset

    image

    创建后,一般我们需要为每个图片进行以下的设置:

    1. 名字设置
    2. 位置宽度相关设置

    最好边使用边配置,默认创建的位置很可能存在问题,需要调整

    image

    其中的参数和字体参数类似,关键参数:

    • BX、BY:相对于基线的原点的左上角
    • AD:放置下一个内容时往右前进的位置

    为了方便,可以通过最下方的全局偏移 OX、OY 和缩放 SF. 进行设置

Sprite Asset 参数相关

基本信息

Sprite Asset 的前三类参数和 字体资源 是几乎一致的

image

  • 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:列出所有后备精灵图片资源资产

      当主字体中缺少某些精灵图片时,系统会按顺序尝试使用这些后备精灵图片资源进行查找

图片字符设置

image

  • Sprite Search:图片查找

  • Index:索引

    不能直接修改,可以使用下方的 Up, Down, Goto 来修改索引

  • Unicode:精灵图片的Unicode编码

  • Name:图片的名字,后续需要通过这个名字来获取图片

  • Glyph ID:精灵图片的纹理中的ID

  • Edit Glyph:修改图片字形,参数详见图片字形表

  • Scale:字符缩放

图片字形设置

最好边使用边配置,默认创建的位置很可能存在问题,需要调整

对于图片的字形,为了方便,可以通过最下方的全局偏移和缩放进行设置(前提是精灵图片纹理的图片大小都一样大)

以下四个参数不会保存,一旦调整就是对所有的图片进行调整,因此需要优先调整这些参数,然后再单独不同图片的调整

image

  • OX:调整此资源内所有图片的BX
  • OY:调整此资源内所有图片的BY
  • ADV.:调整此资源内所有图片的AD
  • SF.:调整此资源内所有图片的Scale

如果源图片纹理内图片大小不一致,这时也需要单独手动调整图片字形以确保显示正确

image

  • Sprite Search:图片查找

  • X、Y、W、H:图片在纹理中对应的位置范围

  • W、H:图片的宽高

  • BX、BY:相对于基线原点的图片左上角偏移位置

    QQ_1729331430129

  • 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进制(可选)>

也可以将精灵图片资源直接关联给对应的 TMP 文本,若不关联,将使用默认资源

对于全局的默认资源,在 Project Settings —— TextMesh Pro —— Settings 内设置

image

对于某个特定 TMP 组件的默认资源,需要在 Sprite Asset 参数内关联

image

显示文本示例(没有使用默认的EmojiOne资源):

imageimage

显示效果:

image