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

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

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

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

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