refactor(gui): 优化角色界面预制件结构和样式

- 更新了多个组件的引用ID，提升资源管理一致性
- 调整节点位置，优化界面布局，使元素排布更合理
- 重命名节点，提升命名的语义化和可识别性
- 替换部分Sprite为Label，改进文字显示效果
- 修改标签字体属性，增强字体样式与可读性
- 更新图片资源及相关SpriteAtlas，优化视觉表现
- 移除冗余组件和节点，减少预制件复杂度
- 调整组件属性，修正控件对齐与缩放问题
- 恢复阴影及描边效果，提升界面细节表现

assets/resources/game/gui/hui.prefab

@@ -0,0 +1,210 @@
+[
+  {
+    "__type__": "cc.Prefab",
+    "_name": "hui",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "data": {
+      "__id__": 1
+    },
+    "optimizationPolicy": 0,
+    "persistent": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "hui",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 2
+      },
+      {
+        "__id__": 4
+      },
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 8
+      }
+    ],
+    "_prefab": {
+      "__id__": 10
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": -0.8,
+      "y": 0.8,
+      "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__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 3
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 256,
+      "height": 256
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "cewibQgK1ALbFhMuuspMmN"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 5
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "9e5ec114-01a4-47d3-b7b7-df3b90209c91@6ce90",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 0,
+    "_fillType": 0,
+    "_sizeMode": 1,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "ed71tIQFtJtbSwrQYOmOPP"
+  },
+  {
+    "__type__": "cc.Animation",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 7
+    },
+    "playOnLoad": true,
+    "_clips": [],
+    "_defaultClip": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "3dBJqUbmFPGIhxjbVKe/vR"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": false,
+    "__prefab": {
+      "__id__": 9
+    },
+    "_alignFlags": 18,
+    "_target": null,
+    "_left": 180.8,
+    "_right": 180.8,
+    "_top": 460.8,
+    "_bottom": 450,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 160,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 256,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "bbvPKZM+VNTrQG0iMfRGDW"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "9anvHdhj5D1opINsPLBLgs",
+    "instance": null,
+    "targetOverrides": null
+  }
+]

assets/resources/game/gui/hui.prefab.meta

@@ -0,0 +1,13 @@
+{
+  "ver": "1.1.50",
+  "importer": "prefab",
+  "imported": true,
+  "uuid": "4489091b-29ab-4906-972b-978bd4279a8e",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {
+    "syncNodeName": "hui"
+  }
+}

assets/script/game/map/HInfoComp.ts

@@ -1,4 +1,4 @@
-import { _decorator, Animation, AnimationClip, Component, instantiate, Label, Node, Prefab, resources, Sprite, SpriteFrame, v3 } from 'cc';
+import { _decorator, Animation, AnimationClip, Component, instantiate, Label, Node, Prefab, resources, Sprite, SpriteFrame, v3, tween, Vec3 } from 'cc';
 import { oops } from 'db://oops-framework/core/Oops';
 import { getHeroList, HeroInfo, HType, HTypeName } from '../common/config/heroSet';
 import { smc } from '../common/SingletonModuleComp';
@@ -38,34 +38,72 @@ export class HInfoComp extends Component {
         this.def_node=this.node.getChildByName("info").getChildByName("base").getChildByName("def").getChildByName("num")
         this.h_uuid=smc.fight_hero
         this.update_data(this.h_uuid)
+        this.load_all_hero(this.h_uuid)
     }
     update(deltaTime: number) {
         
     }
     update_data(uuid:number){
         this.h_uuid=uuid
-        console.log("[HInfoComp]:update_data",uuid,HeroInfo[uuid],this.node)
         this.name_node.getComponent(Label).string=HeroInfo[uuid].name
         this.type_node.getComponent(Label).string=HTypeName[HeroInfo[uuid].type]
         this.ap_node.getComponent(Label).string=HeroInfo[uuid].ap.toString()
         this.hp_node.getComponent(Label).string=HeroInfo[uuid].hp.toString()
         this.def_node.getComponent(Label).string=HeroInfo[uuid].def.toString()
-        this.load_all_hero(uuid)
     }
     load_all_hero(uuid:number){
+        // 清除之前的英雄节点
+        this.claear_hero();
         
+        // 获取英雄列表
+        let heros = getHeroList();
+        let currentIndex = heros.indexOf(uuid);
+        
+        // 载入7个英雄节点（当前英雄及前后各3个）
+        for(let i = 0; i < 7; i++) {
+            // 计算索引位置（考虑循环）
+            let indexOffset = i - 3; // -3, -2, -1, 0, 1, 2, 3
+            let heroIndex = currentIndex + indexOffset;
+            
+            // 处理循环边界
+            if(heroIndex < 0) {
+                heroIndex = heros.length + heroIndex;
+            } else if(heroIndex >= heros.length) {
+                heroIndex = heroIndex - heros.length;
+            }
+            
+            // 获取英雄UUID
+            let heroUuid = heros[heroIndex];
+            
+            // 载入英雄预制体并设置位置
+            this.heroNodes[i] = this.load_hui(heroUuid, i);
+        }
     }
-    load_hui(uuid:number,pos_index: number){
+    load_hui(uuid:number, pos_index: number){
-        var path =  "game/heros/"+HeroInfo[uuid].path;
+        var path =  "game/gui/hui";
         var prefab: Prefab = oops.res.get(path, Prefab)!;
         var node = instantiate(prefab);
-        HeroInfo[uuid]
+        // 将节点添加到父节点下
-        let anm_path=HeroInfo[uuid].path
+        this.node.getChildByName("hero").addChild(node);
+        
+        // 设置节点位置
+        node.setPosition(this.hero_pos[pos_index]);
+        
+        // 加载并播放动画
+        let anm_path=HeroInfo[uuid].path;
         resources.load("game/heros/hero/"+anm_path+"/idle", AnimationClip, (err, clip) => {
-            node.getComponent(Animation).addClip(clip);
+            if (!err && clip) {
-            node.getComponent(Animation).play("idle");
+                let animComponent = node.getComponent(Animation);
+                if(animComponent) {
+                    animComponent.addClip(clip);
+                    animComponent.play("idle");
+                }
+            } else {
+                console.error(`[HInfoComp]: Failed to load animation for hero ${uuid}`, err);
+            }
         });
-        node.setPosition(this.hero_pos[pos_index])
+        
+        return node;
     }
 
     claear_hero(){ 
@@ -78,21 +116,117 @@ export class HInfoComp extends Component {
     }
    
     next_hero(){
-        let heros=getHeroList()
+        // 获取英雄列表
+        let heros = getHeroList();
         let index = heros.indexOf(this.h_uuid);
-        index++
+        index++;
-        if(index==heros.length) index=0
+        if(index == heros.length) index = 0;
         let nextHero = heros[index];
-        this.update_data(nextHero)
+        
+        // 更新数据
+        this.h_uuid = nextHero;
+        this.update_data(nextHero);
+        
+        // 执行平滑移动动画
+        this.moveHeroesRight();
     }
+    
     prev_hero(){
-        let heros=getHeroList()
+        // 获取英雄列表
+        let heros = getHeroList();
         let index = heros.indexOf(this.h_uuid);
-        index--
+        index--;
-        if(index==-1) index=heros.length-1
+        if(index == -1) index = heros.length - 1;
         let prevHero = heros[index];
-        this.update_data(prevHero)
+        
+        // 更新数据
+        this.h_uuid = prevHero;
+        this.update_data(prevHero);
+        
+        // 执行平滑移动动画
+        this.moveHeroesLeft();
     }
+    
+    moveHeroesRight() {
+        // 移动所有现有节点向右
+        for (let i = 0; i < this.heroNodes.length; i++) {
+            if (this.heroNodes[i]) {
+                // 计算目标位置
+                let targetPos = this.hero_pos[i + 1] || this.hero_pos[0];
+                
+                // 使用Tween执行平滑移动
+                tween(this.heroNodes[i])
+                    .to(0.3, { position: targetPos })
+                    .start();
+            }
+        }
+        
+        // 延迟创建新节点和删除旧节点，等待动画完成
+        setTimeout(() => {
+            // 删除原先位于hero_pos[6]位置的节点
+            if (this.heroNodes[6]) {
+                this.heroNodes[6].destroy();
+            }
+            
+            // 移动数组元素
+            for (let i = 6; i > 0; i--) {
+                this.heroNodes[i] = this.heroNodes[i - 1];
+            }
+            
+            // 创建新节点放在hero_pos[0]位置
+            let heros = getHeroList();
+            let currentIndex = heros.indexOf(this.h_uuid);
+            let newIndex = currentIndex - 3; // 新的最左侧英雄索引
+            
+            // 处理循环边界
+            if (newIndex < 0) {
+                newIndex = heros.length + newIndex;
+            }
+            
+            this.heroNodes[0] = this.load_hui(heros[newIndex], 0);
+        }, 300); // 与动画时间保持一致
+    }
+    
+    moveHeroesLeft() {
+        // 移动所有现有节点向左
+        for (let i = 0; i < this.heroNodes.length; i++) {
+            if (this.heroNodes[i]) {
+                // 计算目标位置
+                let targetPos = this.hero_pos[i - 1] || this.hero_pos[6];
+                
+                // 使用Tween执行平滑移动
+                tween(this.heroNodes[i])
+                    .to(0.3, { position: targetPos })
+                    .start();
+            }
+        }
+        
+        // 延迟创建新节点和删除旧节点，等待动画完成
+        setTimeout(() => {
+            // 删除原先位于hero_pos[0]位置的节点
+            if (this.heroNodes[0]) {
+                this.heroNodes[0].destroy();
+            }
+            
+            // 移动数组元素
+            for (let i = 0; i < 6; i++) {
+                this.heroNodes[i] = this.heroNodes[i + 1];
+            }
+            
+            // 创建新节点放在hero_pos[6]位置
+            let heros = getHeroList();
+            let currentIndex = heros.indexOf(this.h_uuid);
+            let newIndex = currentIndex + 3; // 新的最右侧英雄索引
+            
+            // 处理循环边界
+            if (newIndex >= heros.length) {
+                newIndex = newIndex - heros.length;
+            }
+            
+            this.heroNodes[6] = this.load_hui(heros[newIndex], 6);
+        }, 300); // 与动画时间保持一致
+    }
+    
     close(){
         oops.gui.removeByNode(this.node)
     }