feat(card-visuals): 보상·상점·그리드 카드 프레임 적용

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tools/deck/gen-slaydeck.mjs

@@ -691,8 +691,8 @@ function upsertUi() {
   }));
   let insN = 6;
   const INSPECT_CARD_COUNT = 60;
-  const INSPECT_CARD_W = 142;
+  const INSPECT_CARD_W = 158;
-  const INSPECT_CARD_H = 198;
+  const INSPECT_CARD_H = 214;
   for (let i = 1; i <= INSPECT_CARD_COUNT; i++) {
     const cardPath = `/ui/DefaultGroup/DeckInspectHud/Grid/Card${i}`;
     const card = entity({
@@ -710,17 +710,18 @@ function upsertUi() {
     card.jsonString.enable = false;
     inspect.push(card);
     for (const [suffix, cfg] of [
-      ['Cost', { size: { x: 42, y: 38 }, pos: { x: -46, y: 73 }, value: '1', fontSize: 25, bold: true }],
+      ['Cost', { size: { x: 38, y: 38 }, pos: { x: -58, y: 86 }, value: '1', fontSize: 22, bold: true }],
-      ['Name', { size: { x: 126, y: 42 }, pos: { x: 0, y: 34 }, value: '', fontSize: 21, bold: true }],
+      ['Name', { size: { x: 148, y: 26 }, pos: { x: 0, y: -8 }, value: '', fontSize: 17, bold: true }],
-      ['Desc', { size: { x: 126, y: 70 }, pos: { x: 0, y: -58 }, value: '', fontSize: 16, bold: false }],
+      ['Desc', { size: { x: 144, y: 60 }, pos: { x: 0, y: -54 }, value: '', fontSize: 15, bold: false }],
     ]) {
+      const dOrder = suffix === 'Cost' ? 7 : suffix === 'Name' ? 6 : 8;
       inspect.push(entity({
         id: guid('ins', insN++),
         path: `${cardPath}/${suffix}`,
         modelId: 'uitext',
         entryId: 'UIText',
         componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent,MOD.Core.TextComponent',
-        displayOrder: suffix === 'Cost' ? 0 : suffix === 'Name' ? 1 : 2,
+        displayOrder: dOrder,
         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 }),
@@ -728,6 +729,24 @@ function upsertUi() {
         ],
       }));
     }
+    for (const [suffix, dOrder, cfg, color, spriteType] of [
+      ['NamePlate', 3, { size: { x: 148, y: 30 }, pos: { x: 0, y: -8 } }, { r: 0.07, g: 0.08, b: 0.1, a: 0.92 }, 1],
+      ['CostPlate', 4, { size: { x: 38, y: 38 }, pos: { x: -58, y: 86 } }, { r: 0.07, g: 0.08, b: 0.1, a: 0.95 }, 1],
+      ['Art', 5, { size: { x: 84, y: 84 }, pos: { x: 0, y: 44 } }, { r: 1, g: 1, b: 1, a: 1 }, 0],
+    ]) {
+      inspect.push(entity({
+        id: guid('ins', insN++),
+        path: `${cardPath}/${suffix}`,
+        modelId: 'uisprite',
+        entryId: 'UISprite',
+        componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent',
+        displayOrder: dOrder,
+        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, type: spriteType, raycast: false }),
+        ],
+      }));
+    }
   }
   emit('DeckInspectHud', inspect);
 
@@ -813,8 +832,8 @@ function upsertUi() {
   }));
   let allN = 6;
   const ALL_DECK_CARD_COUNT = 120;
-  const ALL_DECK_CARD_W = 142;
+  const ALL_DECK_CARD_W = 158;
-  const ALL_DECK_CARD_H = 198;
+  const ALL_DECK_CARD_H = 214;
   for (let i = 1; i <= ALL_DECK_CARD_COUNT; i++) {
     const cardPath = `/ui/DefaultGroup/DeckAllHud/Grid/Card${i}`;
     const card = entity({
@@ -832,17 +851,18 @@ function upsertUi() {
     card.jsonString.enable = false;
     allDeck.push(card);
     for (const [suffix, cfg] of [
-      ['Cost', { size: { x: 42, y: 38 }, pos: { x: -46, y: 73 }, value: '1', fontSize: 25, bold: true }],
+      ['Cost', { size: { x: 38, y: 38 }, pos: { x: -58, y: 86 }, value: '1', fontSize: 22, bold: true }],
-      ['Name', { size: { x: 126, y: 42 }, pos: { x: 0, y: 34 }, value: '', fontSize: 21, bold: true }],
+      ['Name', { size: { x: 148, y: 26 }, pos: { x: 0, y: -8 }, value: '', fontSize: 17, bold: true }],
-      ['Desc', { size: { x: 126, y: 70 }, pos: { x: 0, y: -58 }, value: '', fontSize: 16, bold: false }],
+      ['Desc', { size: { x: 144, y: 60 }, pos: { x: 0, y: -54 }, value: '', fontSize: 15, bold: false }],
     ]) {
+      const dOrder = suffix === 'Cost' ? 7 : suffix === 'Name' ? 6 : 8;
       allDeck.push(entity({
         id: guid('all', allN++),
         path: `${cardPath}/${suffix}`,
         modelId: 'uitext',
         entryId: 'UIText',
         componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent,MOD.Core.TextComponent',
-        displayOrder: suffix === 'Cost' ? 0 : suffix === 'Name' ? 1 : 2,
+        displayOrder: dOrder,
         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 }),
@@ -850,6 +870,24 @@ function upsertUi() {
         ],
       }));
     }
+    for (const [suffix, dOrder, cfg, color, spriteType] of [
+      ['NamePlate', 3, { size: { x: 148, y: 30 }, pos: { x: 0, y: -8 } }, { r: 0.07, g: 0.08, b: 0.1, a: 0.92 }, 1],
+      ['CostPlate', 4, { size: { x: 38, y: 38 }, pos: { x: -58, y: 86 } }, { r: 0.07, g: 0.08, b: 0.1, a: 0.95 }, 1],
+      ['Art', 5, { size: { x: 84, y: 84 }, pos: { x: 0, y: 44 } }, { r: 1, g: 1, b: 1, a: 1 }, 0],
+    ]) {
+      allDeck.push(entity({
+        id: guid('all', allN++),
+        path: `${cardPath}/${suffix}`,
+        modelId: 'uisprite',
+        entryId: 'UISprite',
+        componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent',
+        displayOrder: dOrder,
+        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, type: spriteType, raycast: false }),
+        ],
+      }));
+    }
   }
   emit('DeckAllHud', allDeck);
 
@@ -1119,17 +1157,18 @@ function upsertUi() {
       ],
     }));
     for (const [suffix, cfg] of [
-      ['Cost', { size: { x: 50, y: 50 }, pos: { x: -60, y: 95 }, value: '1', fontSize: 34, bold: true }],
+      ['Cost', { size: { x: 44, y: 44 }, pos: { x: -68, y: 103 }, value: '1', fontSize: 26, bold: true }],
-      ['Name', { size: { x: 160, y: 50 }, pos: { x: 0, y: 50 }, value: '카드', fontSize: 26, bold: true }],
+      ['Name', { size: { x: 168, y: 30 }, pos: { x: 0, y: -8 }, value: '카드', fontSize: 20, bold: true }],
-      ['Desc', { size: { x: 160, y: 82 }, pos: { x: 0, y: -80 }, value: '', fontSize: 20, bold: false }],
+      ['Desc', { size: { x: 164, y: 70 }, pos: { x: 0, y: -62 }, value: '', fontSize: 18, bold: false }],
     ]) {
+      const dOrder = suffix === 'Cost' ? 7 : suffix === 'Name' ? 6 : 8;
       reward.push(entity({
         id: guid('rwd', rwdN++),
         path: `${cardPath}/${suffix}`,
         modelId: 'uitext',
         entryId: 'UIText',
         componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent,MOD.Core.TextComponent',
-        displayOrder: suffix === 'Cost' ? 0 : suffix === 'Name' ? 1 : 2,
+        displayOrder: dOrder,
         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 }),
@@ -1137,6 +1176,24 @@ function upsertUi() {
         ],
       }));
     }
+    for (const [suffix, dOrder, cfg, color, spriteType] of [
+      ['NamePlate', 3, { size: { x: 168, y: 34 }, pos: { x: 0, y: -8 } }, { r: 0.07, g: 0.08, b: 0.1, a: 0.92 }, 1],
+      ['CostPlate', 4, { size: { x: 44, y: 44 }, pos: { x: -68, y: 103 } }, { r: 0.07, g: 0.08, b: 0.1, a: 0.95 }, 1],
+      ['Art', 5, { size: { x: 96, y: 96 }, pos: { x: 0, y: 52 } }, { r: 1, g: 1, b: 1, a: 1 }, 0],
+    ]) {
+      reward.push(entity({
+        id: guid('rwd', rwdN++),
+        path: `${cardPath}/${suffix}`,
+        modelId: 'uisprite',
+        entryId: 'UISprite',
+        componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent',
+        displayOrder: dOrder,
+        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, type: spriteType, raycast: false }),
+        ],
+      }));
+    }
   }
   reward.push(entity({
     id: guid('rwd', rwdN++),
@@ -1275,18 +1332,19 @@ function upsertUi() {
       ],
     }));
     for (const [suffix, cfg] of [
-      ['Cost', { size: { x: 50, y: 50 }, pos: { x: -60, y: 95 }, value: '1', fontSize: 34, bold: true, color: { r: 1, g: 1, b: 1, a: 1 } }],
+      ['Cost', { size: { x: 44, y: 44 }, pos: { x: -68, y: 103 }, value: '1', fontSize: 26, bold: true, color: { r: 1, g: 1, b: 1, a: 1 } }],
-      ['Name', { size: { x: 160, y: 50 }, pos: { x: 0, y: 50 }, value: '카드', fontSize: 26, bold: true, color: { r: 1, g: 1, b: 1, a: 1 } }],
+      ['Name', { size: { x: 168, y: 30 }, pos: { x: 0, y: -8 }, value: '카드', fontSize: 20, bold: true, color: { r: 1, g: 1, b: 1, a: 1 } }],
-      ['Desc', { size: { x: 160, y: 60 }, pos: { x: 0, y: -50 }, value: '', fontSize: 20, bold: false, color: { r: 1, g: 1, b: 1, a: 1 } }],
+      ['Desc', { size: { x: 164, y: 56 }, pos: { x: 0, y: -58 }, value: '', fontSize: 18, bold: false, color: { r: 1, g: 1, b: 1, a: 1 } }],
       ['Price', { size: { x: 160, y: 40 }, pos: { x: 0, y: -105 }, value: '30 골드', fontSize: 22, bold: true, color: { r: 0.98, g: 0.85, b: 0.4, a: 1 } }],
     ]) {
+      const dOrder = suffix === 'Cost' ? 7 : suffix === 'Name' ? 6 : suffix === 'Desc' ? 8 : 9;
       shop.push(entity({
         id: guid('shp', shpN++),
         path: `${cardPath}/${suffix}`,
         modelId: 'uitext',
         entryId: 'UIText',
         componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent,MOD.Core.TextComponent',
-        displayOrder: suffix === 'Cost' ? 0 : suffix === 'Name' ? 1 : suffix === 'Desc' ? 2 : 3,
+        displayOrder: dOrder,
         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 }),
@@ -1294,6 +1352,24 @@ function upsertUi() {
         ],
       }));
     }
+    for (const [suffix, dOrder, cfg, color, spriteType] of [
+      ['NamePlate', 3, { size: { x: 168, y: 34 }, pos: { x: 0, y: -8 } }, { r: 0.07, g: 0.08, b: 0.1, a: 0.92 }, 1],
+      ['CostPlate', 4, { size: { x: 44, y: 44 }, pos: { x: -68, y: 103 } }, { r: 0.07, g: 0.08, b: 0.1, a: 0.95 }, 1],
+      ['Art', 5, { size: { x: 96, y: 96 }, pos: { x: 0, y: 52 } }, { r: 1, g: 1, b: 1, a: 1 }, 0],
+    ]) {
+      shop.push(entity({
+        id: guid('shp', shpN++),
+        path: `${cardPath}/${suffix}`,
+        modelId: 'uisprite',
+        entryId: 'UISprite',
+        componentNames: 'MOD.Core.UITransformComponent,MOD.Core.SpriteGUIRendererComponent',
+        displayOrder: dOrder,
+        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, type: spriteType, raycast: false }),
+        ],
+      }));
+    }
   }
   shop.push(entity({
     id: guid('shp', shpN++),