feat(talent): 重构天赋系统为三阶结构并实现全新UI

1.  重构天赋系统为一阶基础/二阶专精/三阶超强三阶结构,移除前置天赋要求改为阶位累计点数解锁
2.  新增阶位解锁校验逻辑与天赋点投入统计
3.  重做天赋UI为三阶Tab页签+迷你升级卡样式,支持状态展示与一键升级
4.  补充新的天赋配置与属性加成,更新天赋系统文档
5.  修复属性计算问题,新增暴击伤害与穿刺伤害加成支持
This commit is contained in:
pan
2026-08-25 16:29:11 +08:00
parent ac6fc21fb6
commit df519fdc4e
12 changed files with 3595 additions and 1165 deletions

View File

@@ -2189,11 +2189,13 @@ export class MissionCardComp extends CCComp {
if (model.fac === FacSet.HERO) {
model.defense = hero.def;
model.critical = 0;
model.critical_damage = 0;
model.stun_chance = 0;
model.freeze_chance = 0;
// 风怒机制已停用: 升级重算不再重置风怒
// model.wfuny = 0;
model.puncture_chance = 0;
model.puncture_dmg_bonus = 0;
model.knockback_distance = 0;
model.heal_power = 0;
model.buff_power = 0;

View File

@@ -1,28 +1,36 @@
/**
* @file TalentItemComp.ts
* @description 天赋图鉴项组件(UI 视图层)
* @description 天赋迷你升级卡组件(UI 视图层)
*
* 职责:
* 1. 接收 TalentsComp 下发的天赋卡配置(技能卡)。
* 2. 渲染名称、描述、图标和背景。
* 3. 背景颜色根据 wave 映射为对应的 poolLv。
* 1. 接收 TalentsComp 下发的天赋配置 + 当前等级 + 阶位解锁态,渲染迷你点选卡。
* 2. 卡面自包含:图标 / 名称 / 当前已生效数值(Lv0 显示每级数值引导)/ 右下「当前/满级」角标。
* 3. 状态机:可升级(右上 + 徽标,绿光呼吸)/ 满级(MAX 金角标)/ 阶未解锁(半透明 + 锁)。
* 4. 点击回调上抛(含 + 徽标与卡体),升级校验与 toast 统一由 TalentsComp 处理(单一决策点)。
*
* 依赖:
* - CardSet.CardConfig —— 单条卡牌配置
* - SkillSet —— 获取技能图标
* - TalentSet.TalentConfig / TalentTier / getTalentDisplayText —— 配置与卡面文案
* - CardBgComp —— 阶位品质底框(Ⅰ蓝 / Ⅱ紫 / Ⅲ金)
* - smc.uiconsAtlas —— 图标解析(缺省回退资源目录)
*/
import { _decorator, Label, Sprite, SpriteFrame } from "cc";
import { _decorator, Label, Node, NodeEventType, Sprite, SpriteFrame, UIOpacity } 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 { CardConfig } from "../common/config/CardSet";
import { FieldSkillSet, SkillSet } from "../common/config/SkillSet";
import { TalentConfig, TalentTier, getTalentDisplayText } from "../common/config/TalentSet";
import { CardBgComp } from "./CardBgComp";
import { smc } from "../common/SingletonModuleComp";
import { oops } from "db://oops-framework/core/Oops";
const { ccclass, property } = _decorator;
/** TalentItemComp —— 天赋图鉴项组件 */
/** 阶位 → 品质底框 card_lv(CARD_LV_BG_COLORS:2=blue、3=purple、4=yellow) */
const TIER_TO_BG_LV: Record<number, number> = {
[TalentTier.Basic]: 2,
[TalentTier.Specialized]: 3,
[TalentTier.Super]: 4,
};
/** TalentItemComp —— 天赋迷你升级卡组件 */
@ccclass('TalentItemComp')
@ecs.register('TalentItem', false)
export class TalentItemComp extends CCComp {
@@ -30,53 +38,86 @@ export class TalentItemComp extends CCComp {
@property({ type: Label, tooltip: "天赋名称" })
lbl_name: Label = null!;
@property({ type: Label, tooltip: "天赋说明" })
@property({ type: Label, tooltip: "当前已生效数值(Lv0 显示每级引导)" })
lbl_info: Label = null!;
@property({ type: Label, tooltip: "等级角标(当前/满级)" })
lbl_lv: Label = null!;
@property({ type: Sprite, tooltip: "天赋图标" })
icon: Sprite = null!;
@property({ type: CardBgComp, tooltip: "卡牌背景组件" })
@property({ type: CardBgComp, tooltip: "卡牌背景组件(阶位品质色)" })
bg: CardBgComp = null!;
@property({ type: Node, tooltip: "右上 + 升级徽标(可升级时显示)" })
node_plus: Node = null!;
@property({ type: Node, tooltip: "MAX 满级角标" })
node_max: Node = null!;
@property({ type: Node, tooltip: "阶位未解锁遮罩/锁图标" })
node_lock: Node = null!;
/** 点击回调(卡体与 + 徽标同源上抛),由父级统一校验升级 */
public onTalentTap: ((uuid: number) => void) | null = null;
/** 当前展示的天赋 uuid(回调携带) */
private curUuid: number = 0;
protected onLoad(): void {
this.node.on(NodeEventType.TOUCH_END, this.onTap, this);
}
protected onDestroy(): void {
this.node.off(NodeEventType.TOUCH_END, this.onTap, this);
}
/**
* 刷新单条天赋展示
* @param config CardPoolList 中的天赋卡(技能卡)配置
* 刷新迷你卡展示
* @param cfg 天赋配置(TalentSet 条目)
* @param lv 当前等级
* @param tierUnlocked 所属阶位是否已解锁
* @param canUp 父级预判的"可升级"(阶位解锁 + 未满级 + 点数足够)
*/
public updateItem(config: CardConfig): void {
if (!config) return;
public updateItem(cfg: TalentConfig, lv: number, tierUnlocked: boolean, canUp: boolean): void {
if (!cfg) return;
this.curUuid = cfg.uuid;
if (this.lbl_name) this.lbl_name.string = config.name ?? "";
if (this.lbl_info) this.lbl_info.string = config.info ?? "";
if (this.lbl_name) this.lbl_name.string = cfg.name;
// 卡面自包含:已加点显示当前生效数值,未加点显示每级数值引导
if (this.lbl_info) this.lbl_info.string = getTalentDisplayText(cfg, lv);
if (this.lbl_lv) this.lbl_lv.string = `${lv}/${cfg.max_lv}`;
// 直接复用 CardSet 中已映射好的 card_lv,保证与技能卡牌背景一致
// CardSet 通过 waveToCardLv[wave] 由 SKILL_CARD_WAVES 索引推导(wave 1→1, 5→2, 8→3)
if (this.bg) {
this.bg.apply(config.card_lv || 1);
// 阶位品质底框:Ⅰ蓝 / Ⅱ紫 / Ⅲ金
if (this.bg) this.bg.apply(TIER_TO_BG_LV[cfg.tier] ?? 1);
// 图标:uiconsAtlas 优先,资源目录回退(与 TalentItemComp 旧版/SCardComp 口径一致)
if (this.icon && cfg.icon) {
let frame: SpriteFrame | null = null;
if (smc.uiconsAtlas) {
frame = smc.uiconsAtlas.getSpriteFrame(cfg.icon);
}
if (!frame) {
frame = oops.res.get("game/heros/cards/" + cfg.icon, SpriteFrame) as SpriteFrame;
}
if (frame) this.icon.spriteFrame = frame;
}
// 设置图标:驻场卡(skill=undefined 但有 field)走 FieldSkillSet,否则走 SkillSet
// 与 SCardComp 保持一致,避免驻场卡无 icon 显示
if (this.icon) {
let iconId: string | undefined;
if (!config.skill && config.field && config.field.length > 0) {
// 驻场卡:用 FieldSkillSet[field[0]].icon
const fieldUuid = config.field[0].uuid;
iconId = FieldSkillSet[fieldUuid]?.icon || `${fieldUuid}`;
} else if (config.skill) {
// 技能卡:用 SkillSet[skill].icon
iconId = SkillSet[config.skill]?.icon;
}
if (iconId) {
if (smc.uiconsAtlas) {
const frame = smc.uiconsAtlas.getSpriteFrame(iconId);
if (frame) this.icon.spriteFrame = frame;
} else {
const sf = oops.res.get("game/heros/cards/" + iconId, SpriteFrame) as SpriteFrame;
if (sf) this.icon.spriteFrame = sf;
}
}
}
// 状态徽标:满级 MAX / 可升级 + / 阶位锁定 🔒
const maxed = lv >= cfg.max_lv;
if (this.node_max) this.node_max.active = maxed;
if (this.node_plus) this.node_plus.active = !maxed && tierUnlocked && canUp;
if (this.node_lock) this.node_lock.active = !tierUnlocked;
// 阶位锁定整卡压暗(UIOpacity:Cocos 3.x 节点透明度组件)
const uo = this.node.getComponent(UIOpacity) ?? this.node.addComponent(UIOpacity);
uo.opacity = tierUnlocked ? 255 : 110;
}
/** 卡体/+ 徽标点击:上抛 uuid,升级校验与提示由 TalentsComp 统一处理 */
private onTap(): void {
this.onTalentTap?.(this.curUuid);
}
/** ECS 组件移除时销毁节点(CCComp 抽象方法实现) */

View File

@@ -1,106 +1,233 @@
/**
* @file TalentsComp.ts
* @description 天赋图鉴页组件(UI 视图层)
* @description 天赋加点页组件(UI 视图层)
*
* 职责:
* 1. 展示当前所有天赋卡(技能卡)的图鉴。
* 2. 从 CardPoolList 获取所有的 type=Skill 卡牌。
* 3. 兼容旧的 `@ecs.register('Talents')` 资源引用。
* 1. 三阶页签(Ⅰ 基础 / Ⅱ 专精 / Ⅲ 超强)状态机:单屏聚焦当前阶位的迷你天赋卡。
* 2. 页签常显解锁进度(前阶投入 x/10),点击卡/+ 徽标升级(smc.upgradeTalent)。
* 3. 监听 GameEvent.TALENT_UPDATE 全量重渲染(23 条卡片,无需虚拟列表)。
* 4. 看广告重置入口:CommonPrompt 二次确认后调 smc.resetTalents() 退还全部点数。
*
* 依赖:
* - CardPoolList(CardSet)—— 获取技能卡配置
* - TalentItemComp —— 单条天赋图鉴项视图
* - TalentSet(TalentSet/TalentTier/isTalentTierUnlocked/getTalentTierInvestedPoints)—— 配置与阶位校验
* - TalentItemComp —— 单张迷你升级卡
* - smc —— 天赋等级表/点数/升级/重置
*/
import { _decorator, instantiate, Node, Prefab, UITransform } from "cc";
import { _decorator, instantiate, Label, Node, NodeEventType, Prefab, UITransform } 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 { mLogger } from "../common/Logger";
import { CardConfig } from "../common/config/CardSet";
import { SkillCardList } from "../common/config/SCardSet";
import {
TalentSet, TalentTier,
TALENT_TIER_UNLOCK_THRESHOLD,
getTalentTierInvestedPoints, getTalentUpgradeCost, isTalentTierUnlocked,
} from "../common/config/TalentSet";
import { GameEvent } from "../common/config/GameEvent";
import { UIID } from "../common/config/GameUIConfig";
import { TalentItemComp } from "./TalentItemComp";
import { smc } from "../common/SingletonModuleComp";
import { oops } from "db://oops-framework/core/Oops";
const { ccclass, property } = _decorator;
/** TalentsComp —— 天赋图鉴信息页组件 */
/** 阶位页签展示文案(锁定态追加投入进度) */
const TIER_TAB_TEXT: Record<number, { title: string; lockName: string }> = {
[TalentTier.Basic]: { title: "Ⅰ 基础", lockName: "一阶" },
[TalentTier.Specialized]: { title: "Ⅱ 专精", lockName: "一阶" },
[TalentTier.Super]: { title: "Ⅲ 超强", lockName: "二阶" },
};
/** 阶位页签选中高亮子节点名(可选,编辑器侧搭建) */
const TAB_SELECTED_CHILD = "sp_on";
/** TalentsComp —— 天赋加点页组件(阶位 Tab 单屏聚焦) */
@ccclass('TalentsComp')
@ecs.register('Talents', false)
export class TalentsComp extends CCComp {
@property({ type: Node, tooltip: "天赋技能列表容器" })
@property({ type: Node, tooltip: "当前阶位卡片列表容器(ScrollView content,Grid 三列)" })
talents_content: Node = null!;
@property({ type: Prefab, tooltip: "单条天赋项预制" })
@property({ type: Prefab, tooltip: "迷你天赋卡预制(TalentItemComp)" })
prefab_talent_item: Prefab = null!;
/** 调试日志开关 */
debugMode: boolean = false;
@property({ type: Label, tooltip: "页头可用天赋点" })
lbl_points: Label = null!;
/** 首次实例化缓存 */
private rendered: boolean = false;
@property({ type: Node, tooltip: "一阶页签节点" })
tab_basic: Node = null!;
/** 缓存的稳定配置顺序,避免重复渲染时列表抖动 */
private cachedConfigs: CardConfig[] = [];
@property({ type: Node, tooltip: "二阶页签节点" })
tab_special: Node = null!;
@property({ type: Node, tooltip: "三阶页签节点" })
tab_super: Node = null!;
@property({ type: Label, tooltip: "一阶页签文案" })
lbl_tab_basic: Label = null!;
@property({ type: Label, tooltip: "二阶页签文案" })
lbl_tab_special: Label = null!;
@property({ type: Label, tooltip: "三阶页签文案" })
lbl_tab_super: Label = null!;
@property({ type: Node, tooltip: "看广告重置按钮" })
btn_reset: Node = null!;
/** 当前选中的阶位(首次进入默认为已解锁的最高阶,之后由玩家切换) */
private curTier: TalentTier = TalentTier.Basic;
/** 是否已完成首次默认阶位选择 */
private inited: boolean = false;
/** 阶位 → 页签节点/文案 映射(onLoad 时装配) */
private tabNodes: Map<TalentTier, { node: Node | null; label: Label | null }> = new Map();
protected onLoad(): void {
this.tabNodes.set(TalentTier.Basic, { node: this.tab_basic, label: this.lbl_tab_basic });
this.tabNodes.set(TalentTier.Specialized, { node: this.tab_special, label: this.lbl_tab_special });
this.tabNodes.set(TalentTier.Super, { node: this.tab_super, label: this.lbl_tab_super });
for (const [tier, tab] of this.tabNodes) {
tab.node?.on(NodeEventType.TOUCH_END, () => this.selectTier(tier), this);
}
this.btn_reset?.on(NodeEventType.TOUCH_END, this.onResetTap, this);
}
protected onEnable(): void {
// 升级/重置/加点变动统一走 TALENT_UPDATE 事件驱动全量刷新
oops.message.on(GameEvent.TALENT_UPDATE, this.refreshUI, this);
this.refreshUI();
}
/** 重新拉取最新数据并刷新所有子项 */
protected onDisable(): void {
oops.message.off(GameEvent.TALENT_UPDATE, this.refreshUI, this);
}
protected onDestroy(): void {
for (const [, tab] of this.tabNodes) {
tab.node?.targetOff(this);
}
this.btn_reset?.targetOff(this);
}
/** 切换阶位页签:锁定阶允许查看(卡片呈锁定态),并提示解锁条件 */
private selectTier(tier: TalentTier): void {
if (tier === this.curTier) return;
this.curTier = tier;
const levels = smc.getTalentLevels();
if (!isTalentTierUnlocked(levels, tier)) {
const prev = tier - 1;
const invested = getTalentTierInvestedPoints(levels, prev);
oops.gui.toast(`${TIER_TAB_TEXT[tier].lockName}投入 ${invested}/${TALENT_TIER_UNLOCK_THRESHOLD} 点解锁本阶`);
}
this.refreshUI();
}
/** 全量刷新:页头点数 + 页签解锁进度 + 当前阶位卡片列表 */
public refreshUI(): void {
if (!this.talents_content || !this.prefab_talent_item) return;
const levels = smc.getTalentLevels();
// 第一次:实例化所有子节点
if (!this.rendered) {
// 获取所有天赋(技能卡)并按 wave 和 uuid 排序
this.cachedConfigs = [...SkillCardList]
.sort((a, b) => {
const waveA = a.wave || 1;
const waveB = b.wave || 1;
if (waveA !== waveB) return waveA - waveB;
return a.uuid - b.uuid;
});
if (this.lbl_points) this.lbl_points.string = `天赋点 ${smc.getTalentPoints()}`;
this.cachedConfigs.forEach((cfg) => {
const itemNode = instantiate(this.prefab_talent_item);
this.talents_content.addChild(itemNode);
const comp = itemNode.getComponent(TalentItemComp);
if (comp) {
comp.updateItem(cfg);
}
});
this.rendered = true;
// 动态调整容器高度
// 默认底高 1000,每行 3 个天赋信息卡,每张卡高 270,行间距 15
const totalCount = this.cachedConfigs.length;
const rows = Math.ceil(totalCount / 3);
const contentHeight = Math.max(1000, rows * 270 + (rows > 0 ? (rows - 1) * 15 : 0 + 50));
const uiTransform = this.talents_content.getComponent(UITransform);
if (uiTransform) {
uiTransform.height = contentHeight;
}
} else {
// 如果已渲染,则仅更新数据(图鉴一般不会变动,这里做个兜底更新)
this.cachedConfigs.forEach((cfg, index) => {
const child = this.talents_content.children[index];
if (!child) return;
const comp = child.getComponent(TalentItemComp);
if (!comp) return;
comp.updateItem(cfg);
});
// 仅首次进入时默认选中已解锁的最高阶,后续刷新保持玩家当前选择
if (!this.inited) {
this.inited = true;
if (isTalentTierUnlocked(levels, TalentTier.Super)) this.curTier = TalentTier.Super;
else if (isTalentTierUnlocked(levels, TalentTier.Specialized)) this.curTier = TalentTier.Specialized;
}
this.refreshTabs(levels);
this.refreshGrid(levels);
}
/** 页签文案 + 解锁进度 + 选中高亮(sp_on 子节点可选) */
private refreshTabs(levels: Record<number, number>): void {
for (const [tier, tab] of this.tabNodes) {
const text = TIER_TAB_TEXT[tier];
if (tab.label) {
if (tier === TalentTier.Basic) {
tab.label.string = text.title;
} else {
const unlocked = isTalentTierUnlocked(levels, tier);
const invested = getTalentTierInvestedPoints(levels, (tier - 1) as TalentTier);
tab.label.string = unlocked ? text.title : `${text.title} ${invested}/${TALENT_TIER_UNLOCK_THRESHOLD}`;
}
}
tab.node?.getChildByName(TAB_SELECTED_CHILD)?.setPosition(0, 0);
tab.node?.getChildByName(TAB_SELECTED_CHILD) && (tab.node.getChildByName(TAB_SELECTED_CHILD)!.active = tier === this.curTier);
}
}
/** 重建当前阶位的卡片列表(每阶 ≤10 条,直接全量实例化) */
private refreshGrid(levels: Record<number, number>): void {
this.talents_content.removeAllChildren();
const unlocked = isTalentTierUnlocked(levels, this.curTier);
const points = smc.getTalentPoints();
const cfgs = Object.values(TalentSet)
.filter(cfg => cfg.tier === this.curTier)
.sort((a, b) => a.uuid - b.uuid);
let cardHeight = 0;
for (const cfg of cfgs) {
const lv = levels[cfg.uuid] ?? 0;
const cost = getTalentUpgradeCost(lv);
// 可升级 = 阶位解锁 + 未满级 + 点数足够(+ 徽标显示依据)
const canUp = unlocked && lv < cfg.max_lv && cost > 0 && points >= cost;
const itemNode = instantiate(this.prefab_talent_item);
this.talents_content.addChild(itemNode);
const comp = itemNode.getComponent(TalentItemComp);
if (!comp) continue;
comp.updateItem(cfg, lv, unlocked, canUp);
comp.onTalentTap = (uuid: number) => this.onTalentTap(uuid);
if (!cardHeight) cardHeight = itemNode.getComponent(UITransform)?.height ?? 0;
}
// Grid 三列手算容器高度(与旧版图鉴页口径一致,spacing 15 / 上下 padding 15)
const rows = Math.ceil(cfgs.length / 3);
if (cardHeight > 0 && rows > 0) {
const contentHeight = rows * cardHeight + (rows - 1) * 15 + 30;
const uiTransform = this.talents_content.getComponent(UITransform);
if (uiTransform) uiTransform.height = contentHeight;
}
}
/** 卡片点击统一入口:阶位未解锁/已满级/点数不足分别 toast,成功升级由事件驱动刷新 */
private onTalentTap(uuid: number): void {
const cfg = TalentSet[uuid];
if (!cfg) return;
const levels = smc.getTalentLevels();
if (!isTalentTierUnlocked(levels, cfg.tier)) {
const invested = getTalentTierInvestedPoints(levels, (cfg.tier - 1) as TalentTier);
oops.gui.toast(`${TIER_TAB_TEXT[cfg.tier].lockName}投入 ${invested}/${TALENT_TIER_UNLOCK_THRESHOLD} 点解锁本阶`);
return;
}
if (smc.getTalentLv(uuid) >= cfg.max_lv) {
oops.gui.toast("该天赋已满级");
return;
}
if (!smc.upgradeTalent(uuid)) {
oops.gui.toast("天赋点不足");
}
}
/** 看广告重置入口:CommonPrompt 二次确认(广告接入前先直接确认重置) */
private onResetTap(): void {
oops.gui.open(UIID.Window, {
title: "重置天赋",
content: "观看广告后重置所有天赋等级,并全额退还已消耗的天赋点。是否继续?",
okWord: "重置",
cancelWord: "取消",
needCancel: true,
okFunc: () => smc.resetTalents(),
});
}
/** ECS 组件移除时销毁节点 */
reset() {
this.rendered = false;
this.cachedConfigs = [];
this.node.destroy();
}
protected onDestroy(): void {
super.onDestroy();
mLogger.log(this.debugMode, 'TalentsComp', "释放界面");
}
}