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

style(ui): 优化天赋道具项UI表现与逻辑

Browse Source 
1. 移除未激活天赋的灰阶处理，仅保留锁遮罩
2. 重构applyTierBg方法，移除背景灰阶逻辑
3. 调整天赋预制体的尺寸、缩放、文本样式与图标资源
This commit is contained in:
panFD
2026-09-08 20:46:23 +08:00
parent 07f1646013
commit 57a50578fa
3 changed files with 1743 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
assets/resources/gui/element/prefab_talent_item.prefab
View File

@@ -186,8 +186,8 @@
}, },
"_lscale": { "_lscale": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 1.4, "x": 1,
"y": 1.4, "y": 1,
"z": 1 "z": 1
}, },
"_mobility": 0, "_mobility": 0,
@@ -214,8 +214,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 154, "width": 200,
"height": 200 "height": 230
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -361,8 +361,8 @@
}, },
"_lscale": { "_lscale": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 1.4, "x": 1,
"y": 1.4, "y": 1,
"z": 1 "z": 1
}, },
"_mobility": 0, "_mobility": 0,
@@ -389,8 +389,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 154, "width": 200,
"height": 200 "height": 230
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -536,8 +536,8 @@
}, },
"_lscale": { "_lscale": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 1.4, "x": 1,
"y": 1.4, "y": 1,
"z": 1 "z": 1
}, },
"_mobility": 0, "_mobility": 0,
@@ -564,8 +564,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 154, "width": 200,
"height": 200 "height": 230
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -739,8 +739,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 220, "width": 200,
"height": 270 "height": 230
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -861,8 +861,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 220, "width": 200,
"height": 270 "height": 230
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -948,7 +948,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": 82.087, "y": 43.046,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -960,8 +960,8 @@
}, },
"_lscale": { "_lscale": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0.7, "x": 0.6,
"y": 0.7, "y": 0.6,
"z": 1 "z": 1
}, },
"_mobility": 0, "_mobility": 0,
@@ -1024,7 +1024,10 @@
"b": 255, "b": 255,
"a": 255 "a": 255
}, },
"_spriteFrame": null, "_spriteFrame": {
"__uuid__": "2239ed56-3d9b-4c36-8deb-d3a294bb241d@36114",
"__expectedType__": "cc.SpriteFrame"
},
"_type": 0, "_type": 0,
"_fillType": 0, "_fillType": 0,
"_sizeMode": 0, "_sizeMode": 0,
@@ -1037,7 +1040,10 @@
"_fillRange": 0, "_fillRange": 0,
"_isTrimmedMode": true, "_isTrimmedMode": true,
"_useGrayscale": false, "_useGrayscale": false,
"_atlas": null, "_atlas": {
"__uuid__": "2239ed56-3d9b-4c36-8deb-d3a294bb241d",
"__expectedType__": "cc.SpriteAtlas"
},
"_id": "" "_id": ""
}, },
{ {
@@ -1081,7 +1087,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": 17.465, "y": 96.421,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -1121,8 +1127,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 140, "width": 150,
"height": 40 "height": 25
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -1160,10 +1166,10 @@
"_string": "是个字长", "_string": "是个字长",
"_horizontalAlign": 1, "_horizontalAlign": 1,
"_verticalAlign": 1, "_verticalAlign": 1,
"_actualFontSize": 25, "_actualFontSize": 20,
"_fontSize": 25, "_fontSize": 20,
"_fontFamily": "Arial", "_fontFamily": "Arial",
"_lineHeight": 40, "_lineHeight": 25,
"_overflow": 2, "_overflow": 2,
"_enableWrapText": true, "_enableWrapText": true,
"_font": null, "_font": null,
@@ -1280,8 +1286,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 200, "width": 159.7,
"height": 90 "height": 63
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -1319,10 +1325,10 @@
"_string": "+10", "_string": "+10",
"_horizontalAlign": 1, "_horizontalAlign": 1,
"_verticalAlign": 1, "_verticalAlign": 1,
"_actualFontSize": 21, "_actualFontSize": 19,
"_fontSize": 20, "_fontSize": 18,
"_fontFamily": "Arial", "_fontFamily": "Arial",
"_lineHeight": 30, "_lineHeight": 21,
"_overflow": 2, "_overflow": 2,
"_enableWrapText": true, "_enableWrapText": true,
"_font": null, "_font": null,
@@ -1399,7 +1405,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": -86.761, "y": -63.477,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -1439,7 +1445,7 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 59.60546875, "width": 38.75341796875,
"height": 67 "height": 67
}, },
"_anchorPoint": { "_anchorPoint": {
@@ -1478,8 +1484,8 @@
"_string": "0/9", "_string": "0/9",
"_horizontalAlign": 2, "_horizontalAlign": 2,
"_verticalAlign": 2, "_verticalAlign": 2,
"_actualFontSize": 40, "_actualFontSize": 25,
"_fontSize": 40, "_fontSize": 25,
"_fontFamily": "Arial", "_fontFamily": "Arial",
"_lineHeight": 50, "_lineHeight": 50,
"_overflow": 0, "_overflow": 0,
@@ -1562,7 +1568,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": -92.772, "y": -79.992,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -1940,7 +1946,7 @@
"__id__": 89 "__id__": 89
} }
], ],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 95 "__id__": 95
@@ -2020,8 +2026,8 @@
}, },
"_lscale": { "_lscale": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 1.4, "x": 1,
"y": 1.4, "y": 1,
"z": 1 "z": 1
}, },
"_mobility": 0, "_mobility": 0,
@@ -2048,8 +2054,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 154, "width": 200,
"height": 200 "height": 230
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -2180,7 +2186,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": -102.773, "y": -73.713,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -2192,8 +2198,8 @@
}, },
"_lscale": { "_lscale": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 1.1, "x": 0.8,
"y": 1.1, "y": 0.8,
"z": 1 "z": 1
}, },
"_mobility": 0, "_mobility": 0,
@@ -2306,8 +2312,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 220, "width": 200,
"height": 270 "height": 230
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -2383,8 +2389,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 220, "width": 200,
"height": 270 "height": 230
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",

2105
assets/resources/gui/element/talents.prefab
View File

File diff suppressed because it is too large Load Diff

14
assets/script/game/map/TalentItemComp.ts
View File

@@ -6,7 +6,7 @@
* 1. 接收 TalentsComp 下发的天赋配置 + 当前等级 + 阶位解锁态，渲染迷你点选卡。 * 1. 接收 TalentsComp 下发的天赋配置 + 当前等级 + 阶位解锁态，渲染迷你点选卡。
* 2. 卡面自包含：图标 / 名称 / 当前已生效数值（Lv0 显示每级数值引导）/ 右下「当前/满级」角标。 * 2. 卡面自包含：图标 / 名称 / 当前已生效数值（Lv0 显示每级数值引导）/ 右下「当前/满级」角标。
* 3. 阶位背景：普通背景节点下挂 blue / red / yellow 三个颜色子节点，按阶位激活其一（Ⅰ蓝 / Ⅱ红 / Ⅲ金）。 * 3. 阶位背景：普通背景节点下挂 blue / red / yellow 三个颜色子节点，按阶位激活其一（Ⅰ蓝 / Ⅱ红 / Ⅲ金）。
* 4. 状态机：满级（MAX 金角标）/ 未激活（左上锁角标 + 背景与图标灰阶 Grayscale）。 * 4. 状态机：满级（MAX 金角标）/ 未激活（左上锁角标，不再做灰阶处理）。
* 5. 点击回调上抛卡体点击，加点确认弹窗与升级校验统一由 TalentsComp 处理（单一决策点）。 * 5. 点击回调上抛卡体点击，加点确认弹窗与升级校验统一由 TalentsComp 处理（单一决策点）。
* *
* 依赖： * 依赖：
@@ -85,11 +85,11 @@ export class TalentItemComp extends CCComp {
if (this.lbl_info) this.lbl_info.string = getTalentDisplayText(cfg, lv); if (this.lbl_info) this.lbl_info.string = getTalentDisplayText(cfg, lv);
if (this.lbl_lv) this.lbl_lv.string = `${lv}/${cfg.max_lv}`; if (this.lbl_lv) this.lbl_lv.string = `${lv}/${cfg.max_lv}`;
// 未激活（Lv0 或阶位未解锁）：背景与图标灰阶 // 未激活（Lv0 或阶位未解锁）：仅显示 node_lock 锁遮罩，不做灰阶处理
const inactive = lv <= 0 || !tierUnlocked; const inactive = lv <= 0 || !tierUnlocked;
// 阶位背景：激活对应颜色子节点（Ⅰ蓝 / Ⅱ红 / Ⅲ金） // 阶位背景：激活对应颜色子节点（Ⅰ蓝 / Ⅱ红 / Ⅲ金）
if (this.bg) this.applyTierBg(cfg.tier, inactive); if (this.bg) this.applyTierBg(cfg.tier);
// 图标：技能图标图集（gui/ui7）优先，资源目录回退（与 SCardComp 口径一致） // 图标：技能图标图集（gui/ui7）优先，资源目录回退（与 SCardComp 口径一致）
if (this.icon && cfg.icon) { if (this.icon && cfg.icon) {
@@ -101,7 +101,6 @@ export class TalentItemComp extends CCComp {
frame = oops.res.get("game/heros/cards/" + cfg.icon, SpriteFrame) as SpriteFrame; frame = oops.res.get("game/heros/cards/" + cfg.icon, SpriteFrame) as SpriteFrame;
} }
if (frame) this.icon.spriteFrame = frame; if (frame) this.icon.spriteFrame = frame;
this.icon.grayscale = inactive;
} }
// 状态角标：满级 MAX / 未激活锁角标（未加点或阶位未解锁，置于左上角） // 状态角标：满级 MAX / 未激活锁角标（未加点或阶位未解锁，置于左上角）
@@ -109,16 +108,13 @@ export class TalentItemComp extends CCComp {
if (this.node_lock) this.node_lock.active = inactive; if (this.node_lock) this.node_lock.active = inactive;
} }
/** 按阶位激活 bg 下对应颜色子节点，其余隐藏；未激活时全部开启灰阶 */ /** 按阶位激活 bg 下对应颜色子节点，其余隐藏 */
private applyTierBg(tier: TalentTier, inactive: boolean): void { private applyTierBg(tier: TalentTier): void {
const curName = TIER_BG_CHILD_NAMES[tier]; const curName = TIER_BG_CHILD_NAMES[tier];
for (const [, name] of Object.entries(TIER_BG_CHILD_NAMES)) { for (const [, name] of Object.entries(TIER_BG_CHILD_NAMES)) {
const child = this.bg.getChildByName(name); const child = this.bg.getChildByName(name);
if (!child) continue; if (!child) continue;
child.active = name === curName; child.active = name === curName;
// Sprite 内置灰阶材质，未激活天赋的背景置灰
const render = child.getComponent(Sprite);
if (render) render.grayscale = inactive;
} }
} }