feat: 完成天赋系统重做与UI界面优化

1.  新增天赋等级配置与经验升级逻辑,支持连升多级
2.  重构天赋UI界面,添加等级进度条与页签状态显示
3.  优化技能卡片UI,新增技能名称显示与等级格式调整
4.  调整英雄界面布局,修复UI错位问题
5.  新增页签背景预制件与天赋道具UI样式
This commit is contained in:
panFD
2026-08-26 08:50:54 +08:00
parent 93a3c69d22
commit 5b965bba60
13 changed files with 9888 additions and 6078 deletions

View File

@@ -13,13 +13,13 @@
* - TalentItemComp —— 单张迷你升级卡
* - smc —— 天赋等级表/点数/升级/重置
*/
import { _decorator, instantiate, Label, Node, NodeEventType, Prefab, UITransform } from "cc";
import { _decorator, instantiate, Label, Node, NodeEventType, Prefab, ProgressBar, 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 {
TalentSet, TalentTier,
TALENT_TIER_UNLOCK_THRESHOLD,
getTalentTierInvestedPoints, getTalentUpgradeCost, isTalentTierUnlocked,
getTalentLevelExp, getTalentTierInvestedPoints, getTalentUpgradeCost, isTalentTierUnlocked,
} from "../common/config/TalentSet";
import { GameEvent } from "../common/config/GameEvent";
import { UIID } from "../common/config/GameUIConfig";
@@ -39,6 +39,12 @@ const TIER_TAB_TEXT: Record<number, { title: string; lockName: string }> = {
/** 阶位页签选中高亮子节点名(可选,编辑器侧搭建) */
const TAB_SELECTED_CHILD = "sp_on";
/** 阶位页签锁定图标子节点名(可选;阶位未解锁时显示) */
const TAB_LOCKED_CHILD = "locked";
/** 阶位页签未选中态子节点名(可选;非当前选中页签时显示) */
const TAB_INACTIVE_CHILD = "noactive";
/** TalentsComp —— 天赋加点页组件(阶位 Tab 单屏聚焦) */
@ccclass('TalentsComp')
@ecs.register('Talents', false)
@@ -53,6 +59,12 @@ export class TalentsComp extends CCComp {
@property({ type: Label, tooltip: "页头可用天赋点" })
lbl_points: Label = null!;
@property({ type: Label, tooltip: "天赋等级文案(Lv.x 样式)" })
lbl_lv: Label = null!;
@property({ type: ProgressBar, tooltip: "当前等级经验进度条" })
progress_exp: ProgressBar = null!;
@property({ type: Node, tooltip: "一阶页签节点" })
tab_basic: Node = null!;
@@ -129,7 +141,18 @@ export class TalentsComp extends CCComp {
if (!this.talents_content || !this.prefab_talent_item) return;
const levels = smc.getTalentLevels();
if (this.lbl_points) this.lbl_points.string = `天赋点 ${smc.getTalentPoints()}`;
if (this.lbl_points) this.lbl_points.string = `${smc.getTalentPoints()}`;
// 天赋等级(Lv.x)与当前等级经验进度
const talentLv = smc.getTalentLevel();
if (this.lbl_lv) this.lbl_lv.string = `Lv.${talentLv}`;
if (this.progress_exp) {
const needExp = getTalentLevelExp(talentLv);
// 满级后进度条显示为满
this.progress_exp.progress = needExp > 0
? Math.min(1, smc.getTalentExp() / needExp)
: 1;
}
// 仅首次进入时默认选中已解锁的最高阶,后续刷新保持玩家当前选择
if (!this.inited) {
@@ -142,21 +165,30 @@ export class TalentsComp extends CCComp {
this.refreshGrid(levels);
}
/** 页签文案 + 解锁进度 + 选中高亮(sp_on 子节点可选) */
/** 页签文案 + 解锁进度 + 选中高亮(sp_on)+ 锁定图标(locked)+ 未选中态(noactive) */
private refreshTabs(levels: Record<number, number>): void {
for (const [tier, tab] of this.tabNodes) {
const text = TIER_TAB_TEXT[tier];
const unlocked = isTalentTierUnlocked(levels, tier);
if (tab.label) {
if (tier === TalentTier.Basic) {
if (unlocked) {
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.label.string = `${text.title} ${invested}/${TALENT_TIER_UNLOCK_THRESHOLD}`;
}
}
// 锁定图标:该阶未解锁时显示,解锁后隐藏(一阶恒解锁,节点可缺省)
const locked = tab.node?.getChildByName(TAB_LOCKED_CHILD);
if (locked) locked.active = !unlocked;
const selected = tier === this.curTier;
// 未选中态节点:非当前激活页签时显示(与 sp_on 选中高亮互斥)
const inactive = tab.node?.getChildByName(TAB_INACTIVE_CHILD);
if (inactive) inactive.active = !selected;
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);
tab.node?.getChildByName(TAB_SELECTED_CHILD) && (tab.node.getChildByName(TAB_SELECTED_CHILD)!.active = selected);
}
}