423 lines
14 KiB
Markdown
423 lines
14 KiB
Markdown
# 奖励UI交互
|
||
|
||
<cite>
|
||
**本文档中引用的文件**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts)
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts)
|
||
- [MissionHeroComp.ts](file://assets/script/game/map/MissionHeroComp.ts)
|
||
- [MissionMonComp.ts](file://assets/script/game/map/MissionMonComp.ts)
|
||
- [MissionHomeComp.ts](file://assets/script/game/map/MissionHomeComp.ts)
|
||
- [GameEvent.ts](file://assets/script/game/common/config/GameEvent.ts)
|
||
- [GameUIConfig.ts](file://assets/script/game/common/config/GameUIConfig.ts)
|
||
- [SingletonModuleComp.ts](file://assets/script/game/common/SingletonModuleComp.ts)
|
||
</cite>
|
||
|
||
## 目录
|
||
1. [系统概述](#系统概述)
|
||
2. [核心组件架构](#核心组件架构)
|
||
3. [事件驱动机制](#事件驱动机制)
|
||
4. [奖励触发条件](#奖励触发条件)
|
||
5. [UI界面展示](#ui界面展示)
|
||
6. [数据绑定与状态管理](#数据绑定与状态管理)
|
||
7. [界面过渡动画](#界面过渡动画)
|
||
8. [用户交互反馈](#用户交互反馈)
|
||
9. [系统集成流程](#系统集成流程)
|
||
10. [故障排除指南](#故障排除指南)
|
||
|
||
## 系统概述
|
||
|
||
奖励系统UI交互是游戏战斗胜利后的重要组成部分，负责在玩家完成战斗后展示奖励选项、经验值、金币和钻石等资源。系统采用事件驱动架构，通过MissionComp作为核心控制器，协调各个子组件完成完整的奖励展示流程。
|
||
|
||
### 系统特点
|
||
- **事件驱动**：基于GameEvent机制的松耦合设计
|
||
- **数据驱动**：使用MVVM模式实现数据绑定
|
||
- **状态管理**：通过SingletonModuleComp统一管理游戏状态
|
||
- **动画流畅**：支持平滑的界面过渡效果
|
||
|
||
## 核心组件架构
|
||
|
||
```mermaid
|
||
classDiagram
|
||
class MissionComp {
|
||
+rewards : any[]
|
||
+game_data : any
|
||
+onLoad() void
|
||
+do_hero_dead(event, data) void
|
||
+fight_end() void
|
||
+mission_start() void
|
||
+to_fight() void
|
||
}
|
||
class VictoryComp {
|
||
+reward_lv : number
|
||
+reward_num : number
|
||
+rewards : any[]
|
||
+game_data : any
|
||
+onAdded(args) void
|
||
+victory_end() void
|
||
+restart() void
|
||
+double_reward() void
|
||
}
|
||
class MissionHeroCompComp {
|
||
+Friend_is_dead : boolean
|
||
+current_hero_uuid : number
|
||
+heros : any[]
|
||
+onLoad() void
|
||
+fight_ready() void
|
||
+addHero(uuid, is_zhaohuan) void
|
||
}
|
||
class MissionMonCompComp {
|
||
+monsterQueue : Array
|
||
+spawnInterval : number
|
||
+spawnCount : number
|
||
+onLoad() void
|
||
+fight_ready() void
|
||
+generateMonstersFromStageConfig(configs) void
|
||
}
|
||
class MissionHomeComp {
|
||
+onLoad() void
|
||
+home_active() void
|
||
+mission_end() void
|
||
}
|
||
class SingletonModuleComp {
|
||
+mission : any
|
||
+vmdata : any
|
||
+guides : any[]
|
||
+data : any
|
||
}
|
||
MissionComp --> VictoryComp : "触发FightEnd事件"
|
||
MissionComp --> SingletonModuleComp : "更新游戏状态"
|
||
VictoryComp --> SingletonModuleComp : "读取游戏数据"
|
||
MissionHeroCompComp --> SingletonModuleComp : "监控英雄状态"
|
||
MissionMonCompComp --> SingletonModuleComp : "监控怪物状态"
|
||
MissionHomeComp --> SingletonModuleComp : "监控关卡状态"
|
||
```
|
||
|
||
**图表来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L15-L151)
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L15-L75)
|
||
- [MissionHeroComp.ts](file://assets/script/game/map/MissionHeroComp.ts#L12-L81)
|
||
- [MissionMonComp.ts](file://assets/script/game/map/MissionMonComp.ts#L15-L240)
|
||
- [MissionHomeComp.ts](file://assets/script/game/map/MissionHomeComp.ts#L12-L54)
|
||
- [SingletonModuleComp.ts](file://assets/script/game/common/SingletonModuleComp.ts#L25-L195)
|
||
|
||
**章节来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L1-L151)
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L1-L75)
|
||
- [MissionHeroComp.ts](file://assets/script/game/map/MissionHeroComp.ts#L1-L81)
|
||
- [MissionMonComp.ts](file://assets/script/game/map/MissionMonComp.ts#L1-L240)
|
||
- [MissionHomeComp.ts](file://assets/script/game/map/MissionHomeComp.ts#L1-L54)
|
||
|
||
## 事件驱动机制
|
||
|
||
### 核心事件流程
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant Player as 玩家
|
||
participant MissionComp as MissionComp
|
||
participant GameEvent as GameEvent
|
||
participant VictoryComp as VictoryComp
|
||
participant GUI as GUI系统
|
||
participant SM as SingletonModule
|
||
Player->>MissionComp : 战斗结束
|
||
MissionComp->>GameEvent : dispatchEvent(FightEnd)
|
||
GameEvent->>MissionComp : 监听FightEnd事件
|
||
MissionComp->>SM : 更新游戏状态
|
||
MissionComp->>GUI : oops.gui.open(UIID.Victory)
|
||
GUI->>VictoryComp : 创建胜利界面
|
||
VictoryComp->>VictoryComp : onAdded(args)
|
||
VictoryComp->>VictoryComp : 展示奖励数据
|
||
VictoryComp->>Player : 显示奖励选项
|
||
Note over Player,SM : 奖励界面完全加载并显示
|
||
```
|
||
|
||
**图表来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L32-L35)
|
||
- [GameEvent.ts](file://assets/script/game/common/config/GameEvent.ts#L40-L41)
|
||
- [GameUIConfig.ts](file://assets/script/game/common/config/GameUIConfig.ts#L12-L13)
|
||
|
||
### 事件监听与响应
|
||
|
||
系统通过事件总线机制实现组件间的解耦通信：
|
||
|
||
1. **FightEnd事件触发**：当所有英雄死亡时，MissionComp检测到战斗结束状态
|
||
2. **状态更新**：更新SingletonModuleComp中的游戏状态
|
||
3. **界面打开**：通过GUI系统打开胜利界面
|
||
4. **数据传递**：将rewards和game_data参数传递给Victory界面
|
||
|
||
**章节来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L55-L65)
|
||
- [GameEvent.ts](file://assets/script/game/common/config/GameEvent.ts#L40-L41)
|
||
- [GameUIConfig.ts](file://assets/script/game/common/config/GameUIConfig.ts#L12-L13)
|
||
|
||
## 奖励触发条件
|
||
|
||
### 英雄死亡触发机制
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Start([战斗开始]) --> Monitor[监控英雄状态]
|
||
Monitor --> CheckHero{检查英雄数量}
|
||
CheckHero --> |英雄存活| Continue[继续战斗]
|
||
CheckHero --> |英雄死亡| Decrement[减少英雄数量]
|
||
Decrement --> CheckAllDead{所有英雄死亡?}
|
||
CheckAllDead --> |否| Continue
|
||
CheckAllDead --> |是| TriggerFightEnd[触发FightEnd事件]
|
||
TriggerFightEnd --> OpenVictory[打开胜利界面]
|
||
OpenVictory --> PassData[传递奖励数据]
|
||
PassData --> End([流程结束])
|
||
Continue --> Monitor
|
||
```
|
||
|
||
**图表来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L55-L65)
|
||
|
||
### 怪物击杀触发机制
|
||
|
||
系统通过MissionMonComp监控怪物状态，每击杀一只怪物会：
|
||
- 更新怪物数量计数器
|
||
- 触发相应的事件通知
|
||
- 记录战斗统计数据
|
||
|
||
### 基地保护触发机制
|
||
|
||
MissionHomeComp负责监控基地状态，当基地受到威胁时：
|
||
- 更新基地保护状态
|
||
- 触发防御机制
|
||
- 记录基地受损情况
|
||
|
||
**章节来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L47-L52)
|
||
- [MissionMonComp.ts](file://assets/script/game/map/MissionMonComp.ts#L47-L52)
|
||
- [MissionHomeComp.ts](file://assets/script/game/map/MissionHomeComp.ts#L25-L35)
|
||
|
||
## UI界面展示
|
||
|
||
### 胜利界面结构
|
||
|
||
VictoryComp负责展示战斗胜利后的奖励界面，包含以下核心元素：
|
||
|
||
| 组件名称 | 功能描述 | 数据绑定 |
|
||
|---------|---------|---------|
|
||
| title.victory | 胜利标题显示 | 自动激活 |
|
||
| btns.next | 下一步按钮 | 延迟0.2秒激活 |
|
||
| reward_lv | 奖励等级 | 动态计算 |
|
||
| reward_num | 奖励数量 | 固定值2 |
|
||
| game_data.exp | 经验值奖励 | 从MissionComp传递 |
|
||
| game_data.gold | 金币奖励 | 从MissionComp传递 |
|
||
| game_data.diamond | 钻石奖励 | 从MissionComp传递 |
|
||
|
||
### 界面初始化流程
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Load[VictoryComp加载] --> ReceiveArgs[接收参数]
|
||
ReceiveArgs --> CheckGameData{检查game_data}
|
||
CheckGameData --> |存在| AssignData[分配游戏数据]
|
||
CheckGameData --> |不存在| UseDefault[使用默认数据]
|
||
AssignData --> ShowTitle[显示胜利标题]
|
||
UseDefault --> ShowTitle
|
||
ShowTitle --> HideButton[隐藏下一步按钮]
|
||
HideButton --> DelayShow[延迟0.2秒显示按钮]
|
||
DelayShow --> Ready[界面准备就绪]
|
||
```
|
||
|
||
**图表来源**
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L28-L42)
|
||
|
||
**章节来源**
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L15-L75)
|
||
|
||
## 数据绑定与状态管理
|
||
|
||
### MVVM数据流
|
||
|
||
系统采用MVVM架构实现数据绑定：
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph "数据层"
|
||
VMData[vmdata对象]
|
||
GameData[game_data]
|
||
Rewards[rewards数组]
|
||
end
|
||
subgraph "视图层"
|
||
VictoryUI[胜利界面UI]
|
||
HeroStats[英雄统计]
|
||
RewardDisplay[奖励展示]
|
||
end
|
||
subgraph "控制层"
|
||
VictoryComp[VictoryComp组件]
|
||
SingletonModule[SingletonModuleComp]
|
||
end
|
||
VMData --> VictoryComp
|
||
GameData --> VictoryComp
|
||
Rewards --> VictoryComp
|
||
VictoryComp --> VictoryUI
|
||
VictoryComp --> HeroStats
|
||
VictoryComp --> RewardDisplay
|
||
SingletonModule --> VMData
|
||
```
|
||
|
||
**图表来源**
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L18-L25)
|
||
- [SingletonModuleComp.ts](file://assets/script/game/common/SingletonModuleComp.ts#L45-L65)
|
||
|
||
### 状态同步机制
|
||
|
||
SingletonModuleComp作为全局状态管理中心，维护以下关键状态：
|
||
|
||
| 状态字段 | 类型 | 描述 | 更新时机 |
|
||
|---------|------|------|---------|
|
||
| mission.status | number | 游戏状态(0:未开始, 1:进行中, 2:胜利, 3:失败) | 战斗开始/结束时 |
|
||
| mission.play | boolean | 游戏是否在播放 | 战斗开始/结束时 |
|
||
| mission.pause | boolean | 游戏是否暂停 | 暂停/恢复时 |
|
||
| vmdata.mission_data.mon_num | number | 怪物数量 | 怪物生成/死亡时 |
|
||
| vmdata.mission_data.hero_num | number | 英雄数量 | 英雄生成/死亡时 |
|
||
| vmdata.mission_data.fight_time | number | 战斗时间 | 每帧更新 |
|
||
|
||
**章节来源**
|
||
- [SingletonModuleComp.ts](file://assets/script/game/common/SingletonModuleComp.ts#L25-L45)
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L130-L140)
|
||
|
||
## 界面过渡动画
|
||
|
||
### 打开动画流程
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant GUI as GUI系统
|
||
participant VictoryComp as VictoryComp
|
||
participant UI as UI节点
|
||
participant Player as 玩家
|
||
GUI->>VictoryComp : open(UIID.Victory)
|
||
VictoryComp->>VictoryComp : onAdded(args)
|
||
VictoryComp->>UI : 设置初始状态
|
||
UI->>Player : 隐藏胜利标题
|
||
UI->>Player : 隐藏下一步按钮
|
||
VictoryComp->>VictoryComp : scheduleOnce(0.2秒)
|
||
VictoryComp->>UI : 显示下一步按钮
|
||
UI->>Player : 平滑显示界面
|
||
Note over Player : 界面完全加载并显示
|
||
```
|
||
|
||
**图表来源**
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L28-L42)
|
||
|
||
### 关闭动画流程
|
||
|
||
界面关闭时的清理流程：
|
||
1. 调用victory_end()方法
|
||
2. 清理游戏数据
|
||
3. 分发MissionEnd事件
|
||
4. 通过GUI系统移除界面节点
|
||
|
||
**章节来源**
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L44-L50)
|
||
|
||
## 用户交互反馈
|
||
|
||
### 按钮交互机制
|
||
|
||
胜利界面提供多种用户交互选项：
|
||
|
||
| 按钮功能 | 触发事件 | 动作描述 |
|
||
|---------|---------|---------|
|
||
| next按钮 | 点击 | 调用victory_end() |
|
||
| restart按钮 | 点击 | 调用restart() |
|
||
| double_reward按钮 | 点击 | 调用double_reward() |
|
||
| watch_ad按钮 | 点击 | 调用watch_ad() |
|
||
|
||
### 交互状态管理
|
||
|
||
```mermaid
|
||
stateDiagram-v2
|
||
[*] --> Loading : 界面加载
|
||
Loading --> Ready : 0.2秒后激活按钮
|
||
Ready --> Restart : 点击重启
|
||
Ready --> Next : 点击下一步
|
||
Ready --> Double : 点击双倍奖励
|
||
Ready --> Ad : 点击观看广告
|
||
Restart --> [*] : 重新开始
|
||
Next --> [*] : 结束战斗
|
||
Double --> [*] : 双倍奖励
|
||
Ad --> [*] : 广告奖励
|
||
```
|
||
|
||
**图表来源**
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L44-L65)
|
||
|
||
**章节来源**
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L44-L75)
|
||
|
||
## 系统集成流程
|
||
|
||
### 完整奖励流程
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Start([战斗开始]) --> FightLoop[战斗循环]
|
||
FightLoop --> CheckConditions{检查胜利条件}
|
||
CheckConditions --> |英雄存活| ContinueFight[继续战斗]
|
||
CheckConditions --> |英雄死亡| TriggerFightEnd[触发FightEnd]
|
||
TriggerFightEnd --> UpdateState[更新游戏状态]
|
||
UpdateState --> OpenVictory[打开胜利界面]
|
||
OpenVictory --> BindData[绑定奖励数据]
|
||
BindData --> ShowRewards[展示奖励选项]
|
||
ShowRewards --> WaitInput[等待用户输入]
|
||
WaitInput --> ProcessChoice{用户选择}
|
||
ProcessChoice --> |继续| NextLevel[下一关卡]
|
||
ProcessChoice --> |重新开始| Restart[重新开始]
|
||
ProcessChoice --> |双倍奖励| DoubleReward[双倍奖励]
|
||
ProcessChoice --> |观看广告| WatchAd[观看广告]
|
||
NextLevel --> Start
|
||
Restart --> Start
|
||
DoubleReward --> Start
|
||
WatchAd --> Start
|
||
```
|
||
|
||
**图表来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L55-L65)
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L44-L75)
|
||
|
||
### 错误处理机制
|
||
|
||
系统包含完善的错误处理机制：
|
||
- **网络错误**：通过GUI系统显示错误提示
|
||
- **数据同步错误**：自动回滚操作并提示用户
|
||
- **界面加载错误**：提供重试机制
|
||
- **事件监听错误**：记录日志并尝试恢复
|
||
|
||
**章节来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L1-L151)
|
||
- [VictoryComp.ts](file://assets/script/game/map/VictoryComp.ts#L1-L75)
|
||
|
||
## 故障排除指南
|
||
|
||
### 常见问题及解决方案
|
||
|
||
| 问题描述 | 可能原因 | 解决方案 |
|
||
|---------|---------|---------|
|
||
| 胜利界面无法打开 | UIID配置错误 | 检查GameUIConfig.ts中的UIID.Victory配置 |
|
||
| 奖励数据不显示 | 数据绑定失败 | 验证SingletonModuleComp中的vmdata结构 |
|
||
| 事件监听失效 | 组件未正确注册 | 检查@ecs.register装饰器的使用 |
|
||
| 界面动画异常 | 节点状态错误 | 确保节点的active状态正确管理 |
|
||
| 数据同步失败 | 网络连接问题 | 实现重试机制并提供用户提示 |
|
||
|
||
### 性能优化建议
|
||
|
||
1. **事件监听优化**：及时移除不需要的事件监听器
|
||
2. **内存管理**：确保组件正确销毁避免内存泄漏
|
||
3. **数据缓存**：合理使用SingletonModuleComp进行数据缓存
|
||
4. **异步加载**：使用async/await模式处理异步操作
|
||
|
||
### 调试技巧
|
||
|
||
- 使用console.log记录关键事件的触发
|
||
- 监控SingletonModuleComp的状态变化
|
||
- 检查GUI系统的open和remove调用
|
||
- 验证数据绑定的路径正确性
|
||
|
||
**章节来源**
|
||
- [MissionComp.ts](file://assets/script/game/map/MissionComp.ts#L140-L151)
|
||
- [SingletonModuleComp.ts](file://assets/script/game/common/SingletonModuleComp.ts#L100-L150) |