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

feat: 添加英雄信息弹窗显示功能

Browse Source 
- 在卡牌点击时打开英雄技能信息弹窗
- 为英雄头像信息组件添加点击打开弹窗功能
- 重构信息弹窗组件，支持动态显示英雄技能信息
- 调整弹窗UI布局和尺寸以适应不同数量的技能显示
This commit is contained in:
walkpan
2026-03-27 19:24:29 +08:00
parent 2d6f46dc42
commit b88d3c214a
4 changed files with 161 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,10 +35,13 @@
},
{
"__id__": 122
},
{
"__id__": 124
}
],
"_prefab": {
"__id__": 124
"__id__": 126
},
"_lpos": {
"__type__": "cc.Vec3",
@@ -96,7 +99,7 @@
"_lpos": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"y": 125,
"z": 0
},
"_lrot": {
@@ -136,8 +139,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 660,
"height": 200
"width": 700,
"height": 150
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -210,14 +213,14 @@
"__prefab": {
"__id__": 8
},
"_alignFlags": 45,
"_alignFlags": 18,
"_target": null,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_left": 330,
"_right": 330,
"_top": 610,
"_bottom": 610,
"_horizontalCenter": 0,
"_verticalCenter": 0,
"_verticalCenter": 125,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
@@ -290,7 +293,7 @@
"_lpos": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"y": 125,
"z": 0
},
"_lrot": {
@@ -535,7 +538,7 @@
},
"_lpos": {
"__type__": "cc.Vec3",
"x": -235,
"x": -230,
"y": 0,
"z": 0
},
@@ -576,7 +579,7 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 545,
"width": 535,
"height": 50.4
},
"_anchorPoint": {
@@ -721,7 +724,7 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 620,
"width": 610,
"height": 40
},
"_anchorPoint": {
@@ -1006,7 +1009,7 @@
},
"_lpos": {
"__type__": "cc.Vec3",
"x": -235,
"x": -230,
"y": 0,
"z": 0
},
@@ -1047,7 +1050,7 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 545,
"width": 535,
"height": 50.4
},
"_anchorPoint": {
@@ -1192,7 +1195,7 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 620,
"width": 610,
"height": 40
},
"_anchorPoint": {
@@ -2682,7 +2685,7 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 660,
"width": 650,
"height": 100
},
"_anchorPoint": {
@@ -2708,14 +2711,14 @@
"__prefab": {
"__id__": 114
},
"_alignFlags": 45,
"_alignFlags": 18,
"_target": null,
"_left": 0,
"_right": 0,
"_top": 50,
"_bottom": 50,
"_left": 310,
"_right": 310,
"_top": 590,
"_bottom": 590,
"_horizontalCenter": 0,
"_verticalCenter": 0,
"_verticalCenter": 125,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
@@ -2797,8 +2800,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 660,
"height": 200
"width": 720,
"height": 1280
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -2823,10 +2826,10 @@
"__prefab": {
"__id__": 121
},
"_alignFlags": 40,
"_alignFlags": 45,
"_target": null,
"_left": 30,
"_right": 30,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_horizontalCenter": 0,
@@ -2838,7 +2841,7 @@
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 100,
"_originalHeight": 0,
"_originalHeight": 200,
"_alignMode": 2,
"_lockFlags": 0,
"_id": ""
@@ -2880,6 +2883,24 @@
"__type__": "cc.CompPrefabInfo",
"fileId": "caFlytW6dOyKuX32MnVcBt"
},
{
"__type__": "cc.BlockInputEvents",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 1
},
"_enabled": true,
"__prefab": {
"__id__": 125
},
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "a6TSZyZXZJl5pquoyibxvV"
},
{
"__type__": "cc.PrefabInfo",
"root": {

15
assets/script/game/map/CardComp.ts
View File

@@ -9,6 +9,7 @@ import { SkillSet } from "../common/config/SkillSet";
import { GameEvent } from "../common/config/GameEvent";
import { oops } from "db://oops-framework/core/Oops";
import { smc } from "../common/SingletonModuleComp";
import { UIID } from "../common/config/GameUIConfig";
@@ -317,6 +318,7 @@ export class CardComp extends CCComp {
this.useCard();
return;
}
this.openHeroInfoIBox();
this.playReboundAnim();
}
@@ -467,6 +469,19 @@ export class CardComp extends CCComp {
return `${uuid}`;
}
private openHeroInfoIBox() {
if (!this.cardData) return;
if (this.cardData.type !== CardType.Hero) return;
const hero = HeroInfo[this.cardData.uuid];
if (!hero) return;
const heroLv = Math.max(1, Math.floor(this.cardData.hero_lv ?? hero.lv ?? 1));
oops.gui.remove(UIID.IBox);
oops.gui.open(UIID.IBox, {
heroUuid: this.cardData.uuid,
heroLv
});
}
private updateHeroAnimation(node: Node, uuid: number, token: number) {
const sprite = node?.getComponent(Sprite) || node?.getComponentInChildren(Sprite);
if (sprite) sprite.spriteFrame = null;

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

@@ -1,8 +1,10 @@
import { _decorator, Animation, AnimationClip, Label, Node, Sprite, resources } from "cc";
import { _decorator, Animation, AnimationClip, Label, Node, NodeEventType, Sprite, resources } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { HeroInfo } from "../common/config/heroSet";
import { HeroAttrsComp } from "../hero/HeroAttrsComp";
import { oops } from "db://oops-framework/core/Oops";
import { UIID } from "../common/config/GameUIConfig";
const {property, ccclass } = _decorator;
@@ -21,6 +23,11 @@ export class HInfoComp extends CCComp {
onLoad() {
this.cacheLabels();
this.bindEvents();
}
onDestroy() {
this.unbindEvents();
}
bindData(eid: number, model: HeroAttrsComp) {
@@ -116,6 +123,27 @@ export class HInfoComp extends CCComp {
[...clips].forEach(clip => anim.removeClip(clip, true));
}
private bindEvents() {
this.node.on(NodeEventType.TOUCH_END, this.onOpenIBox, this);
}
private unbindEvents() {
this.node.off(NodeEventType.TOUCH_END, this.onOpenIBox, this);
}
private onOpenIBox() {
if (!this.model) return;
const heroUuid = this.model.hero_uuid ?? 0;
if (!heroUuid || !HeroInfo[heroUuid]) return;
const heroLv = Math.max(1, Math.floor(this.model.lv ?? 1));
oops.gui.remove(UIID.IBox);
oops.gui.open(UIID.IBox, {
heroUuid,
heroLv,
skills: this.model.skills
});
}
/** 视图对象通过 ecs.Entity.remove(ModuleViewComp) 删除组件是触发组件处理自定义释放逻辑 */
reset() {
this.clearIconAnimation(this.icon_node);

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

@@ -1,25 +1,13 @@
import { mLogger } from "../common/Logger";
import { _decorator, Animation, AnimationClip, EventTouch, Label, Node, NodeEventType, Sprite, SpriteAtlas, Tween, tween, UIOpacity, Vec3, resources } from "cc";
import { _decorator, Label, Node, UITransform } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { CardConfig, CardType, SpecialCardList } from "../common/config/CardSet";
import { CardUseComp } from "./CardUseComp";
import { HeroInfo } from "../common/config/heroSet";
import { SkillSet } from "../common/config/SkillSet";
import { GameEvent } from "../common/config/GameEvent";
import { oops } from "db://oops-framework/core/Oops";
import { smc } from "../common/SingletonModuleComp";
const { ccclass, property } = _decorator;
/** 视图层对象 */
@ccclass('IBoxComp')
@ecs.register('IBoxComp', false)
export class IBoxComp extends CCComp {
private debugMode: boolean = true;
/** 锁定态图标节点（显示时表示本槽位锁定） */
@property(Node)
Line1: Node = null!
@property(Node)
@@ -30,24 +18,74 @@ export class IBoxComp extends CCComp {
Line4: Node = null!
@property(Node)
Line5: Node = null!
onAdded(args: any) {
private readonly baseHeight: number = 100;
private readonly extraLineHeight: number = 50;
onAdded(args: {
heroUuid?: number;
heroLv?: number;
skills?: Record<number, { uuid: number; lv: number; cd: number; ccd: number }>;
}) {
this.renderHeroInfo(args);
}
onLoad() {
}
onDestroy() {
}
init(){
}
/** 视图对象通过 ecs.Entity.remove(ModuleViewComp) 删除组件是触发组件处理自定义释放逻辑 */
reset() {
this.node.destroy();
}
private renderHeroInfo(args: {
heroUuid?: number;
heroLv?: number;
skills?: Record<number, { uuid: number; lv: number; cd: number; ccd: number }>;
}) {
const heroUuid = Math.floor(args?.heroUuid ?? 0);
const heroLv = Math.max(1, Math.floor(args?.heroLv ?? 1));
const hero = HeroInfo[heroUuid];
if (!hero) {
this.applyLineTexts(["暂无技能信息"]);
return;
}
const runtimeSkills = args?.skills ? Object.values(args.skills) : [];
const sourceSkills = runtimeSkills.length > 0 ? runtimeSkills : Object.values(hero.skills ?? {});
const skillTexts = sourceSkills.map(skill => {
const skillId = Math.floor(skill?.uuid ?? 0);
if (!skillId) return "";
const config = SkillSet[skillId];
if (!config) return "";
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);
return `${config.name} Lv.${runtimeLv} CD:${cd}s ${config.info}`;
}).filter(Boolean);
this.applyLineTexts(skillTexts.length > 0 ? skillTexts : ["暂无技能信息"]);
}
private applyLineTexts(skillTexts: string[]) {
const lines = [this.Line1, this.Line2, this.Line3, this.Line4, this.Line5];
const showCount = Math.max(1, Math.min(lines.length, skillTexts.length));
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
if (!line) continue;
const active = i < showCount;
line.active = active;
if (!active) continue;
const text = skillTexts[i] ?? "";
const noteNode = line.getChildByName("note");
const label = noteNode?.getComponent(Label) || noteNode?.getComponentInChildren(Label) || line.getComponentInChildren(Label);
if (label) label.string = text;
}
const targetHeight = this.baseHeight + Math.max(0, showCount - 1) * this.extraLineHeight;
this.updateIBoxHeight(targetHeight);
}
private updateIBoxHeight(height: number) {
const rootTransform = this.node.getComponent(UITransform);
if (rootTransform) {
rootTransform.setContentSize(rootTransform.contentSize.width, height);
}
const bgNode = this.node.getChildByName("Bg");
const bgTransform = bgNode?.getComponent(UITransform);
if (bgTransform) {
bgTransform.setContentSize(bgTransform.contentSize.width, height);
}
}
}