/** * @file MissSkillsComp.ts * @description 场上技能卡槽位管理器组件(UI 视图层) * * 职责: * 1. 管理场上已使用的 **技能卡** 的可视化槽位(最多 10 个)。 * 2. 监听 UseSkillCard 事件,当玩家使用技能卡时实例化 SkillBoxComp 并放入空闲槽位。 * 3. 监听 RemoveSkillBox 事件,当技能生效完毕后回收槽位并重新排列。 * * 关键设计: * - slots 数组预定义了 10 个固定坐标位(2 行 × 5 列), * 每个槽位记录是否占用及对应节点引用。 * - 当某个 SkillBox 销毁时,触发 rearrangeSlots 将剩余节点 * 紧凑地重排到前置槽位,避免视觉空洞。 * - SkillBox 的实例化使用 skill_box Prefab,在编辑器中绑定。 * * 依赖: * - SkillBoxComp(SkillBoxComp.ts)—— 单个技能卡的效果控制组件 * - GameEvent.UseSkillCard —— 技能卡使用事件 * - GameEvent.RemoveSkillBox —— 技能卡移除事件 * - smc.map.MapView.scene.entityLayer —— 技能节点的父容器(SKILL 节点) */ import { mLogger } from "../common/Logger"; import { _decorator, Node, Prefab, instantiate, Vec3 } 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 { SkillBoxComp } from "./SkillBoxComp"; import { oops } from "db://oops-framework/core/Oops"; import { GameEvent } from "../common/config/GameEvent"; import { smc } from "../common/SingletonModuleComp"; const { ccclass, property } = _decorator; /** 技能槽位数据结构 */ interface SkillBoxSlot { /** 该槽位的固定 X 坐标 */ x: number; /** 该槽位的固定 Y 坐标 */ y: number; /** 是否已被占用 */ used: boolean; /** 占用该槽位的节点引用 */ node: Node | null; } /** * MissSkillsComp —— 场上技能卡槽位管理器 * * 在战斗场景中管理已激活的技能卡显示位置。 * 2 行 × 5 列 = 10 个槽位,不足时提示已满。 */ @ccclass('MissSkillsComp') @ecs.register('MissSkillsComp', false) export class MissSkillsComp extends CCComp { /** 调试日志开关 */ private debugMode: boolean = true; /** 技能卡 Prefab(在编辑器中赋值) */ @property({type: Prefab}) private skill_box: Prefab = null; /** * 预定义的 10 个槽位坐标(2 行 × 5 列): * 第 1 行 y=240:x = -320, -240, -160, -80, 0 * 第 2 行 y=320:x = -320, -240, -160, -80, 0 */ private slots: SkillBoxSlot[] = [ { x: -320, y: 240, used: false, node: null }, { x: -240, y: 240, used: false, node: null }, { x: -160, y: 240, used: false, node: null }, { x: -80, y: 240, used: false, node: null }, { x: 0, y: 240, used: false, node: null }, { x: -320, y: 320, used: false, node: null }, { x: -240, y: 320, used: false, node: null }, { x: -160, y: 320, used: false, node: null }, { x: -80, y: 320, used: false, node: null }, { x: 0, y: 320, used: false, node: null }, ]; /** 注册事件监听 */ onLoad() { oops.message.on(GameEvent.UseSkillCard, this.onUseSkillCard, this); oops.message.on(GameEvent.RemoveSkillBox, this.onRemoveSkillBox, this); } /** 移除事件监听 */ onDestroy() { oops.message.off(GameEvent.UseSkillCard, this.onUseSkillCard, this); oops.message.off(GameEvent.RemoveSkillBox, this.onRemoveSkillBox, this); } /** * 处理技能卡移除事件: * 1. 在 slots 中找到对应节点并释放。 * 2. 调用 rearrangeSlots 紧凑重排。 * * @param event 事件名 * @param args 要移除的节点引用 */ private onRemoveSkillBox(event: string, args: any) { const node = args as Node; let removed = false; for (let i = 0; i < this.slots.length; i++) { if (this.slots[i].node === node) { this.slots[i].used = false; this.slots[i].node = null; removed = true; break; } } if (removed) { this.rearrangeSlots(); } } /** * 紧凑重排:将所有有效节点按顺序移到前置槽位。 * 确保视觉上不会出现中间空洞。 */ private rearrangeSlots() { // 收集所有有效节点 const validNodes: Node[] = []; for (let i = 0; i < this.slots.length; i++) { if (this.slots[i].used && this.slots[i].node && this.slots[i].node.isValid) { validNodes.push(this.slots[i].node); } this.slots[i].used = false; this.slots[i].node = null; } // 按顺序重新分配 for (let i = 0; i < validNodes.length; i++) { if (i < this.slots.length) { this.slots[i].used = true; this.slots[i].node = validNodes[i]; validNodes[i].setPosition(new Vec3(this.slots[i].x, this.slots[i].y, 0)); } } } /** * 处理使用技能卡事件:提取 uuid 和 card_lv 后调用 addSkill。 * @param event 事件名 * @param args 卡牌数据(含 uuid、card_lv) */ private onUseSkillCard(event: string, args: any) { const payload = args ?? event; const uuid = Number(payload?.uuid ?? 0); const card_lv = Math.max(1, Math.floor(Number(payload?.card_lv ?? 1))); if (!uuid) return; this.addSkill(uuid, card_lv); } start() { } /** * 在场上添加一个技能卡: * 1. 在 slots 中查找空闲位。 * 2. 实例化 skill_box Prefab 并放置在空闲位坐标。 * 3. 获取或添加 SkillBoxComp 并初始化。 * * @param uuid 技能 UUID * @param card_lv 技能卡等级 */ addSkill(uuid: number, card_lv: number) { // 技能节点的父容器 var parent = smc.map.MapView.scene.entityLayer!.node!.getChildByName("SKILL")!; if (!this.skill_box) { mLogger.error(this.debugMode, "MissSkillsComp", "skill_box prefab not set"); return; } // 查找空闲槽位 const emptyIndex = this.slots.findIndex(slot => !slot.used); if (emptyIndex === -1) { mLogger.warn(this.debugMode, "MissSkillsComp", "skill_box slots are full"); return; } // 实例化并放入槽位 const node = instantiate(this.skill_box); node.parent = parent; node.setPosition(new Vec3(this.slots[emptyIndex].x, this.slots[emptyIndex].y, 0)); this.slots[emptyIndex].used = true; this.slots[emptyIndex].node = node; // 初始化技能效果组件 const comp = node.getComponent(SkillBoxComp) || node.addComponent(SkillBoxComp); comp.init(uuid, card_lv); } /** ECS 组件移除时销毁节点 */ reset() { this.node.destroy(); } }