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

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

View File

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

File diff suppressed because it is too large Load Diff

View File

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