feat: 添加等级颜色显示，优化卡池和英雄等级UI

1. 新增getLvColor工具函数，根据等级返回对应颜色 2. 为英雄信息面板和卡牌添加等级文本颜色设置 3. 重构卡池等级节点命名和显示逻辑，修复prefab布局 4. 新增英雄自身等级显示组件到卡牌预制件
2026-05-25 09:49:34 +08:00
parent 8d27a4bef3
commit 8026c2368e
5 changed files with 245 additions and 54 deletions
--- a/assets/resources/gui/element/card.prefab
+++ b/assets/resources/gui/element/card.prefab
@@ -68,19 +68,22 @@
      },
      {
        "__id__": 529
+      },
+      {
+        "__id__": 557
      }
    ],
    "_active": true,
    "_components": [
      {
-        "__id__": 557
+        "__id__": 563
      },
      {
-        "__id__": 559
+        "__id__": 565
      }
    ],
    "_prefab": {
-      "__id__": 561
+      "__id__": 567
    },
    "_lpos": {
      "__type__": "cc.Vec3",
@@ -12587,6 +12590,165 @@
    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
+  {
+    "__type__": "cc.Node",
+    "_name": "lvl",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 558
+      },
+      {
+        "__id__": 560
+      }
+    ],
+    "_prefab": {
+      "__id__": 562
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": -43.506,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 557
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 559
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 42.53515625,
+      "height": 54.4
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "4dqU3tFDtGbatoXWgLFpJA"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 557
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 561
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_string": "Lv.1",
+    "_horizontalAlign": 1,
+    "_verticalAlign": 1,
+    "_actualFontSize": 20,
+    "_fontSize": 20,
+    "_fontFamily": "Arial",
+    "_lineHeight": 40,
+    "_overflow": 0,
+    "_enableWrapText": true,
+    "_font": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_isItalic": false,
+    "_isBold": true,
+    "_isUnderline": false,
+    "_underlineHeight": 2,
+    "_cacheMode": 0,
+    "_enableOutline": true,
+    "_outlineColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_outlineWidth": 2,
+    "_enableShadow": false,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_shadowOffset": {
+      "__type__": "cc.Vec2",
+      "x": 2,
+      "y": 2
+    },
+    "_shadowBlur": 2,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "eccX4h4XFHYICC7LZQu1sK"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "b3jvDRk1NNjL5FE2pyUByW",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
  {
    "__type__": "cc.UITransform",
    "_name": "",
@@ -12597,7 +12759,7 @@
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 558
+      "__id__": 564
    },
    "_contentSize": {
      "__type__": "cc.Size",
@@ -12625,7 +12787,7 @@
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 560
+      "__id__": 566
    },
    "Lock": null,
    "unLock": null,
@@ -12653,9 +12815,12 @@
    "HF_node": {
      "__id__": 290
    },
-    "lv_node": {
+    "pool_lv_node": {
      "__id__": 491
    },
+    "lvl_node": {
+      "__id__": 560
+    },
    "ap_node": {
      "__id__": 529
    },
--- a/assets/resources/gui/element/pool_lv.prefab
+++ b/assets/resources/gui/element/pool_lv.prefab
@@ -90,7 +90,7 @@
      "__id__": 1
    },
    "_children": [],
-    "_active": true,
+    "_active": false,
    "_components": [
      {
        "__id__": 3
@@ -230,7 +230,7 @@
        "__id__": 9
      }
    ],
-    "_active": false,
+    "_active": true,
    "_components": [
      {
        "__id__": 15
@@ -461,7 +461,7 @@
        "__id__": 25
      }
    ],
-    "_active": false,
+    "_active": true,
    "_components": [
      {
        "__id__": 31
@@ -472,8 +472,8 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 9.508,
+      "x": 12.84,
+      "y": 4.69,
      "z": 0
    },
    "_lrot": {
@@ -831,7 +831,7 @@
        "__id__": 47
      }
    ],
-    "_active": false,
+    "_active": true,
    "_components": [
      {
        "__id__": 53
@@ -842,8 +842,8 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 9.508,
+      "x": 13.803,
+      "y": 4.931,
      "z": 0
    },
    "_lrot": {
@@ -1340,7 +1340,7 @@
        "__id__": 75
      }
    ],
-    "_active": false,
+    "_active": true,
    "_components": [
      {
        "__id__": 81
@@ -1351,8 +1351,8 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 9.508,
+      "x": 14.526,
+      "y": 5.654,
      "z": 0
    },
    "_lrot": {
@@ -1988,7 +1988,7 @@
        "__id__": 109
      }
    ],
-    "_active": false,
+    "_active": true,
    "_components": [
      {
        "__id__": 115
@@ -1999,8 +1999,8 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 9.508,
+      "x": 15.249,
+      "y": 6.376,
      "z": 0
    },
    "_lrot": {
@@ -2775,7 +2775,7 @@
        "__id__": 149
      }
    ],
-    "_active": false,
+    "_active": true,
    "_components": [
      {
        "__id__": 155
@@ -2786,8 +2786,8 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 9.508,
+      "x": 14.285,
+      "y": 5.654,
      "z": 0
    },
    "_lrot": {
--- a/assets/script/game/common/config/GameSet.ts
+++ b/assets/script/game/common/config/GameSet.ts
@@ -1,3 +1,5 @@
+import { Color } from "cc";
+
 /** 碰撞分组 */
 export enum BoxSet {
     //物理碰撞tag
@@ -121,3 +123,14 @@ export class NumberFormatter {
        }
    }
 }
+
+export function getLvColor(lv: number): Color {
+    switch (lv) {
+        case 2: return new Color("#2ECC71");
+        case 3: return new Color("#3498DB");
+        case 4: return new Color("#9B59B6");
+        case 5: return new Color("#F1C40F");
+        case 6: return new Color("#E74C3C");
+        default: return Color.WHITE;
+    }
+}
--- a/assets/script/game/map/CardComp.ts
+++ b/assets/script/game/map/CardComp.ts
@@ -33,6 +33,7 @@ import { smc } from "../common/SingletonModuleComp";
 import { UIID } from "../common/config/GameUIConfig";
 import { HeroAttrsComp } from "../hero/HeroAttrsComp";
 import { TalentType } from "../common/config/TalentSet";
+import { getLvColor } from "../common/config/GameSet";
 import { MissionEconomy } from "./MissionEconomy";


@@ -88,7 +89,11 @@ export class CardComp extends CCComp {
    HF_node=null!

    @property(Node)
-    lv_node=null!
+    pool_lv_node=null!  //英雄对应的卡池等级
+    
+    @property(Label)
+    lvl_node: Label = null! //英雄本身的等级
+
    @property(Node)
    ap_node=null!
    @property(Node)
@@ -705,15 +710,15 @@ export class CardComp extends CCComp {

        // ---- 卡牌等级标识 ----
        const cardLvStr = `lv${this.cardData.pool_lv}`;
-        if (this.lv_node) {
-            this.lv_node.children.forEach(child => {
-                if (child.name === "light") {
-                    child.active = false;
-                } else if (child.name === "bg") {
-                    child.active = true;
-                } else {
+        if (this.pool_lv_node) {
+            this.pool_lv_node.children.forEach(child => {
+                // if (child.name === "light") {
+                //     child.active = false;
+                // } else if (child.name === "bg") {
+                //     child.active = true;
+                // } else {
                    child.active = (child.name === cardLvStr);
-                }
+                // }
            });
        }

@@ -743,11 +748,11 @@ export class CardComp extends CCComp {
            });
        }
        
-        if (this.lv_node) {
-            const widget = this.lv_node.getComponent(Widget);
+        if (this.pool_lv_node) {
+            const widget = this.pool_lv_node.getComponent(Widget);
            if (widget) widget.updateAlignment();
            
-            this.lv_node.children.forEach(child => {
+            this.pool_lv_node.children.forEach(child => {
                const childWidget = child.getComponent(Widget);
                if (childWidget) childWidget.updateAlignment();
            });
@@ -817,11 +822,15 @@ export class CardComp extends CCComp {
        }

        if(this.card_type===CardType.Hero){
-            // 英雄卡：显示英雄名 + 星级 + AP/HP
+            // 英雄卡：显示英雄名 + AP/HP
            const hero = HeroInfo[this.card_uuid];
-            const heroLv = Math.max(1, Math.floor(this.cardData.hero_lv ?? hero?.lv ?? 1));
-            const suffix = heroLv >= 2 ? "★".repeat(heroLv - 1) : "";
-            this.setLabel(this.name_node, `${suffix}${hero?.name || ""}${suffix}`);
+            const heroLv = Math.max(1,  hero?.lv);
+            this.setLabel(this.name_node, `${hero?.name || ""}`);
+            if (this.lvl_node) {
+                this.lvl_node.string = `Lv.${heroLv}`;
+                this.lvl_node.color = getLvColor(heroLv);
+                this.lvl_node.node.active = true;
+            }
            this.ap_node.getChildByName("val").getComponent(Label).string = `${(hero?.ap ?? 0) * heroLv}`;
            this.hp_node.getChildByName("val").getComponent(Label).string = `${(hero?.hp ?? 0) * heroLv}`;
            if (this.oinfo_node) {
@@ -838,6 +847,7 @@ export class CardComp extends CCComp {
                this.oinfo_node.active = false;
            }
        }else if(this.card_type===CardType.Skill){
+            if (this.lvl_node) this.lvl_node.node.active = false;
            // 技能卡：显示技能名 + 品质后缀 + 描述
            const skill = SkillSet[this.card_uuid];
            const skillCard = CardPoolList.find(c => c.uuid === this.card_uuid);
@@ -855,6 +865,7 @@ export class CardComp extends CCComp {
                this.oinfo_node.active = false;
            }
        }else{
+            if (this.lvl_node) this.lvl_node.node.active = false;
            // 特殊卡（升级 / 刷新）：显示卡名 + 品质后缀 + 描述
            const specialCard = this.card_type === CardType.SpecialUpgrade
                ? SpecialUpgradeCardList[this.card_uuid]
@@ -998,11 +1009,11 @@ export class CardComp extends CCComp {
                }
            });
        }
-        if (this.lv_node) {
-            const widget = this.lv_node.getComponent(Widget);
+        if (this.pool_lv_node) {
+            const widget = this.pool_lv_node.getComponent(Widget);
            if (widget) widget.updateAlignment();
            
-            this.lv_node.children.forEach(child => {
+            this.pool_lv_node.children.forEach(child => {
                const childWidget = child.getComponent(Widget);
                if (childWidget) childWidget.updateAlignment();
            });
@@ -1073,6 +1084,7 @@ export class CardComp extends CCComp {
        if (this.ap_node) this.ap_node.active = false;
        if (this.hp_node) this.hp_node.active = false;
        if (this.oinfo_node) this.oinfo_node.active = false;
+        if (this.lvl_node) this.lvl_node.node.active = false;
        // if (this.Ckind_node) {
        //     this.Ckind_node.children.forEach(child => {
        //         child.active = false;
@@ -1086,8 +1098,8 @@ export class CardComp extends CCComp {
        //     this.HF_node.children.forEach(child => child.active = false);
        // }
        // if (this.NF_node) this.NF_node.active = false;
-        // if (this.lv_node) {
-        //     this.lv_node.children.forEach(child => child.active = false);
+        // if (this.pool_lv_node) {
+        //     this.pool_lv_node.children.forEach(child => child.active = false);
        // }
        if (this.cost_node) this.cost_node.active = false;
        if (this.icon_node) (this.icon_node as Node).setScale(new Vec3(1, 1, 1));
--- a/assets/script/game/map/HInfoComp.ts
+++ b/assets/script/game/map/HInfoComp.ts
@@ -34,7 +34,7 @@ import { UIID } from "../common/config/GameUIConfig";
 import { mLogger } from "../common/Logger";
 import { MissionHeroComp } from "./MissionHeroComp";
 import { MoveComp } from "../hero/MoveComp";
-import { FacSet } from "../common/config/GameSet";
+import { FacSet, getLvColor } from "../common/config/GameSet";
 import { MissionEconomy } from "./MissionEconomy";

 const {property, ccclass } = _decorator;
@@ -70,7 +70,7 @@ export class HInfoComp extends CCComp {
    lv_node: Label = null!

    @property(Node)
-    pool_lv_node: Node = null!
+    pool_lvnode: Node = null!
    @property(Node)
    ap_node=null!

@@ -165,19 +165,20 @@ export class HInfoComp extends CCComp {
        if (this.lv_node) {
            const currentLv = this.model.lv ?? 1;
            this.lv_node.string = `Lv.${currentLv}`;
+            this.lv_node.color = getLvColor(currentLv);
        }
        
        // ---- 卡池等级标识 ----
-        if (this.pool_lv_node) {
+        if (this.pool_lvnode) {
            const poolLvStr = `lv${this.model.pool_lv ?? 1}`;
-            this.pool_lv_node.children.forEach(child => {
-                if (child.name === "light") {
-                    child.active = false;
-                } else if (child.name === "bg") {
-                    child.active = true;
-                } else {
+            this.pool_lvnode.children.forEach(child => {
+                // if (child.name === "light") {
+                //     child.active = false;
+                // } else if (child.name === "bg") {
+                //     child.active = true;
+                // } else {
                    child.active = (child.name === poolLvStr);
-                }
+                // }
            });
        }