Add directional walking unit sprites

src/game/scenes/BattleScene.ts

@@ -44,10 +44,14 @@ type BattleLayout = {
 };
 
 type UnitView = {
-  sprite: Phaser.GameObjects.Image;
+  sprite: Phaser.GameObjects.Sprite;
   label: Phaser.GameObjects.Text;
+  textureBase: string;
+  direction: UnitDirection;
 };
 
+type UnitDirection = 'south' | 'east' | 'north' | 'west';
+
 type BattlePhase = 'idle' | 'moving' | 'command';
 type BattleCommand = 'attack' | 'strategy' | 'item' | 'wait';
 type RosterTab = 'ally' | 'enemy';
@@ -245,7 +249,8 @@ export class BattleScene extends Phaser.Scene {
   private drawUnits() {
     firstBattleUnits.forEach((unit) => {
       const sizeRatio = unit.faction === 'ally' ? 1.08 : 1.02;
-      const sprite = this.add.image(this.tileCenterX(unit.x), this.tileCenterY(unit.y), unitTexture[unit.id] ?? 'unit-rebel');
+      const textureBase = unitTexture[unit.id] ?? 'unit-rebel';
+      const sprite = this.add.sprite(this.tileCenterX(unit.x), this.tileCenterY(unit.y), `${textureBase}-south-0`);
       sprite.setName(`unit-${unit.id}`);
       sprite.setDisplaySize(this.layout.tileSize * sizeRatio, this.layout.tileSize * sizeRatio);
       sprite.setDepth(6);
@@ -261,7 +266,7 @@ export class BattleScene extends Phaser.Scene {
       });
       label.setOrigin(0.5, 0);
       label.setDepth(7);
-      this.unitViews.set(unit.id, { sprite, label });
+      this.unitViews.set(unit.id, { sprite, label, textureBase, direction: 'south' });
     });
   }
 
@@ -769,6 +774,8 @@ export class BattleScene extends Phaser.Scene {
       view.sprite.postFX.clear();
       view.sprite.clearTint();
       view.sprite.setAlpha(1);
+      view.sprite.stop();
+      this.setUnitDirectionFrame(view, view.direction);
       view.label.setAlpha(1);
       view.label.setColor(unit?.faction === 'ally' ? '#e7edf7' : '#ffebe7');
       view.label.setBackgroundColor('');
@@ -939,29 +946,59 @@ export class BattleScene extends Phaser.Scene {
 
     const targetX = this.tileCenterX(x);
     const targetY = this.tileCenterY(y);
+    const direction = this.directionFromDelta(targetX - view.sprite.x, targetY - view.sprite.y);
     this.tweens.killTweensOf([view.sprite, view.label]);
+    this.playUnitWalk(view, direction);
     this.tweens.add({
       targets: view.sprite,
       x: targetX,
       y: targetY,
       duration,
-      ease: 'Sine.easeInOut'
+      ease: 'Sine.easeInOut',
+      onComplete: () => this.stopUnitWalk(view, direction)
     });
     this.tweens.add({
       targets: view.label,
       x: targetX,
-      y: targetY + this.layout.tileSize * 0.36,
+      y: targetY + this.layout.tileSize * 0.47,
       duration,
       ease: 'Sine.easeInOut'
     });
   }
 
+  private directionFromDelta(deltaX: number, deltaY: number): UnitDirection {
+    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+      return deltaX >= 0 ? 'east' : 'west';
+    }
+    return deltaY >= 0 ? 'south' : 'north';
+  }
+
+  private playUnitWalk(view: UnitView, direction: UnitDirection) {
+    view.direction = direction;
+    view.sprite.setFlipX(direction === 'west');
+    view.sprite.play(`${view.textureBase}-walk-${direction}`, true);
+  }
+
+  private stopUnitWalk(view: UnitView, direction: UnitDirection) {
+    view.direction = direction;
+    view.sprite.stop();
+    this.setUnitDirectionFrame(view, direction);
+  }
+
+  private setUnitDirectionFrame(view: UnitView, direction: UnitDirection) {
+    const sourceDirection = direction === 'west' ? 'east' : direction;
+    view.sprite.setTexture(`${view.textureBase}-${sourceDirection}-0`);
+    view.sprite.setFlipX(direction === 'west');
+  }
+
   private applyActedStyle(unit: UnitData) {
     const view = this.unitViews.get(unit.id);
     if (!view) {
       return;
     }
 
+    view.sprite.stop();
+    this.setUnitDirectionFrame(view, view.direction);
     view.sprite.postFX.addColorMatrix().grayscale(1);
     view.sprite.setAlpha(0.46);
     view.sprite.setTint(0xb7b7b7);