Files
pixelheros/assets/script/game/map/HlistComp.ts
panw 61b45c2dd9 feat(角色界面): 实现英雄列表浏览与技能展示功能
- 在 heroSet.ts 中添加 HeroList 数组,定义可浏览的英雄 ID 列表
- 激活角色控制器界面中的相关节点以启用功能
- 重构 HlistComp 组件,添加英雄列表翻页、属性显示、动画加载和技能信息展示逻辑
- 通过 HeroList 数组顺序浏览英雄,并展示其名称、攻击力、生命值、技能详情和类型图标
2026-04-01 16:30:55 +08:00

170 lines
5.5 KiB
TypeScript

import { _decorator, Animation, AnimationClip, Button, Event, Label, Node, NodeEventType, Sprite, 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 { HeroInfo, HeroList } from "../common/config/heroSet";
import { IType, SkillSet } from "../common/config/SkillSet";
import { oops } from "db://oops-framework/core/Oops";
import { mLogger } from "../common/Logger";
const {property, ccclass } = _decorator;
/** 视图层对象 */
@ccclass('HListComp')
@ecs.register('HListComp', false)
export class HListComp extends CCComp {
@property(Node)
hero_icon=null!
@property(Node)
ap_node=null!
@property(Node)
hp_node=null!
@property(Node)
info_node=null!
@property(Node)
name_node=null!
@property(Node)
pre_btn=null!
@property(Node)
next_btn=null!
huuid:number=null!
private currentIndex: number = 0;
private iconVisualToken: number = 0;
debugMode: boolean = false;
onLoad() {
this.pre_btn?.on(NodeEventType.TOUCH_END, this.onPreClick, this);
this.next_btn?.on(NodeEventType.TOUCH_END, this.onNextClick, this);
}
start() {
if (HeroList && HeroList.length > 0) {
this.currentIndex = 0;
this.updateHeroView();
}
}
private onPreClick() {
if (this.currentIndex > 0) {
this.currentIndex--;
this.updateHeroView();
}
}
private onNextClick() {
if (this.currentIndex < HeroList.length - 1) {
this.currentIndex++;
this.updateHeroView();
}
}
private updateHeroView() {
this.huuid = HeroList[this.currentIndex];
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.updateHeroAnimation(this.hero_icon, this.huuid);
// 更新技能列表
this.updateSkillInfo(hero);
}
private setLabelText(node: Node, text: string) {
if (!node) return;
const label = node.getComponent(Label) || node.getComponentInChildren(Label);
if (label) {
label.string = text;
}
}
private updateHeroAnimation(node: Node, uuid: number) {
if (!node) return;
const sprite = node.getComponent(Sprite) || node.getComponentInChildren(Sprite);
if (sprite) sprite.spriteFrame = null;
const hero = HeroInfo[uuid];
if (!hero) return;
const anim = node.getComponent(Animation) || node.addComponent(Animation);
this.clearAnimationClips(anim);
this.iconVisualToken++;
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, "HListComp", `load hero animation failed ${uuid}`, err);
return;
}
if (token !== this.iconVisualToken || this.huuid !== uuid) {
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);
}
}
}
private updateSkillInfo(hero: any) {
if (!this.info_node) return;
const skills = Object.values(hero.skills || {});
for (let i = 1; i <= 5; i++) {
const line = this.info_node.getChildByName(`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 = line.getChildByName("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;
}
}
}
private updateLineTypeIcon(line: Node, iType?: IType) {
const meleeNode = line.getChildByName("Melee");
const remoteNode = line.getChildByName("remote");
const supportNode = line.getChildByName("support");
if (meleeNode) meleeNode.active = iType === IType.Melee;
if (remoteNode) remoteNode.active = iType === IType.remote;
if (supportNode) supportNode.active = iType === IType.support;
}
/** 视图对象通过 ecs.Entity.remove(ModuleViewComp) 删除组件是触发组件处理自定义释放逻辑 */
reset() {
this.node.destroy();
}
}