bef521683c
1. 重构英雄列表卡牌选中逻辑，移除缩放高亮，改用active子节点显隐标记选中状态 2. 重构CardLiteComp，新增setSelected方法统一处理选中态 3. 调整卡牌预制体尺寸与布局，新增选中标记节点 4. 优化英雄图标加载逻辑，改为静态首帧展示而非播放动画 5. 调整图集边框配置与精灵帧引用
404 lines
14 KiB
TypeScript
404 lines
14 KiB
TypeScript
/**
|
||
* @file HerosListComp.ts
|
||
* @description 英雄图鉴弹出页面（UI 视图层）
|
||
*
|
||
* 职责：
|
||
* 1. 以卡片列表形式展示所有可用英雄（使用 CardLiteComp 预制体）。
|
||
* 2. 点击卡片选中英雄，右侧详情面板显示 idle 动画、名称、AP、HP、CD、技能描述。
|
||
* 3. 支持卡池等级筛选（全部 / Lv1 / Lv2 / Lv3）。
|
||
*
|
||
* 关键设计：
|
||
* - cards_node 为卡片容器，通过 instantiate(card_lite_prefab) 动态生成卡片。
|
||
* - 选中状态通过 selectNode 高亮管理，同一时间只有一张卡片高亮。
|
||
* - hero_icon 使用 Animation + iconVisualToken 机制防止异步加载竞态。
|
||
*
|
||
* 依赖：
|
||
* - HeroInfo / HeroList（heroSet）—— 英雄静态配置与全量 UUID 列表
|
||
* - CardLiteComp —— 轻量卡片组件
|
||
* - buildSkillDesc（HeroSkillDesc）—— 技能描述生成器
|
||
*/
|
||
import { _decorator, Animation, AnimationClip, Label, Node, Prefab, Sprite, UITransform, Widget, instantiate, resources } 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 { oops } from "db://oops-framework/core/Oops";
|
||
import { mLogger } from "../common/Logger";
|
||
import { HeroInfo, HeroList } from "../common/config/heroSet";
|
||
import { buildSkillDesc } from "../common/config/HeroSkillDesc";
|
||
import { CKind } from "../common/config/CardSet";
|
||
import { GameEvent } from "../common/config/GameEvent";
|
||
import { HERO_UPGRADE_NEED_FRAGMENTS } from "../common/config/GameSet";
|
||
import { CardBgComp } from "./CardBgComp";
|
||
import { CardLiteComp } from "./CardLiteComp";
|
||
import { ChipComp } from "./ChipComp";
|
||
import { smc } from "../common/SingletonModuleComp";
|
||
|
||
const { property, ccclass } = _decorator;
|
||
|
||
@ccclass('HerosListComp')
|
||
@ecs.register('HerosListComp', false)
|
||
export class HerosListComp extends CCComp {
|
||
// ======================== 编辑器绑定节点 ========================
|
||
|
||
@property(Node)
|
||
hero_icon = null!
|
||
|
||
@property(Node)
|
||
ap_node = null!
|
||
|
||
@property(Node)
|
||
def_node = null!
|
||
|
||
@property(Node)
|
||
hp_node = null!
|
||
|
||
@property(Node)
|
||
cd_node = null!
|
||
|
||
/** 卡牌背景底框节点（按卡池等级切换子节点显示） */
|
||
@property(Node)
|
||
BG_node=null!
|
||
|
||
@property(Node)
|
||
info_node = null!
|
||
|
||
@property(Node)
|
||
name_node = null!
|
||
|
||
@property(Node)
|
||
cards_node = null!
|
||
|
||
@property(Prefab)
|
||
card_lite_prefab = null!
|
||
|
||
@property(Node)
|
||
lv_node = null!
|
||
|
||
@property(Node)
|
||
type_node = null!
|
||
|
||
/** 升级按钮节点 */
|
||
@property(Node)
|
||
upgrade_btn = null!
|
||
|
||
/** 碎片数量显示节点（Label） */
|
||
@property(Node)
|
||
fragment_node = null!
|
||
|
||
/** 碎片图标节点（挂载 ChipComp 用于渲染碎片图标） */
|
||
@property(Node)
|
||
chip_node = null!
|
||
|
||
// ======================== 运行时状态 ========================
|
||
|
||
huuid: number = 0
|
||
private iconVisualToken: number = 0
|
||
private selectNode: Node | null = null
|
||
debugMode: boolean = false
|
||
|
||
start() {
|
||
this.initCardList()
|
||
if (HeroList.length > 0) {
|
||
this.onCardSelect(HeroList[0])
|
||
}
|
||
}
|
||
|
||
protected onEnable(): void {
|
||
oops.message.on(GameEvent.HERO_GROWTH_UPDATE, this.onGrowthUpdate, this)
|
||
if (this.cards_node && this.cards_node.children.length > 0) {
|
||
this.onCardSelect(this.huuid || HeroList[0])
|
||
}
|
||
}
|
||
|
||
protected onDisable(): void {
|
||
oops.message.off(GameEvent.HERO_GROWTH_UPDATE, this.onGrowthUpdate, this)
|
||
}
|
||
|
||
private onGrowthUpdate() {
|
||
if (this.huuid) {
|
||
this.updateHeroDetail(this.huuid)
|
||
}
|
||
}
|
||
|
||
closeHeros() {
|
||
this.node.active = false
|
||
}
|
||
|
||
/**
|
||
* 升级按钮点击回调
|
||
* 消耗碎片提升英雄局外等级，成功后刷新详情面板
|
||
*/
|
||
onUpgradeClick() {
|
||
const uuid = this.huuid
|
||
if (!uuid) return
|
||
|
||
const success = smc.upgradeHero(uuid)
|
||
if (success) {
|
||
mLogger.log(this.debugMode, "HerosListComp", `英雄 ${uuid} 升级成功`)
|
||
this.updateHeroDetail(uuid)
|
||
} else {
|
||
const growth = smc.getHeroGrowth(uuid)
|
||
const need = HERO_UPGRADE_NEED_FRAGMENTS[growth.lv + 1]
|
||
mLogger.log(this.debugMode, "HerosListComp", `英雄 ${uuid} 升级失败`, {
|
||
currentLv: growth.lv,
|
||
fragments: growth.fragments,
|
||
needFragments: need ?? "MAX",
|
||
})
|
||
}
|
||
}
|
||
|
||
// ======================== 卡片列表 ========================
|
||
|
||
private initCardList() {
|
||
mLogger.log(this.debugMode, "HerosListComp", "initCardList start", {
|
||
hasCardsNode: !!this.cards_node,
|
||
hasPrefab: !!this.card_lite_prefab,
|
||
heroListLen: HeroList.length,
|
||
})
|
||
|
||
if (!this.cards_node || !this.card_lite_prefab) return
|
||
|
||
mLogger.log(this.debugMode, "HerosListComp", "cards_node info", {
|
||
name: this.cards_node.name,
|
||
active: this.cards_node.active,
|
||
childrenCount: this.cards_node.children.length,
|
||
pos: this.cards_node.position.toString(),
|
||
scale: this.cards_node.scale.toString(),
|
||
parentName: this.cards_node.parent?.name || "none",
|
||
})
|
||
|
||
this.cards_node.removeAllChildren()
|
||
|
||
const sorted = [...HeroList].sort((a, b) => {
|
||
return (HeroInfo[a]?.card_lv ?? 1) - (HeroInfo[b]?.card_lv ?? 1);
|
||
});
|
||
|
||
for (const uuid of sorted) {
|
||
const hero = HeroInfo[uuid]
|
||
if (!hero) continue
|
||
|
||
const cardNode = instantiate(this.card_lite_prefab)
|
||
cardNode.name = `card_${uuid}`
|
||
|
||
mLogger.log(this.debugMode, "HerosListComp", `card instantiated ${uuid}`, {
|
||
cardActive: cardNode.active,
|
||
cardPos: cardNode.position.toString(),
|
||
cardScale: cardNode.scale.toString(),
|
||
cardChildren: cardNode.children.map(c => c.name),
|
||
cardWidth: cardNode.getComponent("cc.UITransform")?.width,
|
||
cardHeight: cardNode.getComponent("cc.UITransform")?.height,
|
||
})
|
||
|
||
const comp = cardNode.getComponent(CardLiteComp) || cardNode.addComponent(CardLiteComp)
|
||
comp.setHeroByUuid(uuid)
|
||
comp.onClickCallback = (cardComp: CardLiteComp) => {
|
||
this.onCardSelect(uuid)
|
||
this.highlightCard(cardNode)
|
||
}
|
||
|
||
this.cards_node.addChild(cardNode)
|
||
}
|
||
|
||
mLogger.log(this.debugMode, "HerosListComp", "initCardList done", {
|
||
totalChildren: this.cards_node.children.length,
|
||
})
|
||
|
||
this.updateContentSize()
|
||
}
|
||
|
||
private updateContentSize() {
|
||
const total = this.cards_node.children.length
|
||
if (total === 0) return
|
||
|
||
const cols = 4
|
||
const rows = Math.ceil(total / cols)
|
||
const cardH = 200
|
||
const spacingY = 10
|
||
const contentH = Math.max(1000, rows * (cardH + spacingY) + 50)
|
||
|
||
const uiTrans = this.cards_node.getComponent(UITransform)
|
||
if (uiTrans) {
|
||
uiTrans.setContentSize(uiTrans.width, contentH)
|
||
}
|
||
|
||
mLogger.log(this.debugMode, "HerosListComp", "updateContentSize", {
|
||
total, cols, rows, contentH,
|
||
})
|
||
}
|
||
|
||
private highlightCard(cardNode: Node) {
|
||
// 取消旧选中：关闭其 active 标识节点
|
||
if (this.selectNode) {
|
||
this.selectNode.getComponent(CardLiteComp)?.setSelected(false)
|
||
}
|
||
this.selectNode = cardNode
|
||
// 新选中：激活根节点下的 active 标识节点（替代原缩放高亮）
|
||
cardNode.getComponent(CardLiteComp)?.setSelected(true)
|
||
}
|
||
|
||
private onCardSelect(uuid: number) {
|
||
this.huuid = uuid
|
||
this.updateHeroDetail(uuid)
|
||
}
|
||
|
||
// ======================== 详情面板 ========================
|
||
|
||
private updateHeroDetail(uuid: number) {
|
||
const hero = HeroInfo[uuid]
|
||
if (!hero) return
|
||
|
||
const heroLv = Math.max(1, Math.floor(hero.lv ?? 1))
|
||
const suffix = heroLv >= 2 ? "★".repeat(heroLv - 1) : ""
|
||
this.setLabelText(this.name_node, `${suffix}${hero.name || ""}${suffix}`)
|
||
this.setLabelText(this.ap_node, `${(hero.ap ?? 0) * heroLv}`)
|
||
this.setLabelText(this.def_node, `${(hero.def ?? 0) * heroLv}`)
|
||
this.setLabelText(this.hp_node, `${(hero.hp ?? 0) * heroLv}`)
|
||
|
||
this.updateCdDisplay(hero)
|
||
|
||
if (this.info_node) {
|
||
const desc = buildSkillDesc(hero)
|
||
const infoLabel = this.info_node.getChildByName("info")?.getComponent(Label)
|
||
|| this.info_node.getComponent(Label)
|
||
|| this.info_node.getComponentInChildren(Label)
|
||
if (infoLabel) infoLabel.string = desc || hero.info || ""
|
||
}
|
||
|
||
this.updatePoolLvBg(hero.card_lv ?? 1)
|
||
this.updateLvDisplay(hero)
|
||
this.updateTypeDisplay(hero)
|
||
this.updateHeroAnimation(uuid)
|
||
this.updateGrowthPanel(uuid)
|
||
}
|
||
|
||
private updatePoolLvBg(poolLv: number) {
|
||
if (!this.BG_node) return
|
||
const kindName = CKind[CKind.Hero];
|
||
this.BG_node.children.forEach(child => {
|
||
child.active = (child.name === kindName);
|
||
const bg = child.getComponent(CardBgComp);
|
||
if (bg) child.active ? bg.apply(poolLv) : bg.clear();
|
||
});
|
||
}
|
||
|
||
private updateCdDisplay(hero: typeof HeroInfo[number]) {
|
||
if (!this.cd_node) return
|
||
const skillKeys = Object.keys(hero.skills)
|
||
if (skillKeys.length === 0) return
|
||
const firstSkill = hero.skills[Number(skillKeys[0])]
|
||
if (firstSkill) {
|
||
this.setLabelText(this.cd_node, `${firstSkill.cd}s`)
|
||
}
|
||
}
|
||
|
||
private updateLvDisplay(hero: typeof HeroInfo[number]) {
|
||
if (!this.lv_node) return
|
||
const cardLvStr = `lv${hero.card_lv ?? 1}`
|
||
this.lv_node.active = true
|
||
this.lv_node.children.forEach(child => {
|
||
|
||
child.active = (child.name === cardLvStr)
|
||
|
||
})
|
||
const widget = this.lv_node.getComponent(Widget)
|
||
if (widget) widget.updateAlignment()
|
||
this.lv_node.children.forEach(child => {
|
||
const childWidget = child.getComponent(Widget)
|
||
if (childWidget) childWidget.updateAlignment()
|
||
})
|
||
}
|
||
|
||
private updateTypeDisplay(hero: typeof HeroInfo[number]) {
|
||
if (!this.type_node) return
|
||
this.type_node.active = true
|
||
const typeStr = `${hero.type ?? 0}`
|
||
this.type_node.children.forEach(child => {
|
||
child.active = (child.name === typeStr)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 更新局外成长面板：碎片数量与升级按钮状态
|
||
* @param uuid 英雄模板 uuid
|
||
*/
|
||
private updateGrowthPanel(uuid: number) {
|
||
const growth = smc.getHeroGrowth(uuid)
|
||
const needFragments = HERO_UPGRADE_NEED_FRAGMENTS[growth.lv + 1]
|
||
const isMaxLv = needFragments === undefined
|
||
|
||
// 碎片数量显示：当前拥有 / 下一级所需（满级时显示 MAX）
|
||
if (this.fragment_node) {
|
||
const fragmentText = isMaxLv
|
||
? `${growth.fragments} / MAX`
|
||
: `${growth.fragments} / ${needFragments}`
|
||
this.setLabelText(this.fragment_node, fragmentText)
|
||
}
|
||
|
||
// 碎片图标：使用 ChipComp 渲染英雄图标（自动读取 HeroInfo 配置）
|
||
if (this.chip_node) {
|
||
const chipComp = this.chip_node.getComponent(ChipComp) || this.chip_node.addComponent(ChipComp)
|
||
chipComp.setHeroByUuid(uuid)
|
||
}
|
||
|
||
// 升级按钮状态：未满级且碎片足够时可用
|
||
if (this.upgrade_btn) {
|
||
const canUpgrade = !isMaxLv && growth.fragments >= needFragments
|
||
this.upgrade_btn.active = true
|
||
const btnComp = this.upgrade_btn.getComponent("cc.Button") as import("cc").Button | null
|
||
if (btnComp) btnComp.interactable = canUpgrade
|
||
}
|
||
}
|
||
|
||
// ======================== 英雄动画 ========================
|
||
|
||
private updateHeroAnimation(uuid: number) {
|
||
if (!this.hero_icon) return
|
||
const hero = HeroInfo[uuid]
|
||
if (!hero) return
|
||
|
||
const sprite = this.hero_icon.getComponent(Sprite) || this.hero_icon.getComponentInChildren(Sprite)
|
||
if (sprite) sprite.spriteFrame = null
|
||
|
||
const anim = this.hero_icon.getComponent(Animation) || this.hero_icon.addComponent(Animation)
|
||
this.clearAnimationClips(anim)
|
||
|
||
this.iconVisualToken += 1
|
||
const token = this.iconVisualToken
|
||
const path = `game/heros/hero/${hero.path}/idle`
|
||
|
||
resources.load(path, AnimationClip, (err, clip) => {
|
||
if (err || !clip) {
|
||
mLogger.log(this.debugMode, "HerosListComp", `load hero animation failed ${uuid}`, err)
|
||
return
|
||
}
|
||
if (token !== this.iconVisualToken) return
|
||
this.clearAnimationClips(anim)
|
||
anim.addClip(clip)
|
||
anim.play("idle")
|
||
})
|
||
}
|
||
|
||
private clearAnimationClips(anim: Animation) {
|
||
const clips = anim.clips
|
||
if (clips && clips.length > 0) {
|
||
for (let i = clips.length - 1; i >= 0; i--) {
|
||
const clip = clips[i]
|
||
if (clip) anim.removeClip(clip, true)
|
||
}
|
||
}
|
||
}
|
||
|
||
// ======================== UI 工具 ========================
|
||
|
||
private setLabelText(node: Node, text: string) {
|
||
if (!node) return
|
||
const label = node.getComponent(Label) || node.getComponentInChildren(Label)
|
||
if (label) {
|
||
label.string = text
|
||
}
|
||
}
|
||
|
||
reset() {
|
||
this.node.destroy()
|
||
}
|
||
}
|