# 奖励UI交互 **本文档中引用的文件** - [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) - *新增怪物类型配置* ## 更新摘要 **变更内容** - 更新了“怪物击杀触发机制”部分，反映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)