1. 项目概述竖排文本的痛点与自动化曙光在Unity项目里尤其是面向东亚文化圈如中文、日文、韩文的游戏或应用开发时竖排文本是一个绕不开的需求。无论是古风游戏的卷轴、UI中的装饰性文字还是特定界面的排版竖排都能极大地增强沉浸感和文化韵味。然而当你兴冲冲地打开TextMeshProTMP准备大展拳脚时现实往往会给你当头一棒TMP原生并不直接支持“一键竖排”。你面对的可能是一个个需要手动旋转90度的字符一个需要精细调整行间距和字符间距的混乱战场以及当文本内容动态变化时维护工作量的指数级增长。这就是“Unity TextMeshPro 竖排文本优化”这个标题背后我们每天在项目中真实面对的挑战。它不是一个炫技的课题而是一个实实在在影响开发效率、文本渲染质量和项目维护成本的工程问题。手动设置竖排意味着每个TextMeshPro UI对象你都得去调Character Spacing、Line Spacing把每个字符的旋转角度设为-90度还得小心处理标点符号的位置。如果项目里有几十处甚至上百处需要竖排的地方这种重复劳动不仅枯燥而且极易出错后期修改字体或全局样式更是噩梦。因此从“手动设置”迈向“自动化”是每个被此问题困扰的开发者必然的追求。而TMP StyleSheets样式表的出现为我们提供了一条优雅的解决路径。它允许我们将一套文本样式包括字体、大小、颜色以及我们梦寐以求的竖排属性定义为一个可复用的资产然后像CSS样式一样应用到任意TMP文本对象上。这不仅仅是省去了几次点击它带来的是一种结构化的、可维护的文本样式管理方式。本篇文章就将带你深入这个优化过程从理解手动设置的局限开始一步步拆解如何利用StyleSheets实现竖排文本的自动化、高性能管理并分享我在多个项目中趟过的坑和总结的最佳实践。2. 竖排文本的核心原理与手动实现剖析在深入自动化方案之前我们必须先彻底搞明白在TextMeshPro的体系下“竖排”究竟是如何被模拟出来的以及手动做法为何如此令人头疼。这有助于我们理解后续自动化方案要解决的本质问题。2.1 TextMeshPro的文本渲染逻辑TextMeshPro之所以强大在于它不再是简单的位图字体而是基于Signed Distance FieldSDF的矢量字体渲染。每个字符都是一个独立的几何体通常是四边形拥有顶点、UV、材质等信息。TMP在生成文本网格时会按照水平方向依次计算每个字符的位置基于字符宽度、字间距、行位置基于行高、行间距然后将字符的四边形放置到对应坐标上。关键点在于这个布局引擎的核心假设是文本流方向是水平的。它没有内置“从上到下从右到左”或“从上到下从左到右”的竖排布局逻辑。所以所谓的“竖排”对我们开发者而言是一种视觉效果的“欺骗”或“转换”。2.2 手动竖排的“土法炼钢”最常见的竖排实现方法是“旋转字符法”。具体操作如下创建TMP文本对象在UI中创建一个TextMeshProUGUI组件。启用富文本在组件面板或代码中确保Rich Text选项被勾选。这是后续使用标签控制单个字符样式的基础。包裹旋转标签在文本内容中用标签包裹需要竖排的文本。例如这是竖排文本调整全局间距由于字符旋转后其占用的视觉空间发生了变化原有的Character Spacing字符间距和Line Spacing行间距含义也变了。通常你需要将Character Spacing调整为负值或较小的正值以控制旋转后字符在“垂直方向”上的紧凑程度此时它实际控制行高。将Line Spacing调整为较大的值以控制旋转后“列”与“列”之间的宽度此时它实际控制列间距。手动做法的致命缺陷效率极低每个文本对象都需要单独设置。复制粘贴文本样式不会跟着走。维护灾难如果想统一修改所有竖排文本的颜色、字体或间距你需要找到场景中每一个对象进行修改。效果不一致手动调整的参数很难保证完全相同容易造成视觉上的不统一。动态文本棘手对于运行时生成的文本你需要在代码中拼接复杂的富文本字符串既丑陋又容易出错。性能考量大量使用标签意味着更多的解析开销和更复杂的网格生成。注意这里提到的“旋转字符法”只是模拟竖排的一种方式。在极端追求效果的情况下有些开发者会尝试修改TMP的源码重写其布局逻辑来实现真正的竖排。但这属于高阶定制风险高、维护难对于绝大多数项目基于StyleSheets的自动化“模拟竖排”方案在效率和质量上已经足够优秀。3. TextMeshPro StyleSheets自动化管理的基石要摆脱手动操作的泥潭我们必须引入更强大的工具——TMP StyleSheets。你可以把它理解为Unity UI的“CSS”它是TextMeshPro Pro版本提供的功能Unity 2019.3及以后版本TMP已作为核心包包含通常包含此功能。3.1 StyleSheets是什么TMP StyleSheet是一种ScriptableObject资产。你可以在项目中创建它右键菜单 - Create - TextMeshPro - StyleSheet并在其中定义一系列的样式。每个样式可以包含基础属性字体、字体样式粗体、斜体、字体大小、颜色、材质。间距属性字符间距、单词间距、行间距。富文本标签为该样式指定一个自定义的标签名例如。3.2 StyleSheets如何工作其工作流程非常直观定义样式在StyleSheet资产中创建一个新样式命名为“VerticalText”。为其设置你想要的竖排样式比如一个适合竖排的字体、特定的颜色、以及最关键的将字符间距和行间距调整到适合竖排显示的值。同时为这个样式分配一个标签比如v。应用样式表在你的TextMeshProUGUI组件上有一个Style Sheet属性。将创建好的StyleSheet资产拖拽进去。使用样式标签在文本内容中使用你在样式中定义的标签来包裹文本例如v竖排内容/v。自动生效TMP在渲染时会解析文本发现v标签然后在关联的StyleSheet中找到对应的样式定义并将该样式下的所有属性自动应用到包裹的文本上无需任何手动设置。3.3 为什么StyleSheets是竖排自动化的关键关注点分离样式竖排该怎么显示和内容显示什么文字被分开了。你只需要在StyleSheet这一处地方定义“竖排”的视觉规范。一处修改全局生效如果需要调整所有竖排文本的字号你只需打开StyleSheet修改“VerticalText”样式的字体大小所有使用了v标签的文本都会自动更新。简化动态文本在代码中你只需要拼接v dynamicContent /v即可无需关心具体的间距、旋转数值。组合与继承样式可以基于其他样式创建类似CSS的类继承方便你建立一套有层级关系的文本样式系统。例如可以有一个“BaseText”样式定义通用字体和颜色然后“VerticalText”样式继承它并额外添加旋转和间距属性。实操心得StyleSheet的局限性StyleSheet虽然强大但它并不能直接设置字符的旋转角度即rotate标签的效果。它控制的是字体、颜色、间距等属性。因此我们的“竖排”效果核心依然依赖于在样式中精心调配Character Spacing和Line Spacing来模拟出竖排的列结构。而字符的90度旋转通常还是需要通过标签或默认的旋转样式来触发。这意味着我们的自动化方案将是“StyleSheet管理间距 旋转标签”的结合体。下一章我们将具体构建这套方案。4. 构建自动化竖排文本系统从样式定义到全局应用理解了原理和工具我们现在来搭建一个健壮、可维护的自动化竖排文本系统。这个过程分为几个层次定义核心样式、创建样式表、应用样式以及处理更复杂的场景。4.1 第一步创建并配置竖排核心样式创建StyleSheet资产在项目的Resources文件夹或任何你喜欢的目录下创建TMP_StyleSheet_Vertical资产。定义“垂直正文”样式打开StyleSheet添加一个新样式命名为VerticalBody。标签设置为v。这意味着我们之后使用标签。字体与颜色选择一款适合竖排的字体通常中文字体均可注意字体文件本身是否包含竖排所需的标点符号优化。设置好默认颜色。核心间距调整关键步骤Character Spacing这个值在竖排时控制行高。由于字符旋转了90度其原本的宽度变成了高度。你需要将这个值设为一个负值。例如如果字体大小为30可以尝试设置为-25到-30之间。这个值需要根据字体大小和观感反复微调目标是让旋转后的字符在垂直方向上紧密而舒适地排列避免重叠或过松。Line Spacing这个值在竖排时控制列间距。因为现在一行变成了一列。你需要增加这个值为每一列之间留出足够的空白。可以尝试从50开始调整。其他属性根据需求设置Word Spacing、Paragraph Spacing等。定义变体样式可选但推荐基于VerticalBody创建VerticalHeader标题样式。可以增大字体调整间距并赋予一个新的标签如vh。创建VerticalCaption说明样式。减小字体使用灰色标签为vc。这样做的好处是你在代码或文本中可以通过不同的标签语义化地使用不同层级的竖排文本。4.2 第二步将样式表与旋转行为绑定如前所述StyleSheet不直接处理旋转。我们需要一个地方来统一管理“哪些样式需要伴随旋转”。有两种主流方法方法A在文本内容中显式使用旋转标签简单直接这是最常用的方法。你在使用样式标签的同时包裹一层旋转标签。rotate angle-90v这是自动应用了间距样式的竖排文本/v/rotate优点清晰明了灵活控制。可以对同一段文本的不同部分应用不同的旋转角度。缺点文本字符串变得稍长对于大量纯竖排文本略显冗余。方法B创建“包装器”预制件或工具类追求极致简洁创建一个空的GameObject预制件命名为VerticalTextPrefab。挂载TextMeshProUGUI组件。在该组件的Text属性里预先输入旋转标签和样式标签的框架例如rotate angle-90v{0}/v/rotate。编写一个简单的工具脚本VerticalTextHelper挂载在上面提供一个公共方法public void SetVerticalText(string content) { GetComponentTMP_Text().text string.Format(rotate angle-90v{0}/v/rotate, content); }在实际使用中你只需要实例化这个预制件然后调用SetVerticalText(“你的内容”)。优点业务代码极其干净完全隐藏了实现细节。非常适合动态生成的大量竖排文本。缺点预制件样式固定如果项目中有多种竖排样式如标题、正文需要创建多个预制件。个人经验推荐对于UI界面中静态的、数量不多的竖排文本使用方法A在Inspector里直接写标签直观。对于程序动态生成、数量庞大的竖排文本如对话系统、日志滚动强烈推荐使用方法B用预制件工具类的方式维护性和性能都更好。4.3 第三步全局应用与项目管理单个样式表还不够我们需要确保整个项目都能方便、统一地使用它。创建默认文本样式配置在Resources文件夹下创建TMP Settings资产如果还没有。在TMP Settings的Style Sheet属性中引用我们创建的TMP_StyleSheet_Vertical。这样项目中新建的TMP文本对象默认就会加载这个样式表可以直接使用其中定义的标签。建立开发规范在团队文档中明确规定所有竖排文本必须使用样式标签如。禁止开发者在Inspector中手动调整竖排文本的Character Spacing和Line Spacing所有间距调整必须通过修改StyleSheet资产完成。规定旋转角度的标准通常就是-90度避免出现-89、-91等不一致的值。应对多语言与动态字体如果项目支持多语言且不同语言字体不同你需要在StyleSheet中为每种语言字体定义对应的竖排样式或者使用代码在运行时根据语言切换StyleSheet。动态加载字体时确保StyleSheet中引用的字体资源也被正确加载和引用否则会回退到默认字体。5. 高级优化与性能陷阱规避自动化系统搭建好后我们还需要关注一些高级话题和潜在的性能问题确保方案在大型项目中也能稳定运行。5.1 性能考量StyleSheets与标签解析TMP解析富文本标签包括和我们的自定义样式标签是有成本的。在每一帧更新大量文本如聊天框、大量飘字时需要特别注意。缓存与复用对于频繁更新的动态文本避免每帧都拼接完整的带标签的字符串。可以缓存最终的带标签字符串模板只更新内容部分。减少嵌套深度避免过深的标签嵌套如bivrotate.../rotate/v/i/b。这会增加解析复杂度。静态文本优先对于界面上的静态标签文字尽量在编辑期就设置好带标签的文本而不是在Start()或Awake()中通过代码赋值。批处理中断复杂的富文本和样式变化可能会打断UI的合批Batching导致DrawCall增加。在性能敏感界面需要对文本元素进行规划尽量让样式相同的文本在渲染顺序上相邻。5.2 竖排标点符号与特殊字符处理中文竖排的标点符号有特定规范如句号、逗号应该出现在文字的右侧中间位置书名号、引号需要转换方向等。TMP默认不会处理这些。字体资产检查确保你使用的字体资产Font Asset包含了全角的竖排标点符号。有些字体可能缺失。手动替换对于无法自动转换的标点可以在文本处理阶段进行字符串替换。例如在将文本交给TMP渲染前将水平方向的双引号“”替换为竖排专用的﹃﹄但这依赖于字体是否支持这些字符。接受不完美在许多游戏和非出版级应用中直接使用水平标点符号在竖排中玩家通常可以接受。这是一个成本与效果的权衡。5.3 与TMP其它功能的兼容性文本溢出模式Overflow模式如Truncate,Ellipsis,Linked在竖排时行为可能异常需要充分测试。文字渐变与材质自定义材质和顶点颜色渐变在旋转后效果是否正确。Raycast Target旋转后的文本其点击检测区域是否准确通常UI系统的Raycast是基于RectTransform的矩形字符旋转不影响它但如果你做了更复杂的网格变形就需要留意。动画与富文本交互使用或标签做动画时如果目标文本本身被旋转标签包裹需要测试动画效果是否符合预期。5.4 调试与排查技巧当竖排文本显示不正常时可以按以下步骤排查检查样式表是否加载确认TMP文本组件上的Style Sheet字段是否正确赋值或者全局TMP Settings是否配置。检查标签拼写标签名是否与StyleSheet中定义的完全一致大小写敏感。检查旋转角度确认标签的angle值是否正确通常-90。隔离测试创建一个全新的场景只放一个TMP文本应用最基本的竖排样式和旋转标签看是否工作。以此排除项目其他设置的影响。查看生成网格在Scene视图将TMP文本的调试模式打开查看字符网格的生成情况看字符位置和旋转是否正确。6. 实战案例一个动态对话系统中的竖排文本集成让我们通过一个具体的、稍微复杂的案例将上面的所有知识串联起来。假设我们正在开发一款古风游戏其中有一个重要的“书信”系统玩家可以收到来自不同角色的信件信件内容为竖排文本并且信件的模板、发件人、内容都是动态生成的。目标高效、统一地渲染所有书信的竖排正文并允许个别信件拥有自定义的标题样式。我们的解决方案资源准备创建TMP_StyleSheet_Letter样式表。定义样式LetterBody标签lb配置好竖排所需的负值字符间距和加大行间距使用游戏主字体颜色为深褐色#8B4513。LetterTitle标签lt继承LetterBody字体大小增大50%颜色加深字符间距稍作调整以适配更大字号。创建预制件UI_LetterText包含一个TextMeshProUGUI组件。组件的Style Sheet字段引用TMP_StyleSheet_Letter。文本内容预填为rotate angle-90lb{0}/lb/rotate。挂载脚本LetterTextController。控制器脚本using TMPro; using UnityEngine; public class LetterTextController : MonoBehaviour { private TMP_Text m_TextComponent; // 提供一个属性方便外部获取当前文本的实际内容不含标签 public string RawContent { get; private set; } void Awake() { m_TextComponent GetComponentTMP_Text(); if (m_TextComponent null) { Debug.LogError(LetterTextController requires a TMP_Text component.); this.enabled false; } } // 设置正文 public void SetBodyText(string content) { RawContent content; // 直接使用预设的模板确保格式统一 m_TextComponent.text string.Format(rotate angle-90lb{0}/lb/rotate, content); } // 设置带标题的正文标题部分样式不同 public void SetTextWithTitle(string title, string body) { RawContent title \n body; // 动态组合标签标题使用lt正文使用lb m_TextComponent.text string.Format( rotate angle-90lt{0}/lt\nlb{1}/lb/rotate, title, body ); } // 高级用法完全自定义样式标签用于特殊信件 public void SetCustomStyledText(string content, string styleTag) { RawContent content; if (!styleTag.StartsWith()) styleTag styleTag ; if (!styleTag.EndsWith()) styleTag styleTag ; // 假设样式标签是闭合的这里简单处理。实际应更严谨。 string closingTag styleTag.Insert(1, /); // 生成闭合标签 m_TextComponent.text string.Format(rotate angle-90{0}{1}{2}/rotate, styleTag, content, closingTag); } }在书信系统中使用public class LetterSystem : MonoBehaviour { public GameObject letterTextPrefab; // 引用UI_LetterText预制件 public Transform letterContentParent; // 信件内容容器 public void DisplayLetter(string sender, string title, string body) { // 实例化文本预制件 GameObject textGo Instantiate(letterTextPrefab, letterContentParent); LetterTextController controller textGo.GetComponentLetterTextController(); // 如果有标题使用带标题的方法 if (!string.IsNullOrEmpty(title)) { controller.SetTextWithTitle($[{sender}] {title}, body); } else { controller.SetBodyText($[{sender}] {body}); } // ... 其他布局逻辑 } }这个案例带来的好处一致性所有书信的竖排样式通过一个StyleSheet和预制件严格控制。维护性美术或策划想调整竖排文字的整体观感只需修改TMP_StyleSheet_Letter资产中的LetterBody样式。灵活性通过LetterTextController脚本我们既提供了简单的SetBodyText方法也提供了支持复杂组合的SetTextWithTitle方法甚至预留了SetCustomStyledText以备不时之需。性能预制件实例化是Unity的高效操作文本渲染由TMP和样式表高效管理。7. 总结与个人心得从手动一个个调整TextMeshPro的旋转和间距到建立起一套基于StyleSheets的自动化竖排文本系统这个优化过程带来的效率提升是颠覆性的。它把我们从重复、易错的劳动中解放出来让文本样式的管理变得像前端开发一样清晰和可维护。回顾整个过程我最深刻的几点体会是第一理解底层原理比盲目尝试更重要。最初我也曾试图在StyleSheet里直接找一个“Vertical Alignment”的开关失败后才沉下心来研究TMP的布局和旋转标签的工作原理。明白了“竖排是旋转间距模拟”这个本质所有解决方案的设计都变得顺理成章。第二工具的价值在于封装复杂性。StyleSheet和预制件工具类的模式其核心价值就是把“旋转角度-90”、“字符间距调为负值”、“行间距调大”这一系列繁琐且容易出错的步骤封装成了一个简单的标签v或一个方法调用SetVerticalText()。这才是工程师思维。第三规范与约定优于技术本身。再好的系统如果团队不按规范使用也是白搭。必须在项目初期就确立竖排文本的使用规范并且通过代码审查和预制件设计来引导大家遵守。例如把所有可拖用的竖排文本都做成预制件从根本上杜绝手动创建的错误。最后没有银弹要权衡取舍。我们目前的方案是基于“模拟”的竖排对于出版级、有严格标点符号规则的竖排排版它可能仍有不足。但在99%的游戏和应用开发场景下它在效果、性能和开发效率上取得了完美的平衡。如果未来遇到更极端的需求或许才需要考虑定制TMP布局引擎这条更艰难的路。踩过手动设置的坑才更珍惜自动化带来的便利。希望这篇从实践出发的总结能帮你和你的团队在Unity项目中优雅、高效地驾驭竖排文本让创意不再受限于工具。