mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
Refactor LOS documentation and enhance debugging features
- Deleted outdated quick reference file and replaced it with a comprehensive LOS visualization guide. - Updated console commands for enabling/disabling LOS and added detailed explanations for visual elements. - Improved console output for distance and angle checks during NPC detection. - Introduced new test functions for graphics rendering and system status checks. - Enhanced logging during LOS cone drawing to provide detailed graphics object properties and rendering status. - Created new documentation files for quick commands and debugging improvements. - Added a structured troubleshooting flow for common issues related to LOS detection and rendering.
This commit is contained in:
Z. Cliffe Schreuders
385
planning_notes/npc/los/LOS_DEBUGGING_COMPLETE.md
Normal file
385
planning_notes/npc/los/LOS_DEBUGGING_COMPLETE.md
Normal file
@@ -0,0 +1,385 @@
|
||||
# LOS Debugging Enhancements - Implementation Summary
|
||||
|
||||
## ✅ What Was Added
|
||||
|
||||
### 1. Distance and Angle Logging in Console
|
||||
|
||||
**File Modified:** `js/systems/npc-manager.js`
|
||||
|
||||
When NPCs check for player detection, console now shows:
|
||||
|
||||
```
|
||||
👁️ NPC "patrol_with_face" CANNOT see player
|
||||
Position: NPC(1200, 850) → Player(640, 360)
|
||||
Distance: 789.4px (range: 250px) ❌ TOO FAR
|
||||
Angle to Player: 235.5° (FOV: 120°)
|
||||
```
|
||||
|
||||
**Details provided:**
|
||||
- NPC and player exact positions
|
||||
- Actual distance between them
|
||||
- Configured detection range
|
||||
- Player angle relative to NPC
|
||||
- Visual indicators (✅/❌) for success/failure
|
||||
|
||||
---
|
||||
|
||||
### 2. New Console Test Functions
|
||||
|
||||
**File Modified:** `js/main.js`
|
||||
|
||||
#### Graphics Rendering Test
|
||||
```javascript
|
||||
window.testGraphics()
|
||||
```
|
||||
|
||||
Creates a red square on screen for 5 seconds to test if graphics rendering works.
|
||||
|
||||
**Console output:**
|
||||
```
|
||||
🧪 Testing graphics rendering...
|
||||
✅ Created graphics object: {exists: true, hasScene: true, depth: 0, alpha: 1, visible: true}
|
||||
✅ Drew red square at (100, 100)
|
||||
If you see a RED SQUARE on screen, graphics rendering is working!
|
||||
```
|
||||
|
||||
**Purpose:** Isolate graphics issues from LOS system issues
|
||||
|
||||
---
|
||||
|
||||
#### System Status Viewer
|
||||
```javascript
|
||||
window.losStatus()
|
||||
```
|
||||
|
||||
Shows complete LOS system health and configuration.
|
||||
|
||||
**Console output:**
|
||||
```
|
||||
📡 LOS System Status:
|
||||
Enabled: true
|
||||
NPCs loaded: 2
|
||||
Graphics objects: 2
|
||||
NPC: "patrol_with_face"
|
||||
LOS enabled: true
|
||||
Position: (1200, 850)
|
||||
Facing: 0°
|
||||
NPC: "security_guard"
|
||||
LOS enabled: true
|
||||
Position: (1200, 800)
|
||||
Facing: 90°
|
||||
```
|
||||
|
||||
**Provides:** Instant system health check, NPC positions, configurations
|
||||
|
||||
---
|
||||
|
||||
### 3. Enhanced Graphics Creation Logging
|
||||
|
||||
**File Modified:** `js/systems/npc-los.js`
|
||||
|
||||
Now shows detailed information during cone creation:
|
||||
|
||||
```
|
||||
🟢 Drawing LOS cone for NPC at (1200, 850), range: 250, angle: 120°
|
||||
NPC facing: 0°
|
||||
📊 Graphics object created - checking properties: {graphicsExists: true, hasScene: true, sceneKey: "main", canAdd: true}
|
||||
⭕ Range circle drawn at (1200, 850) radius: 250
|
||||
✅ LOS cone rendered successfully: {positionX: "1200", positionY: "850", depth: -999, alpha: 1, visible: true, active: true, pointsCount: 20}
|
||||
```
|
||||
|
||||
**New information:**
|
||||
- Graphics object properties verification
|
||||
- Scene reference validation
|
||||
- Range circle rendering confirmation
|
||||
- Complete render status (depth, alpha, visibility, point count)
|
||||
|
||||
---
|
||||
|
||||
## 📚 New Documentation
|
||||
|
||||
Created 4 comprehensive debugging guides:
|
||||
|
||||
1. **`LOS_QUICK_COMMANDS.md`**
|
||||
- Quick reference for all commands
|
||||
- Expected outputs
|
||||
- One-page troubleshooting
|
||||
|
||||
2. **`LOS_DEBUGGING_IMPROVEMENTS.md`**
|
||||
- Detailed explanation of improvements
|
||||
- Before/after examples
|
||||
- Use case scenarios
|
||||
|
||||
3. **`docs/LOS_ENHANCED_DEBUG_GUIDE.md`**
|
||||
- Complete debugging workflow
|
||||
- Step-by-step troubleshooting
|
||||
- Performance monitoring tips
|
||||
|
||||
4. **`docs/LOS_VISUALIZATION_DEBUG.md`** (updated)
|
||||
- Enhanced with new commands
|
||||
- Added test procedures
|
||||
- Includes new console output examples
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Debugging Workflow
|
||||
|
||||
### Three-Step Quick Check
|
||||
|
||||
```javascript
|
||||
// 1. Test graphics rendering
|
||||
window.testGraphics()
|
||||
|
||||
// 2. Check system status
|
||||
window.losStatus()
|
||||
|
||||
// 3. Enable LOS visualization
|
||||
window.enableLOS()
|
||||
```
|
||||
|
||||
**Expected results:**
|
||||
1. Red square appears on screen
|
||||
2. Console shows 2 NPCs with positions
|
||||
3. Green cones appear on screen, detailed logs show
|
||||
|
||||
---
|
||||
|
||||
## 📊 Console Output Interpretation Guide
|
||||
|
||||
### Distance Check
|
||||
|
||||
```
|
||||
Distance: 789.4px (range: 250px) ❌ TOO FAR
|
||||
```
|
||||
|
||||
- **789.4px** = Actual distance between NPC and player
|
||||
- **250px** = Configured detection range
|
||||
- **❌ TOO FAR** = Player outside detection radius (789 > 250)
|
||||
|
||||
**Resolution:** Move player closer to NPC
|
||||
|
||||
---
|
||||
|
||||
### Angle Check
|
||||
|
||||
```
|
||||
Angle to Player: 235.5° (FOV: 120°)
|
||||
```
|
||||
|
||||
- **235.5°** = Direction to player (0°=East, 90°=South, 180°=West, 270°=North)
|
||||
- **120°** = Field of view (±60° around facing direction)
|
||||
|
||||
**To understand if in FOV:**
|
||||
```
|
||||
Facing: 0° (East)
|
||||
Angle to Player: 45° (Northeast)
|
||||
Is 45° within ±60° of 0°? YES → In FOV ✅
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ What Gets Tested
|
||||
|
||||
### `window.testGraphics()`
|
||||
|
||||
Tests:
|
||||
- Scene exists and is active
|
||||
- Graphics API available
|
||||
- Can create graphics objects
|
||||
- Can draw shapes
|
||||
- Rendering is working
|
||||
|
||||
**If this fails:** Graphics system is broken, LOS won't work either
|
||||
|
||||
---
|
||||
|
||||
### `window.losStatus()`
|
||||
|
||||
Shows:
|
||||
- Whether LOS visualization is enabled
|
||||
- How many NPCs are loaded
|
||||
- How many graphics objects exist
|
||||
- Each NPC's position and configuration
|
||||
|
||||
**Useful for:** Quick health check before testing
|
||||
|
||||
---
|
||||
|
||||
### `window.enableLOS()` (Enhanced)
|
||||
|
||||
Now shows:
|
||||
- Each step of the setup process
|
||||
- Graphics object creation details
|
||||
- Range circle drawing confirmation
|
||||
- Render property verification
|
||||
- NPC-by-NPC status
|
||||
|
||||
**Useful for:** Seeing exactly where visualization fails, if at all
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Improvements
|
||||
|
||||
| Aspect | Before | After |
|
||||
|--------|--------|-------|
|
||||
| Distance info | No | ✅ Exact distance logged |
|
||||
| Angle info | No | ✅ Angle to player logged |
|
||||
| Graphics test | No | ✅ `testGraphics()` function |
|
||||
| Status check | Partial | ✅ Complete `losStatus()` |
|
||||
| Creation logs | Basic | ✅ Detailed step-by-step |
|
||||
| Error messages | Generic | ✅ Specific and actionable |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Usage Examples
|
||||
|
||||
### Find Why NPC Doesn't Detect
|
||||
|
||||
```javascript
|
||||
// Move player next to NPC
|
||||
// Check console for:
|
||||
|
||||
👁️ NPC "patrol_with_face" CANNOT see player
|
||||
Position: NPC(1200, 850) → Player(1250, 875)
|
||||
Distance: 58.3px (range: 250px) ✅ in range
|
||||
Angle to Player: 15.2° (FOV: 120°)
|
||||
|
||||
// Interpretation:
|
||||
// - Distance OK (58px < 250px) ✅
|
||||
// - Angle OK (15° within ±60°) ✅
|
||||
// - Both checks pass!
|
||||
// - If still not detecting, check other factors
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Debug No Green Cones
|
||||
|
||||
```javascript
|
||||
// 1. First test graphics
|
||||
window.testGraphics()
|
||||
|
||||
// Expected: Red square appears on screen
|
||||
|
||||
// 2. If red square shows, check LOS status
|
||||
window.losStatus()
|
||||
|
||||
// Expected:
|
||||
// Graphics objects: 2 (or more)
|
||||
// NPCs loaded: 2 (or more)
|
||||
|
||||
// 3. If counts are 0, check enable logs
|
||||
window.enableLOS()
|
||||
|
||||
// Expected in console:
|
||||
// 🟢 Drawing LOS cone...
|
||||
// 📊 Graphics object created...
|
||||
// ✅ LOS cone rendered successfully...
|
||||
|
||||
// If you see these but no cones on screen:
|
||||
// → Graphics rendering issue
|
||||
// → Check graphics depth: -999 (should be visible)
|
||||
// → Check alpha: 1 (should be opaque)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 Debugging Checklist
|
||||
|
||||
When LOS isn't working:
|
||||
|
||||
- [ ] Run `window.testGraphics()` - red square appears?
|
||||
- [ ] Run `window.losStatus()` - NPCs loaded > 0?
|
||||
- [ ] Run `window.enableLOS()` - any 🔴 errors?
|
||||
- [ ] Check console for graphics creation logs
|
||||
- [ ] Verify green cones visible on screen
|
||||
- [ ] Move player and check distance/angle logs
|
||||
- [ ] Verify angle within ±FOV/2 of facing direction
|
||||
- [ ] Check if person-chat triggers when in range
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Console Commands Reference
|
||||
|
||||
```javascript
|
||||
// Enable LOS visualization with detailed logging
|
||||
window.enableLOS()
|
||||
|
||||
// Disable visualization
|
||||
window.disableLOS()
|
||||
|
||||
// Test if graphics rendering works
|
||||
window.testGraphics()
|
||||
|
||||
// Check LOS system status
|
||||
window.losStatus()
|
||||
|
||||
// Watch NPC position in real-time (every 100ms)
|
||||
setInterval(() => {
|
||||
const npc = Array.from(window.npcManager.npcs.values())[0];
|
||||
if (npc?.sprite) {
|
||||
const pos = npc.sprite.getCenter();
|
||||
console.log(`NPC at (${pos.x.toFixed(0)}, ${pos.y.toFixed(0)})`);
|
||||
}
|
||||
}, 100);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 Files Modified
|
||||
|
||||
1. **`js/systems/npc-manager.js`**
|
||||
- Enhanced `shouldInterruptLockpickingWithPlayerPosition()` method
|
||||
- Added distance, angle, and position logging
|
||||
- Now shows detailed debug info per NPC check
|
||||
|
||||
2. **`js/systems/npc-los.js`**
|
||||
- Enhanced `drawLOSCone()` function
|
||||
- Added graphics object property logging
|
||||
- Added rendering status details
|
||||
- Improved error messages
|
||||
|
||||
3. **`js/main.js`**
|
||||
- Added `window.testGraphics()` function
|
||||
- Added `window.losStatus()` function
|
||||
- Enhanced `window.enableLOS()` with better scene discovery
|
||||
- Improved error messages for missing scene
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Success Metrics
|
||||
|
||||
✅ **Can see red square** = Graphics rendering works
|
||||
✅ **`losStatus()` shows NPCs** = NPCs loaded correctly
|
||||
✅ **`enableLOS()` shows no 🔴 errors** = Visualization created
|
||||
✅ **Green cones visible** = Rendering to screen works
|
||||
✅ **Console shows distance/angle** = Detection working
|
||||
✅ **✅ in range indicators** = Player in detection range
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Next Steps
|
||||
|
||||
1. **Load scenario** - `npc-patrol-lockpick.json`
|
||||
2. **Open console** - F12 → Console tab
|
||||
3. **Run tests**:
|
||||
```javascript
|
||||
window.testGraphics() // Red square should appear
|
||||
window.losStatus() // Should show 2 NPCs
|
||||
window.enableLOS() // Green cones should appear
|
||||
```
|
||||
4. **Check console** for detailed output and debug info
|
||||
5. **Move player** near NPC and watch distance/angle logs
|
||||
6. **Verify** person-chat triggers when in LOS range
|
||||
|
||||
---
|
||||
|
||||
## 💡 Tips
|
||||
|
||||
- All commands output to browser console (F12)
|
||||
- Look for icons (✅/❌/🔴) to identify issues
|
||||
- Distance/angle appear when NPC checks for player
|
||||
- Graphics test shows rendering capability
|
||||
- Status command is safe to run anytime
|
||||
|
||||
The system is now fully debuggable! 🎉
|
||||
364
planning_notes/npc/los/LOS_DEBUGGING_IMPROVEMENTS.md
Normal file
364
planning_notes/npc/los/LOS_DEBUGGING_IMPROVEMENTS.md
Normal file
@@ -0,0 +1,364 @@
|
||||
# Enhanced LOS Debugging - What's New
|
||||
|
||||
## Summary of Improvements
|
||||
|
||||
### 1. Enhanced Distance/Angle Logging ✅
|
||||
|
||||
**Before:**
|
||||
```
|
||||
👁️ NPC "patrol_with_face" cannot see player - out of LOS range/angle
|
||||
```
|
||||
|
||||
**After:**
|
||||
```
|
||||
👁️ NPC "patrol_with_face" CANNOT see player
|
||||
Position: NPC(1200, 850) → Player(640, 360)
|
||||
Distance: 789.4px (range: 250px) ❌ TOO FAR
|
||||
Angle to Player: 235.5° (FOV: 120°)
|
||||
```
|
||||
|
||||
**Information provided:**
|
||||
- Exact NPC and player positions
|
||||
- Actual distance vs configured range (with status indicator)
|
||||
- Angle to player in degrees
|
||||
- Field of view setting
|
||||
|
||||
---
|
||||
|
||||
### 2. New Console Test Commands ✅
|
||||
|
||||
#### `window.testGraphics()`
|
||||
|
||||
Tests if Phaser graphics rendering works by drawing a red square:
|
||||
|
||||
```javascript
|
||||
window.testGraphics()
|
||||
```
|
||||
|
||||
**Output:**
|
||||
```
|
||||
🧪 Testing graphics rendering...
|
||||
📊 Scene: main Active: true
|
||||
✅ Created graphics object: {exists: true, hasScene: true, depth: 0, alpha: 1, visible: true}
|
||||
✅ Drew red square at (100, 100)
|
||||
If you see a RED SQUARE on screen, graphics rendering is working!
|
||||
If NOT, check browser console for errors
|
||||
```
|
||||
|
||||
**What it does:**
|
||||
- Creates graphics object
|
||||
- Draws red square at (100, 100)
|
||||
- Shows for 5 seconds then cleans up
|
||||
- Logs detailed properties
|
||||
|
||||
---
|
||||
|
||||
#### `window.losStatus()`
|
||||
|
||||
Shows complete LOS system status:
|
||||
|
||||
```javascript
|
||||
window.losStatus()
|
||||
```
|
||||
|
||||
**Output:**
|
||||
```
|
||||
📡 LOS System Status:
|
||||
Enabled: true
|
||||
NPCs loaded: 2
|
||||
Graphics objects: 0
|
||||
NPC: "patrol_with_face"
|
||||
LOS enabled: true
|
||||
Position: (1200, 850)
|
||||
Facing: 0°
|
||||
NPC: "security_guard"
|
||||
LOS enabled: true
|
||||
Position: (1200, 800)
|
||||
Facing: 90°
|
||||
```
|
||||
|
||||
**Information shown:**
|
||||
- Visualization enabled status
|
||||
- Number of NPCs loaded
|
||||
- Number of graphics objects rendered
|
||||
- Per-NPC: Position, LOS config, facing direction
|
||||
|
||||
---
|
||||
|
||||
### 3. Enhanced Cone Drawing Logs ✅
|
||||
|
||||
**Before:**
|
||||
```
|
||||
🟢 Drawing LOS cone for NPC at (1200, 850), range: 250, angle: 120°
|
||||
NPC facing: 0°
|
||||
✅ LOS cone drawn at (1200, 850) with depth: -999
|
||||
```
|
||||
|
||||
**After:**
|
||||
```
|
||||
🟢 Drawing LOS cone for NPC at (1200, 850), range: 250, angle: 120°
|
||||
NPC facing: 0°
|
||||
📊 Graphics object created - checking properties: {graphicsExists: true, hasScene: true, sceneKey: "main", canAdd: true}
|
||||
⭕ Range circle drawn at (1200, 850) radius: 250
|
||||
✅ LOS cone rendered successfully: {positionX: "1200", positionY: "850", depth: -999, alpha: 1, visible: true, active: true, pointsCount: 20}
|
||||
```
|
||||
|
||||
**New information:**
|
||||
- Graphics object creation status
|
||||
- Scene verification
|
||||
- Range circle drawing confirmation
|
||||
- Detailed render properties (depth, alpha, visibility, point count)
|
||||
|
||||
---
|
||||
|
||||
## Files Modified
|
||||
|
||||
### `js/systems/npc-manager.js`
|
||||
- Enhanced `shouldInterruptLockpickingWithPersonChat()` method
|
||||
- Now logs: Distance, Player position, NPC position, Angle to player
|
||||
- Shows visual indicators (✅/❌) for in-range/out-of-range
|
||||
|
||||
### `js/systems/npc-los.js`
|
||||
- Added graphics object property logging
|
||||
- Added range circle drawing confirmation
|
||||
- Added detailed render status output
|
||||
- Shows point count and all render properties
|
||||
|
||||
### `js/main.js`
|
||||
- Added `window.testGraphics()` - Graphics rendering test
|
||||
- Added `window.losStatus()` - System status viewer
|
||||
- Added detailed scene discovery logging
|
||||
- Improved error messages
|
||||
|
||||
---
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Example 1: Test if Graphics Work
|
||||
|
||||
```javascript
|
||||
> window.testGraphics()
|
||||
🧪 Testing graphics rendering...
|
||||
✅ Drew red square at (100, 100)
|
||||
If you see a RED SQUARE on screen, graphics rendering is working!
|
||||
```
|
||||
|
||||
**Expected:** See red square on screen for 5 seconds
|
||||
|
||||
---
|
||||
|
||||
### Example 2: Check System Health
|
||||
|
||||
```javascript
|
||||
> window.losStatus()
|
||||
📡 LOS System Status:
|
||||
Enabled: false
|
||||
NPCs loaded: 2
|
||||
Graphics objects: 0
|
||||
NPC: "patrol_with_face"
|
||||
LOS enabled: true
|
||||
Position: (1200, 850)
|
||||
Facing: 0°
|
||||
```
|
||||
|
||||
**Now enable and check again:**
|
||||
|
||||
```javascript
|
||||
> window.enableLOS()
|
||||
> window.losStatus()
|
||||
📡 LOS System Status:
|
||||
Enabled: true
|
||||
NPCs loaded: 2
|
||||
Graphics objects: 2 ← Count increased!
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Example 3: Debug Distance Issue
|
||||
|
||||
**Scenario:** NPC not detecting player
|
||||
|
||||
1. Move player next to NPC
|
||||
2. Check console:
|
||||
|
||||
```
|
||||
👁️ NPC "patrol_with_face" CANNOT see player
|
||||
Position: NPC(1200, 850) → Player(1250, 875)
|
||||
Distance: 58.3px (range: 250px) ✅ in range
|
||||
Angle to Player: 15.2° (FOV: 120°) ← Check this value
|
||||
```
|
||||
|
||||
**Analysis:**
|
||||
- Distance OK (58px < 250px range)
|
||||
- Angle OK (15° < 60° half-FOV)
|
||||
- Should be detected! Check if LOS visualization shows green
|
||||
|
||||
---
|
||||
|
||||
## Console Icon Guide
|
||||
|
||||
| Icon | Meaning | Example |
|
||||
|------|---------|---------|
|
||||
| 🧪 | Test/Diagnostic | `Testing graphics rendering...` |
|
||||
| 📊 | Status/Details | `Graphics object created` |
|
||||
| ⭕ | Range indicator | `Range circle drawn` |
|
||||
| 🟢 | Creating/Drawing | `Drawing LOS cone` |
|
||||
| ✅ | Success | `LOS cone rendered successfully` |
|
||||
| ❌ | Failure/Out | `TOO FAR` / `out of range` |
|
||||
| 🔴 | Critical Error | `Cannot draw LOS cone` |
|
||||
| 👁️ | LOS Detection | `NPC cannot see player` |
|
||||
| 📡 | System Info | `LOS System Status` |
|
||||
|
||||
---
|
||||
|
||||
## Debugging Workflow
|
||||
|
||||
### Quick 3-Step Check
|
||||
|
||||
```javascript
|
||||
// Step 1: Test graphics
|
||||
window.testGraphics() // Should show red square
|
||||
|
||||
// Step 2: Check status
|
||||
window.losStatus() // Should show 2 NPCs
|
||||
|
||||
// Step 3: Enable LOS
|
||||
window.enableLOS() // Should show green cones
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Key Improvements
|
||||
|
||||
### Better Error Messages
|
||||
|
||||
**Old:**
|
||||
```
|
||||
👁️ NPC "patrol_with_face" cannot see player - out of LOS range/angle
|
||||
```
|
||||
|
||||
**New:**
|
||||
```
|
||||
👁️ NPC "patrol_with_face" CANNOT see player
|
||||
Position: NPC(1200, 850) → Player(640, 360)
|
||||
Distance: 789.4px (range: 250px) ❌ TOO FAR
|
||||
Angle to Player: 235.5° (FOV: 120°)
|
||||
```
|
||||
|
||||
### Isolated Graphics Testing
|
||||
|
||||
Can now test if graphics rendering works independent of LOS system:
|
||||
|
||||
```javascript
|
||||
window.testGraphics() // Draws simple red square
|
||||
```
|
||||
|
||||
This helps identify if:
|
||||
- Scene is working
|
||||
- Graphics API is available
|
||||
- Rendering is functioning
|
||||
|
||||
### Real-Time System Status
|
||||
|
||||
```javascript
|
||||
window.losStatus() // Shows everything about LOS system
|
||||
```
|
||||
|
||||
Quickly see:
|
||||
- How many NPCs loaded
|
||||
- Are visualizations being rendered
|
||||
- NPC positions and configurations
|
||||
|
||||
---
|
||||
|
||||
## Benefits
|
||||
|
||||
✅ **Faster Debugging** - See exact distance and angle values
|
||||
✅ **Better Diagnostics** - Test graphics independently
|
||||
✅ **Clear Status** - Know system health at a glance
|
||||
✅ **Detailed Logs** - Understand what's happening each step
|
||||
✅ **Visual Indicators** - Icons and colors guide interpretation
|
||||
|
||||
---
|
||||
|
||||
## Common Debugging Scenarios Solved
|
||||
|
||||
### Scenario 1: "No green cones visible"
|
||||
|
||||
```javascript
|
||||
// Before fix: Couldn't tell why
|
||||
// After fix:
|
||||
window.testGraphics() // Test graphics first
|
||||
window.losStatus() // Check graphics objects count
|
||||
window.enableLOS() // See detailed creation logs
|
||||
```
|
||||
|
||||
Now you can pinpoint exact issue!
|
||||
|
||||
### Scenario 2: "NPC doesn't detect player"
|
||||
|
||||
```javascript
|
||||
// Move player near NPC, then check:
|
||||
// 👁️ NPC "patrol_with_face" CANNOT see player
|
||||
// Distance: 157.5px (range: 250px) ✅ in range
|
||||
// Angle to Player: 45° (FOV: 120°)
|
||||
|
||||
// Now you know:
|
||||
// - Distance is OK
|
||||
// - Check angle (45° within 60°? YES!)
|
||||
// - Why isn't it detecting?
|
||||
```
|
||||
|
||||
Much clearer debugging!
|
||||
|
||||
---
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
### Test 1: Graphics Rendering
|
||||
|
||||
```javascript
|
||||
window.testGraphics()
|
||||
```
|
||||
|
||||
Expected: Red square appears for 5 seconds
|
||||
|
||||
### Test 2: System Status
|
||||
|
||||
```javascript
|
||||
window.losStatus()
|
||||
```
|
||||
|
||||
Expected: Shows 2 NPCs with positions
|
||||
|
||||
### Test 3: Enable LOS
|
||||
|
||||
```javascript
|
||||
window.enableLOS()
|
||||
```
|
||||
|
||||
Expected: Green cones appear on screen
|
||||
|
||||
### Test 4: Check Detection
|
||||
|
||||
Move player near NPC and watch console for:
|
||||
```
|
||||
Distance: XXpx (range: 250px)
|
||||
Angle to Player: XXX°
|
||||
```
|
||||
|
||||
Expected: Shows accurate values
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
With these enhancements, you can now:
|
||||
|
||||
1. ✅ **Test graphics independently** - Know if rendering works
|
||||
2. ✅ **See exact distance/angle** - Understand why NPC detects or doesn't
|
||||
3. ✅ **Check system health** - One command shows everything
|
||||
4. ✅ **Debug faster** - Detailed logs at every step
|
||||
5. ✅ **Understand issues** - Clear visual indicators and explanations
|
||||
|
||||
All output is in browser console - no special tools needed!
|
||||
233
planning_notes/npc/los/LOS_QUICK_COMMANDS.md
Normal file
233
planning_notes/npc/los/LOS_QUICK_COMMANDS.md
Normal file
@@ -0,0 +1,233 @@
|
||||
# LOS Debugging - Quick Command Reference
|
||||
|
||||
## The Three Essential Commands
|
||||
|
||||
### 1. Test Graphics Rendering
|
||||
```javascript
|
||||
window.testGraphics()
|
||||
```
|
||||
- Creates a red square on screen for 5 seconds
|
||||
- **If you see the red square**: Graphics rendering ✅
|
||||
- **If you don't**: Graphics rendering broken ❌
|
||||
|
||||
### 2. Check System Status
|
||||
```javascript
|
||||
window.losStatus()
|
||||
```
|
||||
Shows:
|
||||
- Number of NPCs loaded
|
||||
- Whether visualization is enabled
|
||||
- NPC positions
|
||||
- NPC facing directions
|
||||
- LOS configuration
|
||||
|
||||
### 3. Enable/Disable LOS
|
||||
```javascript
|
||||
window.enableLOS() // Show green cones
|
||||
window.disableLOS() // Hide cones
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## What the New Console Output Shows
|
||||
|
||||
### Distance and Angle Info
|
||||
|
||||
```
|
||||
👁️ NPC "patrol_with_face" CANNOT see player
|
||||
Position: NPC(1200, 850) → Player(640, 360)
|
||||
Distance: 789.4px (range: 250px) ❌ TOO FAR
|
||||
Angle to Player: 235.5° (FOV: 120°)
|
||||
```
|
||||
|
||||
| Field | Meaning |
|
||||
|-------|---------|
|
||||
| Distance | Pixels between NPC and player. Must be ≤ range. |
|
||||
| Range | Configured detection distance from scenario |
|
||||
| Angle to Player | Direction to player in degrees (0°=East, 90°=South) |
|
||||
| FOV | Field of view. Player must be within ±(FOV/2) degrees |
|
||||
|
||||
---
|
||||
|
||||
## Expected Results
|
||||
|
||||
### When Graphics Work ✅
|
||||
```
|
||||
🧪 Testing graphics rendering...
|
||||
✅ Drew red square at (100, 100)
|
||||
If you see a RED SQUARE on screen, graphics rendering is working!
|
||||
```
|
||||
**You should see a red square for 5 seconds**
|
||||
|
||||
### When LOS Works ✅
|
||||
```
|
||||
🟢 Drawing LOS cone for NPC at (1200, 850), range: 250, angle: 120°
|
||||
📊 Graphics object created: {graphicsExists: true...}
|
||||
⭕ Range circle drawn at (1200, 850) radius: 250
|
||||
✅ LOS cone rendered successfully: {depth: -999, alpha: 1, visible: true...}
|
||||
```
|
||||
**You should see green cones on screen**
|
||||
|
||||
### When NPC Detects Player ✅
|
||||
```
|
||||
Distance: 157.5px (range: 250px) ✅ in range
|
||||
Angle to Player: 45° (FOV: 120°) ✅ within range
|
||||
```
|
||||
**Player should be detected and person-chat should trigger**
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting Flow
|
||||
|
||||
```
|
||||
1. Run: window.testGraphics()
|
||||
└─ See red square? → YES → Go to step 2
|
||||
└─ See red square? → NO → Graphics broken! Stop here.
|
||||
|
||||
2. Run: window.losStatus()
|
||||
└─ NPCs loaded > 0? → YES → Go to step 3
|
||||
└─ NPCs loaded > 0? → NO → NPCs not loaded!
|
||||
|
||||
3. Run: window.enableLOS()
|
||||
└─ See green cones? → YES → LOS works! ✅
|
||||
└─ See green cones? → NO → Go to step 4
|
||||
|
||||
4. Check console output:
|
||||
└─ "🔴 Cannot draw LOS cone"? → Check error details
|
||||
└─ "✅ LOS cone rendered"? → Should see cones (rendering issue)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Key Metrics to Check
|
||||
|
||||
### System Status (`window.losStatus()`)
|
||||
|
||||
```
|
||||
NPCs loaded: 2 ← Should be > 0
|
||||
Graphics objects: 2 ← Should match NPCs count when enabled
|
||||
LOS enabled: true ← Should be true after enableLOS()
|
||||
```
|
||||
|
||||
### LOS Detection
|
||||
|
||||
```
|
||||
Distance: 157.5px (range: 250px) ✅ in range
|
||||
└─ Distance < Range = IN RANGE
|
||||
|
||||
Angle to Player: 45° (FOV: 120°) ✅ within range
|
||||
└─ Angle < FOV/2 = IN FOV
|
||||
```
|
||||
|
||||
Both must be ✅ for detection to work.
|
||||
|
||||
---
|
||||
|
||||
## Console Icon Guide
|
||||
|
||||
| Icon | Meaning |
|
||||
|------|---------|
|
||||
| 🧪 | Testing/Diagnostic |
|
||||
| 📊 | Status/Information |
|
||||
| ⭕ | Range circle drawn |
|
||||
| 🟢 | Drawing/Creating |
|
||||
| ✅ | Success |
|
||||
| ❌ | Failure/Out of range |
|
||||
| 🔴 | Error |
|
||||
| 👁️ | LOS detection check |
|
||||
| 📡 | System status |
|
||||
|
||||
---
|
||||
|
||||
## Common Scenarios
|
||||
|
||||
### "Can't see any green cones"
|
||||
|
||||
1. Run: `window.testGraphics()`
|
||||
2. If red square appears:
|
||||
- Cones exist but not visible (depth/alpha issue)
|
||||
- Run: `window.losStatus()` - check Graphics objects count
|
||||
- If count is 0: visualization never ran
|
||||
- If count > 0: graphics created but not rendering
|
||||
3. If red square doesn't appear:
|
||||
- Graphics rendering broken
|
||||
- Check browser console for JS errors
|
||||
|
||||
### "NPC says player out of range"
|
||||
|
||||
1. Run: `window.losStatus()` - check NPC position
|
||||
2. Move player next to NPC and check distance:
|
||||
- Should see distance value in console
|
||||
- If distance > range: move closer
|
||||
- If distance < range: check angle next
|
||||
3. Check angle:
|
||||
- Should show angle to player
|
||||
- If angle > FOV/2: move in front of NPC
|
||||
|
||||
---
|
||||
|
||||
## Quick Diagnostics
|
||||
|
||||
**Is graphics rendering working?**
|
||||
```javascript
|
||||
window.testGraphics() // Red square should appear
|
||||
```
|
||||
|
||||
**How many NPCs are loaded?**
|
||||
```javascript
|
||||
window.losStatus() // Check "NPCs loaded:" line
|
||||
```
|
||||
|
||||
**Why isn't the cone showing?**
|
||||
```javascript
|
||||
window.enableLOS() // Check console for 🔴 errors
|
||||
window.losStatus() // Check "Graphics objects:" count
|
||||
```
|
||||
|
||||
**Why doesn't NPC see player?**
|
||||
```javascript
|
||||
// Move player near NPC and check console for:
|
||||
// Distance: XXXpx (range: YYYpx) ← Distance < Range?
|
||||
// Angle to Player: AAA° (FOV: BBB°) ← Angle < FOV/2?
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Copy-Paste Commands
|
||||
|
||||
```javascript
|
||||
// Test graphics
|
||||
window.testGraphics()
|
||||
|
||||
// Check status
|
||||
window.losStatus()
|
||||
|
||||
// Enable LOS
|
||||
window.enableLOS()
|
||||
|
||||
// Disable LOS
|
||||
window.disableLOS()
|
||||
|
||||
// Watch NPC position every 100ms
|
||||
setInterval(() => {
|
||||
const npc = Array.from(window.npcManager.npcs.values())[0];
|
||||
if (npc && npc.sprite) {
|
||||
const pos = npc.sprite.getCenter();
|
||||
console.log(`NPC: (${pos.x.toFixed(0)}, ${pos.y.toFixed(0)})`);
|
||||
}
|
||||
}, 100);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Success Checklist
|
||||
|
||||
- [ ] Red square test passes
|
||||
- [ ] NPCs showing in losStatus()
|
||||
- [ ] LOS enabled in losStatus()
|
||||
- [ ] Green cones visible on screen
|
||||
- [ ] Console shows no 🔴 errors
|
||||
- [ ] Distance/angle logged when moving player
|
||||
- [ ] Person-chat triggers when in LOS
|
||||
|
||||
**All checked? System is working! ✅**
|
||||
@@ -1,201 +1,199 @@
|
||||
# NPC LOS Configuration Quick Reference
|
||||
# LOS Visualization - Quick Reference
|
||||
|
||||
## Quick Setup
|
||||
## 30-Second Quick Start
|
||||
|
||||
Add to any person-type NPC in scenario JSON:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "your_npc",
|
||||
"npcType": "person",
|
||||
|
||||
"los": {
|
||||
"enabled": true,
|
||||
"range": 300,
|
||||
"angle": 120,
|
||||
"visualize": false
|
||||
},
|
||||
|
||||
"eventMappings": [
|
||||
{
|
||||
"eventPattern": "lockpick_used_in_view",
|
||||
"targetKnot": "on_lockpick_used",
|
||||
"conversationMode": "person-chat",
|
||||
"cooldown": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Parameter Meanings
|
||||
|
||||
| Parameter | Type | Min | Max | Default | Notes |
|
||||
|-----------|------|-----|-----|---------|-------|
|
||||
| `enabled` | bool | - | - | true | Enable/disable LOS detection |
|
||||
| `range` | px | 0 | 2000 | 300 | How far NPC can see (pixels) |
|
||||
| `angle` | ° | 0 | 360 | 120 | Field of view width (degrees) |
|
||||
| `visualize` | bool | - | - | false | Show cone for debugging |
|
||||
|
||||
## Angle Examples
|
||||
|
||||
```
|
||||
angle: 60 = Narrow vision (30° each side)
|
||||
angle: 90 = Standard vision (45° each side)
|
||||
angle: 120 = Wide vision (60° each side) ✓ DEFAULT
|
||||
angle: 140 = Very wide (70° each side)
|
||||
angle: 180 = Hemisphere vision (90° each side)
|
||||
angle: 360 = Full vision (sees everywhere)
|
||||
```
|
||||
|
||||
## Range Examples
|
||||
|
||||
```
|
||||
range: 100 = Immediate area (1-2 tiles)
|
||||
range: 250 = Close proximity (3-4 tiles)
|
||||
range: 300 = Standard distance (4-5 tiles) ✓ DEFAULT
|
||||
range: 500 = Long distance (6-8 tiles)
|
||||
range: 1000+ = Sniper-like sight
|
||||
```
|
||||
|
||||
## Preset Configurations
|
||||
|
||||
### Casual Guard
|
||||
```json
|
||||
"los": {
|
||||
"enabled": true,
|
||||
"range": 200,
|
||||
"angle": 100
|
||||
}
|
||||
```
|
||||
|
||||
### Alert Guard
|
||||
```json
|
||||
"los": {
|
||||
"enabled": true,
|
||||
"range": 350,
|
||||
"angle": 140
|
||||
}
|
||||
```
|
||||
|
||||
### Paranoid Guard
|
||||
```json
|
||||
"los": {
|
||||
"enabled": true,
|
||||
"range": 500,
|
||||
"angle": 180
|
||||
}
|
||||
```
|
||||
|
||||
### Distracted NPC
|
||||
```json
|
||||
"los": {
|
||||
"enabled": true,
|
||||
"range": 150,
|
||||
"angle": 80
|
||||
}
|
||||
```
|
||||
|
||||
### Blind NPC (always hears)
|
||||
```json
|
||||
"los": {
|
||||
"enabled": false,
|
||||
"range": 99999,
|
||||
"angle": 360
|
||||
}
|
||||
```
|
||||
|
||||
## Testing Commands
|
||||
|
||||
### Enable Debug Visualization
|
||||
```javascript
|
||||
window.npcManager.setLOSVisualization(true, window.game.scene.scenes[0]);
|
||||
// 1. Open game in browser
|
||||
// 2. Open console (F12)
|
||||
// 3. Paste this:
|
||||
window.enableLOS()
|
||||
|
||||
// You should now see green cones!
|
||||
```
|
||||
|
||||
### Update Visualization (call each frame)
|
||||
```javascript
|
||||
window.npcManager.updateLOSVisualizations(window.game.scene.scenes[0]);
|
||||
## Visual Elements Explained
|
||||
|
||||
```
|
||||
↑ Facing Direction
|
||||
|
|
||||
......|...... Range Circle (max detection distance)
|
||||
./ .│. \.
|
||||
/ . │ . \
|
||||
/ . │ . \
|
||||
/ . │ . \
|
||||
/ === . │ . === \
|
||||
/ / \ │ / \ \
|
||||
/ / \ │ / \ \
|
||||
/ / NPC \│/ \ \
|
||||
/ / ● ● \ \ ← Angle Wedge (cone boundary)
|
||||
\ \ │ / /
|
||||
\ \ │ / /
|
||||
\ \ ╱ ╲ / /
|
||||
\ \ ╱ ╲ / /
|
||||
\ ╲ ╱ ╲ ╱ /
|
||||
\ ╲ ╱ ╲ ╱ /
|
||||
\ ╲ ╱ ╲ ╱ /
|
||||
\ ╱ ╱ /
|
||||
╲/ ╱ ╱
|
||||
╲╱╲ ╱╲╱ ╱
|
||||
╲ ╱ ╲ ╱
|
||||
╲╱ ╲╱
|
||||
|
||||
● = NPC Position Marker (bright circle)
|
||||
█ = Filled Cone (player detection zone)
|
||||
⟨ = Range Boundary Circle
|
||||
↑ = Facing Direction Arrow
|
||||
```
|
||||
|
||||
### Check If Player Visible
|
||||
```javascript
|
||||
const playerPos = window.player.sprite.getCenter();
|
||||
const npc = window.npcManager.getNPC('your_npc_id');
|
||||
const los = window.npcManager.shouldInterruptLockpickingWithPersonChat('room_id', playerPos);
|
||||
console.log('Can see:', los !== null);
|
||||
## Console Commands
|
||||
|
||||
| Command | Effect |
|
||||
|---------|--------|
|
||||
| `window.enableLOS()` | Show green cones |
|
||||
| `window.disableLOS()` | Hide cones |
|
||||
| `window.npcManager.losVisualizationEnabled` | Check if enabled (true/false) |
|
||||
| `window.npcManager.npcs.size` | Count of NPCs |
|
||||
| `window.npcManager.losVisualizations.size` | Count of visible cones |
|
||||
|
||||
## Color Guide
|
||||
|
||||
| Color | Meaning |
|
||||
|-------|---------|
|
||||
| **Bright Green (100%)** | NPC position marker and facing arrow |
|
||||
| **Medium Green (80%)** | Cone outline/border |
|
||||
| **Light Green (60%)** | NPC circle marker |
|
||||
| **Faint Green (20%)** | Range circle boundary |
|
||||
| **Very Faint (10%)** | Angle wedge lines |
|
||||
|
||||
## Console Output Examples
|
||||
|
||||
### ✅ Everything Working
|
||||
|
||||
```
|
||||
👁️ Enabling LOS visualization
|
||||
🎯 Updating LOS visualizations for 2 NPCs
|
||||
Processing "guard1" - has LOS config {range: 300, angle: 140}
|
||||
🟢 Drawing LOS cone for NPC at (1200, 850), range: 300, angle: 140°
|
||||
NPC facing: 0°
|
||||
✅ LOS cone drawn at (1200, 850) with depth: -999
|
||||
✅ Created visualization for "guard1"
|
||||
✅ LOS visualization update complete: 2/2 visualized
|
||||
```
|
||||
|
||||
### Get NPC LOS Config
|
||||
```javascript
|
||||
const npc = window.npcManager.getNPC('your_npc_id');
|
||||
console.log('LOS Config:', npc.los);
|
||||
### ❌ NPC Not Found
|
||||
|
||||
```
|
||||
🔴 Cannot draw LOS cone - NPC position not found
|
||||
{npcId: "guard1", hasSprite: false, hasX: true, hasPosition: false}
|
||||
```
|
||||
|
||||
## Visualization
|
||||
**Solution**: Verify NPC sprite is initialized before calling `enableLOS()`
|
||||
|
||||
When enabled, shows:
|
||||
- **Green cone** = NPC's field of view
|
||||
- **Cone tip** = NPC's position
|
||||
- **Cone width** = `angle` parameter (degrees)
|
||||
- **Cone depth** = `range` parameter (pixels)
|
||||
### ⚠️ Missing LOS Config
|
||||
|
||||
## Common Configurations by Scenario
|
||||
|
||||
### Tight Security
|
||||
```json
|
||||
"range": 400,
|
||||
"angle": 160
|
||||
```
|
||||
Skip "guard1" - no LOS config or disabled
|
||||
```
|
||||
|
||||
### Secret Room Guard
|
||||
```json
|
||||
"range": 150,
|
||||
"angle": 60
|
||||
```
|
||||
**Solution**: Add `"los": {"enabled": true, "range": 300, "angle": 140}` to NPC in scenario JSON
|
||||
|
||||
### Perimeter Patrol
|
||||
```json
|
||||
"range": 300,
|
||||
"angle": 120
|
||||
```
|
||||
## Testing Scenarios
|
||||
|
||||
### Boss NPC
|
||||
```json
|
||||
"range": 600,
|
||||
"angle": 200
|
||||
```
|
||||
### Test 1: Basic Visualization
|
||||
1. `window.enableLOS()`
|
||||
2. Look for green cones on screen
|
||||
3. Verify they point toward NPC's facing direction
|
||||
|
||||
### Test 2: Range Detection
|
||||
1. Move player closer/farther from NPC
|
||||
2. Watch for detection feedback in console
|
||||
3. Verify player detected inside cone, outside range
|
||||
|
||||
### Test 3: Angle Detection
|
||||
1. Move player left/right relative to NPC
|
||||
2. Check if player is within cone angle boundaries
|
||||
3. Verify detection changes as you move
|
||||
|
||||
### Test 4: Lockpicking Interruption
|
||||
1. Try to pick a lock near an NPC
|
||||
2. NPC should see you if in LOS
|
||||
3. Person-chat should start instead of lockpicking
|
||||
4. Check console for "NPC can see player" message
|
||||
|
||||
## Debugging Checklist
|
||||
|
||||
- [ ] NPC position correct? `npc.x, npc.y`
|
||||
- [ ] NPC facing direction correct? `npc.facingDirection`
|
||||
- [ ] Player position correct? `window.player.sprite.getCenter()`
|
||||
- [ ] Range value sufficient? Try doubling it
|
||||
- [ ] Angle value sufficient? Try 180° for testing
|
||||
- [ ] LOS enabled? Check `npc.los.enabled`
|
||||
- [ ] Visualization enabled? Use `setLOSVisualization(true)`
|
||||
- [ ] Green cones appear when `enableLOS()` called
|
||||
- [ ] Cones disappear when `disableLOS()` called
|
||||
- [ ] Arrow points in NPC's facing direction
|
||||
- [ ] Range circle matches configured range
|
||||
- [ ] Cone angle matches configured angle
|
||||
- [ ] NPC marker at correct position
|
||||
- [ ] Console shows success messages (🟢)
|
||||
- [ ] Lockpicking interrupted when in NPC view
|
||||
- [ ] Person-chat starts instead of minigame
|
||||
|
||||
## Troubleshooting
|
||||
## Common Issues & Solutions
|
||||
|
||||
| Problem | Solution |
|
||||
|---------|----------|
|
||||
| NPC never reacts | Increase `range` and/or `angle`, enable visualization |
|
||||
| NPC always reacts | Set `enabled: false` or reduce `range`/`angle` |
|
||||
| Can't see cone | Call `updateLOSVisualizations()` each frame |
|
||||
| Cone in wrong spot | Check NPC position and sprite offset |
|
||||
| Wrong facing | Check NPC direction/rotation property |
|
||||
| Issue | Cause | Solution |
|
||||
|-------|-------|----------|
|
||||
| No cones visible | Scene not ready | Wait 1 second after loading, then call `enableLOS()` |
|
||||
| Cones invisible | Graphics behind terrain | Check console for rendering errors |
|
||||
| Wrong cone position | NPC not initialized | Ensure NPC sprite exists before enabling |
|
||||
| Detection not working | LOS config missing | Add `los` object to NPC in scenario JSON |
|
||||
| Wrong facing direction | NPC facing not set | Set NPC `direction` or `rotation` property |
|
||||
|
||||
## Migration Consideration
|
||||
## Configuration Template
|
||||
|
||||
When moving to server-side unlock validation:
|
||||
Add to any NPC in scenario JSON:
|
||||
|
||||
**Keep for client-side:**
|
||||
- Cosmetic NPC reactions
|
||||
- UI feedback
|
||||
- Immediate game feel
|
||||
```json
|
||||
"los": {
|
||||
"enabled": true,
|
||||
"range": 300, // pixels - how far they can see
|
||||
"angle": 140, // degrees - cone width
|
||||
"visualize": true // show debug cone
|
||||
}
|
||||
```
|
||||
|
||||
**Move to server-side:**
|
||||
- Actual unlock permission check
|
||||
- Event validation
|
||||
- Security verification
|
||||
## Performance Tips
|
||||
|
||||
Never trust client-side LOS result - always validate server-side!
|
||||
- Each NPC cone: ~0.5ms per frame
|
||||
- With 5 NPCs: ~2-3ms per frame (negligible)
|
||||
- Visualization runs every frame when enabled
|
||||
- Graphics depth set to -999 (behind everything)
|
||||
|
||||
## URLs & Files
|
||||
|
||||
| Resource | Path |
|
||||
|----------|------|
|
||||
| Test File | `test-los-visualization.html` |
|
||||
| Debug Guide | `docs/LOS_VISUALIZATION_DEBUG.md` |
|
||||
| System Docs | `docs/LOS_SYSTEM_OVERVIEW.md` |
|
||||
| Source Code | `js/systems/npc-los.js` |
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
None defined yet, but you can add:
|
||||
|
||||
```javascript
|
||||
// In game loop or event listener:
|
||||
if (key === 'L') window.enableLOS()
|
||||
if (key === 'K') window.disableLOS()
|
||||
```
|
||||
|
||||
## Viewing Console
|
||||
|
||||
1. Press **F12** to open Developer Tools
|
||||
2. Click **Console** tab
|
||||
3. Type commands like `window.enableLOS()`
|
||||
4. Press **Enter**
|
||||
|
||||
## Getting Help
|
||||
|
||||
Check these in order:
|
||||
|
||||
1. Console output messages (look for 🔴 errors)
|
||||
2. `docs/LOS_VISUALIZATION_DEBUG.md` (troubleshooting)
|
||||
3. `docs/LOS_SYSTEM_OVERVIEW.md` (technical details)
|
||||
4. Verify scenario JSON has correct NPC config
|
||||
5. Check game loads successfully before enabling LOS
|
||||
|
||||
Reference in New Issue
Block a user