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

feat(gui): 在技能信息框中显示技能类型图标并调整布局

Browse Source 
- 扩展 IBoxComp 以支持技能类型数据，为近战、远程、支援技能显示对应图标
- 重构 applyLineTexts 为 applyLineData，接收包含文本和类型的对象数组
- 调整 ibox.prefab 中节点位置、尺寸和间距，优化视觉布局
- 默认隐藏未使用的行节点以减少初始渲染开销
This commit is contained in:
walkpan
2026-03-27 20:04:46 +08:00
parent 5e47919e5b
commit 804577bef1
2 changed files with 50 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
assets/resources/gui/element/ibox.prefab
View File

@@ -160,7 +160,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": -195.637, "x": -195.637,
"y": 94.223, "y": 44.223,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -485,7 +485,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 700, "width": 700,
"height": 200 "height": 100
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -701,7 +701,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": 100, "y": 25,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -1209,7 +1209,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 600, "width": 600,
"height": 50.4 "height": 29.5
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -1244,13 +1244,13 @@
"b": 255, "b": 255,
"a": 255 "a": 255
}, },
"_string": "这里是说明", "_string": "这里是说明这里是说明这里是说明",
"_horizontalAlign": 0, "_horizontalAlign": 0,
"_verticalAlign": 1, "_verticalAlign": 1,
"_actualFontSize": 25, "_actualFontSize": 25,
"_fontSize": 25, "_fontSize": 25,
"_fontFamily": "Arial", "_fontFamily": "Arial",
"_lineHeight": 28, "_lineHeight": 25,
"_overflow": 2, "_overflow": 2,
"_enableWrapText": false, "_enableWrapText": false,
"_font": null, "_font": null,
@@ -1453,7 +1453,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": 50, "y": -25,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -1547,7 +1547,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 600, "width": 600,
"height": 50.4 "height": 29.5
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -2190,7 +2190,7 @@
"__id__": 110 "__id__": 110
} }
], ],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 116 "__id__": 116
@@ -2205,7 +2205,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": 0, "y": -50,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -2240,7 +2240,7 @@
"__id__": 89 "__id__": 89
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 91 "__id__": 91
@@ -2299,7 +2299,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 600, "width": 600,
"height": 50.4 "height": 29.5
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -2438,7 +2438,7 @@
"__id__": 89 "__id__": 89
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 99 "__id__": 99
@@ -2574,7 +2574,7 @@
"__id__": 89 "__id__": 89
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 105 "__id__": 105
@@ -2713,7 +2713,7 @@
"__id__": 89 "__id__": 89
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 111 "__id__": 111
@@ -2942,7 +2942,7 @@
"__id__": 142 "__id__": 142
} }
], ],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 148 "__id__": 148
@@ -2957,7 +2957,7 @@
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
"x": 0, "x": 0,
"y": -50, "y": -75,
"z": 0 "z": 0
}, },
"_lrot": { "_lrot": {
@@ -2992,7 +2992,7 @@
"__id__": 121 "__id__": 121
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 123 "__id__": 123
@@ -3051,7 +3051,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 600, "width": 600,
"height": 50.4 "height": 29.5
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -3190,7 +3190,7 @@
"__id__": 121 "__id__": 121
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 131 "__id__": 131
@@ -3326,7 +3326,7 @@
"__id__": 121 "__id__": 121
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 137 "__id__": 137
@@ -3465,7 +3465,7 @@
"__id__": 121 "__id__": 121
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 143 "__id__": 143
@@ -3694,7 +3694,7 @@
"__id__": 174 "__id__": 174
} }
], ],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 180 "__id__": 180
@@ -3803,7 +3803,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 600, "width": 600,
"height": 50.4 "height": 29.5
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@@ -4439,7 +4439,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 650, "width": 650,
"height": 250 "height": 100
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",

36
assets/script/game/map/IBoxComp.ts
View File

@@ -2,7 +2,7 @@ import { _decorator, Label, Node, NodeEventType, UITransform } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS"; import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp"; import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { HeroInfo } from "../common/config/heroSet"; import { HeroInfo } from "../common/config/heroSet";
import { SkillSet } from "../common/config/SkillSet"; import { IType, SkillSet } from "../common/config/SkillSet";
import { oops } from "db://oops-framework/core/Oops"; import { oops } from "db://oops-framework/core/Oops";
const { ccclass, property } = _decorator; const { ccclass, property } = _decorator;
@@ -52,37 +52,42 @@ export class IBoxComp extends CCComp {
const hero = HeroInfo[heroUuid]; const hero = HeroInfo[heroUuid];
if (!hero) { if (!hero) {
this.setHeroName(""); this.setHeroName("");
this.applyLineTexts(["暂无技能信息"]); this.applyLineData([{ text: "暂无技能信息" }]);
return; return;
} }
this.setHeroName(hero.name); this.setHeroName(hero.name);
const runtimeSkills = args?.skills ? Object.values(args.skills) : []; const runtimeSkills = args?.skills ? Object.values(args.skills) : [];
const sourceSkills = runtimeSkills.length > 0 ? runtimeSkills : Object.values(hero.skills ?? {}); const sourceSkills = runtimeSkills.length > 0 ? runtimeSkills : Object.values(hero.skills ?? {});
const skillTexts = sourceSkills.map(skill => { const lineData = sourceSkills.map(skill => {
const skillId = Math.floor(skill?.uuid ?? 0); const skillId = Math.floor(skill?.uuid ?? 0);
if (!skillId) return ""; if (!skillId) return null;
const config = SkillSet[skillId]; const config = SkillSet[skillId];
if (!config) return ""; if (!config) return null;
const runtimeLv = runtimeSkills.length > 0 ? Math.max(0, Math.floor(skill.lv ?? 0)) : Math.max(0, Math.floor((skill.lv ?? 1) + heroLv - 2)); const runtimeLv = runtimeSkills.length > 0 ? Math.max(0, Math.floor(skill.lv ?? 0)) : Math.max(0, Math.floor((skill.lv ?? 1) + heroLv - 2));
const cd = Number(skill?.cd ?? 0); const cd = Number(skill?.cd ?? 0);
return `${config.name} Lv.${runtimeLv} CD:${cd}s ${config.info}`; return {
}).filter(Boolean); text: `${config.name} Lv.${runtimeLv} CD:${cd}s ${config.info}`,
this.applyLineTexts(skillTexts.length > 0 ? skillTexts : ["暂无技能信息"]); iType: config.IType
};
}).filter(item => !!item) as Array<{ text: string; iType: IType }>;
this.applyLineData(lineData.length > 0 ? lineData : [{ text: "暂无技能信息" }]);
} }
private applyLineTexts(skillTexts: string[]) { private applyLineData(skillLines: Array<{ text: string; iType?: IType }>) {
const lines = [this.Line1, this.Line2, this.Line3, this.Line4, this.Line5]; const lines = [this.Line1, this.Line2, this.Line3, this.Line4, this.Line5];
const showCount = Math.max(1, Math.min(lines.length, skillTexts.length)); const showCount = Math.max(1, Math.min(lines.length, skillLines.length));
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
const line = lines[i]; const line = lines[i];
if (!line) continue; if (!line) continue;
const active = i < showCount; const active = i < showCount;
line.active = active; line.active = active;
if (!active) continue; if (!active) continue;
const text = skillTexts[i] ?? ""; const data = skillLines[i];
const text = data?.text ?? "";
const noteNode = line.getChildByName("note"); const noteNode = line.getChildByName("note");
const label = noteNode?.getComponent(Label) || noteNode?.getComponentInChildren(Label) || line.getComponentInChildren(Label); const label = noteNode?.getComponent(Label) || noteNode?.getComponentInChildren(Label) || line.getComponentInChildren(Label);
if (label) label.string = text; if (label) label.string = text;
this.updateLineTypeIcon(line, data?.iType);
} }
const targetHeight = this.baseHeight + Math.max(0, showCount - 1) * this.extraLineHeight; const targetHeight = this.baseHeight + Math.max(0, showCount - 1) * this.extraLineHeight;
this.updateIBoxHeight(targetHeight); this.updateIBoxHeight(targetHeight);
@@ -106,6 +111,15 @@ export class IBoxComp extends CCComp {
} }
} }
private updateLineTypeIcon(line: Node, iType?: IType) {
const meleeNode = line.getChildByName("Melee");
const remoteNode = line.getChildByName("remote");
const supportNode = line.getChildByName("support");
if (meleeNode) meleeNode.active = iType === IType.Melee;
if (remoteNode) remoteNode.active = iType === IType.remote;
if (supportNode) supportNode.active = iType === IType.support;
}
private onTapClose() { private onTapClose() {
oops.gui.removeByNode(this.node); oops.gui.removeByNode(this.node);
} }