From 2dcbbdf01cffa31ec3c7e35cc26f535c38accd34 Mon Sep 17 00:00:00 2001 From: Wickedness Date: Thu, 2 Jul 2026 20:02:00 +0900 Subject: [PATCH] Improve battle icon UI readability --- src/game/scenes/BattleScene.ts | 227 +++++++++++++++++++++------------ 1 file changed, 146 insertions(+), 81 deletions(-) diff --git a/src/game/scenes/BattleScene.ts b/src/game/scenes/BattleScene.ts index af03afb..667c379 100644 --- a/src/game/scenes/BattleScene.ts +++ b/src/game/scenes/BattleScene.ts @@ -2881,7 +2881,7 @@ export class BattleScene extends Phaser.Scene { private rosterTab: RosterTab = 'ally'; private sidePanelObjects: Phaser.GameObjects.GameObject[] = []; private commandButtons: CommandButton[] = []; - private commandMenuObjects: Array = []; + private commandMenuObjects: Phaser.GameObjects.GameObject[] = []; private mapMenuObjects: Array = []; private mapMenuLayout?: MapMenuLayout; private alertObjects: Phaser.GameObjects.GameObject[] = []; @@ -4125,7 +4125,7 @@ export class BattleScene extends Phaser.Scene { this.hideCommandMenu(); const commands: BattleCommand[] = ['attack', 'strategy', 'item', 'wait']; - const menuWidth = 136; + const menuWidth = 152; const titleHeight = 31; const buttonHeight = 34; const gap = 5; @@ -4158,7 +4158,16 @@ export class BattleScene extends Phaser.Scene { background.setInteractive({ useHandCursor: true }); background.setDepth(15); - const text = this.add.text(centerX, centerY, commandLabels[command], { + const iconFrame = this.add.rectangle(left + 27, centerY, 26, 26, 0x0a0f14, 0.86); + iconFrame.setStrokeStyle(1, command === 'wait' ? palette.gold : palette.blue, 0.58); + iconFrame.setDepth(16); + this.commandMenuObjects.push(iconFrame); + + const icon = this.createBattleUiIcon(left + 27, centerY, this.commandIcon(command, unit), 22); + icon.setDepth(17); + this.commandMenuObjects.push(icon); + + const text = this.add.text(centerX + 13, centerY, commandLabels[command], { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '18px', color: '#f2e3bf', @@ -4228,9 +4237,9 @@ export class BattleScene extends Phaser.Scene { this.hideCommandMenu(); - const menuWidth = 238; + const menuWidth = 276; const titleHeight = 34; - const rowHeight = 52; + const rowHeight = 58; const padding = 9; const menuHeight = padding * 2 + titleHeight + usables.length * rowHeight; const { left, top } = this.commandMenuPosition(pointerX, pointerY, menuWidth, menuHeight); @@ -4260,8 +4269,17 @@ export class BattleScene extends Phaser.Scene { bg.setInteractive({ useHandCursor: true }); this.commandMenuObjects.push(bg); + const iconFrame = this.add.rectangle(left + 28, rowTop + 25, 32, 32, 0x0a0f14, 0.88); + iconFrame.setStrokeStyle(1, command === 'strategy' ? palette.blue : palette.gold, 0.58); + iconFrame.setDepth(16); + this.commandMenuObjects.push(iconFrame); + + const icon = this.createBattleUiIcon(left + 28, rowTop + 25, this.usableIcon(usable), 27); + icon.setDepth(17); + this.commandMenuObjects.push(icon); + const stock = command === 'item' ? ` x${this.itemStock(unit.id, usable.id)}` : ''; - const name = this.add.text(left + 18, rowTop + 7, `${usable.name}${stock}`, { + const name = this.add.text(left + 50, rowTop + 7, `${usable.name}${stock}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '16px', color: '#f2e3bf', @@ -4270,11 +4288,11 @@ export class BattleScene extends Phaser.Scene { name.setDepth(16); this.commandMenuObjects.push(name); - const desc = this.add.text(left + 18, rowTop + 28, usable.description, { + const desc = this.add.text(left + 50, rowTop + 29, usable.description, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '12px', color: '#aeb7c2', - wordWrap: { width: menuWidth - 36, useAdvancedWrap: true } + wordWrap: { width: menuWidth - 66, useAdvancedWrap: true } }); desc.setDepth(16); this.commandMenuObjects.push(desc); @@ -4656,15 +4674,17 @@ export class BattleScene extends Phaser.Scene { const { panelX, panelWidth } = this.layout; const left = panelX + 24; const width = panelWidth - 48; - const height = 124; - const y = Math.min(this.sideContentTop() + 430, this.sideContentBottom(10) - height); + const height = 152; + const y = Math.min(this.sideContentTop() + 408, this.sideContentBottom(10) - height); const bg = this.trackSideObject(this.add.rectangle(left, y, width, height, 0x121a22, 0.98)); bg.setOrigin(0); bg.setStrokeStyle(2, palette.gold, 0.72); - this.trackSideIcon(left + 22, y + 25, this.actionIcon(preview), 32); - this.trackSideObject(this.add.text(left + 44, y + 11, `${preview.attacker.name} ${commandLabels[preview.action]} 예측`, { + const actionFrame = this.trackSideObject(this.add.rectangle(left + 24, y + 27, 42, 42, 0x0a0f14, 0.9)); + actionFrame.setStrokeStyle(1, preview.action === 'strategy' ? palette.blue : palette.gold, 0.72); + this.trackSideIcon(left + 24, y + 27, this.actionIcon(preview), 35); + this.trackSideObject(this.add.text(left + 52, y + 10, `${preview.attacker.name} ${commandLabels[preview.action]} 예측`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '16px', color: '#f4dfad', @@ -4673,16 +4693,19 @@ export class BattleScene extends Phaser.Scene { const attackerWeapon = getItem(preview.attacker.equipment.weapon.itemId); const defenderArmor = getItem(preview.defender.equipment.armor.itemId); - this.renderPreviewEquipmentChip(left + 44, y + 38, 126, this.itemIcon(attackerWeapon, 'weapon'), attackerWeapon.name); - this.renderPreviewEquipmentChip(left + 178, y + 38, 126, this.itemIcon(defenderArmor, 'armor'), defenderArmor.name); + const chipGap = 8; + const chipWidth = (width - 68 - chipGap) / 2; + this.renderPreviewEquipmentChip(left + 52, y + 42, chipWidth, this.itemIcon(attackerWeapon, 'weapon'), attackerWeapon.name); + this.renderPreviewEquipmentChip(left + 52 + chipWidth + chipGap, y + 42, chipWidth, this.itemIcon(defenderArmor, 'armor'), defenderArmor.name); - const metricTop = y + 70; - const metricWidth = (width - 24) / 3; - this.renderPreviewMetric(left + 8, metricTop, metricWidth, 'attack', '피해', `${preview.damage}`); - this.renderPreviewMetric(left + 8 + metricWidth, metricTop, metricWidth, preview.action === 'strategy' ? 'success' : 'hit', preview.action === 'strategy' ? '성공' : '명중', `${preview.hitRate}%`); - this.renderPreviewMetric(left + 8 + metricWidth * 2, metricTop, metricWidth, 'critical', '치명', `${preview.criticalRate}%`); + const metricTop = y + 78; + const metricGap = 6; + const metricWidth = (width - 20 - metricGap * 2) / 3; + this.renderPreviewMetric(left + 10, metricTop, metricWidth, 'attack', '피해', `${preview.damage}`); + this.renderPreviewMetric(left + 10 + metricWidth + metricGap, metricTop, metricWidth, preview.action === 'strategy' ? 'success' : 'hit', preview.action === 'strategy' ? '성공' : '명중', `${preview.hitRate}%`); + this.renderPreviewMetric(left + 10 + (metricWidth + metricGap) * 2, metricTop, metricWidth, 'critical', '치명', `${preview.criticalRate}%`); - const badgeY = y + 101; + const badgeY = y + 122; const maxBadgeRight = left + width - 10; let badgeX = left + 10; badgeX = this.renderPreviewBadge(badgeX, badgeY, 'advantage', preview.matchupLabel, maxBadgeRight); @@ -4702,46 +4725,52 @@ export class BattleScene extends Phaser.Scene { } private renderPreviewEquipmentChip(x: number, y: number, width: number, icon: BattleUiIconKey, label: string) { - const chip = this.trackSideObject(this.add.rectangle(x, y, width, 22, 0x0b1118, 0.94)); + const chip = this.trackSideObject(this.add.rectangle(x, y, width, 27, 0x0b1118, 0.96)); chip.setOrigin(0); - chip.setStrokeStyle(1, 0x53606c, 0.42); - this.trackSideIcon(x + 12, y + 11, icon, 18); - this.trackSideObject(this.add.text(x + 25, y + 4, label, { + chip.setStrokeStyle(1, 0x647485, 0.58); + const iconFrame = this.trackSideObject(this.add.rectangle(x + 15, y + 13.5, 23, 23, 0x16212d, 0.92)); + iconFrame.setStrokeStyle(1, 0x53606c, 0.55); + this.trackSideIcon(x + 15, y + 13.5, icon, 21); + this.trackSideObject(this.add.text(x + 31, y + 6, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '11px', + fontSize: '12px', color: '#d4dce6', - wordWrap: { width: width - 32, useAdvancedWrap: true } + fontStyle: '700', + wordWrap: { width: width - 38, useAdvancedWrap: true } })); } private renderPreviewMetric(x: number, y: number, width: number, icon: BattleUiIconKey, label: string, value: string) { - this.trackSideIcon(x + 13, y + 11, icon, 18); - this.trackSideObject(this.add.text(x + 26, y + 2, label, { + const bg = this.trackSideObject(this.add.rectangle(x, y, width, 36, 0x16212d, 0.94)); + bg.setOrigin(0); + bg.setStrokeStyle(1, 0x647485, 0.58); + this.trackSideIcon(x + 16, y + 18, icon, 23); + this.trackSideObject(this.add.text(x + 33, y + 5, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '11px', + fontSize: '12px', color: '#9fb0bf' })); - const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 1, value, { + const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 18, value, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '15px', + fontSize: '17px', color: '#f2e3bf', fontStyle: '700' })); - valueText.setOrigin(1, 0); + valueText.setOrigin(1, 0.5); } private renderPreviewBadge(x: number, y: number, icon: BattleUiIconKey, label: string, maxRight?: number) { - const width = Phaser.Math.Clamp(label.length * 8 + 34, 58, 120); + const width = Phaser.Math.Clamp(label.length * 8 + 42, 68, 138); if (maxRight && x + width > maxRight) { return x; } - const badge = this.trackSideObject(this.add.rectangle(x, y, width, 20, 0x0b1118, 0.94)); + const badge = this.trackSideObject(this.add.rectangle(x, y, width, 23, 0x0b1118, 0.95)); badge.setOrigin(0); - badge.setStrokeStyle(1, 0x53606c, 0.44); - this.trackSideIcon(x + 11, y + 10, icon, 15); - this.trackSideObject(this.add.text(x + 22, y + 4, label, { + badge.setStrokeStyle(1, 0x53606c, 0.58); + this.trackSideIcon(x + 13, y + 11.5, icon, 18); + this.trackSideObject(this.add.text(x + 27, y + 5, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '10px', + fontSize: '11px', color: '#d4dce6' })); return x + width + 6; @@ -7591,18 +7620,21 @@ export class BattleScene extends Phaser.Scene { } private renderCombatActionRibbon(result: CombatResult, x: number, y: number, width: number, depth: number) { - const bg = this.trackCombatObject(this.add.rectangle(x, y, width, 58, 0x0b1118, 0.88)); + const bg = this.trackCombatObject(this.add.rectangle(x, y, width, 64, 0x0b1118, 0.92)); bg.setOrigin(0); bg.setDepth(depth); bg.setStrokeStyle(1, palette.gold, 0.58); - this.trackCombatIcon(x + 22, y + 19, this.actionIcon(result), 28, depth + 1); + const actionFrame = this.trackCombatObject(this.add.rectangle(x + 24, y + 22, 36, 36, 0x101820, 0.9)); + actionFrame.setDepth(depth + 1); + actionFrame.setStrokeStyle(1, result.action === 'strategy' ? palette.blue : palette.gold, 0.62); + this.trackCombatIcon(x + 24, y + 22, this.actionIcon(result), 31, depth + 2); const attackerWeapon = getItem(result.attacker.equipment.weapon.itemId); const defenderArmor = getItem(result.defender.equipment.armor.itemId); - this.trackCombatIcon(x + 132, y + 19, this.itemIcon(attackerWeapon, 'weapon'), 22, depth + 1); - this.trackCombatIcon(x + 248, y + 19, this.itemIcon(defenderArmor, 'armor'), 22, depth + 1); + this.trackCombatIcon(x + 136, y + 22, this.itemIcon(attackerWeapon, 'weapon'), 25, depth + 1); + this.trackCombatIcon(x + 252, y + 22, this.itemIcon(defenderArmor, 'armor'), 25, depth + 1); - const actionLabel = this.trackCombatObject(this.add.text(x + 42, y + 8, result.usable?.name ?? commandLabels[result.action], { + const actionLabel = this.trackCombatObject(this.add.text(x + 46, y + 9, result.usable?.name ?? commandLabels[result.action], { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '15px', color: '#f4dfad', @@ -7611,7 +7643,7 @@ export class BattleScene extends Phaser.Scene { })); actionLabel.setDepth(depth + 1); - const weaponLabel = this.trackCombatObject(this.add.text(x + 148, y + 9, attackerWeapon.name, { + const weaponLabel = this.trackCombatObject(this.add.text(x + 154, y + 10, attackerWeapon.name, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '12px', color: '#d4dce6', @@ -7619,7 +7651,7 @@ export class BattleScene extends Phaser.Scene { })); weaponLabel.setDepth(depth + 1); - const armorLabel = this.trackCombatObject(this.add.text(x + 264, y + 9, defenderArmor.name, { + const armorLabel = this.trackCombatObject(this.add.text(x + 270, y + 10, defenderArmor.name, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '12px', color: '#d4dce6', @@ -7629,25 +7661,25 @@ export class BattleScene extends Phaser.Scene { const outcomeIcon = result.action === 'strategy' ? 'success' : result.critical ? 'critical' : 'hit'; const outcomeLabel = result.action === 'strategy' ? (result.hit ? '성공' : '실패') : result.hit ? (result.critical ? '치명' : '명중') : '회피'; - this.renderCombatRibbonBadge(x + 42, y + 33, 'advantage', result.matchupLabel, depth + 1, 74); - this.renderCombatRibbonBadge(x + 122, y + 33, outcomeIcon, outcomeLabel, depth + 1, 58); + this.renderCombatRibbonBadge(x + 46, y + 38, 'advantage', result.matchupLabel, depth + 1, 78); + this.renderCombatRibbonBadge(x + 130, y + 38, outcomeIcon, outcomeLabel, depth + 1, 62); if (result.counter) { - this.renderCombatRibbonBadge(x + 186, y + 33, 'counter', '반격', depth + 1, 54); + this.renderCombatRibbonBadge(x + 198, y + 38, 'counter', '반격', depth + 1, 58); } } private renderCombatRibbonBadge(x: number, y: number, icon: BattleUiIconKey, label: string, depth: number, width = 52) { - const badge = this.trackCombatObject(this.add.rectangle(x, y, width, 20, 0x101820, 0.92)); + const badge = this.trackCombatObject(this.add.rectangle(x, y, width, 22, 0x101820, 0.94)); badge.setOrigin(0); badge.setDepth(depth); badge.setStrokeStyle(1, 0x53606c, 0.48); - this.trackCombatIcon(x + 11, y + 10, icon, 15, depth + 1); - const text = this.trackCombatObject(this.add.text(x + 22, y + 4, label, { + this.trackCombatIcon(x + 12, y + 11, icon, 17, depth + 1); + const text = this.trackCombatObject(this.add.text(x + 25, y + 5, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '10px', color: '#f2e3bf', fontStyle: '700', - fixedWidth: width - 26 + fixedWidth: width - 30 })); text.setDepth(depth + 1); } @@ -10751,24 +10783,24 @@ export class BattleScene extends Phaser.Scene { }); const positionText = `위치 ${unit.x + 1}, ${unit.y + 1} / ${terrainRule.label} ${terrainRating}% / 이동 ${unit.move}${acted ? ' / 행동완료' : ''}`; - this.trackSideIcon(left + 9, top + 315, acted ? 'counter' : this.unitMoveIcon(unit), 18); - this.trackSideObject(this.add.text(left + 24, top + 306, positionText, { + this.trackSideIcon(left + 11, top + 315, acted ? 'counter' : this.unitMoveIcon(unit), 20); + this.trackSideObject(this.add.text(left + 28, top + 306, positionText, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '14px', color: acted ? '#bdbdbd' : '#9fb0bf', wordWrap: { width: width - 24, useAdvancedWrap: true } })); - this.renderEquipmentSummary(unit, left, top + 330, width); + this.renderEquipmentSummary(unit, left, top + 334, width); if (message) { - this.renderPanelMessage(message, left, top + 460, width, 58); + this.renderPanelMessage(message, left, top + 472, width, 48); } this.showFacingIndicator(unit); } private renderEquipmentSummary(unit: UnitData, x: number, y: number, width: number) { - this.trackSideIcon(x + 9, y + 10, 'mastery', 18); - this.trackSideObject(this.add.text(x + 24, y, '장비 / 숙련도', { + this.trackSideIcon(x + 11, y + 11, 'mastery', 22); + this.trackSideObject(this.add.text(x + 31, y, '장비 / 숙련도', { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '16px', color: '#f2e3bf', @@ -10776,7 +10808,7 @@ export class BattleScene extends Phaser.Scene { })); equipmentSlots.forEach((slot, index) => { - this.renderEquipmentRow(unit, slot, x, y + 24 + index * 31, width); + this.renderEquipmentRow(unit, slot, x, y + 26 + index * 33, width); }); } @@ -10785,44 +10817,44 @@ export class BattleScene extends Phaser.Scene { const item = getItem(state.itemId); const next = equipmentExpToNext(state.level); const isTreasure = item.rank === 'treasure'; - const bg = this.trackSideObject(this.add.rectangle(x, y, width, 29, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.96 : 0.92)); + const bg = this.trackSideObject(this.add.rectangle(x, y, width, 32, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.97 : 0.94)); bg.setOrigin(0); - bg.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.58 : 0.42); + bg.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.66 : 0.5); - const iconFrame = this.trackSideObject(this.add.rectangle(x + 15, y + 14.5, 24, 24, 0x0a0f14, 0.82)); - iconFrame.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.72 : 0.48); + const iconFrame = this.trackSideObject(this.add.rectangle(x + 17, y + 16, 26, 26, 0x0a0f14, 0.86)); + iconFrame.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.78 : 0.54); - this.trackSideIcon(x + 15, y + 14.5, this.itemIcon(item, slot), 22); + this.trackSideIcon(x + 17, y + 16, this.itemIcon(item, slot), 24); - this.trackSideObject(this.add.text(x + 33, y + 4, equipmentSlotLabels[slot], { + this.trackSideObject(this.add.text(x + 38, y + 5, equipmentSlotLabels[slot], { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '12px', color: '#9fb0bf', fontStyle: '700' })); - this.trackSideObject(this.add.text(x + 78, y + 3, item.name, { + this.trackSideObject(this.add.text(x + 84, y + 5, item.name, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '13px', + fontSize: '14px', color: isTreasure ? '#f4dfad' : '#d4dce6', fontStyle: isTreasure ? '700' : '400' })); const bonusText = this.itemBonusText(item); - this.trackSideObject(this.add.text(x + width - 124, y + 6, bonusText, { + this.trackSideObject(this.add.text(x + width - 130, y + 8, bonusText, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '11px', color: '#9fb0bf' })); - this.trackSideIcon(x + width - 69, y + 14, 'mastery', 15); - const expText = this.trackSideObject(this.add.text(x + width - 54, y + 6, `${state.exp}/${next}`, { + this.trackSideIcon(x + width - 73, y + 16, 'mastery', 17); + const expText = this.trackSideObject(this.add.text(x + width - 56, y + 7, `${state.exp}/${next}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '11px', color: '#9fb0bf' })); expText.setOrigin(1, 0); - const levelText = this.trackSideObject(this.add.text(x + width - 8, y + 3, `Lv ${state.level}`, { + const levelText = this.trackSideObject(this.add.text(x + width - 8, y + 4, `Lv ${state.level}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '14px', color: isTreasure ? '#f2e3bf' : '#d4dce6', @@ -10830,7 +10862,7 @@ export class BattleScene extends Phaser.Scene { })); levelText.setOrigin(1, 0); - this.drawGauge(x + 78, y + 22, width - 178, 4, state.exp / next, isTreasure ? 0xd8b15f : 0x58aee0); + this.drawGauge(x + 84, y + 25, width - 194, 5, state.exp / next, isTreasure ? 0xd8b15f : 0x58aee0); } private createBattleUiIcon(x: number, y: number, icon: BattleUiIconKey, size = 22) { @@ -10892,12 +10924,43 @@ export class BattleScene extends Phaser.Scene { } } + private commandIcon(command: BattleCommand, unit: UnitData): BattleUiIconKey { + switch (command) { + case 'attack': + return this.itemIcon(getItem(unit.equipment.weapon.itemId), 'weapon'); + case 'strategy': + return 'strategy'; + case 'item': + return 'accessory'; + case 'wait': + return this.unitMoveIcon(unit); + default: + return 'sword'; + } + } + + private usableIcon(usable: BattleUsable): BattleUiIconKey { + if (usable.command === 'item') { + return usable.effect === 'heal' ? 'hp' : 'accessory'; + } + if (usable.effect === 'heal') { + return 'hp'; + } + if (usable.effect === 'focus') { + return 'leadership'; + } + if (usable.id.toLowerCase().includes('roar')) { + return 'might'; + } + return 'strategy'; + } + private actionIcon(preview: CombatPreview): BattleUiIconKey { if (preview.action === 'attack') { return this.itemIcon(getItem(preview.attacker.equipment.weapon.itemId), 'weapon'); } if (preview.action === 'strategy') { - return 'strategy'; + return preview.usable ? this.usableIcon(preview.usable) : 'strategy'; } return preview.usable ? this.itemIcon(getItem(preview.attacker.equipment.accessory.itemId), 'accessory') : 'accessory'; } @@ -10936,18 +10999,20 @@ export class BattleScene extends Phaser.Scene { } private renderCompactValueBox(x: number, y: number, width: number, icon: BattleUiIconKey, label: string, value: string) { - const bg = this.trackSideObject(this.add.rectangle(x, y, width, 38, 0x16212d, 0.96)); + const bg = this.trackSideObject(this.add.rectangle(x, y, width, 42, 0x16212d, 0.97)); bg.setOrigin(0); bg.setStrokeStyle(1, 0x647485, 0.72); - this.trackSideIcon(x + 13, y + 17, icon, 18); - this.trackSideObject(this.add.text(x + 25, y + 6, label, { + const iconFrame = this.trackSideObject(this.add.rectangle(x + 15, y + 21, 26, 26, 0x0a0f14, 0.82)); + iconFrame.setStrokeStyle(1, 0x53606c, 0.52); + this.trackSideIcon(x + 15, y + 21, icon, 23); + this.trackSideObject(this.add.text(x + 31, y + 7, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '12px', color: '#9fb0bf' })); - const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 20, value, { + const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 23, value, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '14px', + fontSize: '15px', color: '#f2e3bf', fontStyle: '700' })); @@ -10955,15 +11020,15 @@ export class BattleScene extends Phaser.Scene { } private renderStatRow(key: keyof UnitStats, label: string, value: number, x: number, y: number, width: number) { - this.trackSideIcon(x + 9, y + 10, this.statIcon(key), 18); - this.trackSideObject(this.add.text(x + 24, y, label, { + this.trackSideIcon(x + 11, y + 10, this.statIcon(key), 22); + this.trackSideObject(this.add.text(x + 30, y, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '16px', color: '#d4dce6', fontStyle: '700' })); - this.drawGauge(x + 92, y + 8, width - 146, 9, value / 100, value >= 80 ? 0xd8b15f : 0x58aee0); + this.drawGauge(x + 96, y + 8, width - 150, 10, value / 100, value >= 80 ? 0xd8b15f : 0x58aee0); const valueText = this.trackSideObject(this.add.text(x + width, y - 1, `${value}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',