feat(map): add mission card panel show/hide logic
- add constant configs for card panel animation and positions - add showCards and closeCards click event listeners and cleanup - implement onShowCardsClick and onCloseCardsClick methods with slide animation - fix panel node array order and update related comments - enable card panel by default when entering prepare phase
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -225,6 +225,13 @@ export class MissionCardComp extends CCComp {
|
||||
*/
|
||||
private upgradeRotationIndex: number = 0;
|
||||
|
||||
/** 卡牌面板显示位置 Y 坐标 */
|
||||
private readonly cardPanelShowY: number = 0;
|
||||
/** 卡牌面板隐藏位置 Y 坐标(向下 700) */
|
||||
private readonly cardPanelHideY: number = -700;
|
||||
/** 卡牌面板显示/隐藏动画时长 */
|
||||
private readonly cardPanelAnimDuration: number = 0.25;
|
||||
|
||||
// ======================== 生命周期 ========================
|
||||
|
||||
/**
|
||||
@@ -257,6 +264,12 @@ export class MissionCardComp extends CCComp {
|
||||
if (this.showHeros && this.showHeros.isValid) {
|
||||
this.showHeros.off(NodeEventType.TOUCH_END, this.onShowHerosClick, this);
|
||||
}
|
||||
if (this.showCards && this.showCards.isValid) {
|
||||
this.showCards.off(NodeEventType.TOUCH_END, this.onShowCardsClick, this);
|
||||
}
|
||||
if (this.closeCards && this.closeCards.isValid) {
|
||||
this.closeCards.off(NodeEventType.TOUCH_END, this.onCloseCardsClick, this);
|
||||
}
|
||||
if (this.showEquips && this.showEquips.isValid) {
|
||||
this.showEquips.off(NodeEventType.TOUCH_END, this.onShowEquipsClick, this);
|
||||
}
|
||||
@@ -387,6 +400,11 @@ export class MissionCardComp extends CCComp {
|
||||
this.cards_chou?.on(NodeEventType.TOUCH_END, this.onDrawTouchEnd, this);
|
||||
this.cards_chou?.on(NodeEventType.TOUCH_CANCEL, this.onDrawTouchCancel, this);
|
||||
|
||||
/** 显示卡牌面板按钮 */
|
||||
this.showCards?.on(NodeEventType.TOUCH_END, this.onShowCardsClick, this);
|
||||
/** 隐藏卡牌面板按钮 */
|
||||
this.closeCards?.on(NodeEventType.TOUCH_END, this.onCloseCardsClick, this);
|
||||
|
||||
/** 英雄面板显示按钮 */
|
||||
this.showHeros?.on(NodeEventType.TOUCH_END, this.onShowHerosClick, this);
|
||||
|
||||
@@ -670,6 +688,12 @@ export class MissionCardComp extends CCComp {
|
||||
if (this.showHeros && this.showHeros.isValid) {
|
||||
this.showHeros.off(NodeEventType.TOUCH_END, this.onShowHerosClick, this);
|
||||
}
|
||||
if (this.showCards && this.showCards.isValid) {
|
||||
this.showCards.off(NodeEventType.TOUCH_END, this.onShowCardsClick, this);
|
||||
}
|
||||
if (this.closeCards && this.closeCards.isValid) {
|
||||
this.closeCards.off(NodeEventType.TOUCH_END, this.onCloseCardsClick, this);
|
||||
}
|
||||
if (this.showEquips && this.showEquips.isValid) {
|
||||
this.showEquips.off(NodeEventType.TOUCH_END, this.onShowEquipsClick, this);
|
||||
}
|
||||
@@ -850,7 +874,7 @@ export class MissionCardComp extends CCComp {
|
||||
|
||||
/** 面板节点数组(顺序:英雄→装备→技能→药品) */
|
||||
private getPanelNodes(): Node[] {
|
||||
return [this.cards_node, this.equipsPanNode, this.skill_card_node, this.shopPanNode];
|
||||
return [this.herosPanNode, this.equipsPanNode, this.skillPanNode, this.shopPanNode];
|
||||
}
|
||||
|
||||
/** 面板显示按钮数组(同上排序) */
|
||||
@@ -959,6 +983,36 @@ export class MissionCardComp extends CCComp {
|
||||
this.slideToPanel(0);
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示卡牌面板:从底部向上滑入到 Y=0
|
||||
*/
|
||||
private onShowCardsClick() {
|
||||
oops.audio.playEffect("music/button");
|
||||
if (!this.cardPanNode || !this.cardPanNode.isValid) return;
|
||||
this.cardPanNode.active = true;
|
||||
Tween.stopAllByTarget(this.cardPanNode);
|
||||
tween(this.cardPanNode)
|
||||
.to(this.cardPanelAnimDuration, { position: new Vec3(0, this.cardPanelShowY, 0) }, { easing: 'quadOut' })
|
||||
.start();
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏卡牌面板:向下滑出到 Y=-700
|
||||
*/
|
||||
private onCloseCardsClick() {
|
||||
oops.audio.playEffect("music/button");
|
||||
if (!this.cardPanNode || !this.cardPanNode.isValid) return;
|
||||
Tween.stopAllByTarget(this.cardPanNode);
|
||||
tween(this.cardPanNode)
|
||||
.to(this.cardPanelAnimDuration, { position: new Vec3(0, this.cardPanelHideY, 0) }, { easing: 'quadIn' })
|
||||
.call(() => {
|
||||
if (this.cardPanNode && this.cardPanNode.isValid) {
|
||||
this.cardPanNode.active = false;
|
||||
}
|
||||
})
|
||||
.start();
|
||||
}
|
||||
|
||||
// ======================== 装备商店面板 ========================
|
||||
|
||||
/**
|
||||
@@ -1192,6 +1246,7 @@ export class MissionCardComp extends CCComp {
|
||||
* - 初始化面板轮播布局(如尚未初始化)。
|
||||
* - 滑动到英雄面板(index=0),作为默认展示。
|
||||
* - 激活 showHeros 按钮可见性。
|
||||
* - 显示卡牌面板(从底部滑入)。
|
||||
*/
|
||||
private enterPreparePhase() {
|
||||
if (!this.cards_node || !this.cards_node.isValid) return;
|
||||
@@ -1210,6 +1265,11 @@ export class MissionCardComp extends CCComp {
|
||||
nobg.active = !this.canDrawCards();
|
||||
}
|
||||
}
|
||||
// 显示卡牌面板(默认进入准备阶段时展开)
|
||||
if (this.cardPanNode && this.cardPanNode.isValid) {
|
||||
this.cardPanNode.active = true;
|
||||
this.cardPanNode.setPosition(0, this.cardPanelShowY, 0);
|
||||
}
|
||||
// 滑动到英雄面板
|
||||
this.slideToPanel(0);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user