首页/ 第 10 章 · UI 界面系统/ 第 148 课
LESSON 148 · UI 界面系统

Text 文本与文字排版

TextMeshPro 已掌握。下一课学 Image 图片。

⏱ 约 14 分钟📊 难度:入门🗂 第 10 章 · UI 界面系统📍 第 148 / 300 课
课程进度
148 / 300

🎯本节学习目标

  • 掌握 TextMeshPro 创建
  • 掌握文本属性
  • 掌握富文本

🚀课程导读

游戏里的对话、提示、分数都要文字。本课用 TextMeshPro(TMP)把文字玩明白。

创建 TextMeshPro 文本

TMP 是 UI 文字的标准。

  1. 【创建】Hierarchy 右键 → UI → Text - TextMeshPro。
  2. 【首次提示】弹出“Import TMP Essentials”,点【Import TMP Essentials】导入基础资源。
  3. 【输入文字】选中文本对象,Inspector 的【Text Input】里输入“你好,Unity!”。
  4. 【字体】TextMeshPro 需要“字体资产”(TMP Font Asset);默认 Arial 支持中文可能不全。
  5. 【导入中文字体】导入 TTF 字体 → 选中字体 → Create → TextMeshPro → Font Asset,生成 TMP 字体资产(第 41 课)。
  6. 【指定字体】把 TMP 字体资产拖到文本的 Font Asset 槽。
  7. 【字号】Font Size:文字大小(如 36)。
  8. 【颜色】Color 选文字颜色;加描边/阴影:勾选 Underlay/Outline 设置。
  9. 【对齐】Alignment:水平/垂直对齐(左上、居中…)。
  10. 【换行】TMP 自动换行(有宽度限制);Wrapping 开启。
  11. 【富文本】默认支持:<b>粗体</b>、<i>斜体</i>、<color=red>红字</color>、<size=60>大</size>。
  12. 【代码改字】tmpro.text = "分数:" + score;(第 167 课)。
💡
TMP 富文本让“一句话里多种颜色/大小”零成本,注意 <color=#FF0000> 十六进制也可。

排版与布局

让文字整齐。

  1. 【Rect Transform】文本大小由 RectTransform 控制,拖拽四角调整宽高。
  2. 【自动调整】勾选 TMP 组件的【Auto Size】可自动缩放到合适大小(显示不全时缩小)。
  3. 【首行缩进/段落】Paragraph Spacing、Line Spacing 等控制行距段距。
  4. 【字符间距】Character Spacing 调整字间距。
  5. 【水平/垂直溢出】Overflow 设为 Overflow 显示全(超出);或 Ellipsis 截断加省略号。
  6. 【分层】文字在 Canvas 内的顺序由 Hierarchy 顺序决定(后画的在上层)。
  7. 【多行】宽限制内自动换行,回车强制换行。
  8. 【排版技巧】用“空格+换行”做简单对齐;复杂排版用 Layout Group(第 156 课)。
  9. 【注意】TMP 的 Sorting Order 与 Canvas 层级共同决定显示顺序。
TMP 三件套:字体资产、字号、富文本,覆盖 90% 文字需求。

常见错误与排查

错误:中文显示为方块?
原因:字体不支持中文
解决:用支持中文的 TTF 字体生成 TMP 字体资产并指定。

动手练习

课后小任务(做出来才算真的学会)

  • 创建 TMP 文本并显示中文
  • 用富文本做“红色大号”文字
  • 用代码更新文本内容

本节小结

TextMeshPro 已掌握。下一课学 Image 图片。

完成打卡后,主站会实时更新你的学习进度 🎯

← 上一课事件系统 EventSystem