src/systems/VillagerSystem.ts

@@ -15,6 +15,9 @@ const WORK_LOG_MAX = 20
 
 interface VillagerRuntime {
   sprite: Phaser.GameObjects.Image
+  /** White silhouette sprite rendered above all world objects so the Nisse is
+   *  always locatable even when occluded by trees or buildings. */
+  outlineSprite: Phaser.GameObjects.Image
   nameLabel: Phaser.GameObjects.Text
   energyBar: Phaser.GameObjects.Graphics
   jobIcon: Phaser.GameObjects.Text
@@ -118,8 +121,13 @@ export class VillagerSystem {
       case 'sleeping':this.tickSleeping(v, rt, delta);      break
     }
 
-    // Sync sprite to state position
-    rt.sprite.setPosition(v.x, v.y)
+    // Sync sprite to state position; depth is Y-based so Nisse sort correctly with world objects
+    const worldDepth = Math.floor(v.y / TILE_SIZE) + 5
+    rt.sprite.setPosition(v.x, v.y).setDepth(worldDepth)
+
+    // Outline sprite mirrors position, flip, and angle so the silhouette matches exactly
+    rt.outlineSprite.setPosition(v.x, v.y).setFlipX(rt.sprite.flipX).setAngle(rt.sprite.angle)
+
     rt.nameLabel.setPosition(v.x, v.y - 22)
     rt.energyBar.setPosition(0, 0)
     this.drawEnergyBar(rt.energyBar, v.x, v.y, v.energy)
@@ -569,21 +577,36 @@ export class VillagerSystem {
    * for a newly added Nisse.
    * @param v - Villager state to create sprites for
    */
+  /**
+   * Creates and registers all runtime objects (sprite, outline, label, energy bar, icon)
+   * for a newly added Nisse.
+   * @param v - Villager state to create sprites for
+   */
   private spawnSprite(v: VillagerState): void {
-    const sprite = this.scene.add.image(v.x, v.y, 'villager').setDepth(11)
+    // Silhouette rendered above all world objects so the Nisse is visible even
+    // when occluded by a tree or building.
+    const outlineSprite = this.scene.add.image(v.x, v.y, 'villager')
+      .setScale(1.3)
+      .setTintFill(0xffffff)
+      .setAlpha(0.7)
+      .setDepth(900)
+
+    // Main sprite depth is updated every frame based on Y position.
+    const sprite = this.scene.add.image(v.x, v.y, 'villager')
+      .setDepth(Math.floor(v.y / TILE_SIZE) + 5)
 
     const nameLabel = this.scene.add.text(v.x, v.y - 22, v.name, {
       fontSize: '8px', color: '#ffffff', fontFamily: 'monospace',
       backgroundColor: '#00000088', padding: { x: 2, y: 1 },
-    }).setOrigin(0.5, 1).setDepth(12)
+    }).setOrigin(0.5, 1).setDepth(901)
 
-    const energyBar = this.scene.add.graphics().setDepth(12)
-    const jobIcon   = this.scene.add.text(v.x, v.y - 18, '', { fontSize: '10px' }).setDepth(13)
+    const energyBar = this.scene.add.graphics().setDepth(901)
+    const jobIcon   = this.scene.add.text(v.x, v.y - 18, '', { fontSize: '10px' }).setDepth(902)
 
     sprite.setInteractive()
     sprite.on('pointerdown', () => this.onNisseClick?.(v.id))
 
-    this.runtime.set(v.id, { sprite, nameLabel, energyBar, jobIcon, path: [], destination: null, workTimer: 0, idleScanTimer: 0, workLog: [] })
+    this.runtime.set(v.id, { sprite, outlineSprite, nameLabel, energyBar, jobIcon, path: [], destination: null, workTimer: 0, idleScanTimer: 0, workLog: [] })
   }
 
   /**
@@ -667,14 +690,18 @@ export class VillagerSystem {
     return result
   }
 
+  /**
+   * Destroys all Nisse sprites and clears the runtime map.
+   * Should be called when the scene shuts down.
+   */
   /**
    * Destroys all Nisse sprites and clears the runtime map.
    * Should be called when the scene shuts down.
    */
   destroy(): void {
     for (const rt of this.runtime.values()) {
-      rt.sprite.destroy(); rt.nameLabel.destroy()
-      rt.energyBar.destroy(); rt.jobIcon.destroy()
+      rt.sprite.destroy(); rt.outlineSprite.destroy()
+      rt.nameLabel.destroy(); rt.energyBar.destroy(); rt.jobIcon.destroy()
     }
     this.runtime.clear()
   }