Wickedness/heros_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep battle units fully opaque

Browse Source
This commit is contained in:
Wickedness
2026-06-29 15:19:01 +09:00
parent fcc532d228
commit f405c7f798
1 changed files with 8 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/game/scenes/BattleScene.ts
View File

@@ -1076,11 +1076,8 @@ 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;
@@ -3207,21 +3204,6 @@ export class BattleScene extends Phaser.Scene {
const textureBase = this.unitTextureKey(unit);
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);
@@ -3245,32 +3227,9 @@ export class BattleScene extends Phaser.Scene {
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,
@@ -3543,41 +3502,12 @@ 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));
}
@@ -3588,32 +3518,18 @@ export class BattleScene extends Phaser.Scene {
}
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.sprite.setAlpha(1);
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)' : '');
view.label.setColor(unit.faction === 'ally' ? '#e7edf7' : '#ffebe7');
view.label.setBackgroundColor('');
}
private isTileVisible(x: number, y: number) {
@@ -7028,7 +6944,7 @@ export class BattleScene extends Phaser.Scene {
return;
}
this.tweens.killTweensOf([view.baseShadow, view.sprite, view.label, view.statusBadgeBg, view.statusBadgeText]);
this.tweens.killTweensOf([view.sprite, view.label]);
view.direction = direction;
this.setUnitBasePosition(view, this.tileCenterX(unit.x), this.tileCenterY(unit.y));
this.resetUnitSpritePose(view);
@@ -9563,11 +9479,10 @@ 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.baseShadow, view.sprite, view.label, view.statusBadgeBg, view.statusBadgeText]);
this.tweens.killTweensOf([view.sprite, view.label]);
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({
@@ -9590,29 +9505,6 @@ 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) {
@@ -9802,7 +9694,6 @@ export class BattleScene extends Phaser.Scene {
view.baseX = x;
view.baseY = y;
view.sprite.setPosition(x, y);
this.positionUnitViewDecorations(view);
}
private resetUnitSpritePose(view: UnitView) {
@@ -10083,15 +9974,11 @@ export class BattleScene extends Phaser.Scene {
view.sprite.disableInteractive();
view.sprite.postFX.clear();
view.sprite.postFX.addColorMatrix().grayscale(1);
view.sprite.setAlpha(0.48);
view.sprite.setAlpha(1);
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.setAlpha(1);
view.label.setColor('#b6b6b6');
view.label.setBackgroundColor('rgba(8,10,12,0.72)');
view.label.setBackgroundColor('');
}
private faceUnitToward(unit: UnitData, target: UnitData) {