pan/pixelheros
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(CardComp): 重构卡牌背景与边框渲染逻辑

Browse Source 
1. 移除废弃的oinfo_node、NF_node、HF_node、pool_lv_node等节点属性
2. 简化卡牌背景层级渲染，按卡池等级自动匹配对应颜色边框
3. 清理冗余的尺寸对齐更新代码
4. 统一重置卡牌节点状态的逻辑
This commit is contained in:
walkpan
2026-05-27 23:31:23 +08:00
parent 8f139dfb3f
commit 27dc408d80
5 changed files with 8093 additions and 11157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13599
assets/resources/gui/element/card.prefab
View File

File diff suppressed because it is too large Load Diff

4395
assets/resources/gui/element/cardbg.prefab Normal file
View File

File diff suppressed because it is too large Load Diff

13
assets/resources/gui/element/cardbg.prefab.meta Normal file
View File

@@ -0,0 +1,13 @@
{
"ver": "1.1.50",
"importer": "prefab",
"imported": true,
"uuid": "d6ae7b2b-c431-4374-97e6-2506d9e8501f",
"files": [
".json"
],
"subMetas": {},
"userData": {
"syncNodeName": "cardbg"
}
}

1060
assets/resources/gui/ui3.plist.meta
View File

File diff suppressed because it is too large Load Diff

181
assets/script/game/map/CardComp.ts
View File

@@ -63,9 +63,6 @@ export class CardComp extends CCComp {
/** 英雄卡信息面板（显示 AP / HP） 废弃，改用直接绑定 */ /** 英雄卡信息面板（显示 AP / HP） 废弃，改用直接绑定 */
// @property(Node) // @property(Node)
// info_node=null! // info_node=null!
/** 非英雄卡信息面板（显示技能 / 特殊卡描述文本） */
@property(Node)
oinfo_node=null!
/** 卡牌名称标签节点 */ /** 卡牌名称标签节点 */
@property(Node) @property(Node)
name_node=null! name_node=null!
@@ -81,15 +78,8 @@ export class CardComp extends CCComp {
/** 卡牌背景底框节点（按卡池等级切换子节点显示） */ /** 卡牌背景底框节点（按卡池等级切换子节点显示） */
@property(Node) @property(Node)
BG_node=null! BG_node=null!
/** 普通品质边框节点（hero_lv / card_lv <= 1 时使用） */
@property(Node)
NF_node=null!
/** 高品质边框节点（hero_lv / card_lv > 1 时使用） */
@property(Node)
HF_node=null!
@property(Node)
pool_lv_node=null! //英雄对应的卡池等级
@property(Label) @property(Label)
lvl_node: Label = null! //英雄本身的等级 lvl_node: Label = null! //英雄本身的等级
@@ -615,41 +605,34 @@ export class CardComp extends CCComp {
// ---- 卡牌种类标识（近战 / 远程 / 辅助等） ---- // ---- 卡牌种类标识（近战 / 远程 / 辅助等） ----
const kindName = CKind[this.cardData.kind]; const kindName = CKind[this.cardData.kind];
// ---- 背景底框与高级边框（现在按 Ckind 显示对应子节点） ---- const poolColorNames = ["green", "blue", "purple", "yellow", "red"];
const poolColorIdx = Math.min(this.cardData.pool_lv, 5) - 1;
const activeColor = poolColorNames[poolColorIdx];
if (this.BG_node) { if (this.BG_node) {
this.BG_node.children.forEach(child => { this.BG_node.children.forEach(child => {
child.active = (child.name === kindName); child.active = (child.name === kindName);
if (child.active) {
child.children.forEach(colorChild => {
colorChild.active = (colorChild.name === activeColor);
});
} else {
child.children.forEach(colorChild => {
colorChild.active = false;
});
}
});
}
if (this.Ckind_node) {
this.Ckind_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;
// }
const hbNodeUI = this.node.getChildByName("HB"); const hbNodeUI = this.node.getChildByName("HB");
if (hbNodeUI) hbNodeUI.active = false; if (hbNodeUI) hbNodeUI.active = false;
// ---- 卡牌等级标识 ----
const cardLvStr = `lv${this.cardData.pool_lv}`;
if (this.pool_lv_node) {
this.pool_lv_node.children.forEach(child => {
// if (child.name === "light") {
// child.active = false;
// } else if (child.name === "bg") {
// child.active = true;
// } else {
child.active = (child.name === cardLvStr);
// }
});
}
// ---- 按卡牌类型渲染具体内容 ---- // ---- 按卡牌类型渲染具体内容 ----
const uiTrans = this.node.getComponent(UITransform); const uiTrans = this.node.getComponent(UITransform);
if (uiTrans) { if (uiTrans) {
@@ -675,50 +658,6 @@ export class CardComp extends CCComp {
}); });
} }
if (this.pool_lv_node) {
const widget = this.pool_lv_node.getComponent(Widget);
if (widget) widget.updateAlignment();
this.pool_lv_node.children.forEach(child => {
const childWidget = child.getComponent(Widget);
if (childWidget) childWidget.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();
// }
// });
// }
const hbNode = this.node.getChildByName("HB"); const hbNode = this.node.getChildByName("HB");
if (hbNode) { if (hbNode) {
const hbTrans = hbNode.getComponent(UITransform); const hbTrans = hbNode.getComponent(UITransform);
@@ -760,14 +699,10 @@ export class CardComp extends CCComp {
} }
this.ap_node.getChildByName("val").getComponent(Label).string = `${(hero?.ap ?? 0) * heroLv}`; this.ap_node.getChildByName("val").getComponent(Label).string = `${(hero?.ap ?? 0) * heroLv}`;
this.hp_node.getChildByName("val").getComponent(Label).string = `${(hero?.hp ?? 0) * heroLv}`; this.hp_node.getChildByName("val").getComponent(Label).string = `${(hero?.hp ?? 0) * heroLv}`;
if (this.oinfo_node) {
const infoLabel = this.oinfo_node.getChildByName("info")?.getComponent(Label);
if (infoLabel) infoLabel.string = `${hero?.info || ""}`;
}
this.ap_node.active = true; this.ap_node.active = true;
this.hp_node.active = true; this.hp_node.active = true;
if (this.oinfo_node) this.oinfo_node.active = false;
}else if(this.card_type===CardType.Skill){ }else if(this.card_type===CardType.Skill){
if (this.lvl_node) this.lvl_node.node.active = false; if (this.lvl_node) this.lvl_node.node.active = false;
// 技能卡：显示技能名 + 品质后缀 + 描述 // 技能卡：显示技能名 + 品质后缀 + 描述
@@ -776,11 +711,9 @@ export class CardComp extends CCComp {
const card_lv = Math.max(1, Math.floor(this.cardData.card_lv ?? 1)); const card_lv = Math.max(1, Math.floor(this.cardData.card_lv ?? 1));
const spSuffix = card_lv >= 2 ? "★".repeat(card_lv - 1) : ""; const spSuffix = card_lv >= 2 ? "★".repeat(card_lv - 1) : "";
this.setLabel(this.name_node, `${spSuffix}${skillCard?.name || skill?.name || ""}${spSuffix}`); this.setLabel(this.name_node, `${spSuffix}${skillCard?.name || skill?.name || ""}${spSuffix}`);
this.oinfo_node.getChildByName("info").getComponent(Label).string = `${skillCard?.info || skill?.info || ""}`;
this.ap_node.active = false; this.ap_node.active = false;
this.hp_node.active = false; this.hp_node.active = false;
if (this.oinfo_node) this.oinfo_node.active = false;
}else{ }else{
if (this.lvl_node) this.lvl_node.node.active = false; if (this.lvl_node) this.lvl_node.node.active = false;
// 特殊卡（升级 / 刷新）：显示卡名 + 品质后缀 + 描述 // 特殊卡（升级 / 刷新）：显示卡名 + 品质后缀 + 描述
@@ -790,11 +723,9 @@ export class CardComp extends CCComp {
const card_lv = Math.max(1, Math.floor(this.cardData.card_lv ?? 1)); const card_lv = Math.max(1, Math.floor(this.cardData.card_lv ?? 1));
const spSuffix = card_lv >= 2 ? "★".repeat(card_lv - 1) : ""; const spSuffix = card_lv >= 2 ? "★".repeat(card_lv - 1) : "";
this.setLabel(this.name_node, `${spSuffix}${specialCard?.name || ""}${spSuffix}`); this.setLabel(this.name_node, `${spSuffix}${specialCard?.name || ""}${spSuffix}`);
this.oinfo_node.getChildByName("info").getComponent(Label).string = `${specialCard?.info || ""}`;
this.ap_node.active = false; this.ap_node.active = false;
this.hp_node.active = false; this.hp_node.active = false;
if (this.oinfo_node) this.oinfo_node.active = false;
} }
// ---- 费用标签 ---- // ---- 费用标签 ----
@@ -909,47 +840,6 @@ export class CardComp extends CCComp {
} }
}); });
} }
if (this.pool_lv_node) {
const widget = this.pool_lv_node.getComponent(Widget);
if (widget) widget.updateAlignment();
this.pool_lv_node.children.forEach(child => {
const childWidget = child.getComponent(Widget);
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();
// }
// });
// }
const hbNode = this.node.getChildByName("HB"); const hbNode = this.node.getChildByName("HB");
if (hbNode) { if (hbNode) {
const hbTrans = hbNode.getComponent(UITransform); const hbTrans = hbNode.getComponent(UITransform);
@@ -983,24 +873,21 @@ export class CardComp extends CCComp {
} }
if (this.ap_node) this.ap_node.active = false; if (this.ap_node) this.ap_node.active = false;
if (this.hp_node) this.hp_node.active = false; if (this.hp_node) this.hp_node.active = false;
if (this.oinfo_node) this.oinfo_node.active = false;
if (this.lvl_node) this.lvl_node.node.active = false; if (this.lvl_node) this.lvl_node.node.active = false;
// if (this.Ckind_node) { if (this.Ckind_node) {
// this.Ckind_node.children.forEach(child => { this.Ckind_node.children.forEach(child => {
// child.active = false; child.active = false;
// }); });
// }
if (this.BG_node) {
this.BG_node.children.forEach(child => child.active = false);
} }
// if (this.HF_node) { if (this.BG_node) {
// this.HF_node.active = false; this.BG_node.children.forEach(child => {
// this.HF_node.children.forEach(child => child.active = false); child.active = false;
// } child.children.forEach(colorChild => {
// if (this.NF_node) this.NF_node.active = false; colorChild.active = false;
// if (this.pool_lv_node) { });
// this.pool_lv_node.children.forEach(child => child.active = false); });
// } }
if (this.cost_node) this.cost_node.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)); if (this.icon_node) (this.icon_node as Node).setScale(new Vec3(1, 1, 1));
this.clearIconAnimation(this.icon_node as Node); this.clearIconAnimation(this.icon_node as Node);