feat(英雄列表): 调整英雄卡牌UI并支持等级显示

- 调整英雄卡牌预制体的尺寸、缩放和位置
- 在英雄信息面板中添加等级节点显示
- 修改英雄属性显示逻辑,根据英雄等级计算属性值
- 移除冗余的技能信息更新代码,简化逻辑结构
This commit is contained in:
walkpan
2026-04-24 22:13:54 +08:00
parent 1289b668b7
commit aab38e3233
2 changed files with 45 additions and 72 deletions

View File

@@ -3587,8 +3587,8 @@
},
"_lscale": {
"__type__": "cc.Vec3",
"x": 1,
"y": 1,
"x": 1.5,
"y": 1.5,
"z": 1
},
"_mobility": 0,
@@ -4024,8 +4024,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 320,
"height": 450
"width": 213.33333333333334,
"height": 300
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -4983,8 +4983,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 320,
"height": 450
"width": 213.33333333333334,
"height": 300
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -9804,8 +9804,8 @@
},
"_lpos": {
"__type__": "cc.Vec3",
"x": 145.307,
"y": -205.5,
"x": 135.807,
"y": -202.5,
"z": 0
},
"_lrot": {
@@ -10459,8 +10459,8 @@
},
"_lpos": {
"__type__": "cc.Vec3",
"x": -141.951,
"y": -205.5,
"x": -132.451,
"y": -202.5,
"z": 0
},
"_lrot": {
@@ -12118,6 +12118,9 @@
"next_btn": {
"__id__": 489
},
"lv_node": {
"__id__": 266
},
"_id": ""
},
{

View File

@@ -18,7 +18,7 @@
* - HeroInfo / HeroListheroSet—— 英雄静态配置与全量英雄 UUID 列表
* - SkillSet / ITypeSkillSet—— 技能配置与类型枚举
*/
import { _decorator, Animation, AnimationClip, Button, Event, Label, Node, NodeEventType, Sprite, resources, tween, Vec3 } from "cc";
import { _decorator, Animation, AnimationClip, Button, Event, Label, Node, NodeEventType, Sprite, resources, tween, Vec3, Widget } 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 { HeroInfo, HeroList } from "../common/config/heroSet";
@@ -218,10 +218,37 @@ export class HListComp extends CCComp {
const hero = HeroInfo[this.huuid];
if (!hero) return;
this.setLabelText(this.name_node, hero.name);
this.setLabelText(this.ap_node, `${hero.ap}`);
this.setLabelText(this.hp_node, `${hero.hp}`);
this.updateSkillInfo(hero);
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.hp_node, `${(hero.hp ?? 0) * heroLv}`);
if (this.info_node) {
const infoLabel = this.info_node.getChildByName("info")?.getComponent(Label);
if (infoLabel) infoLabel.string = `${hero.info || ""}`;
}
const cardLvStr = `lv${hero.cards_lv ?? 1}`;
if (this.lv_node) {
this.lv_node.active = true;
this.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 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();
});
}
}
/** 初始化 5 个轮播位的英雄动画 */
@@ -315,64 +342,7 @@ export class HListComp extends CCComp {
return null;
}
// ======================== 技能信息 ========================
/**
* 更新技能信息面板:
* 遍历英雄的技能列表,为 Line1~Line5 节点填充技能名、等级、CD、描述。
* 同时根据技能类型(近战 / 远程 / 辅助)切换对应图标。
*
* @param hero 英雄配置数据(含 skills 字段)
*/
private updateSkillInfo(hero: any) {
if (!this.info_node) return;
const skills = Object.values(hero.skills || {});
for (let i = 1; i <= 5; i++) {
let line = this.findNodeByName(this.info_node, `Line${i}`) || this.findNodeByName(this.info_node, `line${i}`);
if (!line) continue;
const skill: any = skills[i - 1];
if (skill) {
line.active = true;
const skillId = skill.uuid;
const config = SkillSet[skillId];
// 拼接技能信息文本
const text = config ? `${config.name} Lv.${skill.lv} CD:${skill.cd}s ${config.info}` : `未知技能 CD:${skill.cd}s`;
const noteNode = this.findNodeByName(line, "note");
const label = noteNode?.getComponent(Label) || noteNode?.getComponentInChildren(Label) || line.getComponentInChildren(Label);
if (label) {
label.string = text;
}
// 切换技能类型图标
this.updateLineTypeIcon(line, config?.IType);
} else {
line.active = false;
}
}
}
/**
* 更新技能行的类型图标(互斥显示):
* - Melee → 近战图标
* - remote → 远程图标
* - support → 辅助图标
*
* @param line 技能行节点
* @param iType 技能类型枚举
*/
private updateLineTypeIcon(line: Node, iType?: IType) {
const meleeNode = this.findNodeByName(line, "Melee");
const remoteNode = this.findNodeByName(line, "remote");
const supportNode = this.findNodeByName(line, "support");
if (meleeNode) meleeNode.active = iType === IType.Melee;
if (remoteNode) remoteNode.active = iType === IType.remote;
if (supportNode) supportNode.active = iType === IType.support;
}
/** ECS 组件移除时销毁节点 */
reset() {