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

feat(ui): 将卡牌槽位从4个调整为3个并更新布局

Browse Source 
- 隐藏第四个卡牌槽位，将抽卡逻辑从4张改为3张
- 调整卡牌预制体中的位置和尺寸以适配新布局
- 更新角色控制器UI的宽度和间距设置
- 修改卡牌放大时的位置判定阈值和高度
This commit is contained in:
panw
2026-04-24 10:05:16 +08:00
parent 5dfc790412
commit 051342a9c4
4 changed files with 535 additions and 654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1117
assets/resources/gui/element/card.prefab
View File

File diff suppressed because it is too large Load Diff

22
assets/resources/gui/role_controller.prefab
View File

@@ -14093,7 +14093,7 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 320,
"width": 220,
"height": 150
},
"_anchorPoint": {
@@ -14127,11 +14127,11 @@
"height": 40
},
"_startAxis": 0,
"_paddingLeft": 100,
"_paddingLeft": 0,
"_paddingRight": 0,
"_paddingTop": 0,
"_paddingBottom": 0,
"_spacingX": 50,
"_spacingX": 0,
"_spacingY": 0,
"_verticalDirection": 1,
"_horizontalDirection": 0,
@@ -14159,8 +14159,8 @@
},
"_alignFlags": 44,
"_target": null,
"_left": 200,
"_right": 200,
"_left": 250,
"_right": 250,
"_top": 1230,
"_bottom": 7.988,
"_horizontalCenter": 0,
@@ -15364,7 +15364,7 @@
"__id__": 965
}
],
"_active": false,
"_active": true,
"_components": [
{
"__id__": 982
@@ -20058,8 +20058,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 134.7058823529412,
"height": 57.64705882352941
"width": 252.3529411764706,
"height": 104.70588235294117
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -20183,8 +20183,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 300,
"height": 120
"width": 500,
"height": 200
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -20284,7 +20284,7 @@
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 280.807,
"_bottom": 240.80700000000002,
"_horizontalCenter": 0,
"_verticalCenter": 0,
"_isAbsLeft": true,

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

@@ -416,7 +416,7 @@ export class CardComp extends CCComp {
// x轴偏移逻辑
if (this.restPosition.x < -200) { // -260
targetX = this.restPosition.x + 30;
} else if (this.restPosition.x > 200) { // 260
} else if (this.restPosition.x > 80) { // 260 -> 86也算
targetX = this.restPosition.x - 30;
}
// y轴变大时 +35
@@ -549,7 +549,7 @@ export class CardComp extends CCComp {
if (this.isEnlarged) {
if (this.restPosition.x <= -200) {
baseX = this.restPosition.x + 30;
} else if (this.restPosition.x >= 200) {
} else if (this.restPosition.x >= 80) {
baseX = this.restPosition.x - 30;
}
baseY = this.restPosition.y + 35;
@@ -657,7 +657,7 @@ export class CardComp extends CCComp {
this.node.setSiblingIndex(99); // 变大时提到最前
if (this.restPosition.x <= -200) { // -260
targetX = this.restPosition.x + 30;
} else if (this.restPosition.x >= 200) { // 260
} else if (this.restPosition.x >= 80) { // 260 -> 86也算
targetX = this.restPosition.x - 30;
}
targetY = this.restPosition.y + 35; // y轴增加
@@ -705,7 +705,7 @@ export class CardComp extends CCComp {
// ---- 按卡牌类型渲染具体内容 ----
const uiTrans = this.node.getComponent(UITransform);
if (uiTrans) {
uiTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
uiTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = this.node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
@@ -714,14 +714,14 @@ export class CardComp extends CCComp {
if (this.BG_node) {
const bgTrans = this.BG_node.getComponent(UITransform);
if (bgTrans) {
bgTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
bgTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = this.BG_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.BG_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) {
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
@@ -741,14 +741,14 @@ export class CardComp extends CCComp {
if (this.HF_node) {
const hfTrans = this.HF_node.getComponent(UITransform);
if (hfTrans) {
hfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
hfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = this.HF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.HF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) {
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
@@ -758,14 +758,14 @@ export class CardComp extends CCComp {
if (this.NF_node) {
const nfTrans = this.NF_node.getComponent(UITransform);
if (nfTrans) {
nfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
nfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = this.NF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.NF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) {
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
@@ -776,7 +776,7 @@ export class CardComp extends CCComp {
if (hbNode) {
const hbTrans = hbNode.getComponent(UITransform);
if (hbTrans) {
hbTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
hbTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 340 : 230);
const widget = hbNode.getComponent(Widget);
if (widget) widget.updateAlignment();
}
@@ -905,7 +905,7 @@ export class CardComp extends CCComp {
if (this.isEnlarged) {
if (this.restPosition.x <= -200) {
targetX = this.restPosition.x + 30;
} else if (this.restPosition.x >= 200) {
} else if (this.restPosition.x >= 80) {
targetX = this.restPosition.x - 30;
}
targetY = this.restPosition.y + 35;

26
assets/script/game/map/MissionCardComp.ts
View File

@@ -520,7 +520,10 @@ export class MissionCardComp extends CCComp {
/** 将四个卡槽节点映射为 CardComp，形成固定顺序控制数组 */
private cacheCardComps() {
const nodes = [this.card1, this.card2, this.card3, this.card4];
if (this.card4) {
this.card4.active = false;
}
const nodes = [this.card1, this.card2, this.card3];
this.cardComps = nodes
.map(node => node?.getComponent(CardComp))
.filter((comp): comp is CardComp => !!comp);
@@ -641,7 +644,7 @@ export class MissionCardComp extends CCComp {
});
}
/** 构建本次抽卡结果，保证最终可分发4条数据 */
/** 构建本次抽卡结果，保证最终可分发3条数据 */
private buildDrawCards(): CardConfig[] {
let targetType: CardType | CardType[] | undefined = undefined;
if (this.isBattlePhase) {
@@ -651,11 +654,11 @@ export class MissionCardComp extends CCComp {
}
const cards = getCardsByLv(this.poolLv, targetType);
/** 正常情况下直接取前4 */
if (cards.length >= 4) return cards.slice(0, 4);
/** 兜底：当返回不足4张时循环补齐，保证分发不缺位 */
/** 正常情况下直接取前3 */
if (cards.length >= 3) return cards.slice(0, 3);
/** 兜底：当返回不足3张时循环补齐，保证分发不缺位 */
const filled = [...cards];
while (filled.length < 4) {
while (filled.length < 3) {
const fallback = getCardsByLv(this.poolLv, targetType);
if (fallback.length === 0) break;
filled.push(fallback[filled.length % fallback.length]);
@@ -665,14 +668,14 @@ export class MissionCardComp extends CCComp {
private tryRefreshHeroCards(heroType?: HType, targetPoolLv?: number): boolean {
const cards = drawCardsByRule(this.poolLv, {
count: 4,
count: 3,
type: CardType.Hero,
heroType,
targetPoolLv
});
if (cards.length <= 0) return false;
this.layoutCardSlots();
this.dispatchCardsToSlots(cards.slice(0, 4));
this.dispatchCardsToSlots(cards.slice(0, 3));
return true;
}
@@ -708,15 +711,12 @@ export class MissionCardComp extends CCComp {
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);
this.cardComps[i].setSlotPosition(this.cardsPos[i]);
}
mLogger.log(this.debugMode, "MissionCardComp", "layout card slots", {
count,
cardWidth: this.cardWidth,
startX
cardWidth: this.cardWidth
});
}