pan/pixelheros
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
55646c3a117fa6ec4eeec9930e25e92ff96c1340
pixelheros/.qoder/repowiki/zh/content/奖励系统/奖励UI交互/奖励UI交互.md
panw edb7f23918 feat(怪物系统): 重构怪物类型与属性计算系统 
引入MonType枚举支持普通、精英、BOSS三种怪物类型
新增getMonAttr函数实现基于等级和类型的动态属性计算
更新Mon.ts的load和hero_init方法以支持新参数
扩展heroSet.ts添加多种新怪物类型配置
重构属性初始化流程，移除strengthMultiplier机制
更新相关文档和流程图反映最新设计
2025-10-29 16:50:30 +08:00

488 lines
16 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 奖励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)
- [RogueConfig.ts](file://assets/script/game/map/RogueConfig.ts) - *新增怪物类型配置*
</cite>
## 更新摘要
**变更内容**
- 更新了“怪物击杀触发机制”部分，反映MissionMonComp.ts中重构的刷怪逻辑
- 新增“怪物类型与配置”章节，描述基于RogueConfig.ts的新型怪物生成系统
- 修正了核心组件架构图中的类名拼写错误（MissionHeroCompComp → MissionHeroComp）
- 更新了事件驱动机制中的流程图，以反映最新的事件处理逻辑
- 增加了对精英怪物和Boss怪物的奖励机制说明
## 目录
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 MissionHeroComp {
+Friend_is_dead : boolean
+current_hero_uuid : number
+heros : any[]
+onLoad() void
+fight_ready() void
+addHero(uuid, is_zhaohuan) void
}
class MissionMonComp {
+MonQueue : Array
+spawnInterval : number
+spawnCount : number
+onLoad() void
+fight_ready() void
+generateMonsters(monsConf) 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 : "读取游戏数据"
MissionHeroComp --> SingletonModuleComp : "监控英雄状态"
MissionMonComp --> 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监控怪物状态，每击杀一只怪物会：
- 更新怪物数量计数器
- 触发相应的事件通知
- 记录战斗统计数据
**章节来源**
- [MissionMonComp.ts](file://assets/script/game/map/MissionMonComp.ts#L15-L199)
### 基地保护触发机制
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)
### 怪物类型与配置
#### 怪物类型枚举
系统定义了三种主要怪物类型，通过MonType枚举实现：
```typescript
export enum MonType {
NORMAL = 0, // 普通怪物
ELITE = 1, // 精英怪物
BOSS = 2 // Boss怪物
}
```
**章节来源**
- [RogueConfig.ts](file://assets/script/game/map/RogueConfig.ts#L31-L31)
#### 怪物生成逻辑
MissionMonComp使用新的刷怪队列机制，基于RogueConfig.ts中的配置生成不同类型的怪物：
```mermaid
flowchart TD
Start[开始生成怪物] --> CheckStage{判断关卡类型}
CheckStage --> |Boss关卡| AddBoss[添加Boss怪物]
CheckStage --> |精英关卡| AddElite[添加精英怪物]
CheckStage --> |普通关卡| AddNormal[添加普通怪物]
AddBoss --> ReduceNormal[减少普通怪物数量]
AddElite --> ReduceNormal
ReduceNormal --> GenerateNormal[生成剩余普通怪物]
GenerateNormal --> CheckExtra{是否生成额外怪物?}
CheckExtra --> |是| AddExtra[添加额外怪物]
CheckExtra --> |否| End[生成完成]
AddExtra --> End
```
**图表来源**
- [MissionMonComp.ts](file://assets/script/game/map/MissionMonComp.ts#L15-L199)
- [RogueConfig.ts](file://assets/script/game/map/RogueConfig.ts#L95-L173)
#### 奖励机制差异
不同类型的怪物提供不同的奖励：
| 怪物类型 | 基础奖励倍率 | 特殊奖励 | 击杀经验 |
|---------|------------|---------|---------|
| 普通怪物 | 1.0x | 无 | 10 |
| 精英怪物 | 1.5x | 随机道具 | 25 |
| Boss怪物 | 3.0x | 稀有装备 | 100 |
**章节来源**
- [RogueConfig.ts](file://assets/script/game/map/RogueConfig.ts#L65-L73)
## 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)
Reference in New Issue View Git Blame Copy Permalink