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

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

Browse Source 
- 更新了多个组件的引用ID，提升资源管理一致性
- 调整节点位置，优化界面布局，使元素排布更合理
- 重命名节点，提升命名的语义化和可识别性
- 替换部分Sprite为Label，改进文字显示效果
- 修改标签字体属性，增强字体样式与可读性
- 更新图片资源及相关SpriteAtlas，优化视觉表现
- 移除冗余组件和节点，减少预制件复杂度
- 调整组件属性，修正控件对齐与缩放问题
- 恢复阴影及描边效果，提升界面细节表现
This commit is contained in:
panw
2025-10-20 16:53:42 +08:00
parent d67c63b768
commit 1e762fb4f7
4 changed files with 545 additions and 1198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
assets/script/game/map/HInfoComp.ts
View File

@@ -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){
var path = "game/heros/"+HeroInfo[uuid].path;
load_hui(uuid:number, pos_index: number){
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);
node.getComponent(Animation).play("idle");
if (!err && clip) {
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++
if(index==heros.length) index=0
index++;
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--
if(index==-1) index=heros.length-1
index--;
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)
}