- 在 heroSet.ts 中添加 HeroList 数组,定义可浏览的英雄 ID 列表 - 激活角色控制器界面中的相关节点以启用功能 - 重构 HlistComp 组件,添加英雄列表翻页、属性显示、动画加载和技能信息展示逻辑 - 通过 HeroList 数组顺序浏览英雄,并展示其名称、攻击力、生命值、技能详情和类型图标
170 lines
5.5 KiB
TypeScript
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();
|
|
}
|
|
}
|