From 0829b0bc9d3af68fd907a3c893d4b74dd34dafc5 Mon Sep 17 00:00:00 2001 From: walkpan Date: Mon, 20 Apr 2026 23:59:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(card):=20=E6=B7=BB=E5=8A=A0=E9=95=BF?= =?UTF-8?q?=E6=8C=89=E6=94=BE=E5=A4=A7=E5=8A=9F=E8=83=BD=E5=B9=B6=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E5=8D=A1=E7=89=8C=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 CardComp 中实现长按触发卡牌放大，优化触摸交互逻辑 - 调整 MissionCardComp 中卡牌位置数组顺序，修复布局错位 - 修改 card.prefab 中多个 UI 元素的坐标和对齐方式，优化视觉呈现 - 移除卡牌种类标识的显示逻辑，简化卡牌 UI --- assets/resources/gui/element/card.prefab | 18 +-- assets/script/game/map/CardComp.ts | 144 +++++++++++++++++++--- assets/script/game/map/MissionCardComp.ts | 2 +- 3 files changed, 135 insertions(+), 29 deletions(-) diff --git a/assets/resources/gui/element/card.prefab b/assets/resources/gui/element/card.prefab index 72d588fa..9e631fc1 100644 --- a/assets/resources/gui/element/card.prefab +++ b/assets/resources/gui/element/card.prefab @@ -3044,7 +3044,7 @@ "_lpos": { "__type__": "cc.Vec3", "x": 0, - "y": -71.448, + "y": 70, "z": 0 }, "_lrot": { @@ -3178,11 +3178,11 @@ "__prefab": { "__id__": 138 }, - "_alignFlags": 16, + "_alignFlags": 17, "_target": null, "_left": 0, "_right": 0, - "_top": 163.951, + "_top": 30, "_bottom": 0, "_horizontalCenter": 0, "_verticalCenter": 0, @@ -5982,8 +5982,8 @@ }, "_lpos": { "__type__": "cc.Vec3", - "x": -70.639, - "y": 96.745, + "x": 0, + "y": -101.274, "z": 0 }, "_lrot": { @@ -6389,12 +6389,12 @@ "__prefab": { "__id__": 283 }, - "_alignFlags": 9, + "_alignFlags": 20, "_target": null, "_left": -5.638999999999996, "_right": 0, - "_top": -1.7450000000000045, - "_bottom": 0, + "_top": 196.274, + "_bottom": -6.274000000000001, "_horizontalCenter": 0, "_verticalCenter": 0, "_isAbsLeft": true, @@ -8440,7 +8440,7 @@ "__id__": 390 } ], - "_active": true, + "_active": false, "_components": [ { "__id__": 396 diff --git a/assets/script/game/map/CardComp.ts b/assets/script/game/map/CardComp.ts index 1a7e96a1..24d94176 100644 --- a/assets/script/game/map/CardComp.ts +++ b/assets/script/game/map/CardComp.ts @@ -123,6 +123,12 @@ export class CardComp extends CCComp { private iconVisualToken: number = 0; /** 是否处于放大状态 */ private isEnlarged: boolean = false; + /** 长按定时器标记 */ + private longPressTimer: any = null; + /** 是否触发了长按 */ + private isLongPressed: boolean = false; + /** 长按触发时间（秒） */ + private readonly LONG_PRESS_DURATION: number = 0.5; // ======================== 生命周期 ======================== @@ -502,6 +508,20 @@ export class CardComp extends CCComp { if (!this.cardData || this.isUsing) return; this.touchStartY = event.getUILocation().y; this.isDragging = true; + this.isLongPressed = false; + + // 开启长按定时器 + this.unschedule(this.onLongPress); + this.scheduleOnce(this.onLongPress, this.LONG_PRESS_DURATION); + } + + /** 长按触发逻辑 */ + private onLongPress() { + if (!this.isDragging || this.isUsing) return; + this.isLongPressed = true; + this.isEnlarged = true; + this.applyCardUI(); + this.playReboundAnim(); } /** @@ -512,6 +532,15 @@ export class CardComp extends CCComp { const currentY = event.getUILocation().y; const deltaY = Math.max(0, currentY - this.touchStartY); + // 拖拽距离超过一定阈值，取消长按 + if (deltaY > 10) { + this.unschedule(this.onLongPress); + if (this.isLongPressed && !this.isEnlarged) { + // 如果已经触发了长按但想取消放大（比如拖拽时恢复），视情况处理 + // 这里我们认为一旦拖动就取消未触发的长按，如果已经触发放大则保持放大直到松手 + } + } + let baseX = this.restPosition.x; let baseY = this.restPosition.y; if (this.isEnlarged) { @@ -529,31 +558,45 @@ export class CardComp extends CCComp { /** * 触摸结束： * - 上拉距离 >= dragUseThreshold → 视为"使用卡牌" - * - 否则视为"点击"，切换放大缩小状态并回弹 + * - 否则视为"点击"或者"长按结束" */ private onCardTouchEnd(event: EventTouch) { + this.unschedule(this.onLongPress); if (!this.isDragging || !this.cardData || this.isUsing) return; const endY = event.getUILocation().y; const deltaY = endY - this.touchStartY; this.isDragging = false; + if (deltaY >= this.dragUseThreshold) { this.useCard(); + // 使用卡牌后恢复非放大状态 + this.isEnlarged = false; + this.isLongPressed = false; return; } - this.toggleEnlarge(); + + // 无论是点击还是长按松手，都恢复正常大小 + if (this.isEnlarged) { + this.isEnlarged = false; + this.applyCardUI(); + } + + this.isLongPressed = false; this.playReboundAnim(); } - /** 切换卡牌的放大/缩小状态 */ - private toggleEnlarge() { - this.isEnlarged = !this.isEnlarged; - this.applyCardUI(); - } - /** 触摸取消：回弹至原位 */ private onCardTouchCancel() { + this.unschedule(this.onLongPress); if (!this.isDragging || this.isUsing) return; this.isDragging = false; + + if (this.isEnlarged) { + this.isEnlarged = false; + this.applyCardUI(); + } + + this.isLongPressed = false; this.playReboundAnim(); } @@ -619,12 +662,12 @@ export class CardComp extends CCComp { this.node.setPosition(targetX, targetY, this.restPosition.z); // ---- 卡牌种类标识（近战 / 远程 / 辅助等） ---- - if (this.Ckind_node) { - const kindName = CKind[this.cardData.kind]; - this.Ckind_node.children.forEach(child => { - child.active = (child.name === kindName); - }); - } + // if (this.Ckind_node) { + // const kindName = CKind[this.cardData.kind]; + // this.Ckind_node.children.forEach(child => { + // child.active = (child.name === kindName); + // }); + // } // ---- 背景底框（按卡池等级显示对应子节点） ---- const cardLvStr = `lv${this.cardData.pool_lv}`; @@ -653,6 +696,40 @@ export class CardComp extends CCComp { if (uiTrans) { uiTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); } + + // 同时修改背景节点和边框节点的尺寸 + if (this.BG_node) { + const bgTrans = this.BG_node.getComponent(UITransform); + if (bgTrans) bgTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); + this.BG_node.children.forEach(child => { + const childTrans = child.getComponent(UITransform); + if (childTrans) childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); + }); + } + + if (this.HF_node) { + const hfTrans = this.HF_node.getComponent(UITransform); + if (hfTrans) hfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); + this.HF_node.children.forEach(child => { + const childTrans = child.getComponent(UITransform); + if (childTrans) childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); + }); + } + + if (this.NF_node) { + const nfTrans = this.NF_node.getComponent(UITransform); + if (nfTrans) nfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); + this.NF_node.children.forEach(child => { + const childTrans = child.getComponent(UITransform); + if (childTrans) childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); + }); + } + + const hbNode = this.node.getChildByName("HB"); + if (hbNode) { + const hbTrans = hbNode.getComponent(UITransform); + if (hbTrans) hbTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); + } if(this.card_type===CardType.Hero){ // 英雄卡：显示英雄名 + 星级 + AP/HP @@ -801,16 +878,45 @@ export class CardComp extends CCComp { if (uiTrans) { uiTrans.setContentSize(170, 230); } + if (this.BG_node) { + const bgTrans = this.BG_node.getComponent(UITransform); + if (bgTrans) bgTrans.setContentSize(170, 230); + this.BG_node.children.forEach(child => { + const childTrans = child.getComponent(UITransform); + if (childTrans) childTrans.setContentSize(170, 230); + }); + } + if (this.HF_node) { + const hfTrans = this.HF_node.getComponent(UITransform); + if (hfTrans) hfTrans.setContentSize(170, 230); + this.HF_node.children.forEach(child => { + const childTrans = child.getComponent(UITransform); + if (childTrans) childTrans.setContentSize(170, 230); + }); + } + if (this.NF_node) { + const nfTrans = this.NF_node.getComponent(UITransform); + if (nfTrans) nfTrans.setContentSize(170, 230); + this.NF_node.children.forEach(child => { + const childTrans = child.getComponent(UITransform); + if (childTrans) childTrans.setContentSize(170, 230); + }); + } + const hbNode = this.node.getChildByName("HB"); + if (hbNode) { + const hbTrans = hbNode.getComponent(UITransform); + if (hbTrans) hbTrans.setContentSize(170, 230); + } this.iconVisualToken += 1; this.setLabel(this.name_node, ""); this.setLabel(this.cost_node, ""); if (this.info_node) this.info_node.active = false; if (this.oinfo_node) this.oinfo_node.active = false; - if (this.Ckind_node) { - this.Ckind_node.children.forEach(child => { - child.active = false; - }); - } + // if (this.Ckind_node) { + // this.Ckind_node.children.forEach(child => { + // child.active = false; + // }); + // } if (this.BG_node) { this.BG_node.children.forEach(child => child.active = false); } diff --git a/assets/script/game/map/MissionCardComp.ts b/assets/script/game/map/MissionCardComp.ts index e419bb8f..85ffc794 100644 --- a/assets/script/game/map/MissionCardComp.ts +++ b/assets/script/game/map/MissionCardComp.ts @@ -138,7 +138,7 @@ export class MissionCardComp extends CCComp { /** 卡牌面板收起态缩放（scale=0 隐藏） */ private cardsHideScale: Vec3 = new Vec3(0, 0, 1); /** 卡牌原始定位点 */ - private cardsPos = [-260,86,-86,260] + private cardsPos = [-260,-86,86,260] /** * 英雄信息面板映射：EID → { node, model, comp } * 用于追踪每个出战英雄的面板实例和数据引用