From 0f8c9df853c58e4784a1760f7a70241795b4984e Mon Sep 17 00:00:00 2001 From: Wickedness Date: Fri, 3 Jul 2026 02:37:43 +0900 Subject: [PATCH] Improve combat preview readability --- src/game/scenes/BattleScene.ts | 240 ++++++++++++++++++++++----------- 1 file changed, 160 insertions(+), 80 deletions(-) diff --git a/src/game/scenes/BattleScene.ts b/src/game/scenes/BattleScene.ts index 33a777b..692de11 100644 --- a/src/game/scenes/BattleScene.ts +++ b/src/game/scenes/BattleScene.ts @@ -5568,7 +5568,12 @@ export class BattleScene extends Phaser.Scene { private previewModifierLabels(preview: CombatPreview) { const labels: string[] = []; const buff = this.battleBuffs.get(preview.attacker.id); - const equipmentText = this.equipmentPreviewBonusText(preview); + const equipmentBonusCount = [ + preview.equipmentDamageBonus, + preview.equipmentDamageReduction, + preview.equipmentHitBonus, + preview.equipmentCriticalBonus + ].filter((bonus) => bonus > 0).length; if (buff) { labels.push(`${buff.label} ${this.battleBuffBonusText(buff)}`); @@ -5576,8 +5581,8 @@ export class BattleScene extends Phaser.Scene { if (preview.bondDamageBonus > 0 && preview.bondLabel) { labels.push(`공명 피해 +${preview.bondDamageBonus}%`); } - if (equipmentText !== '보정 없음') { - labels.push(`장비 ${equipmentText}`); + if (equipmentBonusCount > 0) { + labels.push(`장비 보정 ${equipmentBonusCount}개`); } if (preview.terrainDefenseBonus > 0) { labels.push(`${preview.terrainLabel} 방어 +${preview.terrainDefenseBonus}`); @@ -5606,10 +5611,10 @@ export class BattleScene extends Phaser.Scene { ]; } - private compactModifierText(labels: string[], limit = 2) { + private compactModifierText(labels: string[], limit = 2, maxLength = 34) { const text = labels.slice(0, limit).join(' · '); const suffix = labels.length > limit ? ` · 외 ${labels.length - limit}` : ''; - return this.truncateUiText(`${text}${suffix}`, 48); + return this.truncateUiText(`${text}${suffix}`, maxLength); } private truncateUiText(text: string, maxLength: number) { @@ -5658,7 +5663,7 @@ export class BattleScene extends Phaser.Scene { const { panelX, panelWidth } = this.layout; const left = panelX + 24; const width = panelWidth - 48; - const height = locked ? 326 : 294; + const height = locked ? 394 : 360; const y = Math.max(this.sideContentTop(), Math.min(this.sideContentTop() + 344, this.sideContentBottom(10) - height)); const accent = this.previewAccentColor(preview); const defenderClass = getUnitClass(preview.defender.classKey); @@ -5669,31 +5674,50 @@ export class BattleScene extends Phaser.Scene { bg.setOrigin(0); bg.setStrokeStyle(2, accent, 0.78); - const actionFrame = this.trackSideObject(this.add.rectangle(left + 34, y + 36, 62, 62, 0x0a0f14, 0.94)); + const actionFrame = this.trackSideObject(this.add.rectangle(left + 36, y + 38, 64, 64, 0x0a0f14, 0.94)); actionFrame.setStrokeStyle(1, accent, 0.76); - this.trackSideIcon(left + 34, y + 36, this.actionIcon(preview), 54); - this.trackSideObject(this.add.text(left + 74, y + 10, `${preview.attacker.name} ${this.previewActionLabel(preview)}`, { + this.trackSideIcon(left + 36, y + 38, this.actionIcon(preview), 56); + this.trackSideObject(this.add.text(left + 78, y + 10, `${preview.attacker.name} → ${preview.defender.name}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '18px', + fontSize: '20px', color: '#f4dfad', fontStyle: '700', - fixedWidth: width - 86 + fixedWidth: width - 90 })); - this.trackSideObject(this.add.text(left + 74, y + 36, `${preview.defender.name} · ${defenderClass.name} · ${preview.matchupLabel} · ${counterText}`, { + this.trackSideObject(this.add.text(left + 78, y + 38, `${this.previewActionLabel(preview)} · ${defenderClass.name} · ${preview.matchupLabel} · ${counterText}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '12px', + fontSize: '13px', color: preview.counterAvailable ? '#ffb6a6' : '#9fb0bf', - fixedWidth: width - 86 + fixedWidth: width - 90 })); const attackerWeapon = getItem(preview.attacker.equipment.weapon.itemId); const defenderArmor = getItem(preview.defender.equipment.armor.itemId); + const participantGap = 8; + const participantWidth = (width - 20 - participantGap) / 2; + this.renderPreviewParticipantBox( + left + 10, + y + 72, + participantWidth, + preview.attacker, + '공격자', + accent + ); + this.renderPreviewParticipantBox( + left + 10 + participantWidth + participantGap, + y + 72, + participantWidth, + preview.defender, + '대상', + 0xb86b55 + ); + const chipGap = 8; const chipWidth = (width - 20 - chipGap) / 2; - this.renderPreviewEquipmentChip(left + 10, y + 70, chipWidth, this.itemIcon(attackerWeapon, 'weapon'), attackerEquipmentLabel, attackerWeapon.name); - this.renderPreviewEquipmentChip(left + 10 + chipWidth + chipGap, y + 70, chipWidth, this.itemIcon(defenderArmor, 'armor'), '방어 장비', defenderArmor.name); + this.renderPreviewEquipmentChip(left + 10, y + 134, chipWidth, this.itemIcon(attackerWeapon, 'weapon'), attackerEquipmentLabel, attackerWeapon.name); + this.renderPreviewEquipmentChip(left + 10 + chipWidth + chipGap, y + 134, chipWidth, this.itemIcon(defenderArmor, 'armor'), '방어 장비', defenderArmor.name); - const metricTop = y + 122; + const metricTop = y + 194; const metricGap = 6; const metricWidth = (width - 20 - metricGap * 2) / 3; this.renderPreviewMetric(left + 10, metricTop, metricWidth, this.previewDamageIcon(preview), '피해', `${preview.damage}`, 0xb64a45); @@ -5708,35 +5732,31 @@ export class BattleScene extends Phaser.Scene { ); this.renderPreviewMetric(left + 10 + (metricWidth + metricGap) * 2, metricTop, metricWidth, 'critical', '치명', `${preview.criticalRate}%`, 0xd8732c); - this.renderPreviewForecastRow(preview, left + 10, y + 184, width - 20, accent); + this.renderPreviewForecastRow(preview, left + 10, y + 264, width - 20, accent); this.renderPreviewModifierStrip( left + 10, - y + 216, + y + 300, width - 20, 'mastery', - this.compactModifierText(this.previewModifierLabels(preview)), + this.compactModifierText(this.previewModifierLabels(preview), 1, 28), accent ); - const badgeY = y + 236; + const badgeY = y + 328; const maxBadgeRight = left + width - 10; let badgeX = left + 10; badgeX = this.renderPreviewBadge(badgeX, badgeY, this.actionIcon(preview), this.previewActionTypeLabel(preview), maxBadgeRight); - badgeX = this.renderPreviewBadge(badgeX, badgeY, preview.action === 'strategy' ? 'success' : 'hit', `${preview.hitRate}% ${this.previewSuccessLabel(preview)}`, maxBadgeRight); - this.renderPreviewBadge(badgeX, badgeY, 'critical', `${preview.criticalRate}% 치명`, maxBadgeRight); - let detailBadgeX = left + 10; - const detailBadgeY = y + 264; - detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'advantage', preview.matchupLabel, maxBadgeRight); - detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'terrain', preview.terrainLabel, maxBadgeRight); - detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'counter', counterText, maxBadgeRight); + badgeX = this.renderPreviewBadge(badgeX, badgeY, 'advantage', preview.matchupLabel, maxBadgeRight); + badgeX = this.renderPreviewBadge(badgeX, badgeY, 'terrain', preview.terrainLabel, maxBadgeRight); + let detailBadgeX = this.renderPreviewBadge(badgeX, badgeY, 'counter', counterText, maxBadgeRight); if (preview.bondDamageBonus > 0 && preview.bondLabel) { - detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'leadership', `공명 +${preview.bondDamageBonus}%`, maxBadgeRight); + detailBadgeX = this.renderPreviewBadge(detailBadgeX, badgeY, 'leadership', `공명 +${preview.bondDamageBonus}%`, maxBadgeRight); } if (preview.equipmentEffectLabels.length > 0) { - this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'mastery', '장비 보정', maxBadgeRight); + this.renderPreviewBadge(detailBadgeX, badgeY, 'mastery', '장비 보정', maxBadgeRight); } if (locked) { - this.renderPreviewConfirmBar(left + 10, y + 296, width - 20, accent, `${preview.defender.name} 선택됨`); + this.renderPreviewConfirmBar(left + 10, y + 360, width - 20, accent, `${preview.defender.name} 선택됨`); } } @@ -5744,7 +5764,7 @@ export class BattleScene extends Phaser.Scene { const { panelX, panelWidth } = this.layout; const left = panelX + 24; const width = panelWidth - 48; - const height = locked ? 326 : 294; + const height = locked ? 394 : 360; const y = Math.max(this.sideContentTop(), Math.min(this.sideContentTop() + 344, this.sideContentBottom(10) - height)); const accent = this.usableAccentColor(preview.usable); @@ -5752,28 +5772,47 @@ export class BattleScene extends Phaser.Scene { bg.setOrigin(0); bg.setStrokeStyle(2, accent, 0.78); - const actionFrame = this.trackSideObject(this.add.rectangle(left + 34, y + 36, 62, 62, 0x0a0f14, 0.94)); + const actionFrame = this.trackSideObject(this.add.rectangle(left + 36, y + 38, 64, 64, 0x0a0f14, 0.94)); actionFrame.setStrokeStyle(1, accent, 0.76); - this.trackSideIcon(left + 34, y + 36, this.usableIcon(preview.usable), 54); - this.trackSideObject(this.add.text(left + 74, y + 10, `${preview.user.name} ${preview.usable.name}`, { + this.trackSideIcon(left + 36, y + 38, this.usableIcon(preview.usable), 56); + this.trackSideObject(this.add.text(left + 78, y + 10, `${preview.user.name} → ${preview.target.name}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '18px', + fontSize: '20px', color: '#f4dfad', fontStyle: '700', - fixedWidth: width - 86 + fixedWidth: width - 90 })); - this.trackSideObject(this.add.text(left + 74, y + 36, `${preview.target.name} · ${this.usableEffectLabel(preview.usable)} · ${this.usableTargetLabel(preview.usable)} ${preview.usable.range}칸`, { + this.trackSideObject(this.add.text(left + 78, y + 38, `${preview.usable.name} · ${this.usableEffectLabel(preview.usable)} · ${this.usableTargetLabel(preview.usable)} ${preview.usable.range}칸`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '12px', + fontSize: '13px', color: '#9fb0bf', - fixedWidth: width - 86 + fixedWidth: width - 90 })); + const participantGap = 8; + const participantWidth = (width - 20 - participantGap) / 2; + this.renderPreviewParticipantBox( + left + 10, + y + 72, + participantWidth, + preview.user, + '사용자', + accent + ); + this.renderPreviewParticipantBox( + left + 10 + participantWidth + participantGap, + y + 72, + participantWidth, + preview.target, + '대상', + preview.target.faction === preview.user.faction ? palette.blue : 0xb86b55 + ); + const chipGap = 8; const chipWidth = (width - 20 - chipGap) / 2; this.renderPreviewEquipmentChip( left + 10, - y + 70, + y + 134, chipWidth, preview.usable.command === 'item' ? 'accessory' : 'strategy', this.usableChannelLabel(preview.usable), @@ -5781,14 +5820,14 @@ export class BattleScene extends Phaser.Scene { ); this.renderPreviewEquipmentChip( left + 10 + chipWidth + chipGap, - y + 70, + y + 134, chipWidth, this.usableTargetIcon(preview.usable), '대상/사거리', `${preview.target.name} · ${preview.usable.range}칸` ); - const metricTop = y + 122; + const metricTop = y + 194; const metricGap = 6; const metricWidth = (width - 20 - metricGap * 2) / 3; if (preview.usable.effect === 'heal') { @@ -5801,29 +5840,27 @@ export class BattleScene extends Phaser.Scene { this.renderPreviewMetric(left + 10 + (metricWidth + metricGap) * 2, metricTop, metricWidth, 'critical', '치명', `+${preview.criticalBonus}`, 0xd8732c); } - this.renderSupportForecastRow(preview, left + 10, y + 184, width - 20, accent); + this.renderSupportForecastRow(preview, left + 10, y + 264, width - 20, accent); this.renderPreviewModifierStrip( left + 10, - y + 216, + y + 300, width - 20, preview.usable.effect === 'heal' ? this.usablePowerIcon(preview.usable) : 'leadership', this.compactModifierText(this.supportPreviewModifierLabels(preview)), accent ); - const badgeY = y + 236; + const badgeY = y + 328; const maxBadgeRight = left + width - 10; let badgeX = left + 10; badgeX = this.renderPreviewBadge(badgeX, badgeY, this.usableIcon(preview.usable), this.usableEffectLabel(preview.usable), maxBadgeRight); badgeX = this.renderPreviewBadge(badgeX, badgeY, this.usableTargetIcon(preview.usable), `${this.usableTargetLabel(preview.usable)} ${preview.usable.range}칸`, maxBadgeRight); - let detailBadgeX = left + 10; - const detailBadgeY = y + 264; - detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, preview.usable.command === 'item' ? 'accessory' : 'strategy', this.usableChannelLabel(preview.usable), maxBadgeRight); + let detailBadgeX = this.renderPreviewBadge(badgeX, badgeY, preview.usable.command === 'item' ? 'accessory' : 'strategy', this.usableChannelLabel(preview.usable), maxBadgeRight); if (preview.usable.effect === 'focus') { - this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'leadership', `${preview.duration}턴`, maxBadgeRight); + this.renderPreviewBadge(detailBadgeX, badgeY, 'leadership', `${preview.duration}턴`, maxBadgeRight); } if (locked) { - this.renderPreviewConfirmBar(left + 10, y + 296, width - 20, accent, `${preview.target.name} 선택됨`); + this.renderPreviewConfirmBar(left + 10, y + 360, width - 20, accent, `${preview.target.name} 선택됨`); } } @@ -5888,24 +5925,64 @@ export class BattleScene extends Phaser.Scene { roleLabel: string, label: string ) { - const chip = this.trackSideObject(this.add.rectangle(x, y, width, 44, 0x0b1118, 0.96)); + const chip = this.trackSideObject(this.add.rectangle(x, y, width, 48, 0x0b1118, 0.96)); chip.setOrigin(0); chip.setStrokeStyle(1, 0x647485, 0.58); - const iconFrame = this.trackSideObject(this.add.rectangle(x + 22, y + 22, 40, 40, 0x16212d, 0.92)); + const iconFrame = this.trackSideObject(this.add.rectangle(x + 24, y + 24, 42, 42, 0x16212d, 0.92)); iconFrame.setStrokeStyle(1, 0x53606c, 0.55); - this.trackSideIcon(x + 22, y + 22, icon, 36); - this.trackSideObject(this.add.text(x + 48, y + 4, roleLabel, { + this.trackSideIcon(x + 24, y + 24, icon, 38); + this.trackSideObject(this.add.text(x + 52, y + 5, roleLabel, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '10px', color: '#9fb0bf', fontStyle: '700' })); - this.trackSideObject(this.add.text(x + 48, y + 20, label, { + this.trackSideObject(this.add.text(x + 52, y + 22, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '13px', color: '#d4dce6', fontStyle: '700', - fixedWidth: width - 56 + fixedWidth: width - 60 + })); + } + + private renderPreviewParticipantBox( + x: number, + y: number, + width: number, + unit: UnitData, + roleLabel: string, + tone: number + ) { + const unitClass = getUnitClass(unit.classKey); + const bg = this.trackSideObject(this.add.rectangle(x, y, width, 56, 0x16212d, 0.96)); + bg.setOrigin(0); + bg.setStrokeStyle(1, tone, 0.6); + + const classFrame = this.trackSideObject(this.add.rectangle(x + 21, y + 28, 38, 38, 0x0a0f14, 0.9)); + classFrame.setStrokeStyle(1, tone, 0.56); + this.trackSideIcon(x + 21, y + 28, this.unitMoveIcon(unit), 34); + + this.trackSideObject(this.add.text(x + 44, y + 5, `${roleLabel} · ${unitClass.name}`, { + fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', + fontSize: '10px', + color: '#9fb0bf', + fontStyle: '700', + fixedWidth: width - 52 + })); + this.trackSideObject(this.add.text(x + 44, y + 19, unit.name, { + fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', + fontSize: '15px', + color: '#f2e3bf', + fontStyle: '700', + fixedWidth: width - 52 + })); + this.trackSideObject(this.add.text(x + 44, y + 39, `HP ${unit.hp}/${unit.maxHp}`, { + fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', + fontSize: '10px', + color: '#c8d2dd', + fontStyle: '700', + fixedWidth: width - 52 })); } @@ -5918,18 +5995,21 @@ export class BattleScene extends Phaser.Scene { value: string, tone = 0x647485 ) { - const bg = this.trackSideObject(this.add.rectangle(x, y, width, 54, 0x16212d, 0.94)); + const bg = this.trackSideObject(this.add.rectangle(x, y, width, 62, 0x16212d, 0.94)); bg.setOrigin(0); bg.setStrokeStyle(1, tone, 0.62); - this.trackSideIcon(x + 20, y + 27, icon, 37); - this.trackSideObject(this.add.text(x + 42, y + 7, label, { + this.trackSideIcon(x + 21, y + 31, icon, 40); + this.trackSideObject(this.add.text(x + 43, y + 8, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '11px', - color: '#9fb0bf' + fontSize: '12px', + color: '#9fb0bf', + fontStyle: '700' })); - const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 33, value, { + const valueHasKorean = /[가-힣]/.test(value); + const valueFontSize = valueHasKorean || value.length > 4 ? '20px' : '24px'; + const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 40, value, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', - fontSize: '22px', + fontSize: valueFontSize, color: '#f2e3bf', fontStyle: '700' })); @@ -5939,18 +6019,18 @@ export class BattleScene extends Phaser.Scene { private renderPreviewForecastRow(preview: CombatPreview, x: number, y: number, width: number, accent: number) { const projectedHp = Math.max(0, preview.defender.hp - preview.damage); const label = preview.action === 'strategy' ? '성공 시 HP' : '명중 시 HP'; - const row = this.trackSideObject(this.add.rectangle(x, y, width, 28, 0x0b1118, 0.94)); + const row = this.trackSideObject(this.add.rectangle(x, y, width, 30, 0x0b1118, 0.94)); row.setOrigin(0); row.setStrokeStyle(1, accent, 0.48); - this.trackSideIcon(x + 15, y + 14, 'hp', 23); - this.trackSideObject(this.add.text(x + 34, y + 7, label, { + this.trackSideIcon(x + 16, y + 15, 'hp', 24); + this.trackSideObject(this.add.text(x + 36, y + 8, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '12px', color: '#9fb0bf', fontStyle: '700' })); - this.drawGauge(x + 108, y + 10, width - 184, 9, projectedHp / preview.defender.maxHp, projectedHp <= 0 ? 0xb64a45 : 0x59d18c); - const hpText = this.trackSideObject(this.add.text(x + width - 8, y + 7, `${preview.defender.hp} -> ${projectedHp}`, { + this.drawGauge(x + 112, y + 11, width - 190, 10, projectedHp / preview.defender.maxHp, projectedHp <= 0 ? 0xb64a45 : 0x59d18c); + const hpText = this.trackSideObject(this.add.text(x + width - 8, y + 8, `${preview.defender.hp} → ${projectedHp}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '13px', color: projectedHp <= 0 ? '#ff8f5f' : '#f2e3bf', @@ -5960,12 +6040,12 @@ export class BattleScene extends Phaser.Scene { } private renderSupportForecastRow(preview: SupportPreview, x: number, y: number, width: number, accent: number) { - const row = this.trackSideObject(this.add.rectangle(x, y, width, 28, 0x0b1118, 0.94)); + const row = this.trackSideObject(this.add.rectangle(x, y, width, 30, 0x0b1118, 0.94)); row.setOrigin(0); row.setStrokeStyle(1, accent, 0.48); const isHeal = preview.usable.effect === 'heal'; - this.trackSideIcon(x + 15, y + 14, this.usablePowerIcon(preview.usable), 23); - this.trackSideObject(this.add.text(x + 34, y + 7, isHeal ? '적용 후 HP' : '강화 결과', { + this.trackSideIcon(x + 16, y + 15, this.usablePowerIcon(preview.usable), 24); + this.trackSideObject(this.add.text(x + 36, y + 8, isHeal ? '적용 후 HP' : '강화 결과', { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '12px', color: '#9fb0bf', @@ -5973,8 +6053,8 @@ export class BattleScene extends Phaser.Scene { })); if (isHeal) { - this.drawGauge(x + 108, y + 10, width - 184, 9, preview.projectedHp / preview.target.maxHp, 0x59d18c); - const hpText = this.trackSideObject(this.add.text(x + width - 8, y + 7, `${preview.target.hp} -> ${preview.projectedHp}`, { + this.drawGauge(x + 112, y + 11, width - 190, 10, preview.projectedHp / preview.target.maxHp, 0x59d18c); + const hpText = this.trackSideObject(this.add.text(x + width - 8, y + 8, `${preview.target.hp} → ${preview.projectedHp}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '13px', color: '#f2e3bf', @@ -5986,7 +6066,7 @@ export class BattleScene extends Phaser.Scene { const buffText = this.trackSideObject(this.add.text( x + width - 8, - y + 7, + y + 8, `공+${preview.attackBonus} / 명+${preview.hitBonus} / 치+${preview.criticalBonus} / ${preview.duration}턴`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', @@ -5999,22 +6079,22 @@ export class BattleScene extends Phaser.Scene { } private renderPreviewModifierStrip(x: number, y: number, width: number, icon: BattleUiIconKey, text: string, accent: number) { - const row = this.trackSideObject(this.add.rectangle(x, y, width, 22, 0x101820, 0.96)); + const row = this.trackSideObject(this.add.rectangle(x, y, width, 24, 0x101820, 0.96)); row.setOrigin(0); row.setStrokeStyle(1, accent, 0.42); - this.trackSideIcon(x + 14, y + 11, icon, 19); - this.trackSideObject(this.add.text(x + 30, y + 5, '보정', { + this.trackSideIcon(x + 15, y + 12, icon, 20); + this.trackSideObject(this.add.text(x + 32, y + 6, '보정', { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '11px', color: '#9fb0bf', fontStyle: '700' })); - this.trackSideObject(this.add.text(x + 66, y + 4, text, { + this.trackSideObject(this.add.text(x + 68, y + 5, text, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '12px', color: text === '추가 보정 없음' ? '#aeb7c2' : '#f2e3bf', fontStyle: '700', - fixedWidth: width - 74 + fixedWidth: width - 76 })); }