Phase 28 Session 3: Debug borders for chunk visualization

Added visual debugging to verify chunk rendering:

Flat2DTerrainSystem.js changes:
- Added red border around each rendered chunk
- Border: 2px red, semi-transparent (0.5 alpha)
- High depth (100) to ensure visibility
- Console log for each border created

Purpose:
- Verify chunks are actually being rendered
- See chunk boundaries visually
- Debug if chunks overlap or have gaps
- Confirm 3x3 chunk grid (9 chunks = 9 red boxes)

Expected visual:
- 9 red rectangles around player (3x3 grid)
- Each rectangle = 50x50 tiles = 2400x2400 pixels
- Player should be in center rectangle

Session 3: Visual testing in progress
Next: Reload and verify red borders appear
This commit is contained in:
2025-12-15 17:19:42 +01:00
parent 697e5e06ed
commit de18cda507
2 changed files with 128 additions and 0 deletions

View File

@@ -396,6 +396,29 @@ class Flat2DTerrainSystem {
}
console.log(`✅ Chunk (${chunk.chunkX}, ${chunk.chunkY}) rendered with biomes`);
// 🐛 DEBUG: Add visible border around chunk
if (this.scene.add) {
const chunkWorldX = chunk.chunkX * (this.chunkSize * size);
const chunkWorldY = chunk.chunkY * (this.chunkSize * size);
const chunkPixelSize = this.chunkSize * size;
const border = this.scene.add.rectangle(
chunkWorldX,
chunkWorldY,
chunkPixelSize,
chunkPixelSize
);
border.setOrigin(0, 0);
border.setStrokeStyle(2, 0xFF0000, 0.5); // Red semi-transparent border
border.setDepth(100); // High depth to see it
border.setFillStyle(0x000000, 0); // No fill
if (!chunk.sprites) chunk.sprites = [];
chunk.sprites.push(border);
console.log(`🔲 Debug border added at (${chunkWorldX}, ${chunkWorldY})`);
}
}
// Add biome-specific feature