gahusb/maplecontest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 카드 텍스트 가독성 개선

Browse Source
This commit is contained in:
gahusb
2026-06-14 21:23:52 +09:00
parent a24f3592c4
commit a88c1d344c
2 changed files with 7054 additions and 7049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
tools/deck/gen-slaydeck.mjs
View File

@@ -216,7 +216,8 @@ const HEAD_OFFSET_Y = 1.4; // 몬스터 월드 원점 위로 띄울 높이(머
const HP_BAR_W = 140;
const WHITE = { r: 1, g: 1, b: 1, a: 1 };
const INK = { r: 0.13, g: 0.11, b: 0.09, a: 1 }; // 밝은 배너·설명 박스 위 먹색 글자
const CARD_NAME_TEXT = { r: 1, g: 0.92, b: 0.62, a: 1 };
const CARD_DESC_TEXT = { r: 0.98, g: 0.96, b: 0.9, a: 1 };
// 카드 프레임(1054×1492 원본) 슬롯 레이아웃 — 픽셀 실측을 180×250 카드 좌표로 환산한 기준값을 폭 비례 스케일.
// 실측(워리어·메이지·밴딧 공통): 육각 중심 (120,127)→(-70,104) · 배너 본체 y55..165, x215..1015→중심 (+15,+107)
// · 설명 박스 y~1030..1480→중심 (0,-86) · 아트 영역 y260..1030→중심 (0,+17)
@@ -225,9 +226,9 @@ function cardFaceLayout(W) {
const r = (v) => Math.round(v * s);
return {
texts: [
['Cost', { size: { x: r(40), y: r(40) }, pos: { x: r(-70), y: r(104) }, fontSize: r(24), bold: true, color: WHITE }],
['Name', { size: { x: r(132), y: r(24) }, pos: { x: r(15), y: r(107) }, fontSize: r(16), bold: true, color: INK }],
['Desc', { size: { x: r(150), y: r(62) }, pos: { x: 0, y: r(-86) }, fontSize: r(16), bold: false, color: INK }],
['Cost', { size: { x: r(40), y: r(40) }, pos: { x: r(-70), y: r(104) }, fontSize: r(24), bold: true, color: WHITE, dropShadow: true, outlineWidth: 2 }],
['Name', { size: { x: r(142), y: r(28) }, pos: { x: r(15), y: r(106) }, fontSize: r(17), bold: true, color: CARD_NAME_TEXT, dropShadow: true, outlineWidth: 2 }],
['Desc', { size: { x: r(158), y: r(78) }, pos: { x: 0, y: r(-82) }, fontSize: r(14), bold: true, color: CARD_DESC_TEXT, dropShadow: true, outlineWidth: 2 }],
],
art: { size: { x: r(112), y: r(112) }, pos: { x: 0, y: r(17) } },
};
@@ -334,15 +335,15 @@ function button({ enabled = true } = {}) {
};
}
function text({ value, fontSize, bold = false, color = { r: 1, g: 1, b: 1, a: 1 }, alignment = 4 }) {
function text({ value, fontSize, bold = false, color = { r: 1, g: 1, b: 1, a: 1 }, alignment = 4, dropShadow = false, outlineWidth = 1 }) {
return {
'@type': 'MOD.Core.TextComponent',
Alignment: alignment,
Bold: bold,
DropShadow: false,
DropShadow: dropShadow,
DropShadowAngle: 30,
DropShadowColor: { r: 0, g: 0, b: 0, a: 0.72 },
DropShadowDistance: 32,
DropShadowDistance: dropShadow ? 18 : 32,
Font: 0,
FontColor: color,
FontSize: fontSize,
@@ -350,7 +351,7 @@ function text({ value, fontSize, bold = false, color = { r: 1, g: 1, b: 1, a: 1
MinSize: 8,
OutlineColor: { r: 0.08, g: 0.08, b: 0.08, a: 1 },
OutlineDistance: { x: 1, y: -1 },
OutlineWidth: 1,
OutlineWidth: outlineWidth,
Overflow: 0,
OverrideSorting: false,
Padding: { left: 0, right: 0, top: 0, bottom: 0 },
@@ -586,7 +587,7 @@ function upsertUi() {
components: [
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
sprite({ color: TRANSPARENT }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
],
});
ui.ContentProto.Entities.push(child);
@@ -608,6 +609,10 @@ function upsertUi() {
child.jsonString['@components'][2].FontSize = cfg.fontSize;
child.jsonString['@components'][2].MaxSize = cfg.fontSize;
child.jsonString['@components'][2].FontColor = cfg.color;
child.jsonString['@components'][2].Bold = cfg.bold;
child.jsonString['@components'][2].DropShadow = cfg.dropShadow === true;
child.jsonString['@components'][2].DropShadowDistance = cfg.dropShadow === true ? 18 : 32;
child.jsonString['@components'][2].OutlineWidth = cfg.outlineWidth || 1;
}
}
@@ -877,7 +882,7 @@ function upsertUi() {
components: [
transform({ parentW: INSPECT_CARD_W, parentH: INSPECT_CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
sprite({ color: TRANSPARENT }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
],
}));
}
@@ -1032,7 +1037,7 @@ function upsertUi() {
components: [
transform({ parentW: ALL_DECK_CARD_W, parentH: ALL_DECK_CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
sprite({ color: TRANSPARENT }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
],
}));
}
@@ -1551,7 +1556,7 @@ function upsertUi() {
components: [
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
sprite({ color: TRANSPARENT }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
],
}));
}
@@ -1775,7 +1780,7 @@ function upsertUi() {
components: [
transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
sprite({ color: TRANSPARENT }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
],
}));
}