refactor(gui): 优化角色界面预制件结构和样式
- 更新了多个组件的引用ID，提升资源管理一致性 - 调整节点位置，优化界面布局，使元素排布更合理 - 重命名节点，提升命名的语义化和可识别性 - 替换部分Sprite为Label，改进文字显示效果 - 修改标签字体属性，增强字体样式与可读性 - 更新图片资源及相关SpriteAtlas，优化视觉表现 - 移除冗余组件和节点，减少预制件复杂度 - 调整组件属性，修正控件对齐与缩放问题 - 恢复阴影及描边效果，提升界面细节表现
This commit is contained in:
210
assets/resources/game/gui/hui.prefab
Normal file
210
assets/resources/game/gui/hui.prefab
Normal file
@@ -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
|
||||
}
|
||||
]
|
||||
13
assets/resources/game/gui/hui.prefab.meta
Normal file
13
assets/resources/game/gui/hui.prefab.meta
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"ver": "1.1.50",
|
||||
"importer": "prefab",
|
||||
"imported": true,
|
||||
"uuid": "4489091b-29ab-4906-972b-978bd4279a8e",
|
||||
"files": [
|
||||
".json"
|
||||
],
|
||||
"subMetas": {},
|
||||
"userData": {
|
||||
"syncNodeName": "hui"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user