@directivegames/genesys.js 3.1.24

package/games/behavior-tree-demo.ts

@@ -0,0 +1,1774 @@
+import * as ENGINE from 'genesys.js';
+import * as THREE from 'three';
+
+
+// All behavior tree classes are now available through ENGINE exports
+
+/**
+ * Behavior Tree Demo
+ *
+ * This demo showcases the genesys.js behavior tree system with three NPCs:
+ *
+ * 1. Patrol NPC (Orange Ring): Uses programmatically created patrol behavior
+ *    - Patrols between waypoints when player is far
+ *    - Approaches and performs melee attacks when player is detected
+ *    - Uses close-range melee combat instead of ranged attacks
+ *
+ * 2. Combat NPC (Red/Yellow Ring): Uses programmatically created combat behavior
+ *    - Aggressive combat behavior with shooting and positioning
+ *    - Flees when health drops below 50% (ring turns yellow)
+ *    - Demonstrates health-based behavior switching
+ *
+ * 3. Aerial NPC (Dark Red Drone): Uses programmatically created aerial behavior
+ *    - Floats in the air and hunts the player from above
+ *    - Shoots at player when in line of sight
+ *    - Searches around last known position when player is hidden
+ *    - Wanders randomly in the sky when no player information available
+ *    - Uses custom AerialMovementComponent (no navigation server)
+ *
+ * 4. Aerial Patrol NPC (Blue Drone): Uses programmatically created waypoint patrol
+ *    - Flies in a circular pattern between predefined 3D waypoints
+ *    - Demonstrates aerial waypoint navigation and cycling
+ *    - Peaceful patrol behavior (no combat functionality)
+ *    - Shows how to create aerial patrol routes in 3D space
+ *
+ * Key Features Demonstrated:
+ * - Programmatic behavior tree creation (no JSON files required)
+ * - Clean blackboard-only actor referencing (no direct actor references)
+ * - Direct numeric values for behavior parameters (no template resolution)
+ * - Complex behavior tree logic with conditions and sequences
+ * - Health-based behavior switching
+ * - Navigation and pathfinding integration
+ * - Custom aerial movement without navigation server
+ * - Line-of-sight based behavior switching
+ * - Predictive search behavior
+ * - Random aerial wandering when no target information
+ * - Organized action categorization (aerial, ground, combat, utility)
+ * - Melee vs ranged combat behaviors
+ * - Scene loading from .genesys-scene files
+ * - Manifold-based mesh combination for navigation
+ *
+ * Controls:
+ * - WASD: Move player
+ * - Mouse: Look around and aim
+ * - Left Click: Shoot
+ * - T: Test player damage
+ * - Y: Damage combat NPC (to trigger fleeing)
+ * - U: Set combat NPC to low health (instant flee trigger)
+ * - I: Damage aerial NPC
+ * - P: Damage aerial patrol NPC
+ * - O: Toggle NPC debug panel (shows all NPCs' behavior states)
+ * - L: Toggle NPC path debug visualization (shows pathfinding routes)
+ */
+export class BehaviorTreeDemo extends ENGINE.BaseGameLoop {
+  private patrolNpc: ENGINE.ThirdPersonCharacterPawn | null = null;
+  private combatNpc: ENGINE.ThirdPersonCharacterPawn | null = null;
+  private aerialNpc: ENGINE.Pawn | null = null; // New aerial enemy
+  private aerialPatrolNpc: ENGINE.Pawn | null = null; // New aerial patrol enemy
+  private playerPawn: ENGINE.Pawn | null = null;
+
+  // UI Components
+  private playerHealthBar: ENGINE.ProgressBar | null = null;
+  private crosshair: ENGINE.Crosshair | null = null;
+  private npcDebugPanel: ENGINE.UIElement | null = null; // Renamed from aerialDebugPanel
+
+  // Enemy health bars (3D sprites above heads)
+  private enemyHealthBars: Map<ENGINE.Pawn, ENGINE.UIElement> = new Map();
+
+  // Debug visualization
+  private debugContainer: THREE.Group = new THREE.Group();
+  private waypointMarkers: THREE.Mesh[] = [];
+
+
+
+  constructor(container: HTMLElement) {
+    super(container);
+  }
+
+  public override getWorldConfiguration(): ENGINE.WorldOptions {
+    return {
+      ...super.getWorldConfiguration(),
+      useManifold: true, // Enable Manifold for boolean operations
+      navigationOptions: {
+        engine: ENGINE.NavigationEngine.RecastNavigation,
+        debug: true, // Enable debug visualization for navmesh,
+        generateOnStartUp: true,
+        options: {
+          ...ENGINE.RecastNavigationServer.DEFAULT_OPTIONS,
+          // Adjust parameters for better scene scale
+          borderSize: 1,
+          cs: 0.2,              // Cell size - larger for bigger scenes
+          ch: 0.3,              // Cell height
+          walkableRadius: 2,  // Agent radius
+          walkableHeight: 2.0,  // Agent height
+          walkableClimb: 1,   // Step height agent can climb
+          walkableSlopeAngle: 45, // Max slope angle
+          maxEdgeLen: 20,       // Max edge length
+          maxSimplificationError: 2.0,
+          minRegionArea: 15,    // Min region area
+          mergeRegionArea: 40,  // Merge region area
+        }
+      }
+    };
+  }
+
+  protected override async preStart(): Promise<void> {
+    // Add debug container to scene
+    this.world.scene.add(this.debugContainer);
+
+    // Create player
+    this.createPlayer();
+
+    // Load the scene file
+    this.loadScene();
+  }
+
+  protected override postStart(): void {
+    const debugVisualization = this.world.getNavigationServer()?.createDebugVisualization();
+    if (debugVisualization) {
+      debugVisualization.traverse((child) => {
+        child.raycast = () => {};
+      });
+      this.world.scene.add(debugVisualization);
+    }
+
+    (async () => {
+      // Create UI components (after player is created in preStart)
+      await this.createUI();
+
+      // Create patrol NPC that can chase the player
+      await this.createPatrolNPC();
+
+      // Create combat NPC that uses new attack behaviors
+      await this.createCombatNPC();
+
+      // Create aerial enemy that floats and hunts from the sky
+      await this.createAerialNPC();
+
+      // Create aerial patrol enemy that cycles between waypoints
+      await this.createAerialPatrolNPC();
+    })();
+  }
+
+  public override destroy(): void {
+    // Clean up UI components
+    this.playerHealthBar?.destroy();
+    this.crosshair?.destroy();
+    this.npcDebugPanel?.remove();
+
+    // Clean up enemy health bars
+    this.enemyHealthBars.forEach((healthBarElement) => {
+      healthBarElement.remove();
+    });
+    this.enemyHealthBars.clear();
+
+    // Clean up debug container
+    this.world.scene.remove(this.debugContainer);
+
+    super.destroy();
+  }
+
+  private async loadScene(): Promise<void> {
+    fetch('@engine/assets/dev/fps-new.genesys-scene')
+      .then(response => response.json())
+      .then(async (data) => {
+        await this.loadWorldData(data);
+      })
+      .catch(error => {
+        console.error('Failed to load scene:', error);
+      });
+  }
+
+
+
+
+  private async createUI(): Promise<void> {
+    // Create player health bar
+    this.playerHealthBar = new ENGINE.ProgressBar(this.world.uiManager, {
+      width: 300,
+      height: 25,
+      label: 'HEALTH',
+      theme: 'health',
+      animate: false,
+      textDisplay: 'value',
+      style: 'rounded',
+      visible: true,
+      currentValue: 100,
+      maxValue: 100,
+      minValue: 0
+    });
+
+    await this.playerHealthBar.initialize();
+
+    // Position the health bar in bottom-left corner using setPosition
+    this.playerHealthBar.setPosition({
+      position: 'absolute',
+      bottom: '20px',
+      left: '20px'
+    });
+
+
+
+    // Initialize player health bar with current values and set up event subscription
+    if (this.playerPawn) {
+      const playerStats = this.playerPawn.getComponent(ENGINE.CharacterStatsComponent);
+      if (playerStats) {
+        // Set initial values - try setting max first, then current
+        this.playerHealthBar.setMaxValue(playerStats.getMaxHealth());
+        this.playerHealthBar.setValue(playerStats.getCurrentHealth());
+
+        // Force the component to show (in case it's hidden)
+        this.playerHealthBar.show();
+
+        // Subscribe to health changes now that the UI is ready
+        playerStats.onHealthChanged.add((currentHealth: number, maxHealth: number) => {
+          if (this.playerHealthBar) {
+            this.playerHealthBar.setMaxValue(maxHealth);
+            this.playerHealthBar.setValue(currentHealth);
+            // Force show in case it got hidden
+            this.playerHealthBar.show();
+          }
+        });
+
+        // Test controls for behavior tree demonstration
+        this.playerPawn.onKeyDown.add((event: KeyboardEvent) => {
+          if (event.code === 'KeyT') {
+            // Test player damage
+            playerStats.takeDamage(10);
+            return true;
+          }
+          // Test combat NPC damage with Y key (to trigger fleeing behavior)
+          if (event.code === 'KeyY' && this.combatNpc) {
+            const combatStats = this.combatNpc.getComponent(ENGINE.CharacterStatsComponent);
+            if (combatStats) {
+              combatStats.takeDamage(30);
+            }
+            return true;
+          }
+          // Test combat NPC set to low health with U key (instant flee trigger)
+          if (event.code === 'KeyU' && this.combatNpc) {
+            const combatStats = this.combatNpc.getComponent(ENGINE.CharacterStatsComponent);
+            if (combatStats) {
+              const targetHealth = 40; // Set to 40 out of 120 = 33% health (below 50% threshold)
+              const currentHealth = combatStats.getCurrentHealth();
+              const damageToDeal = Math.max(0, currentHealth - targetHealth);
+              if (damageToDeal > 0) {
+                combatStats.takeDamage(damageToDeal);
+              }
+            }
+            return true;
+          }
+          // Test aerial NPC damage with I key
+          if (event.code === 'KeyI' && this.aerialNpc) {
+            const aerialStats = this.aerialNpc.getComponent(ENGINE.CharacterStatsComponent);
+            if (aerialStats) {
+              aerialStats.takeDamage(20);
+            }
+            return true;
+          }
+          // Test aerial patrol NPC damage with P key
+          if (event.code === 'KeyP' && this.aerialPatrolNpc) {
+            const aerialPatrolStats = this.aerialPatrolNpc.getComponent(ENGINE.CharacterStatsComponent);
+            if (aerialPatrolStats) {
+              aerialPatrolStats.takeDamage(15);
+            }
+            return true;
+          }
+          // Toggle aerial debug panel with O key
+          if (event.code === 'KeyO' && this.npcDebugPanel) {
+            // Simple toggle by checking if it's currently visible
+            const element = this.npcDebugPanel.element;
+            if (element && element.style.display === 'none') {
+              this.npcDebugPanel.show();
+            } else {
+              this.npcDebugPanel.hide();
+            }
+            return true;
+          }
+          return false;
+        });
+      }
+    }
+
+    // Create crosshair
+    this.crosshair = new ENGINE.Crosshair(this.world.uiManager, {
+      size: 6,
+      color: 'rgba(255, 255, 255, 0.8)',
+      style: 'cross'
+    });
+
+    await this.crosshair.initialize();
+
+    // Position the crosshair in the center using setPosition
+    this.crosshair.setPosition({
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    });
+
+    // Create aerial NPC debug panel
+    await this.createNPCDebugPanel();
+  }
+
+  private async createNPCDebugPanel(): Promise<void> {
+    const ui = this.world.uiManager;
+
+    // Create debug panel container
+    this.npcDebugPanel = ui.createElement('npc-debug-panel', {
+      style: {
+        position: 'absolute',
+        top: '20px',
+        right: '20px',
+        width: '400px',
+        maxHeight: '80vh',
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        border: '1px solid rgba(255, 255, 255, 0.3)',
+        borderRadius: '8px',
+        padding: '15px',
+        fontFamily: 'monospace',
+        fontSize: '11px',
+        color: '#ffffff',
+        zIndex: '1000',
+        boxSizing: 'border-box',
+        overflowY: 'auto'
+      },
+      innerHTML: `
+        <div style="font-weight: bold; margin-bottom: 15px; color: #ff6b6b; text-align: center; font-size: 14px;">🤖 NPC Behavior Debug</div>
+        
+        <!-- Patrol NPC Section -->
+        <div style="margin-bottom: 15px; border: 1px solid rgba(255, 165, 0, 0.5); border-radius: 6px; padding: 10px;">
+          <div style="font-weight: bold; color: #FFA500; margin-bottom: 8px;">🟠 Patrol NPC (Melee)</div>
+          <div id="patrol-sequence" style="color: #4ecdc4;">Sequence: --</div>
+          <div id="patrol-action" style="color: #95e6cb;">Action: --</div>
+          <div id="patrol-status" style="color: #ffffff;">Status: --</div>
+          <div id="patrol-health" style="color: #ff9f43; margin-top: 5px;">Health: --</div>
+          <div id="patrol-path" style="color: #87ceeb; margin-top: 5px;">Path: --</div>
+          <div id="patrol-following" style="color: #dda0dd; margin-top: 5px;">Following: --</div>
+        </div>
+
+        <!-- Combat NPC Section -->
+        <div style="margin-bottom: 15px; border: 1px solid rgba(255, 0, 0, 0.5); border-radius: 6px; padding: 10px;">
+          <div style="font-weight: bold; color: #FF0000; margin-bottom: 8px;">🔴 Combat NPC (Ranged)</div>
+          <div id="combat-sequence" style="color: #4ecdc4;">Sequence: --</div>
+          <div id="combat-action" style="color: #95e6cb;">Action: --</div>
+          <div id="combat-status" style="color: #ffffff;">Status: --</div>
+          <div id="combat-health" style="color: #ff9f43; margin-top: 5px;">Health: --</div>
+        </div>
+
+        <!-- Aerial NPC Section -->
+        <div style="margin-bottom: 15px; border: 1px solid rgba(139, 0, 0, 0.5); border-radius: 6px; padding: 10px;">
+          <div style="font-weight: bold; color: #8B0000; margin-bottom: 8px;">🚁 Aerial NPC (Hunter Drone)</div>
+          <div id="aerial-sequence" style="color: #4ecdc4;">Sequence: --</div>
+          <div id="aerial-action" style="color: #95e6cb;">Action: --</div>
+          <div id="aerial-status" style="color: #ffffff;">Status: --</div>
+          <div id="aerial-health" style="color: #ff9f43; margin-top: 5px;">Health: --</div>
+          <div id="aerial-special" style="color: #ffd700; margin-top: 5px;">Line of Sight: --</div>
+        </div>
+
+        <!-- Aerial Patrol NPC Section -->
+        <div style="margin-bottom: 15px; border: 1px solid rgba(65, 105, 225, 0.5); border-radius: 6px; padding: 10px;">
+          <div style="font-weight: bold; color: #4169E1; margin-bottom: 8px;">🛩️ Aerial Patrol (Waypoint Drone)</div>
+          <div id="aerial-patrol-sequence" style="color: #4ecdc4;">Sequence: --</div>
+          <div id="aerial-patrol-action" style="color: #95e6cb;">Action: --</div>
+          <div id="aerial-patrol-status" style="color: #ffffff;">Status: --</div>
+          <div id="aerial-patrol-health" style="color: #ff9f43; margin-top: 5px;">Health: --</div>
+          <div id="aerial-patrol-waypoint" style="color: #87ceeb; margin-top: 5px;">Current Waypoint: --</div>
+        </div>
+
+        <div style="margin-top: 15px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); text-align: center; color: #888;">
+          Press 'O' to toggle this panel
+        </div>
+      `
+    });
+  }
+
+  private createPlayer(): void {
+    // Create a first-person player character like in chase-game
+    const { pawn } = ENGINE.GameBuilder.createDefaultPawnWithPhysics(
+      this.world,
+      ENGINE.CharacterMovementType.FirstPerson
+    );
+    this.playerPawn = pawn;
+
+    // Position player at PlayerStart location from the scene (will be updated after scene loads)
+    pawn.rootComponent.setWorldPosition(new THREE.Vector3(-4, 6, -13));
+
+    // Set reasonable movement speed
+    if (pawn.movementComponent) {
+      (pawn.movementComponent.options as ENGINE.CharacterMovementOptions).maxSpeed = 15;
+    }
+
+    // Add character stats for combat interactions
+    const playerStats = new ENGINE.CharacterStatsComponent({
+      maxHealth: 100,
+      healthRegen: 0, // Disable health regeneration
+      attackRange: 50.0,
+      attackDamage: 30,
+      attackCooldown: 0.3
+    });
+    pawn.rootComponent.add(playerStats);
+
+    // Add projectile weapon for the player (damage disabled for demo)
+    const playerWeapon = new ENGINE.ProjectileWeaponComponent({
+      position: new THREE.Vector3(0, 0, -1), // Slightly in front of player
+      fireInterval: playerStats.getAttackCooldown(),
+      isSingleFire: false,
+      projectileOptions: {
+        velocity: 80,
+        range: playerStats.getAttackRange(),
+        damageDealt: 10,
+        useOverlapCheck: true,
+        destroyOnHit: true,
+        geometry: new THREE.SphereGeometry(0.3),
+        material: new THREE.MeshStandardMaterial({ color: ENGINE.Color.BLUE })
+      }
+    });
+    pawn.rootComponent.add(playerWeapon);
+
+    // Note: Health bar subscription will be set up after UI is created
+
+    // Player will be stored in NPC blackboards when they're created
+  }
+
+  private createEnemyHealthBar(npc: ENGINE.Pawn): ENGINE.UIElement {
+    const ui = this.world.uiManager;
+
+    // Create a health bar element using CSS-based fill like in ui-demo
+    const healthBarElement = ui.createElement(`health-container-${npc.uuid}`, {
+      style: {
+        position: 'absolute',
+        width: '60px',
+        height: '8px',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        borderRadius: '4px',
+        border: '1px solid rgba(255, 255, 255, 0.3)',
+        pointerEvents: 'none',
+        display: 'none',
+        left: '-1000px',
+        top: '-1000px',
+        zIndex: '1500',
+        boxSizing: 'border-box',
+        // Use background gradient to create the fill effect
+        backgroundImage: 'linear-gradient(to right, #4CAF50 100%, transparent 100%)',
+        backgroundClip: 'padding-box',
+        transition: 'background-image 0.3s ease'
+      }
+    });
+
+    // Subscribe to NPC health changes
+    const npcStats = npc.getComponent(ENGINE.CharacterStatsComponent);
+    if (npcStats) {
+      npcStats.onHealthChanged.add((currentHealth: number, maxHealth: number) => {
+        this.updateEnemyHealthBar(npc, currentHealth, maxHealth);
+      });
+
+      // Set initial health
+      this.updateEnemyHealthBar(npc, npcStats.getCurrentHealth(), npcStats.getMaxHealth());
+    }
+
+    return healthBarElement;
+  }
+
+  private updateEnemyHealthBar(npc: ENGINE.Pawn, currentHealth: number, maxHealth: number): void {
+    const healthBarElement = this.enemyHealthBars.get(npc);
+    if (!healthBarElement) return;
+
+    const percentage = Math.max(0, currentHealth / maxHealth);
+
+    // Determine color based on health
+    let color = '#4CAF50'; // Green
+    if (currentHealth <= maxHealth * 0.3) {
+      color = '#F44336'; // Red
+    } else if (currentHealth <= maxHealth * 0.6) {
+      color = '#FF9800'; // Orange
+    }
+
+    // Update the background gradient to show the health percentage
+    const fillPercentage = Math.round(percentage * 100);
+    healthBarElement.setStyle('backgroundImage',
+      `linear-gradient(to right, ${color} ${fillPercentage}%, transparent ${fillPercentage}%)`
+    );
+  }
+
+  protected override tick(tickTime: ENGINE.TickTime): void {
+    super.tick(tickTime);
+
+    // Update enemy health bar positions
+    this.updateEnemyHealthBarPositions();
+
+    // Update aerial NPC debug panel
+    this.updateNPCDebugPanel();
+  }
+
+  private updateEnemyHealthBarPositions(): void {
+    const camera = this.world.getActiveCamera();
+    if (!camera) return;
+
+    this.enemyHealthBars.forEach((healthBarElement, npc) => {
+      // Get NPC position
+      const npcPosition = new THREE.Vector3();
+      npc.rootComponent.getWorldPosition(npcPosition);
+
+      // Position health bar above the NPC
+      npcPosition.y += 5;
+
+      // Project 3D position to screen coordinates
+      const screenPosition = npcPosition.clone().project(camera);
+
+      // Convert to screen pixels using renderer size
+      const containerSize = this.renderer.getWindowSize();
+      const x = (screenPosition.x * 0.5 + 0.5) * containerSize.width;
+      const y = (screenPosition.y * -0.5 + 0.5) * containerSize.height;
+
+      // Health bar dimensions
+      const healthBarWidth = 60;
+      const healthBarHeight = 8;
+      const healthBarX = x - healthBarWidth / 2;
+      const healthBarY = y - 10;
+
+      // Hide health bar if NPC is behind camera or outside container bounds
+      const margin = 10;
+      if (screenPosition.z > 1 || screenPosition.z < 0 ||
+          healthBarX < margin || healthBarX + healthBarWidth > containerSize.width - margin ||
+          healthBarY < margin || healthBarY + healthBarHeight > containerSize.height - margin) {
+        healthBarElement.hide();
+      } else {
+        // Update health bar position (clamp to safe bounds)
+        const clampedX = Math.max(margin, Math.min(healthBarX, containerSize.width - healthBarWidth - margin));
+        const clampedY = Math.max(margin, Math.min(healthBarY, containerSize.height - healthBarHeight - margin));
+
+        healthBarElement.setStyle('left', `${clampedX}px`);
+        healthBarElement.setStyle('top', `${clampedY}px`);
+        healthBarElement.setStyle('display', 'block');
+        healthBarElement.show();
+      }
+    });
+  }
+
+  private updateNPCDebugPanel(): void {
+    if (!this.npcDebugPanel || !this.playerPawn) {
+      return;
+    }
+
+    // Update Patrol NPC debug info
+    this.updateNPCDebugInfo('patrol', this.patrolNpc);
+
+    // Update Combat NPC debug info
+    this.updateNPCDebugInfo('combat', this.combatNpc);
+
+    // Update Aerial NPC debug info
+    this.updateNPCDebugInfo('aerial', this.aerialNpc);
+
+    // Update Aerial Patrol NPC debug info
+    this.updateAerialPatrolDebugInfo();
+  }
+
+  private updateNPCDebugInfo(prefix: string, npc: ENGINE.Pawn | null): void {
+    if (!npc || !this.npcDebugPanel) {
+      // NPC not available, show "Not Available"
+      const sequenceElement = this.npcDebugPanel?.querySelector(`#${prefix}-sequence`);
+      const actionElement = this.npcDebugPanel?.querySelector(`#${prefix}-action`);
+      const statusElement = this.npcDebugPanel?.querySelector(`#${prefix}-status`);
+      const healthElement = this.npcDebugPanel?.querySelector(`#${prefix}-health`);
+
+      if (sequenceElement) sequenceElement.textContent = 'Sequence: Not Available';
+      if (actionElement) actionElement.textContent = 'Action: Not Available';
+      if (statusElement) statusElement.textContent = 'Status: Not Available';
+      if (healthElement) healthElement.textContent = 'Health: Not Available';
+      return;
+    }
+
+    // Get behavior tree component
+    const behaviorTree = npc.getComponent(ENGINE.BehaviorTreeComponent);
+    const stats = npc.getComponent(ENGINE.CharacterStatsComponent);
+
+    // Get DOM elements
+    const sequenceElement = this.npcDebugPanel.querySelector(`#${prefix}-sequence`);
+    const actionElement = this.npcDebugPanel.querySelector(`#${prefix}-action`);
+    const statusElement = this.npcDebugPanel.querySelector(`#${prefix}-status`);
+    const healthElement = this.npcDebugPanel.querySelector(`#${prefix}-health`);
+
+    if (behaviorTree && behaviorTree.isRunningBehaviorTree()) {
+      // Get current sequence and action
+      const currentSequence = behaviorTree.getCurrentSequence();
+      const currentAction = behaviorTree.getCurrentAction();
+      const treeStatus = behaviorTree.getCurrentStatus();
+
+      // Update sequence info
+      if (sequenceElement) {
+        const sequenceName = currentSequence ? currentSequence.name : 'None';
+        sequenceElement.textContent = `Sequence: ${sequenceName}`;
+      }
+
+      // Update action info
+      if (actionElement) {
+        const actionName = currentAction ? currentAction.name : 'None';
+        const actionStatus = currentAction ? currentAction.getStatus() : 'N/A';
+        actionElement.textContent = `Action: ${actionName} (${actionStatus})`;
+      }
+
+      // Update overall status
+      if (statusElement) {
+        statusElement.textContent = `Status: ${treeStatus}`;
+      }
+    } else {
+      // Behavior tree not running
+      if (sequenceElement) sequenceElement.textContent = 'Sequence: Inactive';
+      if (actionElement) actionElement.textContent = 'Action: Inactive';
+      if (statusElement) statusElement.textContent = 'Status: Stopped';
+    }
+
+    // Update health info
+    if (healthElement && stats) {
+      const currentHealth = stats.getCurrentHealth();
+      const maxHealth = stats.getMaxHealth();
+      const healthPercent = Math.round((currentHealth / maxHealth) * 100);
+      healthElement.textContent = `Health: ${currentHealth}/${maxHealth} (${healthPercent}%)`;
+
+      // Color health based on percentage
+      if (healthPercent <= 30) {
+        healthElement.style.color = '#F44336'; // Red
+      } else if (healthPercent <= 60) {
+        healthElement.style.color = '#FF9800'; // Orange
+      } else {
+        healthElement.style.color = '#4CAF50'; // Green
+      }
+    } else if (healthElement) {
+      healthElement.textContent = 'Health: No Stats Component';
+    }
+
+    // Special handling for patrol NPC (path and following info)
+    if (prefix === 'patrol') {
+      const pathElement = this.npcDebugPanel.querySelector('#patrol-path');
+      const followingElement = this.npcDebugPanel.querySelector('#patrol-following');
+
+      if (pathElement || followingElement) {
+        const movementComponent = npc.getComponent(ENGINE.NpcMovementComponent);
+
+        if (movementComponent) {
+          // Update path information
+          if (pathElement) {
+            const currentPath = movementComponent.getCurrentPath();
+            const currentPathIndex = movementComponent.getCurrentPathIndex();
+            const pathLength = movementComponent.getPathLength();
+
+            if (pathLength > 0) {
+              const hasReached = movementComponent.hasReachedCurrentTarget();
+              pathElement.textContent = `Path: ${currentPathIndex + 1}/${pathLength} ${hasReached ? '✅' : '🔄'}`;
+              pathElement.style.color = hasReached ? '#4CAF50' : '#87ceeb';
+            } else {
+              pathElement.textContent = 'Path: No active path';
+              pathElement.style.color = '#888888';
+            }
+          }
+
+          // Update following information
+          if (followingElement) {
+            const followedActor = movementComponent.getFollowedActor();
+            const currentTarget = movementComponent.getCurrentTarget();
+
+            if (followedActor) {
+              const npcPos = new THREE.Vector3();
+              const targetPos = new THREE.Vector3();
+              npc.rootComponent.getWorldPosition(npcPos);
+              followedActor.rootComponent.getWorldPosition(targetPos);
+              const distance = npcPos.distanceTo(targetPos).toFixed(1);
+
+              followingElement.textContent = `Following: Player (${distance}m)`;
+              followingElement.style.color = '#dda0dd';
+            } else if (currentTarget) {
+              const npcPos = new THREE.Vector3();
+              npc.rootComponent.getWorldPosition(npcPos);
+              const distance = npcPos.distanceTo(currentTarget).toFixed(1);
+
+              followingElement.textContent = `Following: Waypoint (${distance}m)`;
+              followingElement.style.color = '#87ceeb';
+            } else {
+              followingElement.textContent = 'Following: None';
+              followingElement.style.color = '#888888';
+            }
+          }
+        } else {
+          // No movement component
+          if (pathElement) {
+            pathElement.textContent = 'Path: No Movement Component';
+            pathElement.style.color = '#888888';
+          }
+          if (followingElement) {
+            followingElement.textContent = 'Following: No Movement Component';
+            followingElement.style.color = '#888888';
+          }
+        }
+      }
+    }
+
+    // Special handling for aerial NPC (line of sight and wander info)
+    if (prefix === 'aerial' && this.playerPawn) {
+      const specialElement = this.npcDebugPanel.querySelector('#aerial-special');
+      if (specialElement) {
+        const npcPos = new THREE.Vector3();
+        const playerPos = new THREE.Vector3();
+        npc.rootComponent.getWorldPosition(npcPos);
+        this.playerPawn.rootComponent.getWorldPosition(playerPos);
+
+        const canSee = this.checkLineOfSight(npcPos, playerPos);
+        const distance = npcPos.distanceTo(playerPos).toFixed(1);
+
+        // Get wander info if available
+        let wanderInfo = '';
+        if (behaviorTree) {
+          const currentAction = behaviorTree.getCurrentAction();
+          if (currentAction && currentAction.name === 'AerialWander') {
+            const wanderAction = currentAction as any; // Type assertion for debugging
+            if (wanderAction.getCurrentWanderTarget && wanderAction.isCurrentlyWaiting) {
+              const wanderTarget = wanderAction.getCurrentWanderTarget();
+              const isWaiting = wanderAction.isCurrentlyWaiting();
+              if (wanderTarget) {
+                const wanderDistance = npcPos.distanceTo(wanderTarget).toFixed(1);
+                wanderInfo = ` | Wander: ${isWaiting ? 'Waiting' : `Moving to (${wanderTarget.x.toFixed(1)}, ${wanderTarget.y.toFixed(1)}, ${wanderTarget.z.toFixed(1)}) ${wanderDistance}m`}`;
+              }
+            }
+          }
+        }
+
+        specialElement.textContent = `Line of Sight: ${canSee ? '✅ YES' : '❌ NO'} (${distance}m)${wanderInfo}`;
+        specialElement.style.color = canSee ? '#4CAF50' : '#F44336';
+      }
+    }
+  }
+
+  private checkLineOfSight(fromPos: THREE.Vector3, toPos: THREE.Vector3): boolean {
+    // Simple line of sight check (similar to what CanSeeTargetCondition does)
+    const raycaster = new THREE.Raycaster();
+    const direction = toPos.clone().sub(fromPos).normalize();
+    const distance = fromPos.distanceTo(toPos);
+
+    raycaster.set(fromPos, direction);
+    raycaster.far = distance - 0.1; // Stop just before the target
+
+    // Get all meshes in the scene (excluding sprites and UI elements)
+    const meshes: THREE.Mesh[] = [];
+    this.world.scene.traverse((child) => {
+      if (child instanceof THREE.Mesh && !(child instanceof THREE.Sprite)) {
+        // Exclude the aerial NPC itself and player
+        const isAerialNPC = this.aerialNpc?.rootComponent.getObjectByProperty('uuid', child.uuid);
+        const isPlayer = this.playerPawn?.rootComponent.getObjectByProperty('uuid', child.uuid);
+        if (!isAerialNPC && !isPlayer) {
+          meshes.push(child);
+        }
+      }
+    });
+
+    const intersections = raycaster.intersectObjects(meshes, false);
+    return intersections.length === 0; // Clear line of sight if no intersections
+  }
+
+  private updateAerialPatrolDebugInfo(): void {
+    if (!this.npcDebugPanel || !this.aerialPatrolNpc) {
+      // NPC not available, show "Not Available"
+      const sequenceElement = this.npcDebugPanel?.querySelector('#aerial-patrol-sequence');
+      const actionElement = this.npcDebugPanel?.querySelector('#aerial-patrol-action');
+      const statusElement = this.npcDebugPanel?.querySelector('#aerial-patrol-status');
+      const healthElement = this.npcDebugPanel?.querySelector('#aerial-patrol-health');
+      const waypointElement = this.npcDebugPanel?.querySelector('#aerial-patrol-waypoint');
+
+      if (sequenceElement) sequenceElement.textContent = 'Sequence: Not Available';
+      if (actionElement) actionElement.textContent = 'Action: Not Available';
+      if (statusElement) statusElement.textContent = 'Status: Not Available';
+      if (healthElement) healthElement.textContent = 'Health: Not Available';
+      if (waypointElement) waypointElement.textContent = 'Current Waypoint: Not Available';
+      return;
+    }
+
+    // Get behavior tree component
+    const behaviorTree = this.aerialPatrolNpc.getComponent(ENGINE.BehaviorTreeComponent);
+    const stats = this.aerialPatrolNpc.getComponent(ENGINE.CharacterStatsComponent);
+
+    // Get DOM elements
+    const sequenceElement = this.npcDebugPanel.querySelector('#aerial-patrol-sequence');
+    const actionElement = this.npcDebugPanel.querySelector('#aerial-patrol-action');
+    const statusElement = this.npcDebugPanel.querySelector('#aerial-patrol-status');
+    const healthElement = this.npcDebugPanel.querySelector('#aerial-patrol-health');
+    const waypointElement = this.npcDebugPanel.querySelector('#aerial-patrol-waypoint');
+
+    if (behaviorTree && behaviorTree.isRunningBehaviorTree()) {
+      // Get current sequence and action
+      const currentSequence = behaviorTree.getCurrentSequence();
+      const currentAction = behaviorTree.getCurrentAction();
+      const treeStatus = behaviorTree.getCurrentStatus();
+
+      // Update sequence info
+      if (sequenceElement) {
+        const sequenceName = currentSequence ? currentSequence.name : 'None';
+        sequenceElement.textContent = `Sequence: ${sequenceName}`;
+      }
+
+      // Update action info
+      if (actionElement) {
+        const actionName = currentAction ? currentAction.name : 'None';
+        const actionStatus = currentAction ? currentAction.getStatus() : 'N/A';
+        actionElement.textContent = `Action: ${actionName} (${actionStatus})`;
+      }
+
+      // Update overall status
+      if (statusElement) {
+        statusElement.textContent = `Status: ${treeStatus}`;
+      }
+
+      // Update waypoint info
+      if (waypointElement) {
+        const blackboard = behaviorTree.getBlackboard();
+        const currentIndex = blackboard.getValue<number>('CurrentAerialWaypointIndex') ?? 0;
+        const waypoints = blackboard.getValue<THREE.Vector3[]>('AerialPatrolWaypoints');
+
+        if (waypoints && waypoints.length > 0) {
+          const totalWaypoints = waypoints.length;
+          waypointElement.textContent = `Current Waypoint: ${currentIndex + 1}/${totalWaypoints}`;
+        } else {
+          waypointElement.textContent = 'Current Waypoint: No waypoints';
+        }
+      }
+    } else {
+      // Behavior tree not running
+      if (sequenceElement) sequenceElement.textContent = 'Sequence: Inactive';
+      if (actionElement) actionElement.textContent = 'Action: Inactive';
+      if (statusElement) statusElement.textContent = 'Status: Stopped';
+      if (waypointElement) waypointElement.textContent = 'Current Waypoint: Inactive';
+    }
+
+    // Update health info
+    if (healthElement && stats) {
+      const currentHealth = stats.getCurrentHealth();
+      const maxHealth = stats.getMaxHealth();
+      const healthPercent = Math.round((currentHealth / maxHealth) * 100);
+      healthElement.textContent = `Health: ${currentHealth}/${maxHealth} (${healthPercent}%)`;
+
+      // Color health based on percentage
+      if (healthPercent <= 30) {
+        healthElement.style.color = '#F44336'; // Red
+      } else if (healthPercent <= 60) {
+        healthElement.style.color = '#FF9800'; // Orange
+      } else {
+        healthElement.style.color = '#4CAF50'; // Green
+      }
+    } else if (healthElement) {
+      healthElement.textContent = 'Health: No Stats Component';
+    }
+  }
+
+  private async createPatrolNPC(): Promise<void> {
+    // Create patrol NPC using ThirdPersonCharacterPawn positioned near the first SKM actor
+    this.patrolNpc = new ENGINE.ThirdPersonCharacterPawn({
+      modelUrl: '@engine/assets/character/mannequinG.glb',
+      configUrl: '@engine/assets/character/config/mannequin-anim.json',
+      meshPosition: new THREE.Vector3(0, -ENGINE.CHARACTER_HEIGHT / 2, 0),
+      meshRotation: new THREE.Euler(0, Math.PI, 0),
+      meshScale: new THREE.Vector3(1, 1, 1),
+      position: new THREE.Vector3(-8, 4, 2), // Position near the Aviator SKM actor at (-8.9, 4.3, -0.1)
+      movementComponent: new ENGINE.NpcMovementComponent({
+        ...ENGINE.NpcMovementComponent.DEFAULT_OPTIONS,
+        useNavigationServer: true,
+        movementSpeed: 8, // Slower movement speed for patrolling
+        pathFollowingAccuracy: 1.5,
+        actorFollowingDistance: 3.0,
+        stopDistance: 1.5,
+        debugVisualization: {
+          enabled: true,
+          pathColor: 0xffa500, // Orange for patrol NPC
+          targetColor: 0xff6600,
+          lineWidth: 8,
+          showWaypoints: true,
+          waypointSize: 0.5
+        },
+      }),
+      camera: null, // NPCs don't need cameras
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: ENGINE.GameBuilder.createDefaultPawnCapsuleGeometry(),
+        material: new THREE.MeshStandardMaterial({ color: 0x00ff00, visible: false, transparent: true, opacity: 0.5 }), // Invisible collision capsule
+        physicsOptions: {
+          enabled: true,
+          motionType: ENGINE.PhysicsMotionType.KinematicVelocityBased,
+          collisionProfile: ENGINE.DefaultCollisionProfile.Character,
+        }
+      })
+    });
+
+    // Create behavior tree component with programmatically created tree
+    const behaviorTreeComponent = new ENGINE.BehaviorTreeComponent({
+      rootNode: this.createPatrolBehaviorTree(),
+      updateInterval: 0.15,
+      autoStart: true
+    });
+
+    this.patrolNpc.rootComponent.add(behaviorTreeComponent);
+    this.world.addActors(this.patrolNpc);
+
+    // Add character stats for melee combat
+    const npcStats = new ENGINE.CharacterStatsComponent({
+      maxHealth: 80,
+      attackRange: 4.0, // Shorter range for melee
+      attackDamage: 0, // Higher damage for melee
+      attackCooldown: 1.2  // Slower melee attacks
+    });
+    this.patrolNpc.rootComponent.add(npcStats);
+
+    // Remove projectile weapon - this NPC uses melee attacks only
+
+    // Create health bar for this NPC
+    const healthBar = this.createEnemyHealthBar(this.patrolNpc);
+    this.enemyHealthBars.set(this.patrolNpc, healthBar);
+
+    // Set up blackboard values for patrol NPC
+    const behaviorTree = this.patrolNpc.getComponent(ENGINE.BehaviorTreeComponent);
+    if (behaviorTree && this.playerPawn) {
+      const blackboard = behaviorTree.getBlackboard();
+
+      // Set player reference (required by all targeting actions/conditions)
+      blackboard.setValue('PlayerActor', this.playerPawn);
+
+      // Set patrol waypoints near all three SKM actors
+      // SKM positions: Adventurer(1.1, 0.3, -4.6), Aviator(-8.9, 4.3, -0.1), Shaman(11.5, 4.3, -9.4)
+      blackboard.setValue('patrolWaypoints', [
+        new THREE.Vector3(-8, 4, 2),    // Near Aviator SKM actor
+        new THREE.Vector3(-6, 4, -2),   // Between Aviator and center
+        new THREE.Vector3(2, 1, -3),    // Near Adventurer SKM actor
+        new THREE.Vector3(0, 1, -6),    // South of Adventurer SKM actor
+        new THREE.Vector3(8, 4, -8),    // Near Shaman SKM actor
+        new THREE.Vector3(12, 4, -7),   // East of Shaman SKM actor
+        new THREE.Vector3(6, 2, -2),    // Central area
+        new THREE.Vector3(-4, 3, 1),    // Back toward Aviator area
+      ]);
+      blackboard.setValue('currentWaypointIndex', 0);
+    }
+
+    // Create debug visualization for patrol NPC
+    this.createNPCDebugVisualization(this.patrolNpc, 'Patrol', 0xff6600); // Orange color for patrol behavior
+    this.createWaypointVisualization();
+  }
+
+  private async createCombatNPC(): Promise<void> {
+    // Create combat NPC positioned near the Shaman SKM actor area
+    this.combatNpc = new ENGINE.ThirdPersonCharacterPawn({
+      modelUrl: '@engine/assets/character/mannequinG.glb',
+      configUrl: '@engine/assets/character/config/mannequin-anim.json',
+      meshPosition: new THREE.Vector3(0, -ENGINE.CHARACTER_HEIGHT / 2, 0),
+      meshRotation: new THREE.Euler(0, Math.PI, 0),
+      meshScale: new THREE.Vector3(1, 1, 1),
+      position: new THREE.Vector3(9, 4, -11), // Position near the Shaman SKM actor at (11.5, 4.3, -9.4)
+      movementComponent: new ENGINE.NpcMovementComponent({
+        ...ENGINE.NpcMovementComponent.DEFAULT_OPTIONS,
+        useNavigationServer: true,
+        movementSpeed: 12,
+        pathFollowingAccuracy: 1.5,
+        actorFollowingDistance: 2.0,
+        stopDistance: 2.0, // Default stop distance for movement component
+        debugVisualization: {
+          enabled: true,
+          pathColor: 0xff0000, // Red for combat NPC
+          targetColor: 0xff4444,
+          lineWidth: 8,
+          showWaypoints: true,
+          waypointSize: 0.8
+        }
+      }),
+      camera: null,
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: ENGINE.GameBuilder.createDefaultPawnCapsuleGeometry(),
+        material: new THREE.MeshStandardMaterial({ color: 0xff0000, visible: false, transparent: true, opacity: 0.5 }), // Red collision capsule
+        physicsOptions: {
+          enabled: true,
+          motionType: ENGINE.PhysicsMotionType.KinematicVelocityBased,
+          collisionProfile: ENGINE.DefaultCollisionProfile.Character,
+        }
+      })
+    });
+
+    // Add character stats for combat
+    const combatStats = new ENGINE.CharacterStatsComponent({
+      maxHealth: 120,
+      attackRange: 40.0,
+      attackDamage: 25,
+      attackCooldown: 0.4  // Much faster firing rate
+    });
+    this.combatNpc.rootComponent.add(combatStats);
+
+    // Create health bar for this NPC
+    const healthBar = this.createEnemyHealthBar(this.combatNpc);
+    this.enemyHealthBars.set(this.combatNpc, healthBar);
+
+    // Add projectile weapon for shooting (damage disabled for demo)
+    const weapon = new ENGINE.ProjectileWeaponComponent({
+      position: new THREE.Vector3(0, 0, -1), // Slightly in front of NPC
+      fireInterval: combatStats.getAttackCooldown(),
+      isSingleFire: false,
+      projectileOptions: {
+        velocity: 80,  // Faster projectiles
+        range: combatStats.getAttackRange(),
+        damageDealt: 0, // Disabled damage for demo
+        useOverlapCheck: true,  // Use overlap for reliable damage detection
+        destroyOnHit: true,
+        geometry: new THREE.SphereGeometry(0.5),  // Larger projectiles for better hit detection
+        material: new THREE.MeshStandardMaterial({ color: ENGINE.Color.RED })
+      }
+    });
+    this.combatNpc.rootComponent.add(weapon);
+
+
+
+    // Create behavior tree component with programmatically created combat tree
+    const behaviorTreeComponent = new ENGINE.BehaviorTreeComponent({
+      rootNode: this.createCombatBehaviorTree(),
+      updateInterval: 0.1,
+      autoStart: true
+    });
+
+    this.combatNpc.rootComponent.add(behaviorTreeComponent);
+    this.world.addActors(this.combatNpc);
+
+    // Set up blackboard values for combat NPC
+    const blackboard = behaviorTreeComponent.getBlackboard();
+    if (this.playerPawn) {
+      // Set player reference (required by all targeting actions/conditions)
+      blackboard.setValue('PlayerActor', this.playerPawn);
+    }
+
+    // Create debug visualization for combat NPC
+    this.createNPCDebugVisualization(this.combatNpc, 'Combat', 0xff0000); // Red color to indicate combat behavior
+
+    // Add health change listener to update debug visualization when fleeing
+    const combatBehaviorTree = this.combatNpc.getComponent(ENGINE.BehaviorTreeComponent);
+    if (combatBehaviorTree && combatStats) {
+      combatStats.onHealthChanged.add((currentHealth: number, maxHealth: number) => {
+        const healthPercentage = (currentHealth / maxHealth) * 100;
+        // Change debug ring color to yellow when at low health (fleeing)
+        if (this.combatNpc) {
+          if (healthPercentage <= 50) { // Match the JSON threshold
+            this.updateNPCDebugColor(this.combatNpc, 0xffff00); // Yellow for fleeing
+          } else {
+            this.updateNPCDebugColor(this.combatNpc, 0xff0000); // Red for combat
+          }
+        }
+      });
+    }
+  }
+
+  private async createAerialNPC(): Promise<void> {
+    // Create aerial enemy using basic Pawn with custom aerial movement
+    this.aerialNpc = new ENGINE.Pawn({
+      position: new THREE.Vector3(0, 25, 0), // Start high in the air
+      movementComponent: new ENGINE.AerialMovementComponent({
+        maxSpeed: 20,
+        accelerationLambda: 3,
+        decelerationLambda: 2,
+        hoverHeight: 20,
+        hoverVariation: 5,
+        rotationSpeed: 2.0,
+        maxTiltAngle: 15
+      }),
+      camera: null, // NPCs don't need cameras
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: ENGINE.GameBuilder.createDefaultPawnCapsuleGeometry(),
+        material: new THREE.MeshStandardMaterial({ color: 0x00ff00, visible: false, transparent: true, opacity: 0.5 }), // Invisible collision capsule
+        physicsOptions: {
+          enabled: true,
+          motionType: ENGINE.PhysicsMotionType.KinematicVelocityBased,
+          collisionProfile: ENGINE.DefaultCollisionProfile.Character,
+        }
+      })
+    });
+
+    // Create visual representation - a floating drone-like enemy
+    const bodyGeometry = new THREE.SphereGeometry(1.2, 12, 8);
+    const bodyMaterial = new THREE.MeshStandardMaterial({
+      color: 0x8B0000, // Dark red
+      metalness: 0.7,
+      roughness: 0.3
+    });
+    const body = new ENGINE.MeshComponent({
+      geometry: bodyGeometry,
+      material: bodyMaterial,
+      position: new THREE.Vector3(0, 0, 0)
+    });
+    body.castShadow = true;
+
+    // Add glowing "eye" effect
+    const eyeGeometry = new THREE.SphereGeometry(0.3, 8, 6);
+    const eyeMaterial = new THREE.MeshStandardMaterial({
+      color: 0xFF0000,
+      emissive: 0xFF0000,
+      emissiveIntensity: 0.5
+    });
+    const eye = new ENGINE.MeshComponent({
+      geometry: eyeGeometry,
+      material: eyeMaterial,
+      position: new THREE.Vector3(0, 0, -1)
+    });
+
+    // Add floating propellers/rotors
+    const rotorGeometry = new THREE.CylinderGeometry(0.1, 0.1, 2, 8);
+    const rotorMaterial = new THREE.MeshStandardMaterial({ color: 0x444444 });
+
+    const rotor1 = new ENGINE.MeshComponent({
+      geometry: rotorGeometry,
+      material: rotorMaterial,
+      position: new THREE.Vector3(-1.5, 0.5, 0),
+      rotation: new THREE.Euler(0, 0, Math.PI/2)
+    });
+
+    const rotor2 = new ENGINE.MeshComponent({
+      geometry: rotorGeometry,
+      material: rotorMaterial,
+      position: new THREE.Vector3(1.5, 0.5, 0),
+      rotation: new THREE.Euler(0, 0, Math.PI/2)
+    });
+
+    // Add components to the aerial NPC
+    this.aerialNpc.rootComponent.add(body);
+    body.add(eye);
+    body.add(rotor1);
+    body.add(rotor2);
+
+    // Add character stats for combat
+    const aerialStats = new ENGINE.CharacterStatsComponent({
+      maxHealth: 60,
+      attackRange: 45.0,
+      attackDamage: 20,
+      attackCooldown: 0.8
+    });
+    this.aerialNpc.rootComponent.add(aerialStats);
+
+    // Add projectile weapon for aerial attacks (damage disabled for demo)
+    const aerialWeapon = new ENGINE.ProjectileWeaponComponent({
+      position: new THREE.Vector3(0, -0.5, -2.5), // Further in front to avoid self-collision
+      fireInterval: aerialStats.getAttackCooldown(),
+      isSingleFire: false,
+      projectileOptions: {
+        velocity: 80,  // Faster projectiles
+        range: aerialStats.getAttackRange(),
+        damageDealt: 0, // Disabled damage for demo
+        useOverlapCheck: true,  // Use overlap for reliable damage detection
+        destroyOnHit: true,
+        geometry: new THREE.SphereGeometry(0.5),  // Larger projectiles for better hit detection
+        material: new THREE.MeshStandardMaterial({ color: ENGINE.Color.RED })
+      }
+    });
+    this.aerialNpc.rootComponent.add(aerialWeapon);
+
+    // Create behavior tree component with programmatically created aerial tree
+    const behaviorTreeComponent = new ENGINE.BehaviorTreeComponent({
+      rootNode: this.createAerialBehaviorTree(),
+      updateInterval: 0.1,
+      autoStart: true
+    });
+
+    this.aerialNpc.rootComponent.add(behaviorTreeComponent);
+    this.world.addActors(this.aerialNpc);
+
+    // Create health bar for this NPC
+    const healthBar = this.createEnemyHealthBar(this.aerialNpc);
+    this.enemyHealthBars.set(this.aerialNpc, healthBar);
+
+    // Set up blackboard values for aerial NPC
+    const blackboard = behaviorTreeComponent.getBlackboard();
+    if (this.playerPawn) {
+      // Set player reference (required by all targeting actions/conditions)
+      blackboard.setValue('PlayerActor', this.playerPawn);
+    }
+
+    // Create debug visualization for aerial NPC
+    this.createNPCDebugVisualization(this.aerialNpc, 'Aerial', 0x8B0000); // Dark red color to indicate aerial threat
+  }
+
+  private async createAerialPatrolNPC(): Promise<void> {
+    // Create aerial patrol enemy using basic Pawn with aerial movement
+    this.aerialPatrolNpc = new ENGINE.Pawn({
+      position: new THREE.Vector3(15, 20, 0), // Start high in the air on the side
+      movementComponent: new ENGINE.AerialMovementComponent({
+        maxSpeed: 12,
+        accelerationLambda: 2,
+        decelerationLambda: 1.5,
+        hoverHeight: 25,
+        hoverVariation: 3,
+        rotationSpeed: 1.5,
+        maxTiltAngle: 10
+      }),
+      camera: null, // NPCs don't need cameras
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: ENGINE.GameBuilder.createDefaultPawnCapsuleGeometry(),
+        material: new THREE.MeshStandardMaterial({ color: 0x00ff00, visible: false, transparent: true, opacity: 0.5 }), // Invisible collision capsule
+        physicsOptions: {
+          enabled: true,
+          motionType: ENGINE.PhysicsMotionType.KinematicVelocityBased,
+          collisionProfile: ENGINE.DefaultCollisionProfile.Character,
+        }
+      })
+    });
+
+    // Create visual representation - a different style of drone
+    const bodyGeometry = new THREE.BoxGeometry(2, 1, 3); // More rectangular body
+    const bodyMaterial = new THREE.MeshStandardMaterial({
+      color: 0x4169E1, // Royal blue
+      metalness: 0.6,
+      roughness: 0.4
+    });
+    const body = new ENGINE.MeshComponent({
+      geometry: bodyGeometry,
+      material: bodyMaterial,
+      position: new THREE.Vector3(0, 0, 0)
+    });
+    body.castShadow = true;
+
+    // Add glowing navigation lights
+    const leftLightGeometry = new THREE.SphereGeometry(0.2, 8, 6);
+    const leftLightMaterial = new THREE.MeshStandardMaterial({
+      color: 0x00FF00,
+      emissive: 0x00FF00,
+      emissiveIntensity: 0.8
+    });
+    const leftLight = new ENGINE.MeshComponent({
+      geometry: leftLightGeometry,
+      material: leftLightMaterial,
+      position: new THREE.Vector3(-1.2, 0, -0.5)
+    });
+
+    const rightLightGeometry = new THREE.SphereGeometry(0.2, 8, 6);
+    const rightLightMaterial = new THREE.MeshStandardMaterial({
+      color: 0xFF0000,
+      emissive: 0xFF0000,
+      emissiveIntensity: 0.8
+    });
+    const rightLight = new ENGINE.MeshComponent({
+      geometry: rightLightGeometry,
+      material: rightLightMaterial,
+      position: new THREE.Vector3(1.2, 0, -0.5)
+    });
+
+    // Add simple propellers
+    const propGeometry = new THREE.CylinderGeometry(0.05, 0.05, 1.5, 6);
+    const propMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
+
+    const prop1 = new ENGINE.MeshComponent({
+      geometry: propGeometry,
+      material: propMaterial,
+      position: new THREE.Vector3(-1, 0.8, 0.5),
+      rotation: new THREE.Euler(0, 0, Math.PI/2)
+    });
+
+    const prop2 = new ENGINE.MeshComponent({
+      geometry: propGeometry,
+      material: propMaterial,
+      position: new THREE.Vector3(1, 0.8, 0.5),
+      rotation: new THREE.Euler(0, 0, Math.PI/2)
+    });
+
+    // Add components to the aerial patrol NPC
+    this.aerialPatrolNpc.rootComponent.add(body);
+    body.add(leftLight);
+    body.add(rightLight);
+    body.add(prop1);
+    body.add(prop2);
+
+    // Add character stats (optional - this one doesn't need combat)
+    const aerialPatrolStats = new ENGINE.CharacterStatsComponent({
+      maxHealth: 40,
+      attackRange: 0, // No weapons for patrol drone
+      attackDamage: 0,
+      attackCooldown: 0
+    });
+    this.aerialPatrolNpc.rootComponent.add(aerialPatrolStats);
+
+    // Create behavior tree component with programmatically created aerial patrol tree
+    const behaviorTreeComponent = new ENGINE.BehaviorTreeComponent({
+      rootNode: this.createAerialPatrolBehaviorTree(),
+      updateInterval: 0.2,
+      autoStart: true
+    });
+
+    this.aerialPatrolNpc.rootComponent.add(behaviorTreeComponent);
+    this.world.addActors(this.aerialPatrolNpc);
+
+    // Create health bar for this NPC
+    const healthBar = this.createEnemyHealthBar(this.aerialPatrolNpc);
+    this.enemyHealthBars.set(this.aerialPatrolNpc, healthBar);
+
+    // Set up blackboard values for aerial patrol NPC
+    const blackboard = behaviorTreeComponent.getBlackboard();
+    // Note: We don't set PlayerActor for this patrol drone as it should ignore the player
+
+    // Set aerial patrol waypoints - create a circular patrol pattern in the sky (adjusted for scene)
+    const aerialWaypoints = [
+      new THREE.Vector3(15, 20, 0),   // Start position
+      new THREE.Vector3(15, 20, 15),  // Forward
+      new THREE.Vector3(0, 20, 15),   // Left
+      new THREE.Vector3(-15, 20, 15), // Back-left
+      new THREE.Vector3(-15, 20, 0),  // Back
+      new THREE.Vector3(-15, 20, -15), // Back-right
+      new THREE.Vector3(0, 20, -15),  // Right
+      new THREE.Vector3(15, 20, -15)  // Forward-right
+    ];
+
+    blackboard.setValue('AerialPatrolWaypoints', aerialWaypoints);
+    blackboard.setValue('CurrentAerialWaypointIndex', 0);
+
+    // Create debug visualization for aerial patrol NPC
+    this.createNPCDebugVisualization(this.aerialPatrolNpc, 'Patrol', 0x4169E1); // Royal blue color to indicate patrol behavior
+    this.createAerialWaypointVisualization(aerialWaypoints);
+  }
+
+  // Debug visualization methods
+  private createNPCDebugVisualization(npc: ENGINE.Pawn, name: string, color: number): void {
+    // Create a colored ring above the NPC to indicate its role
+    const geometry = new THREE.RingGeometry(0.8, 1.2, 16);
+    const material = new THREE.MeshBasicMaterial({
+      color,
+      transparent: true,
+      opacity: 0.8,
+      side: THREE.DoubleSide
+    });
+    const ring = new THREE.Mesh(geometry, material);
+    ring.position.set(0, 4, 0);
+    ring.rotation.x = -Math.PI / 2; // Make it horizontal
+
+    // Store reference to the ring for color updates
+    ring.userData = { isDebugRing: true };
+
+    // Add to NPC's root component
+    const rootComponent = npc.rootComponent;
+    if (rootComponent) {
+      rootComponent.add(ring);
+    }
+  }
+
+  private updateNPCDebugColor(npc: ENGINE.Pawn, color: number): void {
+    const rootComponent = npc.rootComponent;
+    if (!rootComponent) return;
+
+    // Find the debug ring and update its color
+    rootComponent.traverse((child) => {
+      if (child instanceof THREE.Mesh && child.userData?.isDebugRing) {
+        const material = child.material as THREE.MeshBasicMaterial;
+        material.color.setHex(color);
+      }
+    });
+  }
+
+  private createWaypointVisualization(): void {
+    // Create waypoint markers for patrol path (matching updated waypoints)
+    const patrolWaypoints = [
+      new THREE.Vector3(-8, 4, 2),    // Near Aviator SKM actor
+      new THREE.Vector3(-6, 4, -2),   // Between Aviator and center
+      new THREE.Vector3(2, 1, -3),    // Near Adventurer SKM actor
+      new THREE.Vector3(0, 1, -6),    // South of Adventurer SKM actor
+      new THREE.Vector3(8, 4, -8),    // Near Shaman SKM actor
+      new THREE.Vector3(12, 4, -7),   // East of Shaman SKM actor
+      new THREE.Vector3(6, 2, -2),    // Central area
+      new THREE.Vector3(-4, 3, 1),    // Back toward Aviator area
+    ];
+
+    patrolWaypoints.forEach((waypoint, index) => {
+      const geometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 8);
+      const material = new THREE.MeshBasicMaterial({
+        color: 0x00ffff,
+        transparent: true,
+        opacity: 0.6
+      });
+      const marker = new THREE.Mesh(geometry, material);
+      marker.position.copy(waypoint);
+      marker.position.y += 1; // Raise above ground
+
+      this.waypointMarkers.push(marker);
+      this.debugContainer.add(marker);
+
+      // Add waypoint number text
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d')!;
+      canvas.width = 64;
+      canvas.height = 64;
+      context.fillStyle = 'white';
+      context.font = '32px Arial';
+      context.textAlign = 'center';
+      context.fillText((index + 1).toString(), 32, 40);
+
+      const texture = new THREE.CanvasTexture(canvas);
+      const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
+      const sprite = new THREE.Sprite(spriteMaterial);
+      sprite.position.copy(waypoint);
+      sprite.position.y += 2.5;
+      sprite.scale.set(1, 1, 1);
+
+      this.debugContainer.add(sprite);
+    });
+  }
+
+  // Behavior Tree Creation Methods
+  private createPatrolBehaviorTree(): ENGINE.BehaviorNode {
+    // Create the root selector node
+    const rootSelector = new ENGINE.SelectorNode({
+      name: 'Patrol Behavior'
+    });
+
+    // 1. Melee Attack Player sequence - when very close
+    const meleeSequence = new ENGINE.SequenceNode({
+      name: 'Melee Attack Player',
+      conditions: [
+        new ENGINE.IsPlayerNearCondition({ range: 5.0 }), // Close range for melee
+        new ENGINE.TargetInConeCondition({
+          targetActorKey: 'PlayerActor',
+          coneAngle: 90.0, // Wider cone for melee
+          maxDistance: 5.0
+        })
+      ]
+    });
+    meleeSequence.addChildren([
+      new ENGINE.LookAtTargetAction({ targetActorKey: 'PlayerActor', speed: 5.0 }),
+      new ENGINE.MeleeAttackAction({
+        targetActorKey: 'PlayerActor',
+        attackRange: 4.0,
+        damage: 25,
+        attackCooldown: 1.2,
+        attackDuration: 0.8
+      })
+    ]);
+
+    // 2. Chase Player sequence - get close for melee
+    const chaseSequence = new ENGINE.SequenceNode({
+      name: 'Chase Player',
+      conditions: [
+        new ENGINE.IsPlayerNearCondition({ range: 20.0 }) // Larger detection range
+      ]
+    });
+    chaseSequence.addChildren([
+      new ENGINE.FollowActorAction({
+        targetActorKey: 'PlayerActor',
+        stopDistance: 2.0, // Get very close for melee
+        followDistance: 3.0,
+        continueAfterReached: false // Allow sequence to complete
+      })
+    ]);
+
+    // 4. Normal Patrol sequence
+    const patrolSequence = new ENGINE.SequenceNode({
+      name: 'Normal Patrol'
+    });
+    patrolSequence.addChildren([
+      new ENGINE.SetNextWaypointAction({ waypointsKey: 'patrolWaypoints' }),
+      new ENGINE.MoveToPositionAction({
+        targetPositionKey: 'CurrentWaypoint',
+        acceptanceRadius: 2.0,
+        conditions: [
+          new ENGINE.IsPlayerNearCondition({ range: 30.0, invert: true }) // Don't patrol when player is near
+        ]
+      }),
+      new ENGINE.WaitAction({ duration: 1.0, randomDuration: true })
+    ]);
+
+    // Add all sequences to root selector
+    rootSelector.addChildren([
+      meleeSequence,
+      chaseSequence,
+      patrolSequence
+    ]);
+
+    return rootSelector;
+  }
+
+  private createCombatBehaviorTree(): ENGINE.BehaviorNode {
+    // Create the root selector node
+    const rootSelector = new ENGINE.SelectorNode({
+      name: 'Combat Behavior'
+    });
+
+    // 1. Low Health Flee sequence - only flee when health is critically low
+    const fleeSequence = new ENGINE.SequenceNode({
+      name: 'Low Health Flee',
+      conditions: [
+        new ENGINE.HpAbovePercentCondition({
+          percentage: 25.0, // Very low health threshold
+          checkOwner: true,
+          invert: true
+        }),
+        new ENGINE.IsPlayerNearCondition({ range: 50.0 }) // Only flee if player is nearby
+      ]
+    });
+    fleeSequence.addChild(new ENGINE.FleeFromTargetAction({
+      targetActorKey: 'PlayerActor',
+      fleeDistance: 30.0,
+      maxFleeDistance: 50.0,
+      fleeSpeedMultiplier: 1.5
+    }));
+
+    // 2. Ranged Attack sequence - attack when player is in sight and in range
+    const attackSequence = new ENGINE.SequenceNode({
+      name: 'Ranged Attack',
+      conditions: [
+        new ENGINE.HpAbovePercentCondition({
+          percentage: 25.0, // Only attack if not critically injured
+          checkOwner: true
+        }),
+        new ENGINE.IsPlayerNearCondition({ range: 30.0 }), // Close enough to attack
+        new ENGINE.CanSeeTargetCondition({
+          targetActorKey: 'PlayerActor',
+          maxDistance: 30.0,
+          eyeHeightOffset: 1.7,
+          targetHeightOffset: 1.7
+        })
+      ]
+    });
+
+    attackSequence.addChildren([
+      new ENGINE.LookAtTargetAction({
+        targetActorKey: 'PlayerActor',
+        speed: 3.0,
+        angleThreshold: Math.PI / 12, // Tighter aim for better accuracy
+        rotationSpeed: 3.0
+      }),
+      new ENGINE.ShootAction({
+        targetActorKey: 'PlayerActor',
+        shootRange: 30.0,
+        aimDuration: 0.3
+      }),
+      new ENGINE.WaitAction({
+        duration: 0.2 // Brief cooldown after shooting
+      })
+    ]);
+
+    // 3. Approach Player sequence - move to get into shooting range
+    const approachSequence = new ENGINE.SequenceNode({
+      name: 'Approach Player',
+      conditions: [
+        new ENGINE.HpAbovePercentCondition({
+          percentage: 25.0, // Only approach if not critically injured
+          checkOwner: true
+        }),
+        new ENGINE.IsPlayerNearCondition({ range: 60.0 }) // Detect player from farther away
+      ]
+    });
+    approachSequence.addChildren([
+      new ENGINE.CalculateTacticalPositionAction({
+        targetActorKey: 'PlayerActor',
+        outputPositionKey: 'CombatPosition',
+        distance: 25.0, // Shooting range
+        useNavigation: true
+      }),
+      new ENGINE.MoveToPositionAction({
+        targetPositionKey: 'CombatPosition',
+        acceptanceRadius: 3.0,
+        useNavigation: true
+      })
+    ]);
+
+    // 4. Idle/Patrol behavior when player is not detected
+    const idleSequence = new ENGINE.SequenceNode({
+      name: 'Idle Behavior'
+    });
+    idleSequence.addChild(new ENGINE.WaitAction({
+      duration: 2.0,
+      randomDuration: true
+    }));
+
+    // Add all sequences to root selector (order matters - higher priority first)
+    rootSelector.addChildren([
+      fleeSequence,     // Highest priority - flee when critically low health
+      attackSequence,   // Attack when can see player and in range
+      approachSequence, // Move to get into shooting range
+      idleSequence      // Default behavior
+    ]);
+
+    return rootSelector;
+  }
+
+  private createAerialBehaviorTree(): ENGINE.BehaviorNode {
+    // Create the root selector node
+    const rootSelector = new ENGINE.SelectorNode({
+      name: 'Aerial Hunter Behavior'
+    });
+
+    // 1. Attack Player sequence
+    const attackSequence = new ENGINE.SequenceNode({
+      name: 'Attack Player',
+      conditions: [
+        new ENGINE.IsPlayerNearCondition({ range: 80.0 }),
+        new ENGINE.CanSeeTargetCondition({
+          targetActorKey: 'PlayerActor',
+          maxDistance: 80.0,
+          eyeHeightOffset: 0.0,
+          targetHeightOffset: 1.7
+        })
+      ]
+    });
+    attackSequence.addChildren([
+      new ENGINE.AerialTrackTargetAction({
+        targetActorKey: 'PlayerActor',
+        lastKnownPositionKey: 'LastKnownPlayerPosition',
+        updateInterval: 0.3
+      }),
+      new ENGINE.AerialMoveToTargetAction({
+        targetActorKey: 'PlayerActor',
+        acceptanceRadius: 25.0,
+        hoverAboveTarget: true,
+        hoverHeightOffset: 15.0
+      }),
+      new ENGINE.ShootAction({
+        targetActorKey: 'PlayerActor',
+        shootRange: 70.0,
+        aimDuration: 0.6
+      })
+    ]);
+
+    // 2. Search for Player sequence
+    const searchSequence = new ENGINE.SequenceNode({
+      name: 'Search for Player',
+      conditions: [
+        new ENGINE.IsPlayerNearCondition({ range: 80.0 }),
+        new ENGINE.CanSeeTargetCondition({
+          targetActorKey: 'PlayerActor',
+          maxDistance: 80.0,
+          eyeHeightOffset: 0.0,
+          targetHeightOffset: 1.7,
+          invert: true
+        }),
+        new ENGINE.HasLastKnownPositionCondition({
+          lastKnownPositionKey: 'LastKnownPlayerPosition',
+          maxAge: 15.0
+        })
+      ]
+    });
+    searchSequence.addChild(new ENGINE.AerialSearchAction({
+      playerActorKey: 'PlayerActor',
+      lastKnownPositionKey: 'LastKnownPlayerPosition',
+      searchRadius: 20.0,
+      searchHeight: 20.0,
+      searchDuration: 8.0
+    }));
+
+    // 3. Random Patrol sequence
+    const wanderSequence = new ENGINE.SequenceNode({
+      name: 'Random Patrol'
+    });
+    wanderSequence.addChild(new ENGINE.AerialWanderAction({
+      wanderRadius: 35.0,      // Larger wander area
+      wanderHeight: 20.0,
+      heightVariation: 8.0,    // More height variation
+      waitTime: 1.0,           // Shorter wait time for more active movement
+      speedMultiplier: 0.8     // Faster movement
+    }));
+
+    // Add all sequences to root selector
+    rootSelector.addChildren([
+      attackSequence,
+      searchSequence,
+      wanderSequence
+    ]);
+
+    return rootSelector;
+  }
+
+  private createAerialPatrolBehaviorTree(): ENGINE.BehaviorNode {
+    // Create a simple patrol behavior that cycles between waypoints
+    const patrolSequence = new ENGINE.SequenceNode({
+      name: 'Aerial Patrol'
+    });
+
+    patrolSequence.addChildren([
+      new ENGINE.SetNextWaypointAction({
+        waypointsKey: 'AerialPatrolWaypoints',
+        indexKey: 'CurrentAerialWaypointIndex',
+        currentWaypointKey: 'CurrentAerialWaypoint',
+        loop: true
+      }),
+      new ENGINE.AerialMoveToTargetAction({
+        targetActorKey: undefined, // Don't follow any actor
+        targetPositionKey: 'CurrentAerialWaypoint',
+        acceptanceRadius: 3.0,
+        hoverAboveTarget: false // Move directly to waypoint positions
+      }),
+      new ENGINE.WaitAction({
+        duration: 2.0,
+        randomDuration: true
+      }) // Wait at each waypoint
+    ]);
+
+    return patrolSequence;
+  }
+
+  private toggleNPCPathDebugVisualization(): void {
+    // Toggle debug visualization for all NPCs with movement components
+    const npcs = [this.patrolNpc, this.combatNpc];
+
+    npcs.forEach(npc => {
+      if (npc) {
+        const movementComponent = npc.getComponent(ENGINE.NpcMovementComponent);
+        if (movementComponent) {
+          // Get current state and toggle it
+          const currentState = movementComponent.isDebugVisualizationEnabled();
+          movementComponent.setDebugVisualizationEnabled(!currentState);
+        }
+      }
+    });
+
+    console.log('Toggled NPC path debug visualization');
+  }
+
+  private createAerialWaypointVisualization(waypoints: THREE.Vector3[]): void {
+    // Create waypoint markers for aerial patrol path
+    waypoints.forEach((waypoint, index) => {
+      // Create a floating ring marker for aerial waypoints
+      const geometry = new THREE.RingGeometry(1.0, 1.5, 16);
+      const material = new THREE.MeshBasicMaterial({
+        color: 0x4169E1, // Royal blue to match the patrol drone
+        transparent: true,
+        opacity: 0.7,
+        side: THREE.DoubleSide
+      });
+      const marker = new THREE.Mesh(geometry, material);
+      marker.position.copy(waypoint);
+      marker.rotation.x = -Math.PI / 2; // Make it horizontal
+
+      this.debugContainer.add(marker);
+
+      // Add waypoint number text
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d')!;
+      canvas.width = 64;
+      canvas.height = 64;
+      context.fillStyle = 'white';
+      context.font = '24px Arial';
+      context.textAlign = 'center';
+      context.fillText(`A${index + 1}`, 32, 40); // "A" for Aerial
+
+      const texture = new THREE.CanvasTexture(canvas);
+      const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
+      const sprite = new THREE.Sprite(spriteMaterial);
+      sprite.position.copy(waypoint);
+      sprite.position.y += 2;
+      sprite.scale.set(2, 2, 2);
+
+      this.debugContainer.add(sprite);
+
+      // Add a connecting line to the next waypoint (for visualization)
+      if (index < waypoints.length - 1) {
+        const nextWaypoint = waypoints[index + 1];
+        const lineGeometry = new THREE.BufferGeometry().setFromPoints([waypoint, nextWaypoint]);
+        const lineMaterial = new THREE.LineBasicMaterial({
+          color: 0x4169E1,
+          transparent: true,
+          opacity: 0.3
+        });
+        const line = new THREE.Line(lineGeometry, lineMaterial);
+        this.debugContainer.add(line);
+      } else {
+        // Connect last waypoint back to first for loop visualization
+        const firstWaypoint = waypoints[0];
+        const lineGeometry = new THREE.BufferGeometry().setFromPoints([waypoint, firstWaypoint]);
+        const lineMaterial = new THREE.LineBasicMaterial({
+          color: 0x4169E1,
+          transparent: true,
+          opacity: 0.3
+        });
+        const line = new THREE.Line(lineGeometry, lineMaterial);
+        this.debugContainer.add(line);
+      }
+    });
+  }
+}