1b26a9079d
本次修改完成以下核心调整： 1. 在GameUIConfig中注册HInfo弹窗的UIID与预制体路径 2. 为场上英雄节点添加点击交互，点击时打开对应英雄的信息弹窗 3. 清理MissionCardComp中常驻英雄信息面板的旧逻辑代码 4. 重构HInfoComp适配弹窗模式，支持按实体ID绑定英雄数据并实时刷新显示 5. 调整CardComp中英雄图标缩放，优化界面显示效果
55 lines
3.6 KiB
Markdown
55 lines
3.6 KiB
Markdown
# 重构场上英雄UI表现及交互计划
|
||
|
||
## 1. 目标与现状分析
|
||
|
||
**现状**：
|
||
目前游戏中 `HInfoComp.ts` 负责在界面下方显示场上英雄的信息（生命、攻击、出售），由 `MissionCardComp` 管理 6 个固定槽位。
|
||
`HeroViewComp.ts` 负责战斗场景中英雄实体的动画表现。
|
||
|
||
**目标**：
|
||
1. 保留 `HInfoComp.ts` 组件及预制体，但**取消其在底部的常驻显示**，将其改造为**弹窗形式**（类似 `IBoxComp`）。
|
||
2. 在战斗或准备阶段，玩家**直接点击场上的英雄模型**（`HeroViewComp`）时，弹出 `HInfoComp` 面板。
|
||
3. 清理 `MissionCardComp.ts` 中管理底层 `HInfoComp` 的旧逻辑。
|
||
|
||
## 2. 具体修改步骤
|
||
|
||
### 2.1 注册 HInfo 为独立弹窗
|
||
* 修改 `assets/script/game/common/config/GameUIConfig.ts`：
|
||
* 在 `UIID` 枚举中添加 `HInfo`。
|
||
* 在 `UIConfigData` 中注册：`[UIID.HInfo]: { layer: LayerType.UI, prefab: "gui/element/hnode" }`。
|
||
|
||
### 2.2 改造 HInfoComp.ts
|
||
* **数据传入**：添加 `onAdded(args: { eid: number })`，根据 `eid` 查询 `HeroAttrsComp` 实体进行数据绑定。
|
||
* **自驱动刷新**：原先由外部驱动刷新，现在添加 `update(dt: number)` 生命周期，在内部调用 `this.refresh()` 以保持血量等信息实时更新。
|
||
* **移除旧逻辑**：删除 `node_index`、`refreshByNodeIndex` 等固定槽位相关的代码。
|
||
* **交互恢复**：取消注释 `bindEvents` 和 `unbindEvents`，恢复出售按钮的点击事件。出售完成后调用 `oops.gui.remove(UIID.HInfo)`。打开 `IBox` 的点击逻辑可保持不变（或者作为详情按钮）。
|
||
* **添加关闭机制**：考虑到它是弹窗，可以添加一个点击非按钮区域关闭自身的功能，或者点击英雄之外的区域关闭。为简单起见，可以暂时复用点击面板打开 IBox（同时关闭 HInfo），并在 HInfo 添加额外的关闭按钮，或由 UI 框架自动处理（如果注册为 PopUp 并带有背景）。如果它是纯 UI，可以点击其他地方关闭。这里我们让它在打开 `IBox` 后关闭自己：`oops.gui.remove(UIID.HInfo)`。
|
||
|
||
### 2.3 清理 MissionCardComp.ts
|
||
* **移除属性**：删除 `@property(Node) hero_info_node` 和 `@property(Prefab) hero_info_prefab` 及其编辑器绑定。
|
||
* **移除内部状态**：删除 `cachedHInfoComps` 和 `heroInfoSyncTimer`。
|
||
* **移除生命周期调用**：在 `onLoad`、`update`、`onMissionStart`、`onMissionEnd`、`onDestroy`、`reset`、`enterPreparePhase`、`enterBattlePhase` 中，删除所有涉及 `HInfoComp` 实例创建、刷新、显隐控制、销毁的代码。
|
||
|
||
### 2.4 修改 HeroViewComp.ts 添加点击交互
|
||
* **绑定事件**：在 `onLoad` 中为英雄模型节点绑定点击事件 `this.node.on(NodeEventType.TOUCH_END, this.onHeroClicked, this);`，并在 `reset` 等清理处解绑。
|
||
* **点击回调逻辑**：
|
||
```typescript
|
||
private onHeroClicked(event: EventTouch) {
|
||
if (!this.model) return;
|
||
if (this.model.fac !== FacSet.HERO) return; // 仅对玩家英雄生效
|
||
|
||
const eid = this.ent?.eid;
|
||
if (!eid) return;
|
||
|
||
// 呼出英雄信息弹窗
|
||
oops.gui.remove(UIID.HInfo);
|
||
oops.gui.open(UIID.HInfo, { eid: eid });
|
||
}
|
||
```
|
||
|
||
## 3. 验证步骤
|
||
1. 进入战斗，确认下方不再有常驻的英雄信息面板。
|
||
2. 点击场上的英雄模型，确认能弹出该英雄的 `HInfoComp` 弹窗。
|
||
3. 观察弹窗内的血量和攻击力是否能随战斗实时刷新。
|
||
4. 点击弹窗上的出售按钮，确认英雄消失、金币增加且弹窗关闭。
|
||
5. 点击弹窗上的信息区域，确认能弹出 `IBoxComp` 详情面板。 |