feat(ui): 添加卡槽自动布局并禁用角色控制器节点
- 在 CardComp 中新增 setSlotPosition 方法,支持动态设置卡槽位置 - 在 MissionCardComp 中实现 layoutCardSlots 方法,根据卡槽数量自动水平居中布局 - 在任务开始、抽卡等关键时机调用布局更新,确保卡槽位置正确 - 禁用角色控制器预制件中的节点,防止其干扰UI交互
This commit is contained in:
@@ -8635,7 +8635,7 @@
|
|||||||
"node": {
|
"node": {
|
||||||
"__id__": 342
|
"__id__": 342
|
||||||
},
|
},
|
||||||
"_enabled": true,
|
"_enabled": false,
|
||||||
"__prefab": {
|
"__prefab": {
|
||||||
"__id__": 380
|
"__id__": 380
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -159,6 +159,14 @@ export class CardComp extends CCComp {
|
|||||||
return this.isLocked;
|
return this.isLocked;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setSlotPosition(x: number) {
|
||||||
|
const current = this.node.position;
|
||||||
|
this.restPosition = new Vec3(x, current.y, current.z);
|
||||||
|
if (!this.isDragging && !this.isUsing) {
|
||||||
|
this.node.setPosition(this.restPosition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/** 系统清槽:用于任务开始/结束等强制重置场景 */
|
/** 系统清槽:用于任务开始/结束等强制重置场景 */
|
||||||
clearBySystem() {
|
clearBySystem() {
|
||||||
Tween.stopAllByTarget(this.node);
|
Tween.stopAllByTarget(this.node);
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ const { ccclass, property } = _decorator;
|
|||||||
@ecs.register('MissionCard', false)
|
@ecs.register('MissionCard', false)
|
||||||
export class MissionCardComp extends CCComp {
|
export class MissionCardComp extends CCComp {
|
||||||
private debugMode: boolean = true;
|
private debugMode: boolean = true;
|
||||||
|
private readonly cardWidth: number = 175;
|
||||||
/** 四个插卡槽位(固定顺序分发:1~4) */
|
/** 四个插卡槽位(固定顺序分发:1~4) */
|
||||||
@property(Node)
|
@property(Node)
|
||||||
card1:Node = null!
|
card1:Node = null!
|
||||||
@@ -39,6 +40,7 @@ export class MissionCardComp extends CCComp {
|
|||||||
/** 绑定事件 -> 缓存子控制器 -> 初始化UI状态 */
|
/** 绑定事件 -> 缓存子控制器 -> 初始化UI状态 */
|
||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
this.cacheCardComps();
|
this.cacheCardComps();
|
||||||
|
this.layoutCardSlots();
|
||||||
this.onMissionStart();
|
this.onMissionStart();
|
||||||
mLogger.log(this.debugMode, "MissionCardComp", "onLoad init", {
|
mLogger.log(this.debugMode, "MissionCardComp", "onLoad init", {
|
||||||
slots: this.cardComps.length,
|
slots: this.cardComps.length,
|
||||||
@@ -56,6 +58,7 @@ export class MissionCardComp extends CCComp {
|
|||||||
/** 任务开始时:重置卡池等级、清空4槽、显示面板 */
|
/** 任务开始时:重置卡池等级、清空4槽、显示面板 */
|
||||||
onMissionStart() {
|
onMissionStart() {
|
||||||
this.poolLv = CARD_POOL_INIT_LEVEL;
|
this.poolLv = CARD_POOL_INIT_LEVEL;
|
||||||
|
this.layoutCardSlots();
|
||||||
this.clearAllCards();
|
this.clearAllCards();
|
||||||
if (this.cards_up) {
|
if (this.cards_up) {
|
||||||
this.cards_up.active = true;
|
this.cards_up.active = true;
|
||||||
@@ -113,6 +116,7 @@ export class MissionCardComp extends CCComp {
|
|||||||
mLogger.log(this.debugMode, "MissionCardComp", "click draw", {
|
mLogger.log(this.debugMode, "MissionCardComp", "click draw", {
|
||||||
poolLv: this.poolLv
|
poolLv: this.poolLv
|
||||||
});
|
});
|
||||||
|
this.layoutCardSlots();
|
||||||
const cards = this.buildDrawCards();
|
const cards = this.buildDrawCards();
|
||||||
this.dispatchCardsToSlots(cards);
|
this.dispatchCardsToSlots(cards);
|
||||||
}
|
}
|
||||||
@@ -163,6 +167,21 @@ export class MissionCardComp extends CCComp {
|
|||||||
this.cardComps.forEach(comp => comp.clearBySystem());
|
this.cardComps.forEach(comp => comp.clearBySystem());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private layoutCardSlots() {
|
||||||
|
const count = this.cardComps.length;
|
||||||
|
if (count === 0) return;
|
||||||
|
const startX = -((count - 1) * this.cardWidth) / 2;
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
const x = startX + i * this.cardWidth;
|
||||||
|
this.cardComps[i].setSlotPosition(x);
|
||||||
|
}
|
||||||
|
mLogger.log(this.debugMode, "MissionCardComp", "layout card slots", {
|
||||||
|
count,
|
||||||
|
cardWidth: this.cardWidth,
|
||||||
|
startX
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/** 更新升级按钮上的等级文案,反馈当前卡池层级 */
|
/** 更新升级按钮上的等级文案,反馈当前卡池层级 */
|
||||||
private updatePoolLvUI() {
|
private updatePoolLvUI() {
|
||||||
if (!this.cards_up) return;
|
if (!this.cards_up) return;
|
||||||
|
|||||||
Reference in New Issue
Block a user