# 电话UI设置指南（简化版）

本指南将帮助您在场景中设置可交互的电话UI，点击电话后会显示对话框。

## 场景结构

```
Scene
├── Canvas
│   ├── PhoneUI (含PhoneManager组件)
│   │   ├── Background
│   │   └── CloseButton (含Button组件)
│   └── DialoguePanel (含DialogueManager组件) 
└── Phone (场景中的电话物体，含PhoneTrigger组件)
```

## 准备工作

1. 导入电话贴图到项目中
2. 准建电话UI背景贴图和关闭按钮贴图

## 详细设置步骤

### 1. 场景中的电话物体设置

1. 在场景中创建一个Sprite节点，命名为"Phone"
2. 将电话贴图设置为该节点的SpriteFrame
3. 添加PhoneTrigger组件到该节点

### 2. 电话UI面板设置

1. 在Canvas下创建一个Node节点，命名为"PhoneUI"
2. 添加PhoneManager组件到该节点
3. 创建以下子节点结构：
   - Background: 电话UI背景
   - CloseButton: 关闭按钮，添加Button组件

### 3. 配置PhoneManager组件

1. 将PhoneUI节点拖拽到PhoneManager的phonePanel属性
2. 将CloseButton拖拽到PhoneManager的closeButton属性
3. 将场景中的DialogueManager拖拽到dialogueManager属性
4. 设置phoneDialogue属性为您想显示的电话对话内容
5. 设置emotionType属性为对话的表情类型

### 4. 配置PhoneTrigger组件

1. 找到场景中的Phone节点上的PhoneTrigger组件
2. 将PhoneUI节点上的PhoneManager组件拖拽到phoneManager属性

### 5. 创建电话动画（可选）

1. 添加Animation组件到PhoneUI节点
2. 创建以下动画剪辑：
   - phone_open: 电话UI打开动画
   - phone_close: 电话UI关闭动画

## 使用方法

1. 运行场景，点击场景中的电话物体
2. 电话UI界面会弹出
3. 同时显示对话框，使用的是与人物对话相同的对话框样式
4. 点击关闭按钮关闭电话UI

## 调试提示

如果电话UI不显示或对话不显示，请检查：

1. 控制台是否有错误信息
2. PhoneManager和PhoneTrigger组件的引用是否正确设置
3. 电话物体是否能够正确接收点击事件
4. 对话管理器是否正确配置

## 自定义电话对话

您可以通过修改PhoneManager组件上的phoneDialogue属性来自定义电话对话内容。您也可以通过代码动态设置对话内容：

```typescript
// 获取PhoneManager组件
const phoneManager = this.getComponent(PhoneManager);

// 设置新的对话内容
phoneManager.phoneDialogue = "这是新的电话对话内容";

// 设置对话表情
phoneManager.emotionType = "happy"; // 或其他表情类型
```