283 lines
6.5 KiB
Markdown
283 lines
6.5 KiB
Markdown
# 🎯 GUI功能实现完整指南
|
||
|
||
## 📋 功能概述
|
||
|
||
我已经为你的`test.py`程序添加了完整的GUI管理功能，包括：
|
||
|
||
### ✨ 核心功能
|
||
- **GUI元素创建** - 支持多种2D和3D GUI组件
|
||
- **GUI元素编辑** - 实时属性修改和可视化编辑
|
||
- **GUI元素删除** - 安全的元素移除机制
|
||
- **场景树显示** - GUI元素在层级窗口中的组织
|
||
- **属性面板** - 专门的GUI属性编辑界面
|
||
|
||
---
|
||
|
||
## 🎮 支持的GUI类型
|
||
|
||
### 📱 2D GUI组件
|
||
1. **DirectButton (按钮)**
|
||
- 可点击的交互按钮
|
||
- 支持自定义文本和颜色
|
||
- 带有点击事件响应
|
||
|
||
2. **DirectLabel (标签)**
|
||
- 静态文本显示
|
||
- 透明背景
|
||
- 可自定义字体和颜色
|
||
|
||
3. **DirectEntry (输入框)**
|
||
- 文本输入组件
|
||
- 支持占位符文本
|
||
- 带有提交事件
|
||
|
||
### 🌐 3D空间GUI组件
|
||
1. **3D TextNode (3D文本)**
|
||
- 3D空间中的文本节点
|
||
- Billboard效果（始终面向相机）
|
||
- 支持中文字体
|
||
|
||
2. **Virtual Screen (虚拟屏幕)**
|
||
- 3D空间中的平面屏幕
|
||
- 可显示文本内容
|
||
- 半透明效果
|
||
|
||
---
|
||
|
||
## 🛠️ 使用方法
|
||
|
||
### 创建GUI元素
|
||
|
||
#### 方法1: 使用菜单
|
||
```
|
||
GUI菜单 → 创建按钮/标签/输入框/3D文本/虚拟屏幕
|
||
```
|
||
|
||
#### 方法2: 使用工具栏
|
||
```
|
||
工具栏 → 创建按钮/创建标签/3D文本
|
||
```
|
||
|
||
#### 方法3: 程序化创建
|
||
```python
|
||
# 创建按钮
|
||
button = world.createGUIButton(pos=(0, 0, 0.5), text="我的按钮")
|
||
|
||
# 创建标签
|
||
label = world.createGUILabel(pos=(0, 0, 0.3), text="标签文本")
|
||
|
||
# 创建3D文本
|
||
text3d = world.createGUI3DText(pos=(0, 5, 2), text="3D文本")
|
||
```
|
||
|
||
### 编辑GUI元素
|
||
|
||
#### 属性面板编辑
|
||
1. 在层级窗口选中GUI元素
|
||
2. 在属性面板中修改：
|
||
- 文本内容
|
||
- 位置坐标
|
||
- 缩放大小
|
||
- 颜色属性
|
||
|
||
#### 右键菜单编辑
|
||
1. 右键点击场景树中的GUI元素
|
||
2. 选择"编辑"打开编辑对话框
|
||
3. 批量修改属性
|
||
|
||
#### 程序化编辑
|
||
```python
|
||
# 修改文本
|
||
world.editGUIElement(gui_element, "text", "新文本")
|
||
|
||
# 修改位置
|
||
world.editGUIElement(gui_element, "position", [1, 2, 3])
|
||
|
||
# 修改缩放
|
||
world.editGUIElement(gui_element, "scale", 1.5)
|
||
```
|
||
|
||
### 删除GUI元素
|
||
|
||
#### 方法1: 右键删除
|
||
```
|
||
场景树中右键GUI元素 → 删除GUI元素
|
||
```
|
||
|
||
#### 方法2: 程序化删除
|
||
```python
|
||
world.deleteGUIElement(gui_element)
|
||
```
|
||
|
||
---
|
||
|
||
## 🎛️ 界面布局
|
||
|
||
### 场景树组织
|
||
```
|
||
场景
|
||
├── 相机
|
||
├── 模型
|
||
│ └── [所有3D模型]
|
||
├── GUI元素
|
||
│ ├── button: 按钮文本
|
||
│ ├── label: 标签文本
|
||
│ ├── 3d_text: 3D文本
|
||
│ └── virtual_screen: 屏幕文本
|
||
└── 地板
|
||
```
|
||
|
||
### 属性面板
|
||
- **通用属性**: 名称、GUI类型
|
||
- **文本属性**: 可编辑的文本内容
|
||
- **位置属性**: X/Y/Z坐标控制
|
||
- **缩放属性**: 统一缩放控制
|
||
- **颜色属性**: 2D GUI背景色选择
|
||
- **旋转属性**: 3D GUI的H/P/R旋转
|
||
|
||
---
|
||
|
||
## 🔧 高级功能
|
||
|
||
### GUI元素复制
|
||
```
|
||
右键GUI元素 → 复制
|
||
```
|
||
自动在原位置偏移处创建副本。
|
||
|
||
### 批量编辑
|
||
通过编辑对话框可以一次性修改多个属性。
|
||
|
||
### 事件响应
|
||
```python
|
||
def onGUIButtonClick(self, button_id):
|
||
"""自定义按钮点击处理"""
|
||
print(f"按钮 {button_id} 被点击")
|
||
# 添加你的自定义逻辑
|
||
|
||
def onGUIEntrySubmit(self, text, entry_id):
|
||
"""自定义输入框提交处理"""
|
||
print(f"输入内容: {text}")
|
||
# 添加你的自定义逻辑
|
||
```
|
||
|
||
---
|
||
|
||
## 💡 使用技巧
|
||
|
||
### 1. 中文字体支持
|
||
程序会自动检测并加载系统中文字体：
|
||
- 微米黑体 (wqy-microhei)
|
||
- 文泉驿正黑 (wqy-zenhei)
|
||
- 文鼎字体系列
|
||
|
||
### 2. 3D GUI最佳实践
|
||
- 3D文本适合显示场景标注
|
||
- 虚拟屏幕适合信息面板
|
||
- 合理使用Billboard效果
|
||
|
||
### 3. 性能优化
|
||
- 避免创建过多GUI元素
|
||
- 适时删除不需要的元素
|
||
- 使用合适的缩放比例
|
||
|
||
### 4. 交互设计
|
||
- 按钮提供即时反馈
|
||
- 输入框有明确的提示
|
||
- 颜色搭配要易于识别
|
||
|
||
---
|
||
|
||
## 🚀 扩展开发
|
||
|
||
### 添加新GUI类型
|
||
在`MyWorld`类中添加新的创建方法：
|
||
|
||
```python
|
||
def createGUISlider(self, pos=(0, 0, 0), range=(0, 100)):
|
||
"""创建滑块组件"""
|
||
from direct.gui.DirectGui import DirectSlider
|
||
|
||
slider = DirectSlider(
|
||
range=range,
|
||
pos=pos,
|
||
scale=0.5,
|
||
# ... 其他属性
|
||
)
|
||
|
||
slider.setTag("gui_type", "slider")
|
||
slider.setTag("gui_id", f"slider_{len(self.gui_elements)}")
|
||
|
||
self.gui_elements.append(slider)
|
||
self.updateSceneTree()
|
||
return slider
|
||
```
|
||
|
||
### 自定义事件处理
|
||
修改事件处理方法来实现特定功能：
|
||
|
||
```python
|
||
def onGUIButtonClick(self, button_id):
|
||
"""自定义按钮行为"""
|
||
if button_id == "button_0":
|
||
# 第一个按钮的特殊行为
|
||
self.performSpecialAction()
|
||
elif button_id.startswith("menu_"):
|
||
# 菜单按钮的处理
|
||
self.handleMenuAction(button_id)
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 界面定制
|
||
|
||
### 主题配置
|
||
```python
|
||
# 在创建GUI时设置主题色
|
||
button = DirectButton(
|
||
frameColor=(0.2, 0.6, 0.8, 1), # 蓝色主题
|
||
text_fg=(1, 1, 1, 1), # 白色文字
|
||
)
|
||
```
|
||
|
||
### 布局管理
|
||
建议将相关GUI元素进行分组管理：
|
||
|
||
```python
|
||
# 创建UI组
|
||
ui_group = {
|
||
'main_menu': [],
|
||
'game_hud': [],
|
||
'settings': []
|
||
}
|
||
|
||
# 按组管理GUI元素
|
||
ui_group['main_menu'].append(start_button)
|
||
ui_group['main_menu'].append(exit_button)
|
||
```
|
||
|
||
---
|
||
|
||
## 📚 API参考
|
||
|
||
### 核心方法
|
||
- `createGUIButton(pos, text, size)` - 创建按钮
|
||
- `createGUILabel(pos, text, size)` - 创建标签
|
||
- `createGUIEntry(pos, placeholder, size)` - 创建输入框
|
||
- `createGUI3DText(pos, text, size)` - 创建3D文本
|
||
- `createGUIVirtualScreen(pos, size, text)` - 创建虚拟屏幕
|
||
- `editGUIElement(element, property, value)` - 编辑元素
|
||
- `deleteGUIElement(element)` - 删除元素
|
||
- `duplicateGUIElement(element)` - 复制元素
|
||
|
||
### 属性类型
|
||
- `"text"` - 文本内容
|
||
- `"position"` - 位置坐标 [x, y, z]
|
||
- `"scale"` - 缩放大小
|
||
- `"color"` - 颜色值 [r, g, b, a]
|
||
|
||
---
|
||
|
||
现在你的`test.py`程序具备了完整的GUI创建、编辑、删除功能！🎉
|
||
|
||
试试通过菜单或工具栏创建一些GUI元素，然后在属性面板中编辑它们的属性。GUI元素会自动出现在场景树的"GUI元素"分组中，方便管理。 |