HOME / 第 4 部分 · UI 界面 · 动画 · 特效 / 第 31 课
MODULE 4 · UI 界面 · 动画 · 特效
第 31 课 · UI 系统概述
🎯 本课学习目标
- 理解 Godot UI 系统的基本架构
- 认识 Control 类节点家族
- 理解 UI 的布局与锚点思想
按钮、血条、菜单、对话框——UI 决定游戏的「门面」。本课从整体认识 Godot UI 系统。
📖 详细教学步骤
UI 用什么节点？概念
Godot 的 UI 全部基于 Control 类节点（控件）：
- Label（文字）、Button（按钮）、Panel（面板）、ProgressBar（进度条）
- Slider（滑块）、LineEdit（输入框）、CheckBox（复选框）等
- 所有 UI 节点都是 Control 的子类
UI 放哪？CanvasLayer 与 UI 场景概念
- UI 建议放在
CanvasLayer下：无论相机怎么动，UI 固定显示在屏幕上 - UI 独立成场景（如 hud.tscn、menu.tscn）便于管理
- UI 坐标系统与 2D 世界分离，左上角为原点
锚点（Anchor）：UI 怎么跟着窗口走重点
UI 用锚点定义「这个控件相对父控件的哪个位置对齐」：
| 锚点预设 | 效果 |
|---|---|
| 左上角 | 控件固定左上 |
| 顶部居中 | 固定顶部中间 |
| 全矩形 | 铺满整个父控件（全屏面板） |
| 右下角 | 固定右下 |
💡 选中 UI 节点后，顶部工具栏的「布局」菜单可以一键设置锚点。
Offset 与控件尺寸概念
- 锚点决定位置基准，Offset 决定相对锚点的偏移
- 控件有 Position、Size 属性（在锚点基础上计算）
- 窗口大小变化时，控件按锚点自动适配
💡 新手的通用做法：全屏面板用「全矩形」锚点，普通控件用「顶部居中」等预设。
添加一个简单 UI 试试实操
- 新建场景，根节点
CanvasLayer，命名 UI，保存 ui.tscn - 添加子节点
Panel，用布局预设「全矩形」铺满屏幕 - 在 Panel 下加
Button，文字改成「开始游戏」 - 运行（把 ui.tscn 设为主场景），能看到一个全屏面板 + 按钮
⚠️
UI 跟着玩家乱跑？
UI 节点必须在 CanvasLayer 下，不能直接放在 2D 世界节点下。
⚠️
改了窗口大小 UI 错位？
用锚点预设而不是手摆位置，窗口自适应就交给锚点。
🧪 动手试一试
🏋️ 课后练习
创建 ui.tscn，用 CanvasLayer + 全屏 Panel + 顶部居中的标题 Label + 右下角的一个关闭按钮。
Label 用「顶部居中」布局，Button 用「右下角」布局。
💡
UI 节点选中的时候，按「布局」工具栏的预设一键排版，别手动拖。
💡
UI 缩放跟随窗口：项目设置里可设 Stretch 模式，第 96 课详讲。
🎓 本课小结
UI 系统基于 Control 控件，放在 CanvasLayer 下固定显示；锚点决定对齐方式、Offset 决定偏移；用布局预设一键排版。