本期我们将了解如何在TMPro中自定义我们的标签样式，并实现两种有趣的效果。

一.需求描述

1.定义<float>格式的标签，实现标签处延迟打印功能

2.定义<r=" "></r>格式的标签，实现标签区间内文本片段的注释显示功能

3.补充文本多种打印样式功能。

二.自定义标签样式

首先我们需要借助预处理器来读取到我们的目标格式的标签，并记录标签内的相关信息

基本思路：通过ITextPreprocessor接口实现预处理器的预加工函数PreprocessText（），读取到文本中的自定义标签格式并记录标签内信息。

1.实现接口方法

 public class AdvancedTextPreprocessor : ITextPreprocessor{public string PreprocessText(string text){}}

2.提取标签

（1）使用正则表达式来匹配<>的类html格式。

  public string PreprocessText(string text){string processingText = text;string pattern = "<.*?>";//定义一个正则表达式 "<.*>" 用于匹配所有以 < 开头、> 结尾的字符串。贪婪模式，即它会匹配最远的 >Match match = Regex.Match(processingText, pattern);//首次匹配，查找所有富文本标签while (match.Success) //尝试匹配富文本标签{match = Regex.Match(processingText, pattern);//继续匹配，查找下一个标签}processingText = text;return processingText;
}//正则表达式概念// . 代表任意字符//*代表前一个字符出现0次或多次//+代表前一个字符出现1次或多次//？代表前一个字符出现0次或1次

这里我们定义了<.*？>这种文本模式,下方代码将在用户文本中查找符合模式的文本片段match。

 Match match = Regex.Match(processingText, pattern);//按照pattern模式来匹配用户文本中符合格式的文本（含<>）

3.记录标签内信息

下面我们需要记录下我们的自定义标签内的信息。

1.定义存储结构

/// <summary>
/// 打印延迟字典【读取标签<float>,遇到将延迟float秒后打印后面内容】
/// </summary>
public Dictionary<int, float> IntervalDictionary = new Dictionary<int, float>();//自定义打印标签字典/// <summary>
/// 注释标签列表
/// </summary>
public List<RubyData> rubyList = new List<RubyData>();

这里我使用字典存储延迟标签信息，将延迟标签的位置偏移作为键，延迟长度作为值。

使用列表来存储注释数据结构。成员是Rubydata类的实例。

Rubydata类中定义了3种属性：注释自身在文本中的起止位置偏移startIndex和终止位置偏移endIndex,以及注释内容contnet。

RubyData类如下

 /// <summary>/// 注释数据/// </summary>public class RubyData{public RubyData(int _startIndex, string _content){startIndex = _startIndex;rubyContent = _content;}public int startIndex { get; }public string rubyContent { get; }public int endIndex { get; set; }}

2.匹配<>标签内的文本信息

下方代码功能是去除match文本中包含的<>字符，得到标签内的信息label。

 string label = match.Value.Substring(1, match.Length - 2);

3.标签内信息的存储逻辑

（1）读取<float>格式标签内容

  //自定义延迟打印标签【规定<float>】并记录在打印间隔标签字典中if (float.TryParse(label, out float result))IntervalDictionary[match.Index - 1] = result;

此处由于标签内部就是一个float类型的数据，所以我们可以直接就爱那个标签记录在我们的打印间隔标签字典中

（2）读取<r=" "></r>格式标签内容

  //自定义注释标签【规定<r="">】录入注释列表//注释标签开启if (Regex.IsMatch(label, "^r=.+")) //^：表示字符串的开头。这个符号确保匹配的字符串必须从开头开始rubyList.Add(new RubyData(match.Index, label.Substring(2)));//注释标签终止else if (Regex.IsMatch(label, "/r")){if (rubyList.Count > 0)rubyList[rubyList.Count - 1].endIndex = match.Index - 1;}

4.去除标签文本

由于我们在用户文本中含有<>的类html标签，但是最终是不需要显示的，所以我们还需要在用户文本的基础上去除我们的标签(替换为空字符串)，才能得到最终的渲染文本。

 pattern = @"(<(\d+)(\.\d+)?>)|(</r>)|(<r=.*?>)";//使用 @ 前缀可以避免在字符串中使用转义字符//将处理文本中符合pattern规则的字符串 替换为空字符串""processingText = Regex.Replace(processingText, pattern, "");

完整源码见后文。

---

三.实现自定义文本效果

1.延迟打印功能

现在我们已经可以存储文本中的自定义标签内的信息，我们现在来实现一下文本的自定义效果。

我们前面已经实现了打字机的效果，实际上的延时打印功能，就是在打字函数的携程循环中等待的迭代函数。

       if (selfPreprocessor.IntervalDictionary.TryGetValue(typingIndex, out float result))yield return new WaitForSecondsRealtime(result);elseyield return new WaitForSecondsRealtime(defalutInterval);

上句代码用来判断文本中当前打印位置处会否是延迟标签所在位置。如果恰好是字典中延迟标签的位置，则返回字典中的的当前位置键对应的float值作为输入执行携程延迟函数。否则按照默认间隔执行打印延迟。

2.注释功能

我们具体会用到两个方法。

（1）生成并设置注释

void SetRubyText(RubyData data)
{GameObject ruby = Instantiate(Resources.Load<GameObject>("RubyText"), transform);ruby.GetComponent<TextMeshProUGUI>().SetText(data.rubyContent);ruby.GetComponent<TextMeshProUGUI>().color = textInfo.characterInfo[data.startIndex].color;ruby.transform.localPosition = (textInfo.characterInfo[data.startIndex].topLeft + textInfo.characterInfo[data.endIndex].topRight) / 2 - new Vector3(0, 10, 0);
}

这里我们传入一个Rubydata实例，设置预制件文本，颜色及位置。

（2）判断当前位置是否是注释的起始位

    /// <summary>/// 读取一个位置是否就是Ruby起始位/// </summary>/// <param name="index"></param>/// <param name="data"></param>/// <returns></returns>public bool TryGetRubyText(int index, out RubyData data){data = new RubyData(0, "");foreach (RubyData item in rubyList){if (item.startIndex == index){data = item;return true;}}return false;}
}

每打印到一个位置，我们都需要判断当前位置是否是注释标签的起始位。如果是，将调用生成注释预制件的函数。

---

四.改进文本显示逻辑

现在我们去AdvancedText类中改进一下前面实现的文本显示逻辑。

增添字段

    Coroutine typingCor;//存储打字携程，易于中断Action OnFinish; //文本打印结束的回调委托

这里的携程字段使用来记录我们的打字机携程的，实际情况中我们会遇到 打断正在打印中文本 的需求。存储到一个携程变量中将易于管理。

增添枚举

我们使用一个枚举来决定文本以什么形式显示。（见下方）

public enum E_DisplayType 
{Defalut,Fading,Typing
}

Defalut模式：文本采用 整体直接显示。

Fading模式：文本采用 整体淡入显示。

Typing模式：文本采用 打字机淡入效果显示。

我们现在实现一下各种打印样式的函数。

Defalut模式显示方法

  /// <summary>/// 文本整体直接显示/// </summary>void DefalutDisplay(Action action = null){for (int i = 0; i < m_characterCount; i++)SetSingleCharacterAlpha(i, 255);action?.Invoke();}

Fading模式显示方法

 /// <summary>/// 文本整体淡入显示/// </summary>void FadingDisplay(float fadeDuration,Action action=null){for (int i = 0; i < m_characterCount; i++)StartCoroutine(FadeInCharacter(i, fadeDuration));action?.Invoke();}

Typing模式显示方法

 /// <summary>/// 文本打字机显示/// </summary>/// <returns></returns>IEnumerator TypingDisplay(float fadeDuration,Action action = null){ForceMeshUpdate();for (int i = 0; i < m_characterCount; i++){SetSingleCharacterAlpha(i, 0);}typingIndex = 0;while (typingIndex < m_characterCount){//SetSingleCharacterAlpha(typingIndex,255);   //无淡入打字机效果StartCoroutine(FadeInCharacter(typingIndex, fadeDuration)); //淡入打字机效果if (selfPreprocessor.IntervalDictionary.TryGetValue(typingIndex, out float result))yield return new WaitForSecondsRealtime(result);elseyield return new WaitForSecondsRealtime(defalutInterval);typingIndex++;}action?.Invoke();}

文本显示方法

我们还需要一个函数作为暴露给外部的应用接口，客户端可以选择不同的文本显示样式。

  public IEnumerator ShowText(string content, E_DisplayType displayType, float duration){if (typingCor != null){StopCoroutine(typingCor);}typingCor = null;SetText(content);yield return null;TextDisAppear();switch (displayType){case E_DisplayType.Defalut:DefalutDisplay();SetAllRubyTexts();break;case E_DisplayType.Fading:FadingDisplay(duration);SetAllRubyTexts();break;case E_DisplayType.Typing:typingCor = StartCoroutine(TypingDisplay(duration));break;default:break;}}

---

五.功能测试

在测试脚本中我们调用AdvancedText实例的携程来显示文本。

 StartCoroutine(advancedText.ShowText(content,displayType,duration));

编辑器内选择打印样式。

运行效果

这里我是做了一个按键输入功能，通过按键显示并开始打印文本，但调用文本打印的逻辑是一致的。如果大家对UI动效有有兴趣的话我后面可以出一期关于UI的代码框架及动效功能的解决方案。

---

六.完整源码

AdvancedTextPreprocessor类  

using System.Collections.Generic;
using System.Text.RegularExpressions;
using TMPro;namespace DialogueDemo
{public class AdvancedTextPreprocessor : ITextPreprocessor{/// <summary>/// 打印延迟字典【读取标签<float>,遇到将延迟float秒后打印后面内容】/// </summary>public Dictionary<int, float> IntervalDictionary = new Dictionary<int, float>();//自定义打印标签字典public List<RubyData> rubyList = new List<RubyData>();public string PreprocessText(string text){IntervalDictionary.Clear();string processingText = text;string pattern = "<.*?>";//定义一个正则表达式 "<.*>" 用于匹配所有以 < 开头、> 结尾的字符串。贪婪模式，即它会匹配最远的 >Match match = Regex.Match(processingText, pattern);//首次匹配，查找所有富文本标签while (match.Success) //尝试匹配富文本标签{string label = match.Value.Substring(1, match.Length - 2);//自定义延迟打印标签【规定<float>】并记录在打印间隔标签字典中if (float.TryParse(label, out float result))IntervalDictionary[match.Index - 1] = result;//自定义注释标签【规定<r="">】录入注释列表//注释标签开启else if (Regex.IsMatch(label, "^r=.+")) //^：表示字符串的开头。这个符号确保匹配的字符串必须从开头开始rubyList.Add(new RubyData(match.Index, label.Substring(2)));//注释标签终止else if (Regex.IsMatch(label, "/r")){if (rubyList.Count > 0)rubyList[rubyList.Count - 1].endIndex = match.Index - 1;}processingText = processingText.Remove(match.Index, match.Length);//读取此打印间隔标签后，删除此标签if (Regex.IsMatch(label, "^sprite.+"))  //如果标签格式是精灵，需要一个占位符processingText.Insert(match.Index, "*");match = Regex.Match(processingText, pattern);//继续匹配，查找下一个标签}processingText = text;//正则表达式概念// . 代表任意字符//*代表前一个字符出现0次或多次//+代表前一个字符出现1次或多次//？代表前一个字符出现0次或1次pattern = @"(<(\d+)(\.\d+)?>)|(</r>)|(<r=.*?>)";//使用 @ 前缀可以避免在字符串中使用转义字符//简单解释：本句代码实现了读取<>中的整数或小数的功能/* (\d +)：\d + 是一个数字匹配模式，它匹配一个或多个数字字符。+表示前面的模式（数字）可以匹配一个或多个字符。() 是捕获组的标记，这样 \d + 匹配到的数字部分就会被捕获到组中，可以在后续处理中使用。(\.\d +)?：\. 匹配一个字面上的点（.）。点号是一个元字符，在正则中表示任意字符，但在这里需要加 \ 进行转义，表示字面上的点号。\d + 匹配一个或多个数字，表示小数点后面的部分。() ? 表示这个捕获组是可选的，即小数部分不是必需的。如果没有小数部分，这一部分会被忽略。*///将处理文本中符合pattern规则的字符串 替换为 后面的字符串processingText = Regex.Replace(processingText, pattern, "");return processingText;}/// <summary>/// 读取一个位置是否就是Ruby起始位/// </summary>/// <param name="index"></param>/// <param name="data"></param>/// <returns></returns>public bool TryGetRubyText(int index, out RubyData data){data = new RubyData(0, "");foreach (RubyData item in rubyList){if (item.startIndex == index){data = item;return true;}}return false;}}/// <summary>/// 注释数据/// </summary>public class RubyData{public RubyData(int _startIndex, string _content){startIndex = _startIndex;rubyContent = _content;}public int startIndex { get; }public string rubyContent { get; }public int endIndex { get; set; }}
}

AdvancedText类

using System;
using System.Collections;
using TMPro;
using UnityEngine;namespace DialogueDemo
{public class AdvancedText : TextMeshProUGUI{int typingIndex;float defalutInterval = 0.08f;Coroutine typingCor;//存储打字携程，易于中断Action OnFinish;AdvancedTextPreprocessor selfPreprocessor => (AdvancedTextPreprocessor)textPreprocessor;private void Init(){SetText("");ClearRubyText();}public AdvancedText(){textPreprocessor = new AdvancedTextPreprocessor();}public void TextDisAppear(){for (int i = 0; i < m_characterCount; i++)SetSingleCharacterAlpha(i, 0);}public IEnumerator ShowText(string content, E_DisplayType displayType, float duration){if (typingCor != null){StopCoroutine(typingCor);}typingCor = null;SetText(content);yield return null;TextDisAppear();switch (displayType){case E_DisplayType.Defalut:DefalutDisplay();SetAllRubyTexts();break;case E_DisplayType.Fading:FadingDisplay(duration);SetAllRubyTexts();break;case E_DisplayType.Typing:typingCor = StartCoroutine(TypingDisplay(duration));break;default:break;}}/// <summary>/// 直接显示/// </summary>void DefalutDisplay(Action action = null){for (int i = 0; i < m_characterCount; i++)SetSingleCharacterAlpha(i, 255);action?.Invoke();}/// <summary>/// 整体淡入/// </summary>void FadingDisplay(float fadeDuration,Action action=null){for (int i = 0; i < m_characterCount; i++)StartCoroutine(FadeInCharacter(i, fadeDuration));action?.Invoke();}/// <summary>/// 打字机显示/// </summary>/// <returns></returns>IEnumerator TypingDisplay(float fadeDuration,Action action = null){ForceMeshUpdate();for (int i = 0; i < m_characterCount; i++){SetSingleCharacterAlpha(i, 0);}typingIndex = 0;while (typingIndex < m_characterCount){//SetSingleCharacterAlpha(typingIndex,255);   //无淡入打字机效果StartCoroutine(FadeInCharacter(typingIndex, fadeDuration)); //淡入打字机效果if (selfPreprocessor.IntervalDictionary.TryGetValue(typingIndex, out float result))yield return new WaitForSecondsRealtime(result);elseyield return new WaitForSecondsRealtime(defalutInterval);typingIndex++;}action?.Invoke();}/// <summary>/// 设置单字符的透明度（每个字符都是由网格（含4个顶点）渲染）/// </summary>/// <param name="index"></param>/// <param name="newAlpha">newalpha范围为0~255</param>void SetSingleCharacterAlpha(int index, byte newAlpha){TMP_CharacterInfo character = textInfo.characterInfo[index];//获取文本内容索引下的单个字符if (!character.isVisible)return;int matIndex = character.materialReferenceIndex;//获取字符材质索引int vertexIndex = character.vertexIndex;//获取字符顶点索引for (int i = 0; i < 4; i++){textInfo.meshInfo[matIndex].colors32[vertexIndex + i].a = newAlpha;}UpdateVertexData();//更新顶点数据}/// <summary>/// 单字符淡入/// </summary>/// <param name="index"></param>/// <param name="duration"></param>/// <returns></returns>IEnumerator FadeInCharacter(int index, float duration){//如果找到Ruby起始位，设置Ruby预制件Debug.Log(selfPreprocessor.TryGetRubyText(index, out var data1));if (selfPreprocessor.TryGetRubyText(index, out RubyData data))SetRubyText(data);if (duration <= 0)SetSingleCharacterAlpha(index, 255);else{float timer = 0;while (timer < duration){timer = Mathf.Min(duration, timer + Time.unscaledDeltaTime);SetSingleCharacterAlpha(index, (byte)(255 * (timer / duration)));yield return null;}}}void SetRubyText(RubyData data){GameObject ruby = Instantiate(Resources.Load<GameObject>("RubyText"), transform);ruby.GetComponent<TextMeshProUGUI>().SetText(data.rubyContent);ruby.GetComponent<TextMeshProUGUI>().color = textInfo.characterInfo[data.startIndex].color;ruby.transform.localPosition = (textInfo.characterInfo[data.startIndex].topLeft + textInfo.characterInfo[data.endIndex].topRight) / 2 - new Vector3(0, 10, 0);}/// <summary>/// 清除当前的所有注释/// </summary>void ClearRubyText(){foreach (var item in GetComponentsInChildren<TextMeshProUGUI>()){if (item != this)Destroy(item.gameObject);}}/// <summary>/// 用于跳过对话直接显示所有注释/// </summary>void SetAllRubyTexts(){foreach (var item in selfPreprocessor.rubyList){SetRubyText(item);}}}
}

七.尾声

       在 Unity 的 TextMeshPro中，文本标签（如 <color=red>...</color>）的处理方式不同于我们在自定义 AdvancedTextPreprocessor 类中的实现。TextMeshPro 之所以能正确处理 <color=red> </color> 等标签，原因在于它内部已经预先实现了一个功能强大的解析器，用于识别和处理各种富文本标签。TMP处理这些标签的方法是通过其 TextParser 类内部的规则和机制。具体的实现位于 TextMeshPro 的源码中，这些规则和方法是在 TextMeshPro 的组件中预定义的。当你将含有富文本标签的字符串传递给 TMP_Text 组件时，TextMeshPro 会自动解析这些标签并应用对应的样式。这与 AdvancedTextPreprocessor 类不同，后者是我们自己实现的自定义处理器，它仅仅处理我们通过正则表达式解析并手动处理的标签（例如延迟打印标签、注释标签等），并不会干预 TextMeshPro 内部已经定义的标准标签处理。

本篇完