第 33 课 · Label 文本显示

⏱ 预计时长 25 分钟📊 难度入门📚 模块 第 4 部分 · UI 界面 · 动画 · 特效

🎯 本课学习目标

掌握 Label 的属性与样式
学会富文本（BBCode）
实现文字打字机效果

文字是 UI 的灵魂。本课把 Label 玩明白：样式、多行、富文本、打字机效果。

📖 详细教学步骤

Label 基础属性概念

属性	作用
Text	显示的文字
Horizontal/Vertical Alignment	对齐方式
Autowrap Mode	自动换行
Font Size（样式覆盖）	字号
Font Color（样式覆盖）	颜色

样式覆盖（Theme Overrides）操作

选中 Label → 检查器 Theme Overrides：

Font Sizes → Font Size：字号（如 32）
Colors → Font Color：文字颜色
Colors → Font Outline Color + Outline Size：描边
Colors → Font Shadow Color + Shadow Offset：阴影

这些只在当前控件生效，不影响全局。

多行文本与自动换行实操

长文本需要换行：

Label 的 Autowrap Mode 设为 Word（按单词换行）
把 Label 的 Size 拉宽（如 400）
Text 里直接写多行文本，会按宽度自动换行

富文本 BBCode 颜色进阶

Label 勾选 Bbcode Enabled 后可用 BBCode 语法做彩色文字：

GDSCRIPT# 勾选 Bbcode Enabled 后
$Label.bbcode_enabled = true
$Label.text = "[color=#ff6b6b]红色[/color] [color=#2ff3b2]绿色[/color]"
# 也支持 [b]粗体[/b]、[i]斜体[/i]、[font_size=40]大号[/font_size]

打字机效果特效

用 Tween 逐字显示，做对话/开场很有用：

GDSCRIPTextends Label

func type_text(full: String, speed: float = 0.05):
    text = ""
    var tween = create_tween()
    for i in range(full.length() + 1):
        tween.tween_callback(func():
            text = full.substr(0, i)
        ).set_delay(speed)

Label 与代码结合实操

动态更新文本是最常见操作（第 27 课已见）：

GDSCRIPTextends CanvasLayer

@onready var label: Label = $Label

func _ready():
    label.text = "欢迎回来，冒险者！"
    var hp = 80
    label.text = "HP: %d%%" % hp   # 格式化：HP: 80%

⚠️

BBCode 没生效？

先勾选 Bbcode Enabled，且要用 [] 标签，[color=#rrggbb]文字[/color] 成对出现。

⚠️

文字被截断？

Label 宽度不够或没开自动换行。拉宽 Label 或设置 Autowrap Mode。

🧪 动手试一试

🏋️ 课后练习

做一个带描边阴影的大标题 Label，并用打字机效果逐字显示「欢迎来到 Godot 世界！」。

Font Size 48 + Outline + Shadow；type_text 函数循环 substr。

💡

描边+阴影让文字在任何背景上都清晰，是 UI 必备。

💡

str() 与 % 格式化都能拼字符串，按习惯用。

🎓 本课小结

Label 显示文本：样式覆盖管字号/颜色/描边/阴影；Autowrap 自动换行；BBCode 富文本彩色；Tween 实现打字机效果。