Unity TextMeshPro 支持的富文本标签及详解

本文转载自知乎:[UGUI图文混排二]TMP支持的富文本(Rich Text)标签 - 知乎

富文本标签(Rich Text Tags)

我们可以使用富文本标签在不修改属性或材质的情况下去改变文本的布局和外观,这些标签的工作方式和HTML或者XML类似,但受到的限制更少。在使用的时候,我们只需要在Text Input输入框中输入对应的标签,如果要关闭富文本标签,取消勾选TextMesh Pro -> Extra Settings -> Rich Text属性即可。

一个简单的标签只有标签的名字。比如是让文本加粗,则是添加下划线。一些标签拥有额外的属性和值,例如。标签和它属性的长度加起来不能超过128个字符,但平常使用肯定不会超出这个长度。

下面是一些常见属性类型可以拥有的值

Unity TextMeshPro 支持的富文本标签及详解_第1张图片

标签的作用域(Scope)和嵌套(Nested)

标签的作用域是用来定义它影响文本的范围,通常情况下添加的标签会影响它之后的所有文本。例如添加颜色标签

This text is red

在文本中间添加标签只会影响标签后面的文本

This text turns red

如果在一个文本块中多次使用相同的标签,最后一个标签将取代之前所有相同类型的标签

This text goes from red to green

我们还可以使用结束标签限制标签的范围,结束标签只包含一个正斜杠和标签名称,如同

标签也可以嵌套,这样一个标记的作用域就在另一个标记的作用域内。

This text is mostly red.

第一个标签的作用域是整个文本块。第二个标签有一个结束标签,因此它的范围被限制为一个单词

支持的标签概述

TMP支持非常多样的富文本标签,可以做出很绚丽的效果。

Unity TextMeshPro 支持的富文本标签及详解_第2张图片
Unity TextMeshPro 支持的富文本标签及详解_第3张图片

表格中的内容有些不清楚,接下来实践一遍

Align

每个文本对象都有一个整体的对齐方式,但可以使用标签重写。

通常,将这些标签放在段落的开头,如果一行文本中出现了多个标签,最后一个的效果会覆盖其他的,可以使用结束对齐设置,例如

Left-aligned
Center-aligned
Right-aligned
Justified: stretched to fill the display area (except for the last line)
Flush: stretched to fill the display area (including the last line)

Unity TextMeshPro 支持的富文本标签及详解_第4张图片

Allcaos, Uppercase, Smallcaps and Lowercase

这些标签是用来更改文本的大小写,其中功能相同,都是将文本变为小写, 和都是将文本变为大写。

Alice and Bob watched TV.
Alice and Bob watched TV.
Alice and Bob watched TV.
Alice and Bob watched TV.

Unity TextMeshPro 支持的富文本标签及详解_第5张图片

Alpha

使用标签可以改变文本的透明度,需要用十六进制的数为其赋值。

FF CC AA 88 66 44 22 00

Bold and Italic

粗体和斜体可以分别使用标签定义,Font Asset中定义了渲染时粗体和斜体文字的外观

The quick brown fox jumps over the lazy dog.

Unity TextMeshPro 支持的富文本标签及详解_第6张图片

Color

使用标签来修改文本颜色的方式有两种,分别是

  • 使用颜色名,比如< color="colorName">,它支持的颜色有blackbluegreenorangepurpleredwhiteyellow.
  • 使用十六进制的数值,比如 或者,分别代表RGBA的值
Red Dark Green <#0000FF>Blue Semitransparent Red

Unity TextMeshPro 支持的富文本标签及详解_第7张图片

Red, Blue, and red again.

CSpace

英文全称为Character Spacing标签用来调整字符的间距,它的值可以是像素或者字体单位(Font units),并且既可以是正数也可以是负数。

Spacing is just as important as timing.

Unity TextMeshPro 支持的富文本标签及详解_第8张图片

Font

通过标签可以修改字体,我们还可以使用material属性在同一种字体中切换不同的材质,fontmaterial资源必须放置在 TextMesh Pro -> Resources -> Fonts&Materials文件夹中

Would you like a different font? or just a different material?

Unity TextMeshPro 支持的富文本标签及详解_第9张图片

Font-weight

如果当前字体支持设置字体粗细,则可以用  标签进行设置。我们可以使用数值来设定字体粗细值,比如400表示正常,700表示加粗

Thin
Extra-Light
Light
Regular
Medium
Semi-Bold
Bold
Heavy
Black

Unity TextMeshPro 支持的富文本标签及详解_第10张图片

Gradient

标签用来设置文字渐变

Apply
any
gradient
preset
to your text

Unity TextMeshPro 支持的富文本标签及详解_第11张图片

当为文字设置渐变时,它会和当前TMP文本的顶点颜色叠加

This Light to Dark Green gradient is tinted by the red vertex color

Unity TextMeshPro 支持的富文本标签及详解_第12张图片

为了得到纯粹的渐变色,在使用渐变是可以先用 标签将文字变为白色

This Light to Dark Green gradient is no longer tinted by the red vertex color

Unity TextMeshPro 支持的富文本标签及详解_第13张图片

Indent

英文全称Indentation,用来控制文本的水平缩进,并且这也会影响其他行,它的值可以是像素、字体单位和百分比

1. It is useful for things like bullet points.
2. It is handy.

Unity TextMeshPro 支持的富文本标签及详解_第14张图片

Line-height

 标签用来控制行高,它不会改变当前行的位置,而是控制下一行的位置,它的值可以是像素、字体单位和百分比,值越小两行离得越近,值越大离得越远。

Line height at 100%
Line height at 50%
Rather cozy.
Line height at 150%
Such distance!

Unity TextMeshPro 支持的富文本标签及详解_第15张图片

Line-indent

标签向文本添加水平空白,只有使用换行符或者
后的文本会受它的影响,自动换行的文本不受其影响,它的值可以是像素、字体单位和百分比

This is the first line of this text example.
This is the second line of the same text.

Unity TextMeshPro 支持的富文本标签及详解_第16张图片

Link

我们可以使用 my link来向文本中添加链接,linkID需要是唯一的,以便在用户与文本交互时检索其ID和链接文本内容。

但并不是说每个链接一定要一个唯一的ID,如果有需要,您可以重用ID,例如,当您多次链接到同一个数据的时候,LinkInfo数组只包含每个ID一次。虽然此Link tag允许用户交互,但它不会更改链接文本的外观。还需要使用其他标签配合。

要获得用户交互的链接,请在TMP上挂载一个实现了UnityEngine.EventSystems.IPointerClickHandler接口的脚本,可以在其中拿到用户点击的链接情况

 public void OnPointerClick(PointerEventData eventData)
    {

        var pos = new Vector3(eventData.position.x, eventData.position.y, 0);
        int linkIndex = TMP_TextUtilities.FindIntersectingLink(this._tMPText, pos, eventData.enterEventCamera);
        if (linkIndex > -1)
        {

            Debug.Log("点击" + this._tMPText.textInfo.linkInfo[linkIndex].GetLinkText());
        }

    }

Margin

可以使用标记增加文本的水平边距。如果我们只想调节左边距或者右边距,可以使用  或者  标签。

它的值可以是像素、字体单位和百分比,当它为负数时没有任何意义。

Our margins used to be very wide.
But those days are long gone.

Unity TextMeshPro 支持的富文本标签及详解_第17张图片

Mark

向文本添加标记,类似于记号笔,我们需要指定标记的颜色,可以是颜色名称,也可以是十六进制的颜色值。

Text can be marked with an overlay.

Unity TextMeshPro 支持的富文本标签及详解_第18张图片

Mspace

英文全称Monospacing,等宽字体,使用可以重写字符的间距,让所有的字符拥有同样的水平间距

它的值可以是像素或字体单位

Any font can become monospace, if you really want it.

Unity TextMeshPro 支持的富文本标签及详解_第19张图片

Norb

英文全称No Break,使用标签让特定的单词放在一起,不会被换行分隔,使用  可以切换到正常模式。

如果标签中的字符过多导致超过一行的限制,它还是会被换行展示。

You don't want I M P O R T A N T things to be broken up.

Unity TextMeshPro 支持的富文本标签及详解_第20张图片

Noparse

禁止解析,让标签按原始方式展示,TMP不会对其进行解析

Use  for bold text.

Page

可以使用  标签在文本中插入分页符,要让它起作用必须将TMP对象的Overflow属性设置为Page

这时我们可以通过Page后面的数值来展示不同页的内容

Pos

英文全称Horizontal Position标签使我们可以直接控制水平插入符号的位置,在水平对齐时效果最好。

它的值可以是像素、字体单位和百分比

at 75%
at 25%
at 50%
at 0%

Unity TextMeshPro 支持的富文本标签及详解_第21张图片

Rotate

使用标签可以让每个字符围绕它的中心旋转,以度为单位指定旋转量,正的值将逆时针旋转字符,负值使它们顺时针旋转。

标签会影响字符间的空隙,这可能造成字符重叠,必要的时候使用来更改字符间距。

Rotate text counter-clockwise or clockwise

Unity TextMeshPro 支持的富文本标签及详解_第22张图片

Rotate text counter-clockwise

Unity TextMeshPro 支持的富文本标签及详解_第23张图片

上图中的字符明显出现了重叠,我们可以调整它的间距

Rotate text counter-clockwise

Unity TextMeshPro 支持的富文本标签及详解_第24张图片

S、U

我们可以使用  标签给文本添加下划线,使用 标签给文本添加删除线

The quick brown fox jumps over the lazy dog.

Unity TextMeshPro 支持的富文本标签及详解_第25张图片

Size

Font Size,通过使用  标签来调整字体的尺寸,它的值可以是像素、字体单位或百分比

像素调整可以是绝对的(5px、10px等),也可以是相对的(例如+1或-1),相对大小是基于原始字体大小,所以它们不是渐增(cumulative)的。

Echo Echo Echo Echo Echo

Space

 插入水平偏移量,就像插入了多个空格一样,它的值可以是像素或字体单位。

如果这个标签紧挨着文本,会向文本追加偏移量,从而影响它的换行方式,我们可以在 标签两侧添加一个空格来取消这个影响。

Give me some  space.

Sprite

标签将Sprite Asset中的图片插入到文本中,Sprite Asset必须位于TMP中的指定文件夹TextMeshPro -> Resources -> Sprite Assets中。

我们可以通过索引或名称从默认的精灵资产中访问精灵,当通过索引从默认Assets中访问精灵时,也可以使用索引缩写。 要使用来自不同assets中的sprite,需要先指定sprite所处的asset,再通过索引或通过名称访问。

Sprites!  More sprites!  And even more! 

Unity TextMeshPro 支持的富文本标签及详解_第26张图片

Style

使用 You can create your own.

Unity TextMeshPro 支持的富文本标签及详解_第27张图片

关于如何创建一个Style参考文档Style Sheets

Sub、Sup

英文全称SubscriptSuperscript,可以将文本渲染成上标或者下标。

We have 1m3 of H2O.

VOffset

英文全称Vertical Offset,使用标签使文本垂直偏移,这将相应地调整行高以适应文本的偏移位置,行高可以手动调整。偏移量总是相对于原始基线,它的值可以是像素或字体单位。

Up up UP and down we go again.

Unity TextMeshPro 支持的富文本标签及详解_第28张图片

Width

标签调整文本水平区域的大小,设置后会立即修改当前行

它的值可以是像素、字体单位或百分比

I remember when we had lots of space for text.
But those days are long gone.

Unity TextMeshPro 支持的富文本标签及详解_第29张图片

参考

[1] Unity Manual:Rich Text Tags

你可能感兴趣的:(unity,UGui,unity,游戏引擎)