Unity TMP_Text 实现竖排文字的完整指南与技巧分享

一、竖排文字在Unity中的需求背景

在UI设计中，竖排文字常见于日文、中文传统排版或特定艺术风格场景。Unity默认的TextMeshPro（TMP）组件虽支持复杂文本效果，但未直接提供竖排功能。开发者需通过技术手段实现这一需求，本文将系统梳理三种主流解决方案。

二、方案一：利用字体特性实现基础竖排

1. 字体文件预处理

• 原理：通过字体设计工具（如FontForge）将每个字符旋转90度，生成竖向显示的字体文件。
• 步骤：
  1. 导出TMP所需字体文件（.ttf或.otf）
  2. 使用FontForge打开字体，全选字符（Ctrl+A）
  3. 执行Element > Transform > Rotate，输入90度
  4. 重新生成字体文件并导入Unity
• 限制：需为每种字体单独处理，且无法动态调整字符间距。

2. Unity中的配置要点

// 示例：加载预处理字体
TMP_FontAsset verticalFont = Resources.Load<TMP_FontAsset>("Fonts/VerticalFont");
textComponent.font = verticalFont;

• 需确保字体材质的Atlas Resolution足够高，避免旋转后字符模糊。
• 推荐设置Auto Size的Min/Max Size范围，防止文字缩放异常。

三、方案二：自定义着色器实现动态竖排

1. 着色器开发核心逻辑

• 顶点变换：在Vertex Shader中修改顶点坐标，使字符垂直排列。

• UV调整：修正纹理坐标以匹配旋转后的字符。

  // 示例：顶点着色器修改
  v2f vert(appdata v) {
    v2f o;
    float angle = radians(90); // 旋转90度
    float sinA = sin(angle);
    float cosA = cos(angle);
    // 旋转矩阵应用
    float2x2 rotation = float2x2(cosA, -sinA, sinA, cosA);
    v.vertex.xy = mul(rotation, v.vertex.xy);
    o.vertex = UnityObjectToClipPos(v.vertex);
    o.uv = TRANSFORM_TEX(v.uv, _MainTex);
    return o;
  }

2. 完整实现步骤

1. 创建Unlit/Text类型的Shader
2. 添加旋转角度参数：

   Properties {
    _RotationAngle ("Rotation Angle", Range(0, 360)) = 90
   }

3. 在Fragment Shader中处理字符间距：

   fixed4 frag(v2f i) : SV_Target {
    float2 rotatedUV = i.uv - 0.5; // 中心对齐
    float angle = radians(_RotationAngle);
    float2x2 rot = float2x2(cos(angle), -sin(angle), sin(angle), cos(angle));
    rotatedUV = mul(rot, rotatedUV) + 0.5;
    // 继续原有采样逻辑...
   }

四、方案三：脚本控制字符位置（推荐）

1. 核心算法实现

using TMPro;
using UnityEngine;
public class VerticalText : MonoBehaviour {
    [SerializeField] private TextMeshProUGUI textComponent;
    [SerializeField] private float characterSpacing = 10f;
    [SerializeField] private float lineHeight = 50f;
    void Start() {
        SetVerticalText();
    }
    void SetVerticalText() {
        // 临时禁用自动布局
        var layout = textComponent.GetComponent<RectTransform>();
        var originalSize = layout.sizeDelta;
        // 获取所有字符信息
        TMP_TextInfo textInfo = textComponent.textInfo;
        int charCount = textInfo.characterCount;
        // 计算总高度
        float totalHeight = charCount * lineHeight;
        layout.sizeDelta = new Vector2(layout.sizeDelta.x, totalHeight);
        // 重新定位每个字符
        for (int i = 0; i < charCount; i++) {
            if (!textInfo.characterInfo[i].isVisible) continue;
            var charInfo = textInfo.characterInfo[i];
            var vertexInfo = charInfo.vertexTL;
            // 计算新位置（底部对齐）
            float newY = totalHeight - (i * lineHeight) - (lineHeight * 0.5f);
            float newX = vertexInfo.position.x; // 保持水平居中
            // 更新顶点位置
            for (int j = 0; j < 4; j++) {
                Vector3 pos = vertexInfo.position;
                pos.y = newY;
                textInfo.meshInfo[0].vertices[charInfo.vertexIndex + j] = pos;
            }
        }
        // 更新网格
        textComponent.UpdateVertexData();
    }
}

2. 优化技巧

• 性能优化：对静态文本使用Canvas.WillRenderCanvases事件替代Update
• 动态调整：监听TextMeshProUGUI.onTextChanged事件实时更新布局
• 富文本支持：通过解析<mark>等标签实现部分竖排效果

五、常见问题解决方案

1. 字符重叠问题

• 原因：未正确计算字符高度或间距不足
• 解决：

  // 动态计算字符高度
  float charHeight = textComponent.font.faceInfo.lineHeight * 
                    textComponent.fontSize / textComponent.font.faceInfo.size;
  lineHeight = charHeight * 1.2f; // 添加20%缓冲

2. 多行文本处理

• 实现：结合TextMeshProUGUI.OverflowMode使用：

  textComponent.overflowMode = TextOverflowModes.Page;
  // 或自定义分页逻辑

3. 亚洲语言支持

• 特殊处理：对中文、日文等需要：
  • 禁用连字（textComponent.enableWordWrapping = false）
  • 调整基线偏移（textComponent.baselineOffset = 5）

六、最佳实践建议

1. 性能优先：静态文本使用字体预处理，动态文本采用脚本控制
2. 兼容性测试：在不同分辨率（如1080p/4K）下验证显示效果
3. 资源管理：为竖排文本创建专用TMP_FontAsset，避免影响其他文本
4. 工具封装：将竖排逻辑封装为Editor脚本，提供可视化参数调整

七、进阶应用场景

1. 混合排版实现

// 示例：部分竖排部分横排
string mixedText = "<vert>竖排部分</vert> 横排部分";
textComponent.text = mixedText;
// 需自定义解析器处理<vert>标签

2. 动画效果集成

// 字符逐个显示动画
IEnumerator ShowCharsVertically() {
    for (int i = 0; i < textComponent.textInfo.characterCount; i++) {
        // 更新可见性逻辑...
        yield return new WaitForSeconds(0.1f);
    }
}

八、总结与资源推荐

通过字体预处理、自定义着色器和脚本控制三种方案，开发者可灵活选择适合项目的竖排文字实现方式。推荐资源：

• Unity官方TMP示例项目
• TextMeshPro文档（2023版）
• ShaderGraph竖排节点包（Asset Store）

掌握这些技术后，开发者不仅能解决基础竖排需求，还可实现复杂的混合排版、动画效果等高级功能，大幅提升UI设计的表现力。