feat(技能UI): 添加技能冷却遮罩显示功能

为SkillBoxComp组件新增CD遮罩的初始化与帧更新逻辑，根据技能触发间隔动态计算冷却进度调整多个技能相关预制体的布局，添加cd_mask精灵节点以支持冷却UI展示优化部分技能框的UI排版与节点配置
2026-06-04 21:12:12 +08:00
parent ac1c810636
commit 998300f721
4 changed files with 276 additions and 48 deletions
--- a/assets/resources/gui/element/heromove.prefab
+++ b/assets/resources/gui/element/heromove.prefab
@@ -99,7 +99,7 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 200,
+      "x": 183.23,
      "y": 177,
      "z": 0
    },
@@ -446,6 +446,8 @@
      "__id__": 0
    },
    "fileId": "b7CXK9ttxDz5mrJpDB4qA4",
+    "instance": null,
+    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
@@ -476,7 +478,7 @@
    "_lpos": {
      "__type__": "cc.Vec3",
      "x": 100,
-      "y": 200,
+      "y": 215.538,
      "z": 0
    },
    "_lrot": {
@@ -781,8 +783,6 @@
      "__id__": 0
    },
    "fileId": "adFmHHJ5BBAY0CazvLDgGw",
-    "instance": null,
-    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
@@ -822,6 +822,8 @@
      "__id__": 0
    },
    "fileId": "36Na+WXPtJRbtR9UQnCyaj",
+    "instance": null,
+    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
@@ -852,7 +854,7 @@
    "_lpos": {
      "__type__": "cc.Vec3",
      "x": 100,
-      "y": 117.776,
+      "y": 100.445,
      "z": 0
    },
    "_lrot": {
@@ -1157,8 +1159,6 @@
      "__id__": 0
    },
    "fileId": "96QFNOz55OyZEByIPMUwVi",
-    "instance": null,
-    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
@@ -1198,6 +1198,8 @@
      "__id__": 0
    },
    "fileId": "06y3o47t5NjZX9yks6rQWL",
+    "instance": null,
+    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
@@ -1227,7 +1229,7 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 0,
+      "x": 14.536,
      "y": 250,
      "z": 0
    },
@@ -1574,6 +1576,8 @@
      "__id__": 0
    },
    "fileId": "f2j7DYVutESIJc8Q7SiM91",
+    "instance": null,
+    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
@@ -1603,7 +1607,7 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 0,
+      "x": 9.847,
      "y": 74.669,
      "z": 0
    },
@@ -1950,6 +1954,8 @@
      "__id__": 0
    },
    "fileId": "cdrD/D+WdDiZtHCrbPOfP7",
+    "instance": null,
+    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
--- a/assets/resources/gui/element/sbox.prefab
+++ b/assets/resources/gui/element/sbox.prefab
@@ -41,19 +41,22 @@
      },
      {
        "__id__": 64
-      }
-    ],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 70
      },
      {
        "__id__": 72
      }
    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 78
+      },
+      {
+        "__id__": 80
+      }
+    ],
    "_prefab": {
-      "__id__": 74
+      "__id__": 82
    },
    "_lpos": {
      "__type__": "cc.Vec3",
@@ -1265,11 +1268,13 @@
      "__id__": 0
    },
    "fileId": "a33ReyWcpAoZY5ieotS6Ir",
+    "instance": null,
+    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
    "__type__": "cc.Node",
-    "_name": "SkillFrame_01_Border_Blue",
+    "_name": "cdui",
    "_objFlags": 0,
    "__editorExtras__": {},
    "_parent": {
@@ -1297,6 +1302,181 @@
      "y": 30,
      "z": 0
    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0.7071067811865475,
+      "w": 0.7071067811865476
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 90
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 56
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 58
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 56,
+      "height": 56
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "8cuCMcJklDi6scy5fggLvA"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 56
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 60
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 114
+    },
+    "_spriteFrame": {
+      "__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@d8db6",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 3,
+    "_fillType": 2,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "cbySXykHtKaIF2cehy7c2w"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 56
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 62
+    },
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 2,
+    "_right": 2,
+    "_top": 2,
+    "_bottom": 2,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 56,
+    "_originalHeight": 58,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "8bo+PVCiFGga4aZPi+w2yF"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "b36dIBgWBNL7F+ZdA3AV7a",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "SkillFrame_01_Border_Blue",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 65
+      },
+      {
+        "__id__": 67
+      },
+      {
+        "__id__": 69
+      }
+    ],
+    "_prefab": {
+      "__id__": 71
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 30,
+      "z": 0
+    },
    "_lrot": {
      "__type__": "cc.Quat",
      "x": 0,
@@ -1326,11 +1506,11 @@
    "_objFlags": 0,
    "__editorExtras__": {},
    "node": {
-      "__id__": 56
+      "__id__": 64
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 58
+      "__id__": 66
    },
    "_contentSize": {
      "__type__": "cc.Size",
@@ -1354,11 +1534,11 @@
    "_objFlags": 0,
    "__editorExtras__": {},
    "node": {
-      "__id__": 56
+      "__id__": 64
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 60
+      "__id__": 68
    },
    "_customMaterial": null,
    "_srcBlendFactor": 2,
@@ -1399,11 +1579,11 @@
    "_objFlags": 0,
    "__editorExtras__": {},
    "node": {
-      "__id__": 56
+      "__id__": 64
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 62
+      "__id__": 70
    },
    "_alignFlags": 45,
    "_target": null,
@@ -1438,6 +1618,8 @@
      "__id__": 0
    },
    "fileId": "05/ViZ4x5CsKTMBvYgTNv7",
+    "instance": null,
+    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
@@ -1452,14 +1634,14 @@
    "_active": true,
    "_components": [
      {
-        "__id__": 65
+        "__id__": 73
      },
      {
-        "__id__": 67
+        "__id__": 75
      }
    ],
    "_prefab": {
-      "__id__": 69
+      "__id__": 77
    },
    "_lpos": {
      "__type__": "cc.Vec3",
@@ -1496,11 +1678,11 @@
    "_objFlags": 0,
    "__editorExtras__": {},
    "node": {
-      "__id__": 64
+      "__id__": 72
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 66
+      "__id__": 74
    },
    "_contentSize": {
      "__type__": "cc.Size",
@@ -1524,11 +1706,11 @@
    "_objFlags": 0,
    "__editorExtras__": {},
    "node": {
-      "__id__": 64
+      "__id__": 72
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 68
+      "__id__": 76
    },
    "_customMaterial": null,
    "_srcBlendFactor": 2,
@@ -1595,6 +1777,8 @@
      "__id__": 0
    },
    "fileId": "95w1bEWo1Fx6DZZbD+r43Q",
+    "instance": null,
+    "targetOverrides": null,
    "nestedPrefabInstanceRoots": null
  },
  {
@@ -1607,7 +1791,7 @@
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 71
+      "__id__": 79
    },
    "_contentSize": {
      "__type__": "cc.Size",
@@ -1635,13 +1819,16 @@
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 73
+      "__id__": 81
    },
    "icon_node": {
      "__id__": 50
    },
    "info_label": {
-      "__id__": 67
+      "__id__": 75
+    },
+    "cd_mask": {
+      "__id__": 56
    },
    "_id": ""
  },
@@ -1658,6 +1845,7 @@
      "__id__": 0
    },
    "fileId": "c46/YsCPVOJYA4mWEpNYRx",
-    "instance": null
+    "instance": null,
+    "targetOverrides": null
  }
 ]
--- a/assets/resources/gui/role_controller.prefab
+++ b/assets/resources/gui/role_controller.prefab
@@ -31,17 +31,17 @@
    "_active": true,
    "_components": [
      {
-        "__id__": 444
+        "__id__": 445
      },
      {
-        "__id__": 446
+        "__id__": 447
      },
      {
-        "__id__": 448
+        "__id__": 449
      }
    ],
    "_prefab": {
-      "__id__": 450
+      "__id__": 451
    },
    "_lpos": {
      "__type__": "cc.Vec3",
@@ -1386,7 +1386,7 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": -270,
+      "x": -180,
      "y": 0,
      "z": 0
    },
@@ -2514,7 +2514,7 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": -90,
+      "x": 0,
      "y": 0,
      "z": 0
    },
@@ -3622,7 +3622,7 @@
        "__id__": 189
      }
    ],
-    "_active": true,
+    "_active": false,
    "_components": [
      {
        "__id__": 209
@@ -4764,7 +4764,7 @@
    },
    "_lpos": {
      "__type__": "cc.Vec3",
-      "x": 270,
+      "x": 180,
      "y": 0,
      "z": 0
    },
@@ -9317,7 +9317,7 @@
    },
    "_contentSize": {
      "__type__": "cc.Size",
-      "width": 720,
+      "width": 540,
      "height": 200
    },
    "_anchorPoint": {
@@ -9345,8 +9345,8 @@
    },
    "_alignFlags": 44,
    "_target": null,
-    "_left": 0,
-    "_right": 0,
+    "_left": 90,
+    "_right": 90,
    "_top": 0,
    "_bottom": -2,
    "_horizontalCenter": 0,
@@ -9714,6 +9714,9 @@
      },
      {
        "__id__": 443
+      },
+      {
+        "__id__": 444
      }
    ],
    "removedComponents": []
@@ -9816,6 +9819,16 @@
    ],
    "value": 1193.667
  },
+  {
+    "__type__": "CCPropertyOverrideInfo",
+    "targetInfo": {
+      "__id__": 436
+    },
+    "propertyPath": [
+      "_active"
+    ],
+    "value": false
+  },
  {
    "__type__": "cc.UITransform",
    "_name": "GameUI<UITransform>",
@@ -9826,7 +9839,7 @@
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 445
+      "__id__": 446
    },
    "_contentSize": {
      "__type__": "cc.Size",
@@ -9854,7 +9867,7 @@
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 447
+      "__id__": 448
    },
    "_alignFlags": 45,
    "_target": null,
@@ -9890,7 +9903,7 @@
    },
    "_enabled": true,
    "__prefab": {
-      "__id__": 449
+      "__id__": 450
    },
    "debugMode": false,
    "_id": ""
--- a/assets/script/game/map/SkillBoxComp.ts
+++ b/assets/script/game/map/SkillBoxComp.ts
@@ -183,6 +183,18 @@ export class SkillBoxComp extends CCComp {
                this.info_label.string = "";
            }
        }
+
+        // 初始化或重置 CD 遮罩表现
+        if (this.cd_mask && this.cd_mask.isValid) {
+            let sprite = this.cd_mask.getComponent(Sprite);
+            if (sprite) {
+                if (this.is_instant || this.trigger_interval <= 0) {
+                    sprite.fillRange = 0; // 无需冷却，直接归 0
+                } else {
+                    sprite.fillRange = Math.max(0, 1 - (this.timer / this.trigger_interval));
+                }
+            }
+        }
    }

    // ======================== 战斗状态事件 ========================
@@ -274,6 +286,15 @@ export class SkillBoxComp extends CCComp {

        if (this.current_trigger_times < this.trigger_times) {
            this.timer += dt;
+            
+            // 更新 CD 遮罩 (fillRange 从 1 降到 0)
+            if (this.cd_mask && this.cd_mask.isValid && this.trigger_interval > 0) {
+                let sprite = this.cd_mask.getComponent(Sprite);
+                if (sprite) {
+                    sprite.fillRange = Math.max(0, 1 - (this.timer / this.trigger_interval));
+                }
+            }
+
            if (this.timer >= this.trigger_interval) {
                this.timer = 0;
                this.triggerSkill();