카드 손패를 화면 하단에 배치 (AlignmentOption BottomCenter 교정) + 단색 카드 배경

MSW가 AlignmentOption으로 앵커를 결정하는 점을 반영해 컨테이너를 BottomCenter(6)로,
카드 내부 텍스트는 Center 기준 오프셋으로 교정. 카드 배경은 단색 채움으로 변경.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-06 05:58:25 +09:00
parent 700e3ee373
commit c9c761db04
2 changed files with 146 additions and 145 deletions

View File

@@ -12,15 +12,16 @@ const cards = [
{ name: '방어', cost: '1', desc: '방어도 5', tint: DEFEND },
{ name: '강타', cost: '2', desc: '피해 10', tint: ATTACK },
];
const CARD_BG_RUID = 'cd0560c4fc7f3b14994b90a502f00a21'; // 기존 버튼 스프라이트 재사용
const CARD_W = 180, CARD_H = 250, CARD_SPACING = 200;
// AlignmentType enum: Center=0, TopLeft=4, BottomCenter=6 (MSW가 이 값으로 앵커를 결정)
const ALIGN_CENTER = 0, ALIGN_BOTTOM_CENTER = 6;
// ---- guid helper (deterministic, hex-safe) ----
const guid = (n) =>
`cad000${n.toString(16).padStart(2, '0')}-0000-4000-8000-${n.toString(16).padStart(12, '0')}`;
// ---- component builders ----
function transform({ parentW, parentH, anchor, pivot, size, pos }) {
function transform({ parentW, parentH, anchor, pivot, size, pos, align = 0 }) {
const offMin = { x: pos.x - pivot.x * size.x, y: pos.y - pivot.y * size.y };
const offMax = { x: pos.x + (1 - pivot.x) * size.x, y: pos.y + (1 - pivot.y) * size.y };
const position = {
@@ -31,7 +32,7 @@ function transform({ parentW, parentH, anchor, pivot, size, pos }) {
return {
'@type': 'MOD.Core.UITransformComponent',
ActivePlatform: 255,
AlignmentOption: 0,
AlignmentOption: align,
AnchorsMax: { x: anchor.x, y: anchor.y },
AnchorsMin: { x: anchor.x, y: anchor.y },
MobileOnly: false,
@@ -159,7 +160,7 @@ ents.push(entity({
componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent',
displayOrder: 4,
components: [
transform({ parentW: 1920, parentH: 1080, anchor: { x: 0.5, y: 0 }, pivot: { x: 0.5, y: 0 }, size: { x: 1020, y: 280 }, pos: { x: 0, y: 30 } }),
transform({ parentW: 1920, parentH: 1080, anchor: { x: 0.5, y: 0 }, pivot: { x: 0.5, y: 0.5 }, size: { x: 1020, y: 280 }, pos: { x: 0, y: 180 }, align: ALIGN_BOTTOM_CENTER }),
sprite({ color: TRANSPARENT, type: 1, raycast: false }),
],
}));
@@ -175,8 +176,8 @@ cards.forEach((c, i) => {
componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent',
displayOrder: i,
components: [
transform({ parentW: 1020, parentH: 280, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: { x: CARD_W, y: CARD_H }, pos: { x: (i - (cards.length - 1) / 2) * CARD_SPACING, y: 0 } }),
sprite({ dataId: CARD_BG_RUID, color: c.tint, type: 0, raycast: true }),
transform({ parentW: 1020, parentH: 280, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: { x: CARD_W, y: CARD_H }, pos: { x: (i - (cards.length - 1) / 2) * CARD_SPACING, y: 0 }, align: ALIGN_CENTER }),
sprite({ color: c.tint, type: 1, raycast: true }),
],
}));
// cost (top-left)
@@ -188,7 +189,7 @@ cards.forEach((c, i) => {
componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent,MOD.Core.TextComponent',
displayOrder: 0,
components: [
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0, y: 1 }, pivot: { x: 0.5, y: 0.5 }, size: { x: 50, y: 50 }, pos: { x: 32, y: -32 } }),
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: { x: 50, y: 50 }, pos: { x: -60, y: 95 } }),
sprite({ color: TRANSPARENT, type: 1, raycast: false }),
text({ value: c.cost, fontSize: 34, bold: true }),
],
@@ -202,7 +203,7 @@ cards.forEach((c, i) => {
componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent,MOD.Core.TextComponent',
displayOrder: 1,
components: [
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 1 }, pivot: { x: 0.5, y: 0.5 }, size: { x: 160, y: 50 }, pos: { x: 0, y: -70 } }),
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: { x: 160, y: 50 }, pos: { x: 0, y: 50 } }),
sprite({ color: TRANSPARENT, type: 1, raycast: false }),
text({ value: c.name, fontSize: 28, bold: true }),
],
@@ -216,7 +217,7 @@ cards.forEach((c, i) => {
componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent,MOD.Core.TextComponent',
displayOrder: 2,
components: [
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0 }, pivot: { x: 0.5, y: 0.5 }, size: { x: 160, y: 80 }, pos: { x: 0, y: 55 } }),
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: { x: 160, y: 80 }, pos: { x: 0, y: -80 } }),
sprite({ color: TRANSPARENT, type: 1, raycast: false }),
text({ value: c.desc, fontSize: 22, bold: false }),
],

View File

@@ -1091,7 +1091,7 @@
{
"@type": "MOD.Core.UITransformComponent",
"ActivePlatform": 255,
"AlignmentOption": 0,
"AlignmentOption": 6,
"AnchorsMax": {
"x": 0.5,
"y": 0
@@ -1103,15 +1103,15 @@
"MobileOnly": false,
"OffsetMax": {
"x": 510,
"y": 310
"y": 320
},
"OffsetMin": {
"x": -510,
"y": 30
"y": 40
},
"Pivot": {
"x": 0.5,
"y": 0
"y": 0.5
},
"RectSize": {
"x": 1020,
@@ -1126,11 +1126,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": 30
"y": 180
},
"Position": {
"x": 0,
"y": -510,
"y": -360,
"z": 0
},
"QuaternionRotation": {
@@ -1292,7 +1292,7 @@
"AnimClipPlayType": 0,
"EndFrameIndex": 2147483647,
"ImageRUID": {
"DataId": "cd0560c4fc7f3b14994b90a502f00a21"
"DataId": ""
},
"LocalPosition": {
"x": 0,
@@ -1340,7 +1340,7 @@
},
"OutlineWidth": 3,
"RaycastTarget": true,
"Type": 0,
"Type": 1,
"Enable": true
}
],
@@ -1375,21 +1375,21 @@
"ActivePlatform": 255,
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"AnchorsMin": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 57,
"y": -7
"x": -35,
"y": 120
},
"OffsetMin": {
"x": 7,
"y": -57
"x": -85,
"y": 70
},
"Pivot": {
"x": 0.5,
@@ -1407,12 +1407,12 @@
},
"UIVersion": 2,
"anchoredPosition": {
"x": 32,
"y": -32
"x": -60,
"y": 95
},
"Position": {
"x": -58,
"y": 93,
"x": -60,
"y": 95,
"z": 0
},
"QuaternionRotation": {
@@ -1564,20 +1564,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 1
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 1
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": -45
"y": 75
},
"OffsetMin": {
"x": -80,
"y": -95
"y": 25
},
"Pivot": {
"x": 0.5,
@@ -1596,11 +1596,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": -70
"y": 50
},
"Position": {
"x": 0,
"y": 55,
"y": 50,
"z": 0
},
"QuaternionRotation": {
@@ -1752,20 +1752,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 0
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 0
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": 95
"y": -40
},
"OffsetMin": {
"x": -80,
"y": 15
"y": -120
},
"Pivot": {
"x": 0.5,
@@ -1784,11 +1784,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": 55
"y": -80
},
"Position": {
"x": 0,
"y": -70,
"y": -80,
"z": 0
},
"QuaternionRotation": {
@@ -1997,7 +1997,7 @@
"AnimClipPlayType": 0,
"EndFrameIndex": 2147483647,
"ImageRUID": {
"DataId": "cd0560c4fc7f3b14994b90a502f00a21"
"DataId": ""
},
"LocalPosition": {
"x": 0,
@@ -2045,7 +2045,7 @@
},
"OutlineWidth": 3,
"RaycastTarget": true,
"Type": 0,
"Type": 1,
"Enable": true
}
],
@@ -2080,21 +2080,21 @@
"ActivePlatform": 255,
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"AnchorsMin": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 57,
"y": -7
"x": -35,
"y": 120
},
"OffsetMin": {
"x": 7,
"y": -57
"x": -85,
"y": 70
},
"Pivot": {
"x": 0.5,
@@ -2112,12 +2112,12 @@
},
"UIVersion": 2,
"anchoredPosition": {
"x": 32,
"y": -32
"x": -60,
"y": 95
},
"Position": {
"x": -58,
"y": 93,
"x": -60,
"y": 95,
"z": 0
},
"QuaternionRotation": {
@@ -2269,20 +2269,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 1
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 1
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": -45
"y": 75
},
"OffsetMin": {
"x": -80,
"y": -95
"y": 25
},
"Pivot": {
"x": 0.5,
@@ -2301,11 +2301,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": -70
"y": 50
},
"Position": {
"x": 0,
"y": 55,
"y": 50,
"z": 0
},
"QuaternionRotation": {
@@ -2457,20 +2457,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 0
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 0
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": 95
"y": -40
},
"OffsetMin": {
"x": -80,
"y": 15
"y": -120
},
"Pivot": {
"x": 0.5,
@@ -2489,11 +2489,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": 55
"y": -80
},
"Position": {
"x": 0,
"y": -70,
"y": -80,
"z": 0
},
"QuaternionRotation": {
@@ -2702,7 +2702,7 @@
"AnimClipPlayType": 0,
"EndFrameIndex": 2147483647,
"ImageRUID": {
"DataId": "cd0560c4fc7f3b14994b90a502f00a21"
"DataId": ""
},
"LocalPosition": {
"x": 0,
@@ -2750,7 +2750,7 @@
},
"OutlineWidth": 3,
"RaycastTarget": true,
"Type": 0,
"Type": 1,
"Enable": true
}
],
@@ -2785,21 +2785,21 @@
"ActivePlatform": 255,
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"AnchorsMin": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 57,
"y": -7
"x": -35,
"y": 120
},
"OffsetMin": {
"x": 7,
"y": -57
"x": -85,
"y": 70
},
"Pivot": {
"x": 0.5,
@@ -2817,12 +2817,12 @@
},
"UIVersion": 2,
"anchoredPosition": {
"x": 32,
"y": -32
"x": -60,
"y": 95
},
"Position": {
"x": -58,
"y": 93,
"x": -60,
"y": 95,
"z": 0
},
"QuaternionRotation": {
@@ -2974,20 +2974,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 1
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 1
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": -45
"y": 75
},
"OffsetMin": {
"x": -80,
"y": -95
"y": 25
},
"Pivot": {
"x": 0.5,
@@ -3006,11 +3006,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": -70
"y": 50
},
"Position": {
"x": 0,
"y": 55,
"y": 50,
"z": 0
},
"QuaternionRotation": {
@@ -3162,20 +3162,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 0
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 0
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": 95
"y": -40
},
"OffsetMin": {
"x": -80,
"y": 15
"y": -120
},
"Pivot": {
"x": 0.5,
@@ -3194,11 +3194,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": 55
"y": -80
},
"Position": {
"x": 0,
"y": -70,
"y": -80,
"z": 0
},
"QuaternionRotation": {
@@ -3407,7 +3407,7 @@
"AnimClipPlayType": 0,
"EndFrameIndex": 2147483647,
"ImageRUID": {
"DataId": "cd0560c4fc7f3b14994b90a502f00a21"
"DataId": ""
},
"LocalPosition": {
"x": 0,
@@ -3455,7 +3455,7 @@
},
"OutlineWidth": 3,
"RaycastTarget": true,
"Type": 0,
"Type": 1,
"Enable": true
}
],
@@ -3490,21 +3490,21 @@
"ActivePlatform": 255,
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"AnchorsMin": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 57,
"y": -7
"x": -35,
"y": 120
},
"OffsetMin": {
"x": 7,
"y": -57
"x": -85,
"y": 70
},
"Pivot": {
"x": 0.5,
@@ -3522,12 +3522,12 @@
},
"UIVersion": 2,
"anchoredPosition": {
"x": 32,
"y": -32
"x": -60,
"y": 95
},
"Position": {
"x": -58,
"y": 93,
"x": -60,
"y": 95,
"z": 0
},
"QuaternionRotation": {
@@ -3679,20 +3679,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 1
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 1
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": -45
"y": 75
},
"OffsetMin": {
"x": -80,
"y": -95
"y": 25
},
"Pivot": {
"x": 0.5,
@@ -3711,11 +3711,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": -70
"y": 50
},
"Position": {
"x": 0,
"y": 55,
"y": 50,
"z": 0
},
"QuaternionRotation": {
@@ -3867,20 +3867,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 0
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 0
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": 95
"y": -40
},
"OffsetMin": {
"x": -80,
"y": 15
"y": -120
},
"Pivot": {
"x": 0.5,
@@ -3899,11 +3899,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": 55
"y": -80
},
"Position": {
"x": 0,
"y": -70,
"y": -80,
"z": 0
},
"QuaternionRotation": {
@@ -4112,7 +4112,7 @@
"AnimClipPlayType": 0,
"EndFrameIndex": 2147483647,
"ImageRUID": {
"DataId": "cd0560c4fc7f3b14994b90a502f00a21"
"DataId": ""
},
"LocalPosition": {
"x": 0,
@@ -4160,7 +4160,7 @@
},
"OutlineWidth": 3,
"RaycastTarget": true,
"Type": 0,
"Type": 1,
"Enable": true
}
],
@@ -4195,21 +4195,21 @@
"ActivePlatform": 255,
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"AnchorsMin": {
"x": 0,
"y": 1
"x": 0.5,
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 57,
"y": -7
"x": -35,
"y": 120
},
"OffsetMin": {
"x": 7,
"y": -57
"x": -85,
"y": 70
},
"Pivot": {
"x": 0.5,
@@ -4227,12 +4227,12 @@
},
"UIVersion": 2,
"anchoredPosition": {
"x": 32,
"y": -32
"x": -60,
"y": 95
},
"Position": {
"x": -58,
"y": 93,
"x": -60,
"y": 95,
"z": 0
},
"QuaternionRotation": {
@@ -4384,20 +4384,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 1
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 1
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": -45
"y": 75
},
"OffsetMin": {
"x": -80,
"y": -95
"y": 25
},
"Pivot": {
"x": 0.5,
@@ -4416,11 +4416,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": -70
"y": 50
},
"Position": {
"x": 0,
"y": 55,
"y": 50,
"z": 0
},
"QuaternionRotation": {
@@ -4572,20 +4572,20 @@
"AlignmentOption": 0,
"AnchorsMax": {
"x": 0.5,
"y": 0
"y": 0.5
},
"AnchorsMin": {
"x": 0.5,
"y": 0
"y": 0.5
},
"MobileOnly": false,
"OffsetMax": {
"x": 80,
"y": 95
"y": -40
},
"OffsetMin": {
"x": -80,
"y": 15
"y": -120
},
"Pivot": {
"x": 0.5,
@@ -4604,11 +4604,11 @@
"UIVersion": 2,
"anchoredPosition": {
"x": 0,
"y": 55
"y": -80
},
"Position": {
"x": 0,
"y": -70,
"y": -80,
"z": 0
},
"QuaternionRotation": {