Files
novafarma/docs/RAIN_ON_WATER_GUIDE.md
NovaFarma Dev 80bddf5d61 feat: Complete 2D Visual Overhaul - Isometric to Flat Top-Down
- NEW: Flat2DTerrainSystem.js (375 lines)
- NEW: map2d_data.js procedural map (221 lines)
- MODIFIED: GameScene async create, 2D terrain integration
- MODIFIED: Player.js flat 2D positioning
- MODIFIED: game.js disabled pixelArt for smooth rendering
- FIXED: 15+ bugs (updateCulling, isometric conversions, grid lines)
- ADDED: Phase 28 to TASKS.md
- DOCS: DNEVNIK.md session summary

Result: Working flat 2D game with Stardew Valley style!
Time: 5.5 hours
2025-12-14 17:12:40 +01:00

2.0 KiB

🌊💧 RAIN ON WATER - IMPLEMENTATION GUIDE

Koncept:

Ko dež pada, naj se na water tiles pojavljajo majhni ripple effecti (krožni valovi).

Implementacija:

1. Dodaj Rain Impact Detection

V GameScene.js, v rain particle emitter dodaj callback ko particle umre:

createRainParticles() {
    // ... existing code ...
    
    this.rainEmitter = this.add.particles(0, 0, 'raindrop', {
        // ... existing config ...
        
        // NEW: Detect when raindrop hits ground
        deathCallback: (particle) => {
            // Get world position of raindrop
            const worldX = particle.x;
            const worldY = particle.y;
            
            // Check if hit water tile
            this.checkRainImpactOnWater(worldX, worldY);
        }
    });
}

### 2. Check If Rain Hit Water
```javascript
checkRainImpactOnWater(worldX, worldY) {
    // Convert screen to grid
    const gridPos = this.terrainSystem.iso.toGrid(
        worldX - this.terrainSystem.offsetX,
        worldY - this.terrainSystem.offsetY
    );
    
    const x = Math.floor(gridPos.x);
    const y = Math.floor(gridPos.y);
    
    // Get tile at position
    const tile = this.terrainSystem.getTile(x, y);
    
    // If water tile, create ripple!
    if (tile && tile.type === 'water') {
        this.createWaterRipple(worldX, worldY);
    }
}

3. Create Water Ripple Effect

createWaterRipple(x, y) {
    // Small expanding circle
    const ripple = this.add.circle(x, y, 2, 0xffffff, 0.6);
    ripple.setDepth(500); // Above water

    this.tweens.add({
        targets: ripple,
        radius: 12,
        alpha: 0,
        duration: 400,
        ease: 'Quad.easeOut',
        onComplete: () => ripple.destroy()
    });
}

Rezultat:

  • Vsaka dežna kapljica ki pade na vodo ustvari majhen ripple
  • Ripple se širi in izgine
  • Creates realistic rain-on-water effect

Status: Ready to implement
Files to modify: GameScene.js
Difficulty: Medium