refactor(hero-ui): 重构英雄信息面板为点击弹窗形式

本次修改完成以下核心调整:
1.  在GameUIConfig中注册HInfo弹窗的UIID与预制体路径
2.  为场上英雄节点添加点击交互,点击时打开对应英雄的信息弹窗
3.  清理MissionCardComp中常驻英雄信息面板的旧逻辑代码
4.  重构HInfoComp适配弹窗模式,支持按实体ID绑定英雄数据并实时刷新显示
5.  调整CardComp中英雄图标缩放,优化界面显示效果
This commit is contained in:
walkpan
2026-05-24 16:16:40 +08:00
parent 981f3a43b9
commit 1b26a9079d
10 changed files with 8775 additions and 5475 deletions

View File

@@ -21,6 +21,7 @@ export enum UIID {
Heros,
Talents,
Mission,
HInfo,
}
/** 打开界面方式的配置数据 */
@@ -35,4 +36,5 @@ export var UIConfigData: { [key: number]: UIConfig } = {
[UIID.Heros]: { layer: LayerType.UI, prefab: "gui/element/heros" },
[UIID.Talents]: { layer: LayerType.UI, prefab: "gui/element/talents" },
[UIID.Mission]: { layer: LayerType.UI, prefab: "gui/element/mission" },
[UIID.HInfo]: { layer: LayerType.UI, prefab: "gui/element/hnode" },
}

View File

@@ -137,7 +137,7 @@ export class Hero extends ecs.Entity {
model.critical = HeroAttrsComp.getTalentValue(TalentType.Critical); // 暴击强化
model.wfuny = HeroAttrsComp.getTalentValue(TalentType.WindFury); // 风怒强化
model.freeze_chance = HeroAttrsComp.getTalentValue(TalentType.Freeze); // 冰冻强化
model.puncture = HeroAttrsComp.getTalentValue(TalentType.Puncture); // 穿刺强化
model.puncture_chance = HeroAttrsComp.getTalentValue(TalentType.Puncture); // 穿刺强化
// 护盾强化 和 亡语强化 在对应逻辑中应用
} else {
model.ap = base_ap;

View File

@@ -1,4 +1,4 @@
import { Vec3, _decorator , v3,Collider2D,Contact2DType,Label ,Node,Prefab,instantiate,ProgressBar, Component, Material, Sprite, math, clamp, Game, tween, Tween, Color, BoxCollider2D, UITransform, UIOpacity} from "cc";
import { Vec3, _decorator , v3,Collider2D,Contact2DType,Label ,Node,Prefab,instantiate,ProgressBar, Component, Material, Sprite, math, clamp, Game, tween, Tween, Color, BoxCollider2D, UITransform, UIOpacity, NodeEventType} from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { mLogger } from "../common/Logger";
@@ -8,6 +8,7 @@ import { smc } from "../common/SingletonModuleComp";
import { SkillSet,} from "../common/config/SkillSet";
import { HeroInfo } from "../common/config/heroSet";
import { oops } from "db://oops-framework/core/Oops";
import { UIID } from "../common/config/GameUIConfig";
import { HeroAttrsComp } from "./HeroAttrsComp";
import { Tooltip } from "../skill/Tooltip";
import { timedCom } from "../skill/timedCom";
@@ -80,7 +81,22 @@ export class HeroViewComp extends CCComp {
},0.1)
// let anm = this.node.getChildByName("anm")
// anm.setScale(anm.scale.x*0.8,anm.scale.y*0.8);
// 绑定点击事件,点击打开英雄信息面板弹窗
this.node.on(NodeEventType.TOUCH_END, this.onHeroClicked, this);
}
private onHeroClicked() {
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 });
}
/** 视图层逻辑代码分离演示 */
start () {
this.init();
@@ -621,6 +637,9 @@ export class HeroViewComp extends CCComp {
this.damageQueue.length = 0;
this.isProcessingDamage = false;
// 解绑点击事件
this.node.off(NodeEventType.TOUCH_END, this.onHeroClicked, this);
// 节点生命周期由 Monster 对象池管理,此处不再销毁
// if (this.node && this.node.isValid) {
// this.node.destroy();

View File

@@ -689,16 +689,16 @@ export class CardComp extends CCComp {
});
}
if (this.HF_node) {
this.HF_node.active = true;
this.HF_node.children.forEach(child => {
child.active = (child.name === kindName);
});
}
// if (this.HF_node) {
// this.HF_node.active = true;
// this.HF_node.children.forEach(child => {
// child.active = (child.name === kindName);
// });
// }
if (this.NF_node) {
this.NF_node.active = false;
}
// if (this.NF_node) {
// this.NF_node.active = false;
// }
const hbNodeUI = this.node.getChildByName("HB");
if (hbNodeUI) hbNodeUI.active = false;
@@ -753,39 +753,39 @@ export class CardComp extends CCComp {
});
}
if (this.HF_node) {
const hfTrans = this.HF_node.getComponent(UITransform);
if (hfTrans) {
hfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = this.HF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.HF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) {
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
// if (this.HF_node) {
// const hfTrans = this.HF_node.getComponent(UITransform);
// if (hfTrans) {
// hfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
// const widget = this.HF_node.getComponent(Widget);
// if (widget) widget.updateAlignment();
// }
// this.HF_node.children.forEach(child => {
// const childTrans = child.getComponent(UITransform);
// if (childTrans) {
// childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
// const widget = child.getComponent(Widget);
// if (widget) widget.updateAlignment();
// }
// });
// }
if (this.NF_node) {
const nfTrans = this.NF_node.getComponent(UITransform);
if (nfTrans) {
nfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = this.NF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.NF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) {
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
// if (this.NF_node) {
// const nfTrans = this.NF_node.getComponent(UITransform);
// if (nfTrans) {
// nfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
// const widget = this.NF_node.getComponent(Widget);
// if (widget) widget.updateAlignment();
// }
// this.NF_node.children.forEach(child => {
// const childTrans = child.getComponent(UITransform);
// if (childTrans) {
// childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
// const widget = child.getComponent(Widget);
// if (widget) widget.updateAlignment();
// }
// });
// }
const hbNode = this.node.getChildByName("HB");
if (hbNode) {
@@ -892,10 +892,12 @@ export class CardComp extends CCComp {
// ---- 图标 ----
const iconNode = this.icon_node as Node;
if (this.card_type === CardType.Hero) {
iconNode.setScale(new Vec3(-1.5, 1.5, 1));
// 英雄卡使用 AnimationClip加载 idle 动画
this.updateHeroAnimation(iconNode, this.card_uuid, this.iconVisualToken);
return;
}
iconNode.setScale(new Vec3(1, 1, 1));
// 非英雄卡使用静态图标
this.clearIconAnimation(iconNode);
const iconId = this.resolveCardIconId(this.card_type, this.card_uuid);
@@ -1005,38 +1007,38 @@ export class CardComp extends CCComp {
if (childWidget) childWidget.updateAlignment();
});
}
if (this.HF_node) {
const hfTrans = this.HF_node.getComponent(UITransform);
if (hfTrans) {
hfTrans.setContentSize(170, 230);
const widget = this.HF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.HF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) {
childTrans.setContentSize(170, 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
if (this.NF_node) {
const nfTrans = this.NF_node.getComponent(UITransform);
if (nfTrans) {
nfTrans.setContentSize(170, 230);
const widget = this.NF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.NF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) {
childTrans.setContentSize(170, 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
// if (this.HF_node) {
// const hfTrans = this.HF_node.getComponent(UITransform);
// if (hfTrans) {
// hfTrans.setContentSize(170, 230);
// const widget = this.HF_node.getComponent(Widget);
// if (widget) widget.updateAlignment();
// }
// this.HF_node.children.forEach(child => {
// const childTrans = child.getComponent(UITransform);
// if (childTrans) {
// childTrans.setContentSize(170, 230);
// const widget = child.getComponent(Widget);
// if (widget) widget.updateAlignment();
// }
// });
// }
// if (this.NF_node) {
// const nfTrans = this.NF_node.getComponent(UITransform);
// if (nfTrans) {
// nfTrans.setContentSize(170, 230);
// const widget = this.NF_node.getComponent(Widget);
// if (widget) widget.updateAlignment();
// }
// this.NF_node.children.forEach(child => {
// const childTrans = child.getComponent(UITransform);
// if (childTrans) {
// childTrans.setContentSize(170, 230);
// const widget = child.getComponent(Widget);
// if (widget) widget.updateAlignment();
// }
// });
// }
const hbNode = this.node.getChildByName("HB");
if (hbNode) {
const hbTrans = hbNode.getComponent(UITransform);
@@ -1079,15 +1081,16 @@ export class CardComp extends CCComp {
if (this.BG_node) {
this.BG_node.children.forEach(child => child.active = false);
}
if (this.HF_node) {
this.HF_node.active = false;
this.HF_node.children.forEach(child => child.active = false);
}
if (this.NF_node) this.NF_node.active = false;
if (this.lv_node) {
this.lv_node.children.forEach(child => child.active = false);
}
// if (this.HF_node) {
// this.HF_node.active = false;
// this.HF_node.children.forEach(child => child.active = false);
// }
// if (this.NF_node) this.NF_node.active = false;
// if (this.lv_node) {
// this.lv_node.children.forEach(child => child.active = false);
// }
if (this.cost_node) this.cost_node.active = false;
if (this.icon_node) (this.icon_node as Node).setScale(new Vec3(1, 1, 1));
this.clearIconAnimation(this.icon_node as Node);
const sprite = this.icon_node?.getComponent(Sprite) || this.icon_node?.getComponentInChildren(Sprite);
if (sprite) sprite.spriteFrame = null;

View File

@@ -64,9 +64,6 @@ export class HInfoComp extends CCComp {
@property(Node)
lv_node=null!
@property(CCInteger)
node_index=0
/** 绑定的英雄 ECS 实体 ID */
private eid: number = 0;
/** 绑定的英雄属性数据模型引用 */
@@ -84,10 +81,44 @@ export class HInfoComp extends CCComp {
onLoad() {
this.cacheLabels();
this.bindEvents();
}
onAdded(args: { eid: number }) {
const eid = args?.eid ?? 0;
if (!eid) return;
let foundModel: HeroAttrsComp | null = null;
ecs.query(ecs.allOf(HeroAttrsComp)).forEach((entity: ecs.Entity) => {
if (entity.eid === eid) {
foundModel = entity.get(HeroAttrsComp);
}
});
if (foundModel) {
this.bindData(eid, foundModel);
} else {
this.isClosing = true;
oops.gui.remove(UIID.HInfo);
}
}
/** 是否正在关闭中,防止重复调用 remove */
private isClosing: boolean = false;
update(dt: number) {
if (this.isClosing) return;
if (!this.isModelAlive()) {
this.isClosing = true;
oops.gui.remove(UIID.HInfo);
return;
}
this.refresh();
}
onDestroy() {
super.onDestroy();
this.unbindEvents();
}
/**
@@ -102,54 +133,6 @@ export class HInfoComp extends CCComp {
this.refresh();
}
/**
* 根据 node_index 获取对应的硬编码位置,并查找该位置的英雄
*/
refreshByNodeIndex() {
if (this.node_index < 1 || this.node_index > 6) return;
const targetPos = MissionHeroComp.HERO_POSITIONS[this.node_index - 1];
let foundModel: HeroAttrsComp | null = null;
let foundEid: number = 0;
// 遍历所有英雄,查找 targetX 和 targetY 匹配该位置的英雄
ecs.query(ecs.allOf(HeroAttrsComp, MoveComp)).forEach((entity: ecs.Entity) => {
const model = entity.get(HeroAttrsComp);
const move = entity.get(MoveComp);
if (model && move && !model.is_dead && model.fac === FacSet.HERO) {
if (Math.abs(move.targetX - targetPos.x) < 2 && Math.abs(move.baseY - targetPos.y) < 2) {
foundModel = model;
foundEid = entity.eid;
}
}
});
if (foundModel) {
if (this.eid !== foundEid) {
this.bindData(foundEid, foundModel);
if (!this.node.active) this.node.active = true;
} else {
this.refresh();
}
} else {
if (this.eid !== 0) {
this.eid = 0;
this.model = null;
if (this.node.active) this.node.active = false;
}
}
}
/**
* 设置当前是否处于战斗阶段,控制出售按钮显示/隐藏
* @param isBattlePhase 是否处于战斗阶段
*/
setBattlePhase(isBattlePhase: boolean) {
if (this.sell_node && this.sell_node.isValid) {
this.sell_node.active = !isBattlePhase;
}
}
/**
* 刷新显示:
* 1. 根据英雄等级切换高级 / 普通边框。
@@ -268,34 +251,42 @@ export class HInfoComp extends CCComp {
[...clips].forEach(clip => anim.removeClip(clip, true));
}
// ======================== 交互(当前已注释) ========================
// ======================== 交互 ========================
// private bindEvents() {
// this.sell_node?.on(Button.EventType.CLICK, this.onSellHero, this);
// this.node.on(NodeEventType.TOUCH_END, this.onOpenIBox, this);
// }
private bindEvents() {
this.sell_node?.on(Button.EventType.CLICK, this.onSellHero, this);
this.node.on(NodeEventType.TOUCH_END, this.onOpenIBox, this);
}
// private unbindEvents() {
// this.sell_node?.off(Button.EventType.CLICK, this.onSellHero, this);
// this.node.off(NodeEventType.TOUCH_END, this.onOpenIBox, this);
// }
private unbindEvents() {
if (this.sell_node && this.sell_node.isValid) {
this.sell_node.off(Button.EventType.CLICK, this.onSellHero, this);
}
if (this.node && this.node.isValid) {
this.node.off(NodeEventType.TOUCH_END, this.onOpenIBox, this);
}
}
/**
* 点击面板时打开英雄详情弹窗IBox
* 传入英雄 UUID、等级和技能列表。
*/
private onOpenIBox() {
if (!this.model) return;
if (!this.isModelAlive()) return;
const heroUuid = this.model.hero_uuid ?? 0;
if (!heroUuid || !HeroInfo[heroUuid]) return;
const heroLv = Math.max(1, Math.floor(this.model.lv ?? 1));
oops.gui.remove(UIID.IBox);
oops.gui.open(UIID.IBox, {
heroUuid,
heroLv,
skills: this.model.skills
});
// if (this.isClosing) return;
// if (!this.model) return;
// if (!this.isModelAlive()) return;
// const heroUuid = this.model.hero_uuid ?? 0;
// if (!heroUuid || !HeroInfo[heroUuid]) return;
// const heroLv = Math.max(1, Math.floor(this.model.lv ?? 1));
// this.isClosing = true;
// oops.gui.remove(UIID.HInfo); // 打开 IBox 前关闭自身
// oops.gui.remove(UIID.IBox);
// oops.gui.open(UIID.IBox, {
// heroUuid,
// heroLv,
// skills: this.model.skills
// });
}
/**
@@ -303,6 +294,7 @@ export class HInfoComp extends CCComp {
* 并关闭详情弹窗。
*/
private onSellHero(event?: Event) {
if (this.isClosing) return;
if (!this.eid) return;
const heroLv = Math.max(1, Math.floor(this.model?.lv ?? 1));
const removed = Hero.removeByEid(this.eid);
@@ -317,7 +309,8 @@ export class HInfoComp extends CCComp {
// 使用统一经济管理入口出售英雄(按等级计算卖价)
MissionEconomy.executeSellHero(heroLv);
oops.gui.remove(UIID.IBox);
this.isClosing = true;
oops.gui.remove(UIID.HInfo);
}
/** ECS 组件移除时的释放钩子:清理动画资源并销毁节点 */
@@ -327,6 +320,9 @@ export class HInfoComp extends CCComp {
this.iconHeroUuid = 0;
this.model = null;
this.eid = 0;
this.node.destroy();
// 弹窗节点的生命周期由 oops.gui 统一管理,此处不再主动销毁节点
// if (this.node && this.node.isValid) {
// this.node.destroy();
// }
}
}

View File

@@ -41,7 +41,6 @@ import { CARD_POOL_INIT_LEVEL, CARD_POOL_MAX_LEVEL, CARD_POOL_UPGRADE_DISCOUNT_P
import { CardComp } from "./CardComp";
import { oops } from "db://oops-framework/core/Oops";
import { HeroAttrsComp } from "../hero/HeroAttrsComp";
import { HInfoComp } from "./HInfoComp";
import { smc } from "../common/SingletonModuleComp";
import { HeroInfo, HType } from "../common/config/heroSet";
import { HeroViewComp } from "../hero/HeroViewComp";
@@ -107,12 +106,6 @@ export class MissionCardComp extends CCComp {
/** 卡池等级显示节点 */
@property(Node)
pool_lv_node:Node = null!
/** 场上英雄信息面板容器节点HInfoComp 实例的父节点) */
@property(Node)
hero_info_node:Node = null!
/** 英雄信息面板预制体(每个英雄上场时实例化一份) */
@property(Prefab)
hero_info_prefab:Prefab=null!
/** 英雄数量显示节点(含 icon + num 子节点) */
@property(Node)
hero_num_node:Node=null!
@@ -126,12 +119,6 @@ export class MissionCardComp extends CCComp {
private cardComps: CardComp[] = [];
/** 当前卡池等级(仅影响抽卡来源,不直接改卡槽现有内容) */
private poolLv: number = CARD_POOL_INIT_LEVEL;
/** 英雄信息面板项间距(像素) */
private readonly heroInfoItemGap: number = 135;
/** 英雄信息面板项间额外间距(像素) */
private readonly heroInfoItemSpacing: number = 5;
/** 英雄信息面板同步计时器(降频刷新用) */
private heroInfoSyncTimer: number = 0;
/** 是否已缓存卡牌面板基准缩放 */
private hasCachedCardsBaseScale: boolean = false;
/** 卡牌面板基准缩放(从场景读取) */
@@ -142,8 +129,7 @@ export class MissionCardComp extends CCComp {
private cardsHideScale: Vec3 = new Vec3(0, 0, 1);
/** 卡牌原始定位点 */
private cardsPos = [-260,-75,108,260]
/** 缓存预先放置的 6 个 HInfoComp */
private cachedHInfoComps: Map<number, HInfoComp> = new Map();
// ======================== 生命周期 ========================
/**
@@ -155,7 +141,6 @@ export class MissionCardComp extends CCComp {
* 5. 触发首次任务开始流程。
*/
onLoad() {
this.cacheHInfoComps();
this.bindEvents();
this.cacheCardComps();
this.layoutCardSlots();
@@ -167,19 +152,6 @@ export class MissionCardComp extends CCComp {
});
}
private cacheHInfoComps() {
this.cachedHInfoComps.clear();
if (!this.hero_info_node) return;
for (let i = 0; i < this.hero_info_node.children.length; i++) {
const child = this.hero_info_node.children[i];
const comp = (child.getComponent(HInfoComp) || child.getComponent("HInfoComp")) as HInfoComp;
if (comp && comp.node_index > 0) {
this.cachedHInfoComps.set(comp.node_index, comp);
child.active = false;
}
}
}
/** 组件销毁时解绑所有事件并清理英雄信息面板 */
onDestroy() {
super.onDestroy();
@@ -189,7 +161,6 @@ export class MissionCardComp extends CCComp {
this.cards_chou.off(NodeEventType.TOUCH_CANCEL, this.onDrawTouchCancel, this);
}
this.unbindEvents();
this.clearHeroInfoPanels();
}
/** 外部初始化入口(由 CardController 调用) */
@@ -223,7 +194,6 @@ export class MissionCardComp extends CCComp {
this.cacheCardComps();
}
this.clearHeroInfoPanels();
this.layoutCardSlots();
this.clearAllCards();
// if (this.cards_up) {
@@ -246,7 +216,6 @@ export class MissionCardComp extends CCComp {
/** 任务结束:清空 4 槽 + 英雄面板并隐藏整个节点 */
onMissionEnd() {
this.clearAllCards();
this.clearHeroInfoPanels();
if (this.node && this.node.isValid) {
this.node.active = false;
}
@@ -260,20 +229,8 @@ export class MissionCardComp extends CCComp {
* 检测已死亡 / 已失效的面板并移除,刷新存活面板属性。
*/
update(dt: number) {
this.heroInfoSyncTimer += dt;
if (this.heroInfoSyncTimer < 0.15) return;
this.heroInfoSyncTimer = 0;
// 遍历所有预设的 HInfoComp让其根据 node_index 自己刷新
this.cachedHInfoComps.forEach(comp => {
if (comp && comp.isValid) {
comp.refreshByNodeIndex();
}
});
}
/** 关闭面板(不销毁数据模型,仅隐藏) */
close() {
if (this.node && this.node.isValid) {
@@ -647,12 +604,6 @@ export class MissionCardComp extends CCComp {
this.cards_node.active = true;
Tween.stopAllByTarget(this.cards_node);
this.cards_node.setScale(this.cardsShowScale);
this.cachedHInfoComps.forEach(comp => {
if (comp && comp.isValid) {
comp.setBattlePhase(false);
}
});
}
private enterBattlePhase() {
@@ -668,12 +619,6 @@ export class MissionCardComp extends CCComp {
// }
// })
// .start();
this.cachedHInfoComps.forEach(comp => {
if (comp && comp.isValid) {
comp.setBattlePhase(true);
}
});
}
/** 构建本次抽卡结果保证最终可分发3条数据 */
@@ -874,21 +819,6 @@ export class MissionCardComp extends CCComp {
return Math.max(0, baseCost - discount);
}
private clearHeroInfoPanels() {
if (this.cachedHInfoComps) {
this.cachedHInfoComps.forEach(comp => {
if (comp && comp.node && comp.node.isValid) {
comp.node.active = false;
}
});
}
this.heroInfoSyncTimer = 0;
this.syncMissionHeroData(0);
this.updateHeroNumUI(false, false);
}
public setHeroMaxCount(max: number) {
const missionData = this.getMissionData();
if (!missionData) return;
@@ -1055,7 +985,6 @@ export class MissionCardComp extends CCComp {
/** 视图对象通过 ecs.Entity.remove(ModuleViewComp) 删除组件是触发组件处理自定义释放逻辑 */
reset() {
this.clearHeroInfoPanels();
this.resetButtonScale(this.cards_chou);
// this.resetButtonScale(this.cards_up);