Files
pixelheros/.qoder/repowiki/zh/content/奖励系统/奖励UI交互/基地组件状态同步.md
panw 4235e3b776 refactor(game): 移除已弃用的事件常量
- 删除 UpdateHero 和 UpdateFightHero 事件
- 移除 MISSION_UPDATE 事件常量
- 优化游戏事件枚举定义
2025-10-28 16:15:47 +08:00

12 KiB
Raw Blame History

基地组件状态同步

**本文档引用的文件** - [MissionHomeComp.ts](file://assets/script/game/map/MissionHomeComp.ts) - [MissionComp.ts](file://assets/script/game/map/MissionComp.ts) - [GameEvent.ts](file://assets/script/game/common/config/GameEvent.ts) - [SingletonModuleComp.ts](file://assets/script/game/common/SingletonModuleComp.ts) - [CardController.ts](file://assets/script/game/map/CardController.ts)

目录

  1. 简介
  2. 项目结构概览
  3. 核心组件分析
  4. 架构设计
  5. 详细组件分析
  6. 事件驱动机制
  7. 微信小游戏适配
  8. 组件间协作流程
  9. 性能考虑
  10. 总结

简介

MissionHomeComp是游戏中的基地状态视图控制器负责管理基地界面的状态切换和UI更新。该组件在MissionEnd事件触发时激活基地节点并通过home_active方法完成界面状态的恢复。同时它还提供了微信小游戏环境检测、按钮交互接口预留等功能确保游戏能够在不同平台环境下正常运行。

项目结构概览

graph TB
subgraph "游戏地图模块"
MissionHomeComp["MissionHomeComp<br/>基地视图控制器"]
MissionComp["MissionComp<br/>任务控制器"]
CardController["CardController<br/>卡片控制器"]
end
subgraph "事件系统"
GameEvent["GameEvent<br/>游戏事件定义"]
EventDispatcher["事件分发器"]
end
subgraph "单例模块"
SingletonModule["SingletonModuleComp<br/>全局状态管理"]
end
MissionHomeComp --> GameEvent
MissionComp --> GameEvent
MissionHomeComp --> SingletonModule
MissionComp --> SingletonModule
CardController --> MissionHomeComp
EventDispatcher --> MissionHomeComp
EventDispatcher --> MissionComp

图表来源

核心组件分析

MissionHomeComp组件特性

MissionHomeComp继承自CCComp基类采用ECS架构模式具有以下核心特性

  • 事件监听机制通过on方法监听MissionEnd事件
  • 状态管理提供home_active方法管理基地界面状态
  • 环境适配包含isWxClient方法检测微信环境
  • 扩展接口预留btn_func方法用于按钮交互扩展

MissionComp组件职责

MissionComp负责整个战斗流程的控制包括

  • 战斗开始、结束的生命周期管理
  • 英雄死亡、怪物死亡的事件处理
  • 奖励发放和数据初始化
  • 组件清理和资源回收

章节来源

架构设计

classDiagram
class MissionHomeComp {
+onLoad() void
+start() void
+mission_end() void
+home_active() void
+uodate_data() void
+isWxClient() boolean
+btn_func(e, data) void
+reset() void
}
class MissionComp {
+onLoad() void
+update(dt) void
+mission_start() void
+mission_end() void
+fight_end() void
+do_mon_dead(event, data) void
+do_hero_dead(event, data) void
+cleanComponents() void
+reset() void
}
class SingletonModuleComp {
+mission object
+vmdata object
+isWxClient() boolean
+updateGold(gold) boolean
+addHero(hero_uuid) boolean
}
class GameEvent {
<<enumeration>>
MissionEnd
FightEnd
MissionStart
HeroDead
MonDead
}
MissionHomeComp --> GameEvent : 监听
MissionComp --> GameEvent : 触发
MissionHomeComp --> SingletonModuleComp : 使用
MissionComp --> SingletonModuleComp : 使用

图表来源

详细组件分析

MissionHomeComp核心方法解析

mission_end方法 - 事件响应入口

当MissionEnd事件触发时mission_end方法被调用这是基地状态恢复的关键入口点。

sequenceDiagram
participant MissionComp as "MissionComp"
participant GameEvent as "GameEvent"
participant MissionHomeComp as "MissionHomeComp"
participant UI as "UI界面"
MissionComp->>GameEvent : 触发MissionEnd事件
GameEvent->>MissionHomeComp : 分发事件到mission_end
MissionHomeComp->>MissionHomeComp : 调用home_active()
MissionHomeComp->>MissionHomeComp : 调用uodate_data()
MissionHomeComp->>UI : 设置node.active=true
UI-->>MissionHomeComp : 界面激活完成

图表来源

home_active方法 - 状态激活逻辑

home_active方法是基地界面激活的核心逻辑包含两个关键步骤

  1. 数据更新调用uodate_data()方法(当前为空,但设计意图明确)
  2. 界面激活:设置节点可见性

uodate_data方法 - 设计意图分析

虽然当前实现为空但从命名和设计模式来看uodate_data方法预期用于

  • 同步基地生命值信息
  • 更新防御状态数据
  • 刷新基地资源显示
  • 更新英雄驻守状态

这种设计遵循了MVVM模式的思想为未来的数据绑定和自动更新做好准备。

isWxClient方法 - 平台检测机制

isWxClient(){
    return typeof wx !== 'undefined' && typeof (wx as any).getSystemInfoSync === 'function';
}

该方法通过检查wx对象的存在性和特定方法来判断是否运行在微信环境中为微信小游戏特性提供支持。

btn_func方法 - 交互接口预留

btn_func方法作为按钮交互的预留接口为未来扩展按钮功能提供便利

  • 参数e事件名称或类型标识
  • 参数data附加数据对象
  • 设计目的:支持按钮点击、触摸等交互事件

章节来源

MissionComp战斗流程管理

事件监听机制

MissionComp通过on方法注册多个事件监听器

flowchart TD
Start([游戏启动]) --> MissionStart["监听MissionStart事件"]
MissionStart --> FightReady["监听FightReady事件"]
FightReady --> FightStart["监听FightStart事件"]
FightStart --> MonDead["监听MonDead事件"]
MonDead --> HeroDead["监听HeroDead事件"]
HeroDead --> FightEnd["监听FightEnd事件"]
FightEnd --> MissionEnd["监听MissionEnd事件"]
MissionEnd --> MissionEndLogic["执行mission_end逻辑"]
MissionEndLogic --> CleanComponents["清理组件"]
CleanComponents --> End([流程结束])

图表来源

战斗状态管理

MissionComp维护复杂的战斗状态包括

  • smc.mission.play:战斗是否进行中
  • smc.mission.pause:战斗是否暂停
  • smc.mission.in_fight:是否处于战斗状态
  • smc.vmdata.mission_data:战斗数据统计

章节来源

事件驱动机制

事件流分析

sequenceDiagram
participant Player as "玩家"
participant MissionComp as "MissionComp"
participant GameEvent as "GameEvent"
participant MissionHomeComp as "MissionHomeComp"
participant UI as "UI界面"
Player->>MissionComp : 开始战斗
MissionComp->>GameEvent : 触发MissionStart
GameEvent->>MissionComp : 分发事件
MissionComp->>MissionComp : mission_start()
MissionComp->>UI : 显示战斗界面
Note over MissionComp : 战斗进行中...
Player->>MissionComp : 英雄死亡
MissionComp->>GameEvent : 触发HeroDead
GameEvent->>MissionComp : 分发事件
MissionComp->>MissionComp : do_hero_dead()
MissionComp->>GameEvent : 触发FightEnd
GameEvent->>MissionComp : 分发事件
MissionComp->>MissionComp : fight_end()
MissionComp->>GameEvent : 触发MissionEnd
GameEvent->>MissionHomeComp : 分发事件
MissionHomeComp->>MissionHomeComp : mission_end()
MissionHomeComp->>MissionHomeComp : home_active()
MissionHomeComp->>UI : 激活基地界面

图表来源

GameEvent枚举定义

GameEvent枚举定义了游戏中的所有事件类型其中MissionEnd事件是基地状态恢复的关键触发点。

章节来源

微信小游戏适配

平台检测机制

flowchart TD
Start([应用启动]) --> CheckWx["检查wx对象存在性"]
CheckWx --> HasWx{"wx对象存在?"}
HasWx --> |否| WebPlatform["Web平台"]
HasWx --> |是| CheckMethod["检查getSystemInfoSync方法"]
CheckMethod --> HasMethod{"方法存在?"}
HasMethod --> |否| OtherPlatform["其他平台"]
HasMethod --> |是| WeChatPlatform["微信平台"]
WebPlatform --> DisableFeatures["禁用微信特性"]
OtherPlatform --> DisableFeatures
WeChatPlatform --> EnableFeatures["启用微信特性"]

图表来源

数据同步机制

isWxClient方法不仅用于环境检测还为后续的数据同步功能提供基础。当检测到微信环境时系统会启用云端数据同步功能。

章节来源

组件间协作流程

基地状态恢复完整流程

flowchart TD
BattleEnd([战斗结束]) --> MissionEndEvent["触发MissionEnd事件"]
MissionEndEvent --> MissionHomeComp["MissionHomeComp接收事件"]
MissionHomeComp --> MissionEndMethod["调用mission_end方法"]
MissionEndMethod --> HomeActive["调用home_active方法"]
HomeActive --> UpdateData["调用uodate_data方法"]
UpdateData --> ActivateNode["设置node.active=true"]
ActivateNode --> ShowUI["显示基地界面"]
ShowUI --> CheckWx{"检查微信环境"}
CheckWx --> |是| SyncData["同步云端数据"]
CheckWx --> |否| Complete["流程完成"]
SyncData --> Complete

图表来源

CardController集成

CardController作为页面控制器负责在战斗界面和基地界面之间切换

page_init(){
    this.node.getChildByName("mission_home").active=true;
    this.node.getChildByName("mission").active=false;
}

这种设计实现了清晰的界面分离,确保用户能够直观地从战斗状态过渡到基地状态。

章节来源

性能考虑

内存管理策略

MissionHomeComp实现了reset方法来处理组件销毁和内存释放

reset() {
    this.node.destroy();
}

这种方法确保了组件在不需要时能够及时释放资源,避免内存泄漏。

事件监听优化

通过精确的事件监听机制,避免了不必要的回调调用,提高了整体性能。

状态同步优化

uodate_data方法的预留设计允许未来实现增量更新减少不必要的UI刷新操作。

总结

MissionHomeComp作为基地状态的视图控制器在游戏架构中扮演着重要角色。它通过事件驱动机制实现了从战斗到基地状态的平滑过渡同时为未来的功能扩展预留了充足的空间。

主要特点

  1. 事件驱动架构通过MissionEnd事件触发基地状态恢复
  2. 状态管理清晰home_active方法封装了界面激活逻辑
  3. 平台适配完善isWxClient方法支持微信小游戏特性
  4. 扩展性强btn_func方法预留了按钮交互接口
  5. 性能优化:合理的内存管理和事件监听机制

设计优势

  • 模块化设计MissionHomeComp独立于具体业务逻辑
  • 可测试性:清晰的方法边界便于单元测试
  • 可维护性:预留的扩展接口降低了未来修改的成本
  • 跨平台兼容:完善的平台检测机制确保多环境支持

这种设计模式体现了现代游戏开发中关注分离、可扩展性和平台兼容性的最佳实践,为构建高质量的游戏应用奠定了坚实基础。