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

feat(herolist&skillbox): 新增英雄图鉴技能图标展示功能

Browse Source 
1. 为SSkillBoxComp新增英雄图鉴专用初始化方法，支持区分技能/驻场光环图标来源
2. 扩展技能背景色适配，支持5档英雄技能等级配色
3. 在HerosListComp中实现英雄技能图标列表刷新逻辑，支持大招和各类触发技能展示
4. 按英雄等级动态显示技能解锁状态和对应等级图标
This commit is contained in:
pan
2026-08-25 10:55:31 +08:00
parent a8aa876a74
commit 0ccf8abcf4
3 changed files with 669 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
assets/script/game/map/HerosListComp.ts
View File

@@ -22,12 +22,13 @@ import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ec
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { oops } from "db://oops-framework/core/Oops";
import { mLogger } from "../common/Logger";
import { HeroInfo, HeroList } from "../common/config/heroSet";
import { HeroInfo, HeroList, SkillTriggerType, LvFieldEntry, LvReviveEntry, LvTriggerEntry, TriggerGrouped } from "../common/config/heroSet";
import { buildSkillDesc } from "../common/config/HeroSkillDesc";
import { GameEvent } from "../common/config/GameEvent";
import { HERO_UPGRADE_NEED_FRAGMENTS, CARD_LV_BG_COLORS } from "../common/config/GameSet";
import { CardLiteComp } from "./CardLiteComp";
import { ChipComp } from "./ChipComp";
import { SSkillBoxComp } from "./SSkillBoxComp";
import { smc } from "../common/SingletonModuleComp";
const { property, ccclass } = _decorator;
@@ -90,6 +91,14 @@ export class HerosListComp extends CCComp {
/** 技能描述节点（） */
@property(Node)
infos_node = null!
/** 技能图标容器节点（动态挂载 SSkillBoxComp 实例，展示当前英雄技能） */
@property(Node)
skills_node = null!
/** 技能小图标预制体（根节点挂 SSkillBoxComp） */
@property(Prefab)
skill_icon_prefab = null!
/** 升级特效动画节点（内含升级效果 Animation，点击升级时从头播放） */
@property(Node)
upgrade_anim_node = null!
@@ -408,6 +417,7 @@ export class HerosListComp extends CCComp {
this.updateTypeDisplay(hero)
this.updateHeroAnimation(uuid)
this.updateGrowthPanel(uuid)
this.updateSkillIcons(hero)
}
private updatePoolLvBg(card_lv: number) {
@@ -476,6 +486,112 @@ export class HerosListComp extends CCComp {
}
}
// ======================== 技能图标列表 ========================
/** 图鉴面板展示的触发技能类型（heroInfo 触发配置：死亡/战斗开始/光环/攻击后/受击/复活） */
private static readonly PANEL_TRIGGER_TYPES: SkillTriggerType[] = [
SkillTriggerType.Dead,
SkillTriggerType.FStart,
SkillTriggerType.Field,
SkillTriggerType.Atking,
SkillTriggerType.Atked,
SkillTriggerType.Revive,
]
/**
* 刷新当前英雄的技能图标列表：
* 1. 大招：skills[1] 及以后（首个为普攻，跳过）。
* 2. 触发技能：Dead/FStart/Field/Atking/Atked/Revive。
* 以局外等级（getHeroOuterLv）为当前等级，未达解锁档的显示 locked，
* 已激活的显示当前等级对应的技能等级。
*/
private updateSkillIcons(hero: typeof HeroInfo[number]) {
if (!this.skills_node || !this.skill_icon_prefab) return
// 清空旧图标（显式销毁，避免节点泄漏）
for (let i = this.skills_node.children.length - 1; i >= 0; i--) {
this.skills_node.children[i].destroy()
}
const lv = Math.max(1, smc.getHeroOuterLv(hero.uuid))
// ---- 大招：skills[1] 及以后 ----
Object.values(hero.skills).slice(1).forEach(hSkill => {
// 与 Hero.load 同式：技能等级 = 配置 lv + 英雄等级 - 2，> 0 才视为已解锁
const unlocked = hSkill.lv + lv - 2 > 0
// 技能等级展示与 buildSkillDesc 同规则：lv_entries 取 ≤lv 最大档的 s_lv
const sLv = hSkill.lv_entries?.length
? (hSkill.lv_entries.filter(e => e.lv <= lv).pop()?.s_lv ?? hSkill.lv)
: hSkill.lv
this.addSkillIcon(hSkill.uuid, sLv, !unlocked, false)
})
// ---- 触发技能：按 PANEL_TRIGGER_TYPES 顺序追加 ----
for (const type of HerosListComp.PANEL_TRIGGER_TYPES) {
if (type === SkillTriggerType.Field) {
this.addFieldIcons(hero[SkillTriggerType.Field], lv)
} else if (type === SkillTriggerType.Revive) {
this.addReviveIcon(hero[SkillTriggerType.Revive], lv)
} else {
this.addTriggerIcons(hero[type] as TriggerGrouped | undefined, lv)
}
}
}
/**
* 实例化技能小图标并初始化
* @param s_uuid 技能 UUID（SkillSet 或 FieldSkillSet）
* @param s_lv 当前等级对应的技能等级（locked 时为解锁预览档）
* @param locked 当前等级未激活 → 显示锁定遮罩
* @param isField true 表示驻场光环词条（图标取 FieldSkillSet）
*/
private addSkillIcon(s_uuid: number, s_lv: number, locked: boolean, isField: boolean) {
const node = instantiate(this.skill_icon_prefab)
node.name = `skill_${s_uuid}`
const comp = node.getComponent(SSkillBoxComp) || node.addComponent(SSkillBoxComp)
comp.initHeroSkill(s_uuid, s_lv, locked, isField)
this.skills_node.addChild(node)
}
/**
* 触发技能（dead/fstart/atking/atked）：按 s_uuid 分组，取 ≤lv 最大档判定激活；
* 未激活时预览最低档（与 resolveTriggerByLv 同语义）
*/
private addTriggerIcons(grouped: TriggerGrouped | undefined, lv: number) {
if (!grouped) return
for (const key in grouped) {
const entries = grouped[key]
if (!entries?.length) continue
const sorted = [...entries].sort((a, b) => a.lv - b.lv)
let active: LvTriggerEntry | undefined
for (const e of sorted) { if (e.lv <= lv) active = e }
const pick = active ?? sorted[0]
this.addSkillIcon(Number(key), pick.s_lv ?? 1, !active, false)
}
}
/** 驻场光环：未激活取最低档预览，激活取 ≤lv 最大档的词条列表 */
private addFieldIcons(field: LvFieldEntry[] | undefined, lv: number) {
if (!field?.length) return
const sorted = [...field].sort((a, b) => a.lv - b.lv)
let active: LvFieldEntry | undefined
for (const e of sorted) { if (e.lv <= lv) active = e }
const pick = active ?? sorted[0]
for (const entry of pick.uuids) {
this.addSkillIcon(entry.uuid, pick.lv, !active, true)
}
}
/** 复活技能：未激活取最低档预览，激活取 ≤lv 最大档 */
private addReviveIcon(revive: LvReviveEntry[] | undefined, lv: number) {
if (!revive?.length) return
const sorted = [...revive].sort((a, b) => a.lv - b.lv)
let active: LvReviveEntry | undefined
for (const e of sorted) { if (e.lv <= lv) active = e }
const pick = active ?? sorted[0]
this.addSkillIcon(pick.s_uuid, pick.lv, !active, false)
}
// ======================== 英雄动画 ========================
private updateHeroAnimation(uuid: number) {