From fcc532d2285b08407fe26f0d4503de0be71941fe Mon Sep 17 00:00:00 2001 From: Wickedness Date: Mon, 29 Jun 2026 15:00:11 +0900 Subject: [PATCH] Improve battle unit visibility --- src/game/scenes/BattleScene.ts | 282 ++++++++++++++++++++++++++++----- 1 file changed, 238 insertions(+), 44 deletions(-) diff --git a/src/game/scenes/BattleScene.ts b/src/game/scenes/BattleScene.ts index 5cf3e99..32c406e 100644 --- a/src/game/scenes/BattleScene.ts +++ b/src/game/scenes/BattleScene.ts @@ -1076,8 +1076,11 @@ type MiniMapLayout = { }; type UnitView = { + baseShadow: Phaser.GameObjects.Ellipse; sprite: Phaser.GameObjects.Sprite; label: Phaser.GameObjects.Text; + statusBadgeBg: Phaser.GameObjects.Rectangle; + statusBadgeText: Phaser.GameObjects.Text; textureBase: string; direction: UnitDirection; baseX: number; @@ -3202,10 +3205,27 @@ export class BattleScene extends Phaser.Scene { battleUnits.forEach((unit) => { const sizeRatio = unit.faction === 'ally' ? 1.16 : 1.1; const textureBase = this.unitTextureKey(unit); - const sprite = this.add.sprite(this.tileCenterX(unit.x), this.tileCenterY(unit.y), textureBase, this.unitFrameIndex('south')); + const centerX = this.tileCenterX(unit.x); + const centerY = this.tileCenterY(unit.y); + const teamColor = this.unitTeamColor(unit); + const baseShadow = this.add.ellipse( + centerX, + centerY + this.layout.tileSize * 0.24, + this.layout.tileSize * 0.78, + this.layout.tileSize * 0.34, + 0x061014, + 0.68 + ); + baseShadow.setDepth(5.5); + baseShadow.setStrokeStyle(2, teamColor, 0.78); + if (this.mapMask) { + baseShadow.setMask(this.mapMask); + } + + const sprite = this.add.sprite(centerX, centerY, textureBase, this.unitFrameIndex('south')); sprite.setName(`unit-${unit.id}`); sprite.setDisplaySize(this.layout.tileSize * sizeRatio, this.layout.tileSize * sizeRatio); - sprite.setDepth(6); + sprite.setDepth(8); if (this.mapMask) { sprite.setMask(this.mapMask); } @@ -3220,13 +3240,37 @@ export class BattleScene extends Phaser.Scene { strokeThickness: 3 }); label.setOrigin(0.5, 0); - label.setDepth(7); + label.setDepth(10); if (this.mapMask) { label.setMask(this.mapMask); } + + const badgePosition = this.unitStatusBadgePosition(centerX, centerY); + const statusBadgeBg = this.add.rectangle(badgePosition.x, badgePosition.y, 38, 16, 0x101820, 0.94); + statusBadgeBg.setOrigin(0.5); + statusBadgeBg.setDepth(10); + statusBadgeBg.setStrokeStyle(1, palette.gold, 0.86); + const statusBadgeText = this.add.text(badgePosition.x, badgePosition.y - 1, '완료', { + fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', + fontSize: '10px', + color: '#f4dfad', + stroke: '#05070a', + strokeThickness: 2, + fontStyle: '700' + }); + statusBadgeText.setOrigin(0.5); + statusBadgeText.setDepth(11); + if (this.mapMask) { + statusBadgeBg.setMask(this.mapMask); + statusBadgeText.setMask(this.mapMask); + } + const view = { + baseShadow, sprite, label, + statusBadgeBg, + statusBadgeText, textureBase, direction: 'south' as UnitDirection, baseX: sprite.x, @@ -3236,6 +3280,7 @@ export class BattleScene extends Phaser.Scene { }; this.unitViews.set(unit.id, view); this.syncUnitMotion(unit, view); + this.applyUnitLegibilityStyle(unit, view); }); } @@ -3498,9 +3543,77 @@ export class BattleScene extends Phaser.Scene { this.setUnitBasePosition(view, this.tileCenterX(unit.x), this.tileCenterY(unit.y)); view.label.setPosition(view.baseX, view.baseY + this.layout.tileSize * 0.52); const visible = this.isTileVisible(unit.x, unit.y); + view.baseShadow.setVisible(visible); view.sprite.setVisible(visible); view.label.setVisible(visible); + view.statusBadgeBg.setVisible(visible); + view.statusBadgeText.setVisible(visible); this.syncUnitMotion(unit, view); + this.applyUnitLegibilityStyle(unit, view); + } + + private unitTeamColor(unit: UnitData) { + return unit.faction === 'ally' ? 0x83c8ff : 0xff8a72; + } + + private unitBaseShadowPosition(x: number, y: number) { + return { + x, + y: y + this.layout.tileSize * 0.24 + }; + } + + private unitStatusBadgePosition(x: number, y: number) { + return { + x: x + this.layout.tileSize * 0.32, + y: y - this.layout.tileSize * 0.43 + }; + } + + private positionUnitViewDecorations(view: UnitView) { + const shadowPosition = this.unitBaseShadowPosition(view.baseX, view.baseY); + const badgePosition = this.unitStatusBadgePosition(view.baseX, view.baseY); + view.baseShadow.setPosition(shadowPosition.x, shadowPosition.y); + view.statusBadgeBg.setPosition(badgePosition.x, badgePosition.y); + view.statusBadgeText.setPosition(badgePosition.x, badgePosition.y - 1); + } + + private refreshUnitLegibilityStyles() { + battleUnits.forEach((unit) => this.applyUnitLegibilityStyle(unit)); + } + + private applyUnitLegibilityStyle(unit: UnitData, view = this.unitViews.get(unit.id)) { + if (!view) { + return; + } + + const visible = this.isTileVisible(unit.x, unit.y); + const selected = this.selectedUnit?.id === unit.id && unit.hp > 0; + const acted = this.actedUnitIds.has(unit.id) && unit.hp > 0; + const teamColor = this.unitTeamColor(unit); + + view.baseShadow.setVisible(visible); + view.baseShadow.setFillStyle(selected ? 0x111a22 : 0x061014, selected ? 0.86 : acted ? 0.76 : 0.68); + view.baseShadow.setStrokeStyle(selected ? 3 : 2, selected ? palette.gold : teamColor, selected ? 1 : acted ? 0.94 : 0.78); + + view.statusBadgeBg.setVisible(visible && acted); + view.statusBadgeText.setVisible(visible && acted); + + if (unit.hp <= 0) { + return; + } + + view.sprite.postFX.clear(); + view.sprite.clearTint(); + view.sprite.setAlpha(acted ? 0.94 : 1); + if (acted) { + view.sprite.setTint(0xd8cfb5); + } + + view.label.setVisible(visible); + view.label.setAlpha(1); + view.label.setColor(acted ? '#f4dfad' : unit.faction === 'ally' ? '#e7edf7' : '#ffebe7'); + view.label.setBackgroundColor(acted ? 'rgba(16,24,32,0.78)' : ''); } private isTileVisible(x: number, y: number) { @@ -3570,6 +3683,7 @@ export class BattleScene extends Phaser.Scene { this.pendingMove = undefined; this.phase = 'idle'; this.hideCommandMenu(); + this.refreshUnitLegibilityStyles(); this.showEnemyUnitThreatRange(unit); this.renderUnitDetail(unit, this.enemyDetailMessage(unit)); return; @@ -3585,6 +3699,7 @@ export class BattleScene extends Phaser.Scene { this.clearMarkers(); this.hideCommandMenu(); this.phase = 'idle'; + this.refreshUnitLegibilityStyles(); this.renderUnitDetail(unit, '이미 행동을 마친 장수입니다.'); return; } @@ -3595,6 +3710,7 @@ export class BattleScene extends Phaser.Scene { this.clearMarkers(); this.hideCommandMenu(); this.showMoveRange(unit); + this.refreshUnitLegibilityStyles(); this.renderUnitDetail(unit, '이동할 파란 칸을 선택하세요.'); } @@ -4347,29 +4463,50 @@ export class BattleScene extends Phaser.Scene { this.layout.tileSize, this.layout.tileSize, 0xc93b30, - 0.3 + 0.2 ); marker.setData('tileX', target.x); marker.setData('tileY', target.y); marker.setOrigin(0); marker.setStrokeStyle(2, 0xffd27a, 0.9); - marker.setDepth(9); + marker.setDepth(5.05); if (this.mapMask) { marker.setMask(this.mapMask); } marker.setVisible(this.isTileVisible(target.x, target.y)); - marker.setInteractive({ useHandCursor: true }); - marker.on('pointerover', () => { - marker.setFillStyle(0xd9503f, 0.44); + + const hitArea = this.add.rectangle( + this.tileTopLeftX(target.x), + this.tileTopLeftY(target.y), + this.layout.tileSize, + this.layout.tileSize, + 0xffffff, + 0.001 + ); + hitArea.setData('tileX', target.x); + hitArea.setData('tileY', target.y); + hitArea.setOrigin(0); + hitArea.setDepth(11); + if (this.mapMask) { + hitArea.setMask(this.mapMask); + } + hitArea.setVisible(this.isTileVisible(target.x, target.y)); + hitArea.setInteractive({ useHandCursor: true }); + hitArea.on('pointerover', () => { + marker.setFillStyle(0xd9503f, 0.34); + marker.setStrokeStyle(3, 0xffe19a, 1); this.renderAttackPreview(preview); }); - marker.on('pointerout', () => marker.setFillStyle(0xc93b30, 0.3)); - marker.on('pointerdown', (pointer: Phaser.Input.Pointer) => { + hitArea.on('pointerout', () => { + marker.setFillStyle(0xc93b30, 0.2); + marker.setStrokeStyle(2, 0xffd27a, 0.9); + }); + hitArea.on('pointerdown', (pointer: Phaser.Input.Pointer) => { if (pointer.leftButtonDown()) { void this.tryResolveDamageTarget(attacker, target, action, usable); } }); - this.markers.push(marker); + this.markers.push(marker, hitArea); }); } @@ -4381,29 +4518,50 @@ export class BattleScene extends Phaser.Scene { this.layout.tileSize, this.layout.tileSize, usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, - 0.3 + 0.2 ); marker.setData('tileX', target.x); marker.setData('tileY', target.y); marker.setOrigin(0); marker.setStrokeStyle(2, usable.effect === 'heal' ? 0xb6ffd2 : 0xd9e8ff, 0.9); - marker.setDepth(9); + marker.setDepth(5.05); if (this.mapMask) { marker.setMask(this.mapMask); } marker.setVisible(this.isTileVisible(target.x, target.y)); - marker.setInteractive({ useHandCursor: true }); - marker.on('pointerover', () => { - marker.setFillStyle(usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, 0.44); + + const hitArea = this.add.rectangle( + this.tileTopLeftX(target.x), + this.tileTopLeftY(target.y), + this.layout.tileSize, + this.layout.tileSize, + 0xffffff, + 0.001 + ); + hitArea.setData('tileX', target.x); + hitArea.setData('tileY', target.y); + hitArea.setOrigin(0); + hitArea.setDepth(11); + if (this.mapMask) { + hitArea.setMask(this.mapMask); + } + hitArea.setVisible(this.isTileVisible(target.x, target.y)); + hitArea.setInteractive({ useHandCursor: true }); + hitArea.on('pointerover', () => { + marker.setFillStyle(usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, 0.34); + marker.setStrokeStyle(3, usable.effect === 'heal' ? 0xd9ffe8 : 0xf2f7ff, 1); this.renderSupportPreview(user, target, usable); }); - marker.on('pointerout', () => marker.setFillStyle(usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, 0.3)); - marker.on('pointerdown', (pointer: Phaser.Input.Pointer) => { + hitArea.on('pointerout', () => { + marker.setFillStyle(usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, 0.2); + marker.setStrokeStyle(2, usable.effect === 'heal' ? 0xb6ffd2 : 0xd9e8ff, 0.9); + }); + hitArea.on('pointerdown', (pointer: Phaser.Input.Pointer) => { if (pointer.leftButtonDown()) { void this.tryResolveSupportTarget(user, target, usable); } }); - this.markers.push(marker); + this.markers.push(marker, hitArea); }); } @@ -4496,7 +4654,7 @@ export class BattleScene extends Phaser.Scene { const height = 124; const y = Math.min(this.sideContentTop() + 430, this.sideContentBottom(10) - height); - const bg = this.trackSideObject(this.add.rectangle(left, y, width, height, 0x121a22, 0.96)); + const bg = this.trackSideObject(this.add.rectangle(left, y, width, height, 0x121a22, 0.98)); bg.setOrigin(0); bg.setStrokeStyle(2, palette.gold, 0.72); @@ -4539,7 +4697,7 @@ 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.86)); + const chip = this.trackSideObject(this.add.rectangle(x, y, width, 22, 0x0b1118, 0.94)); chip.setOrigin(0); chip.setStrokeStyle(1, 0x53606c, 0.42); this.trackSideIcon(x + 12, y + 11, icon, 18); @@ -4572,7 +4730,7 @@ export class BattleScene extends Phaser.Scene { if (maxRight && x + width > maxRight) { return x; } - const badge = this.trackSideObject(this.add.rectangle(x, y, width, 20, 0x0b1118, 0.88)); + const badge = this.trackSideObject(this.add.rectangle(x, y, width, 20, 0x0b1118, 0.94)); badge.setOrigin(0); badge.setStrokeStyle(1, 0x53606c, 0.44); this.trackSideIcon(x + 11, y + 10, icon, 15); @@ -4662,6 +4820,7 @@ export class BattleScene extends Phaser.Scene { this.hideTurnEndPrompt(); this.hideBattleAlert(); this.hideBattleEventBanner(); + this.refreshUnitLegibilityStyles(); this.updateObjectiveTracker(); const message = @@ -6424,6 +6583,7 @@ export class BattleScene extends Phaser.Scene { this.hideCommandMenu(); this.hideTurnEndPrompt(); this.hideMapMenu(); + this.refreshUnitLegibilityStyles(); this.renderTerrainDetail(tile.x, tile.y); } @@ -6458,6 +6618,7 @@ export class BattleScene extends Phaser.Scene { this.selectedUnit = undefined; this.pendingMove = undefined; this.phase = 'idle'; + this.refreshUnitLegibilityStyles(); const actions: MapMenuAction[] = ['endTurn', 'threat', 'save', 'load', 'roster', 'bond', 'situation', 'bgm', 'close']; const menuWidth = 148; @@ -6867,7 +7028,7 @@ export class BattleScene extends Phaser.Scene { return; } - this.tweens.killTweensOf([view.sprite, view.label]); + this.tweens.killTweensOf([view.baseShadow, view.sprite, view.label, view.statusBadgeBg, view.statusBadgeText]); view.direction = direction; this.setUnitBasePosition(view, this.tileCenterX(unit.x), this.tileCenterY(unit.y)); this.resetUnitSpritePose(view); @@ -6875,6 +7036,7 @@ export class BattleScene extends Phaser.Scene { if (unit.hp > 0) { view.sprite.setInteractive({ useHandCursor: true }); } + this.applyUnitLegibilityStyle(unit, view); } private cloneEquipment(equipment: UnitData['equipment']) { @@ -6945,6 +7107,7 @@ export class BattleScene extends Phaser.Scene { this.clearMarkers(); this.hideCommandMenu(); this.hideTurnEndPrompt(); + this.refreshUnitLegibilityStyles(); this.activeFaction = 'enemy'; this.updateTurnText(); @@ -8961,6 +9124,7 @@ export class BattleScene extends Phaser.Scene { view.sprite.setAlpha(1); if (unit) { this.syncUnitMotion(unit, view); + this.applyUnitLegibilityStyle(unit, view); } else { this.stopUnitWalk(view, view.direction); } @@ -9366,6 +9530,7 @@ export class BattleScene extends Phaser.Scene { this.hideCommandMenu(); this.hideTurnEndPrompt(); this.updateMiniMap(); + this.refreshUnitLegibilityStyles(); soundDirector.playSelect(); this.moveUnitView(unit, fromX, fromY, view, 180, toX, toY); @@ -9398,10 +9563,11 @@ export class BattleScene extends Phaser.Scene { const direction = this.directionFromDelta(x - fromX, y - fromY); const movementDistance = this.movementTileDistanceFrom(fromX, fromY, x, y); const movementDuration = this.movementDuration(duration, movementDistance); - this.tweens.killTweensOf([view.sprite, view.label]); + this.tweens.killTweensOf([view.baseShadow, view.sprite, view.label, view.statusBadgeBg, view.statusBadgeText]); this.setUnitBasePosition(view, startX, startY); this.resetUnitSpritePose(view); view.label.setPosition(startX, startY + this.layout.tileSize * 0.52); + this.positionUnitViewDecorations(view); this.playMovementSound(unit, movementDuration, movementDistance); this.playUnitWalk(view, direction); this.tweens.add({ @@ -9424,6 +9590,29 @@ export class BattleScene extends Phaser.Scene { duration: movementDuration, ease: 'Sine.easeInOut' }); + const targetShadowPosition = this.unitBaseShadowPosition(targetX, targetY); + this.tweens.add({ + targets: view.baseShadow, + x: targetShadowPosition.x, + y: targetShadowPosition.y, + duration: movementDuration, + ease: 'Sine.easeInOut' + }); + const targetBadgePosition = this.unitStatusBadgePosition(targetX, targetY); + this.tweens.add({ + targets: view.statusBadgeBg, + x: targetBadgePosition.x, + y: targetBadgePosition.y, + duration: movementDuration, + ease: 'Sine.easeInOut' + }); + this.tweens.add({ + targets: view.statusBadgeText, + x: targetBadgePosition.x, + y: targetBadgePosition.y - 1, + duration: movementDuration, + ease: 'Sine.easeInOut' + }); } private movementTileDistance(unit: UnitData, x: number, y: number) { @@ -9613,6 +9802,7 @@ export class BattleScene extends Phaser.Scene { view.baseX = x; view.baseY = y; view.sprite.setPosition(x, y); + this.positionUnitViewDecorations(view); } private resetUnitSpritePose(view: UnitView) { @@ -9879,11 +10069,8 @@ export class BattleScene extends Phaser.Scene { view.sprite.postFX.clear(); view.sprite.clearTint(); - view.sprite.setAlpha(1); this.syncUnitMotion(unit, view); - view.label.setAlpha(1); - view.label.setColor(unit.faction === 'ally' ? '#e7edf7' : '#ffebe7'); - view.label.setBackgroundColor(''); + this.applyUnitLegibilityStyle(unit, view); } private applyDefeatedStyle(unit: UnitData) { @@ -9896,10 +10083,15 @@ export class BattleScene extends Phaser.Scene { view.sprite.disableInteractive(); view.sprite.postFX.clear(); view.sprite.postFX.addColorMatrix().grayscale(1); - view.sprite.setAlpha(0.22); - view.sprite.setTint(0x4f4f4f); - view.label.setAlpha(0.3); - view.label.setColor('#8a8a8a'); + view.sprite.setAlpha(0.48); + view.sprite.setTint(0x6f6f6f); + view.baseShadow.setFillStyle(0x05070a, 0.5); + view.baseShadow.setStrokeStyle(2, 0x6d6d6d, 0.68); + view.statusBadgeBg.setVisible(false); + view.statusBadgeText.setVisible(false); + view.label.setAlpha(0.62); + view.label.setColor('#b6b6b6'); + view.label.setBackgroundColor('rgba(8,10,12,0.72)'); } private faceUnitToward(unit: UnitData, target: UnitData) { @@ -9936,6 +10128,7 @@ export class BattleScene extends Phaser.Scene { } else { view.sprite.clearTint(); this.syncUnitMotion(unit, view); + this.applyUnitLegibilityStyle(unit, view); } }); @@ -10495,7 +10688,7 @@ export class BattleScene extends Phaser.Scene { const acted = this.actedUnitIds.has(unit.id); const active = this.selectedUnit?.id === unit.id; const unitClass = getUnitClass(unit.classKey); - const rowBg = this.trackSideObject(this.add.rectangle(x, y, width, 42, active ? 0x2f4050 : 0x101820, acted ? 0.54 : 0.9)); + const rowBg = this.trackSideObject(this.add.rectangle(x, y, width, 42, active ? 0x2f4050 : 0x101820, acted ? 0.82 : 0.94)); rowBg.setOrigin(0); rowBg.setStrokeStyle(1, active ? palette.gold : unit.faction === 'ally' ? palette.blue : 0xb86b55, active ? 0.88 : 0.52); rowBg.setInteractive({ useHandCursor: true }); @@ -10512,13 +10705,13 @@ export class BattleScene extends Phaser.Scene { { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '14px', - color: acted ? '#8c8c8c' : '#9fb0bf' + color: acted ? '#b7bec8' : '#9fb0bf' })); const hpText = this.trackSideObject(this.add.text(x + width - 12, y + 7, `${unit.hp}/${unit.maxHp}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '16px', - color: acted ? '#9a9a9a' : '#f0e4c8', + color: acted ? '#d8cfb5' : '#f0e4c8', fontStyle: '700' })); hpText.setOrigin(1, 0); @@ -10531,7 +10724,7 @@ export class BattleScene extends Phaser.Scene { fontSize: '12px', color: '#bdbdbd' })); - actedText.setAlpha(0.78); + actedText.setAlpha(0.95); } } @@ -10556,7 +10749,7 @@ export class BattleScene extends Phaser.Scene { header.setStrokeStyle(1, factionColor, 0.76); const classIcon = this.trackSideIcon(left + 23, top + 31, this.unitMoveIcon(unit), 30); - classIcon.setAlpha(acted ? 0.55 : 0.94); + classIcon.setAlpha(acted ? 0.86 : 0.96); const headerTextX = left + 48; this.trackSideObject(this.add.text(headerTextX, top + 9, `${rosterLabels[unit.faction]} / ${unitClass.family}`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', @@ -10573,7 +10766,7 @@ export class BattleScene extends Phaser.Scene { const growthText = this.trackSideObject(this.add.text(left + width - 14, top + 42, `Lv ${unit.level} EXP ${unit.exp}/100`, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: '13px', - color: acted ? '#a8a8a8' : '#f4dfad', + color: acted ? '#d8cfb5' : '#f4dfad', fontStyle: '700' })); growthText.setOrigin(1, 0); @@ -10664,7 +10857,7 @@ 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.94 : 0.86)); + const bg = this.trackSideObject(this.add.rectangle(x, y, width, 29, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.96 : 0.92)); bg.setOrigin(0); bg.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.58 : 0.42); @@ -10815,9 +11008,9 @@ 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.92)); + const bg = this.trackSideObject(this.add.rectangle(x, y, width, 38, 0x16212d, 0.96)); bg.setOrigin(0); - bg.setStrokeStyle(1, 0x53606c, 0.56); + bg.setStrokeStyle(1, 0x647485, 0.72); this.trackSideIcon(x + 13, y + 17, icon, 18); this.trackSideObject(this.add.text(x + 25, y + 6, label, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', @@ -10854,7 +11047,7 @@ export class BattleScene extends Phaser.Scene { } private drawGauge(x: number, y: number, width: number, height: number, ratio: number, color: number) { - const track = this.trackSideObject(this.add.rectangle(x, y, width, height, 0x0a0f14, 0.82)); + const track = this.trackSideObject(this.add.rectangle(x, y, width, height, 0x0a0f14, 0.94)); track.setOrigin(0); track.setStrokeStyle(1, 0x40515e, 0.58); @@ -10865,9 +11058,9 @@ export class BattleScene extends Phaser.Scene { private renderPanelMessage(text: string, x: number, y: number, width: number, height = 74) { const safeY = Math.max(this.sideContentTop(), Math.min(y, this.sideContentBottom() - height)); - const bg = this.trackSideObject(this.add.rectangle(x, safeY, width, height, 0x101820, 0.82)); + const bg = this.trackSideObject(this.add.rectangle(x, safeY, width, height, 0x101820, 0.94)); bg.setOrigin(0); - bg.setStrokeStyle(1, 0x53606c, 0.42); + bg.setStrokeStyle(1, 0x647485, 0.66); const messageText = this.trackSideObject(this.add.text(x + 12, safeY + 10, text, { fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif', fontSize: height < 60 ? '13px' : '15px', @@ -10885,6 +11078,7 @@ export class BattleScene extends Phaser.Scene { this.phase = 'idle'; this.clearMarkers(); this.hideCommandMenu(); + this.refreshUnitLegibilityStyles(); this.renderRosterPanel(tab); }