第三章：用户界面详解
"了解你的工具，是掌握任何技艺的第一步。"
Godot编辑器的界面设计简洁而强大，本章将带你全面探索编辑器的每一个角落，让你熟悉所有面板、工具和操作方式。
3.1 主界面布局
首次打开Godot项目，你会看到一个精心设计的编辑器界面。让我们逐一了解各个区域。
3.1.1 顶部菜单栏
菜单栏位于编辑器最顶部，提供全局命令和设置入口：
┌────────────────────────────────────────────────────────────┐
│ 场景 项目 调试 编辑器 帮助 │
└────────────────────────────────────────────────────────────┘场景菜单：
| 命令 | 快捷键 | 功能 |
|---|---|---|
| 新建场景 | Ctrl+N | 创建空白场景 |
| 打开场景 | Ctrl+O | 打开现有场景 |
| 保存场景 | Ctrl+S | 保存当前场景 |
| 另存为 | Ctrl+Shift+S | 保存为新文件 |
| 关闭场景 | Ctrl+W | 关闭当前场景标签 |
项目菜单：
| 命令 | 功能 |
|---|---|
| 项目设置 | 配置项目参数 |
| 导出 | 导出到各平台 |
| 安装Android构建模板 | Android开发 |
| 打开项目数据文件夹 | 访问user://目录 |
| 退出 | 退出到项目管理器 |
调试菜单：
| 命令 | 快捷键 | 功能 |
|---|---|---|
| 运行项目 | F5 | 运行主场景 |
| 运行当前场景 | F6 | 运行当前场景 |
| 暂停运行的场景 | F7 | 暂停游戏 |
| 停止运行的场景 | F8 | 停止游戏 |
3.1.2 顶部工具栏
工具栏位于菜单栏下方，提供常用工具的快速访问：
┌────────────────────────────────────────────────────────────┐
│ [📁][💾][↩][↪] │ [2D][3D][Script][AssetLib] │ [▶][⏸][⏹] │
└────────────────────────────────────────────────────────────┘左侧工具组：
- 📁 打开场景
- 💾 保存场景
- ↩ 撤销
- ↪ 重做
中央工作区切换：
| 按钮 | 快捷键 | 功能 |
|---|---|---|
| 2D | Ctrl+F1 | 2D编辑视图 |
| 3D | Ctrl+F2 | 3D编辑视图 |
| Script | Ctrl+F3 | 脚本编辑器 |
| AssetLib | Ctrl+F4 | 资源库浏览器 |
右侧运行控制：
- ▶ 运行项目
- ⏸ 暂停游戏
- ⏹ 停止游戏
- 🎬 运行当前场景
3.1.3 左侧场景面板
场景面板显示当前场景的节点树结构：
┌─────────────────────────┐
│ 场景 │
├─────────────────────────┤
│ 🔍 过滤节点 │
├─────────────────────────┤
│ ▼ 📦 Main │
│ ├─ 🖼️ Sprite2D │
│ ├─ 📦 Player │
│ │ ├─ 🖼️ Sprite2D │
│ │ └─ 💠 CollShape │
│ └─ 📦 Enemies │
│ ├─ 📦 Enemy1 │
│ └─ 📦 Enemy2 │
└─────────────────────────┘面板功能：
- 搜索过滤：快速查找节点
- 树形结构：显示父子关系
- 拖放操作：调整节点层级
- 右键菜单：节点操作选项
常用操作快捷键：
| 操作 | 快捷键 |
|---|---|
| 添加子节点 | Ctrl+A |
| 复制节点 | Ctrl+D |
| 删除节点 | Delete |
| 重命名节点 | F2 |
| 上移节点 | Ctrl+↑ |
| 下移节点 | Ctrl+↓ |
3.1.4 右侧检查器面板
检查器面板显示选中节点的所有属性：
┌─────────────────────────┐
│ 检查器 │
├─────────────────────────┤
│ 🔍 搜索属性 │
├─────────────────────────┤
│ ▼ Node │
│ 名称: Player │
├─────────────────────────┤
│ ▼ Node2D │
│ 位置: (100, 200) │
│ 旋转: 0° │
│ 缩放: (1, 1) │
├─────────────────────────┤
│ ▼ Sprite2D │
│ 纹理: player.png │
│ 偏移: (0, 0) │
│ 翻转: □水平 □垂直 │
└─────────────────────────┘检查器特性：
- 属性分类：按继承层级组织属性
- 搜索过滤：快速定位属性
- 实时编辑：修改立即生效
- 资源拖放：直接拖放资源到属性
- 帮助文档：点击属性名查看说明
3.1.5 底部资源面板
文件系统面板显示项目的文件结构：
┌─────────────────────────────────────────────────────────┐
│ 文件系统 │
├─────────────────────────────────────────────────────────┤
│ res:// │
│ ├─ 📁 assets │
│ │ ├─ 📁 sprites │
│ │ │ ├─ 🖼️ player.png │
│ │ │ └─ 🖼️ enemy.png │
│ │ └─ 📁 sounds │
│ ├─ 📁 scenes │
│ │ ├─ 📄 main.tscn │
│ │ └─ 📄 player.tscn │
│ ├─ 📁 scripts │
│ └─ 📄 project.godot │
└─────────────────────────────────────────────────────────┘文件操作：
| 操作 | 方式 |
|---|---|
| 打开文件 | 双击 |
| 重命名 | F2 或右键菜单 |
| 删除 | Delete 或右键菜单 |
| 移动 | 拖放到目标文件夹 |
| 新建文件夹 | 右键 → 新建文件夹 |
| 导入资源 | 拖放外部文件到面板 |
3.1.6 中央编辑器视口
视口是编辑场景的主要工作区域，根据当前模式显示2D或3D视图。
2D视口工具栏：
┌─────────────────────────────────────────────────────────┐
│ [选择][移动][旋转][缩放] │ [吸附设置] │ [视图选项] │
├─────────────────────────────────────────────────────────┤
│ │
│ 2D场景视图 │
│ │
│ 📦────────────────📦 │
│ │ │ │
│ │ 玩家节点 │ │
│ │ │ │
│ 📦────────────────📦 │
│ │
└─────────────────────────────────────────────────────────┘3D视口工具栏：
┌─────────────────────────────────────────────────────────┐
│ [选择][移动][旋转][缩放] │ [本地/全局] │ [透视/正交] │
├─────────────────────────────────────────────────────────┤
│ │
│ 3D场景视图 │
│ ↗ Y │
│ │ ↗ Z │
│ ────┼──→ X │
│ │ │
│ [3D模型] │
│ │
└─────────────────────────────────────────────────────────┘3.2 视口操作
熟练掌握视口操作是高效工作的关键。
3.2.1 2D视图操作
鼠标操作：
| 操作 | 鼠标 |
|---|---|
| 平移视图 | 中键拖动 或 空格+左键拖动 |
| 缩放视图 | 滚轮滚动 |
| 选择节点 | 左键点击 |
| 框选节点 | 左键拖动 |
| 移动节点 | 选中后左键拖动 |
变换工具：
| 工具 | 快捷键 | 功能 |
|---|---|---|
| 选择模式 | Q | 选择和移动节点 |
| 移动模式 | W | 精确移动 |
| 旋转模式 | E | 旋转节点 |
| 缩放模式 | S | 缩放节点 |
吸附设置：
| 吸附类型 | 快捷键 | 说明 |
|---|---|---|
| 网格吸附 | G | 吸附到网格 |
| 像素吸附 | Ctrl+Shift+S | 吸附到像素 |
| 智能吸附 | - | 吸附到其他节点 |
3.2.2 3D视图操作
鼠标导航：
| 操作 | 鼠标 |
|---|---|
| 旋转视图 | 中键拖动 |
| 平移视图 | Shift+中键拖动 |
| 缩放视图 | 滚轮滚动 或 Ctrl+中键拖动 |
| 飞行模式 | Shift+F |
视图预设（小键盘）：
| 按键 | 视图 |
|---|---|
| 1 | 前视图 |
| 3 | 右视图 |
| 7 | 顶视图 |
| Ctrl+1 | 后视图 |
| Ctrl+3 | 左视图 |
| Ctrl+7 | 底视图 |
| 5 | 切换透视/正交 |
聚焦操作：
| 操作 | 快捷键 |
|---|---|
| 聚焦选中节点 | F |
| 聚焦原点 | O |
| 居中视图 | Home |
3.2.3 视口快捷键
通用快捷键：
| 快捷键 | 功能 |
|---|---|
| Ctrl+Z | 撤销 |
| Ctrl+Y | 重做 |
| Ctrl+C | 复制 |
| Ctrl+V | 粘贴 |
| Ctrl+X | 剪切 |
| Delete | 删除 |
| Ctrl+D | 复制节点 |
| Ctrl+A | 添加节点 |
视图快捷键：
| 快捷键 | 功能 |
|---|---|
| Ctrl+F1 | 切换到2D视图 |
| Ctrl+F2 | 切换到3D视图 |
| Ctrl+F3 | 切换到脚本编辑器 |
| Ctrl+Tab | 下一个场景标签 |
| Ctrl+Shift+Tab | 上一个场景标签 |
3.2.4 视口配置
视口设置选项：
在3D视口的"视图"菜单中，可以配置：
- 网格显示：显示/隐藏参考网格
- Gizmo设置：调整变换工具的显示
- 着色模式：线框/实体/带纹理等
- 环境设置：预览环境光照
2D视口选项：
- 显示网格：像素网格参考
- 显示原点：场景原点标记
- 显示边距：安全区域边距
- 显示导航：导航多边形预览
3.3 场景系统
场景系统是Godot的核心概念之一，理解它对于掌握引擎至关重要。
3.3.1 场景面板功能
场景面板不仅显示节点树，还提供丰富的管理功能。
面板按钮功能：
┌────────────────────────────────────────┐
│ [+实例化] [+节点] [+脚本] [🔗] [过滤] │
└────────────────────────────────────────┘| 按钮 | 功能 |
|---|---|
| 实例化子场景 | 将其他场景作为节点添加 |
| 添加子节点 | 添加新节点（Ctrl+A） |
| 附加脚本 | 为节点创建或附加脚本 |
| 链接 | 创建远程节点链接 |
| 过滤 | 按类型或名称过滤节点 |
3.3.2 节点树操作
拖放操作：
操作前： 操作后：
▼ Main ▼ Main
├─ Player ├─ Enemies
├─ Enemies ───→ │ └─ Player （Player移入Enemies）
└─ UI └─ UI节点层级调整：
- 拖到节点上方：成为同级上方节点
- 拖到节点内部：成为子节点
- 拖到节点下方：成为同级下方节点
右键菜单选项：
| 选项 | 功能 |
|---|---|
| 添加子节点 | 添加子节点 |
| 实例化子场景 | 实例化场景 |
| 更改类型 | 更换节点类型 |
| 附加脚本 | 创建/附加脚本 |
| 分离脚本 | 移除附加的脚本 |
| 复制节点路径 | 复制节点的路径字符串 |
| 保存分支为场景 | 将子树保存为独立场景 |
| 合并来自场景 | 将场景实例合并为节点 |
| 可见性切换 | 显示/隐藏节点 |
| 删除节点 | 删除选中节点 |
3.3.3 节点搜索与筛选
搜索框功能：
在场景面板顶部的搜索框中输入：
- 节点名称：精确匹配
- 部分名称：模糊匹配
- 类型名：按类型过滤
筛选器选项：
| 筛选 | 效果 |
|---|---|
| 按名称 | 匹配节点名 |
| 按类型 | 显示特定类型节点 |
| 仅显示脚本 | 只显示有脚本的节点 |
| 仅显示可见 | 只显示可见节点 |
3.3.4 节点分组管理
分组功能：
节点可以添加到分组中，方便批量管理：
# 在编辑器中：选中节点 → 检查器 → 节点标签 → 分组
# 代码中添加到分组
player.add_to_group("enemies")
# 获取分组中的所有节点
var all_enemies = get_tree().get_nodes_in_group("enemies")分组使用场景：
- 批量处理敌人
- 管理收集品
- 统一控制UI元素
- 实现事件广播
3.4 检查器面板
检查器是编辑节点属性的主要工具。
3.4.1 属性分类
检查器中的属性按继承层级组织：
节点继承链：Node → CanvasItem → Node2D → Sprite2D
检查器显示：
┌─────────────────────┐
│ ▼ Node │ ← 基类属性
│ name, groups... │
├─────────────────────┤
│ ▼ CanvasItem │ ← 继承属性
│ visible, modulate │
├─────────────────────┤
│ ▼ Node2D │ ← 继承属性
│ position, scale │
├─────────────────────┤
│ ▼ Sprite2D │ ← 当前类属性
│ texture, offset │
└─────────────────────┘3.4.2 属性编辑器
不同类型的属性有不同的编辑器：
| 属性类型 | 编辑器 |
|---|---|
| 数字 | 滑块或输入框 |
| 布尔 | 复选框 |
| 字符串 | 文本框 |
| 颜色 | 颜色选择器 |
| 向量 | XY/XYZ输入框 |
| 枚举 | 下拉菜单 |
| 资源 | 资源选择器 |
| 节点路径 | 路径选择器 |
编辑技巧：
| 技巧 | 方法 |
|---|---|
| 重置为默认值 | 右键点击属性 → 重置 |
| 复制属性值 | 右键点击 → 复制值 |
| 粘贴属性值 | 右键点击 → 粘贴值 |
| 拖放资源 | 从文件系统拖到属性 |
| 数学表达式 | 在数字框中输入表达式（如 100*2） |
3.4.3 资源属性
资源属性有特殊的编辑方式：
┌─────────────────────────────────┐
│ 纹理: [空] │
│ ├─ [快速加载] │
│ ├─ [从文件加载] │
│ ├─ [新建 ImageTexture] │
│ └─ [清空] │
└─────────────────────────────────┘内置资源 vs 外部资源：
- 内置资源：保存在场景文件中
- 外部资源：独立的 .tres 或 .res 文件
3.4.4 属性文档
点击属性名旁边的帮助图标或按F1，可以查看属性的详细说明。
3.5 节点系统
详细了解Godot的节点系统，是深入掌握引擎的关键。
3.5.1 节点生命周期
每个节点都有明确的生命周期：
创建 → 进入树 → 准备就绪 → 处理循环 → 退出树 → 释放
对应回调函数：
_init() # 节点创建时
_enter_tree() # 进入场景树时
_ready() # 节点及所有子节点都准备好后
_process() # 每帧调用
_exit_tree() # 退出场景树时3.5.2 节点类型概览
基础节点：
| 节点类型 | 用途 |
|---|---|
| Node | 基础节点，用于组织结构 |
| Node2D | 2D空间中的节点基类 |
| Node3D | 3D空间中的节点基类 |
| Control | UI控件基类 |
常用2D节点：
| 节点类型 | 用途 |
|---|---|
| Sprite2D | 显示2D图片 |
| AnimatedSprite2D | 播放精灵动画 |
| CharacterBody2D | 角色物理体 |
| RigidBody2D | 刚体物理 |
| Area2D | 区域检测 |
| TileMap | 瓦片地图 |
| Camera2D | 2D相机 |
常用3D节点：
| 节点类型 | 用途 |
|---|---|
| MeshInstance3D | 显示3D模型 |
| CharacterBody3D | 3D角色物理体 |
| RigidBody3D | 3D刚体物理 |
| Area3D | 3D区域检测 |
| Camera3D | 3D相机 |
| DirectionalLight3D | 平行光 |
3.5.3 添加节点
通过对话框添加（Ctrl+A）：
┌────────────────────────────────────────┐
│ 创建新节点 │
├────────────────────────────────────────┤
│ 🔍 搜索: CharacterBody │
├────────────────────────────────────────┤
│ ▼ 匹配结果 │
│ ├─ CharacterBody2D │
│ └─ CharacterBody3D │
├────────────────────────────────────────┤
│ 描述： │
│ 角色控制的物理体，支持移动和碰撞。 │
│ 使用 move_and_slide() 进行移动。 │
├────────────────────────────────────────┤
│ [创建] [取消] │
└────────────────────────────────────────┘快速添加方法：
- 搜索框输入节点类型名
- 选择节点后按Enter创建
- 或双击节点类型
3.6 文件系统面板
3.6.1 面板功能
文件系统面板是管理项目资源的中心：
┌─────────────────────────────────────────┐
│ 文件系统 [☰] [🔄] │
├─────────────────────────────────────────┤
│ 🔍 搜索文件 │
├─────────────────────────────────────────┤
│ 收藏夹: │
│ ⭐ res://scenes/ │
│ ⭐ res://scripts/ │
├─────────────────────────────────────────┤
│ 目录: │
│ res:// │
│ ├─ 📁 assets │
│ ├─ 📁 scenes │
│ └─ 📁 scripts │
└─────────────────────────────────────────┘3.6.2 资源导入
导入方式：
- 拖放文件到文件系统面板
- 复制文件到项目文件夹
- 使用"导入"菜单
导入设置：
选择资源后，在检查器中可以看到导入选项：
导入设置（player.png）
┌─────────────────────────────┐
│ 预设: [2D Pixel] │
├─────────────────────────────┤
│ 压缩/模式: Lossless │
│ 过滤: 关闭（像素游戏） │
│ Mipmap: 关闭 │
├─────────────────────────────┤
│ [重新导入] │
└─────────────────────────────┘3.6.3 资源预览
选择资源时，底部会显示预览：
- 图片：显示缩略图和尺寸
- 音频：显示波形和播放按钮
- 场景：显示缩略图
- 脚本：显示代码预览
3.7 底部面板
底部面板包含多个实用工具标签。
3.7.1 输出面板
显示print语句和引擎消息：
┌─────────────────────────────────────────┐
│ 输出 │
├─────────────────────────────────────────┤
│ > Godot Engine v4.4.stable.official │
│ > 正在加载资源... │
│ > Hello World! │
│ > Player position: (100, 200) │
│ > ✓ 场景已加载 │
└─────────────────────────────────────────┘3.7.2 调试器面板
运行游戏时提供调试功能：
| 标签 | 功能 |
|---|---|
| 堆栈 | 查看调用堆栈 |
| 断点 | 管理断点 |
| 错误 | 显示运行时错误 |
| 监视 | 监视变量值 |
| 性能 | 性能监控图表 |
| 视频内存 | 显存使用情况 |
| 杂项 | 其他调试信息 |
3.7.3 动画面板
AnimationPlayer节点的动画编辑器：
┌─────────────────────────────────────────────────────────┐
│ 动画: [walk] ▼ [➕][🗑️] │ 0.0s ─────●───── 1.0s │
├─────────────────────────────────────────────────────────┤
│ ▼ Sprite2D │
│ └─ frame: ●────●────●────●────● │
│ ▼ Position │
│ └─ position: ●─────────────────● │
└─────────────────────────────────────────────────────────┘3.7.4 音频面板
音频总线混音器：
┌─────────────────────────────────────────┐
│ 音频 │
├─────────────────────────────────────────┤
│ Master Music SFX │
│ │ │ │ │
│ ═══ ═══ ═══ │
│ │ │ │ │
│ │ │ │ │
│ ─┴─ ─┴─ ─┴─ │
│ -6dB -12dB 0dB │
└─────────────────────────────────────────┘3.7.5 着色器编辑器
编写和预览着色器：
┌─────────────────────────────────────────┐
│ 着色器 │
├─────────────────────────────────────────┤
│ shader_type canvas_item; │
│ │
│ void fragment() { │
│ COLOR = texture(TEXTURE, UV); │
│ COLOR.rgb *= 0.5; │
│ } │
└─────────────────────────────────────────┘本章小结
本章我们全面探索了Godot编辑器的用户界面：
- 主界面布局：菜单栏、工具栏、场景面板、检查器、文件系统、视口
- 视口操作：2D/3D视图导航、变换工具、快捷键
- 场景系统：节点树管理、搜索筛选、分组功能
- 检查器面板：属性编辑、资源管理、文档帮助
- 节点系统：生命周期、节点类型、添加方法
- 文件系统：资源管理、导入设置、预览功能
- 底部面板：输出、调试、动画、音频、着色器
掌握编辑器界面是高效开发的基础。在下一章中，我们将开始实践——创建你的第一个Godot项目！
上一章：环境搭建与配置
下一章：第一个项目