NovaFarma Dev
80bddf5d61
- 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
160 lines
4.3 KiB
Markdown
160 lines
4.3 KiB
Markdown
# 🏔️ 2.5D TERRAIN SYSTEM - COMPLETE DOCUMENTATION
|
|
|
|
## 📋 OVERVIEW
|
|
|
|
Complete 2.5D terrain system with procedural hills, height-based collision, and visual polish.
|
|
|
|
---
|
|
|
|
## ✅ PHASE 1: HEIGHT GENERATION & VISUALIZATION (COMPLETED)
|
|
|
|
### Implementation:
|
|
- **Height Generation:** Perlin noise (0.05 frequency) generates smooth hills
|
|
- **Height Range:** 0-5 discrete levels
|
|
- **Visual Effects:**
|
|
- **Tint:** `0x666666` (dark valleys) → `0xffffff` (bright peaks)
|
|
- **Scale:** `1.0x` → `1.5x` (50% size increase on peaks)
|
|
- **Y-Offset:** `0px` → `-75px` (massive elevation)
|
|
|
|
### Code Location:
|
|
- **Generation:** `TerrainSystem.js` - `generateChunk()` line ~504
|
|
- **Visualization:** `TerrainSystem.js` - `updateCulling()` line ~1031
|
|
|
|
---
|
|
|
|
## ✅ PHASE 2: WALKABILITY CONSTRAINTS (COMPLETED)
|
|
|
|
### Implementation:
|
|
- **Height-Aware Collision:** Can't walk over height difference > 1
|
|
- **Cliff Detection:** Checks `Math.abs(toHeight - fromHeight) > 1`
|
|
- **Console Feedback:** Logs "🏔️ Blocked by cliff!"
|
|
|
|
### Code Location:
|
|
- **Collision Check:** `TerrainSystem.js` - `isSolid(x, y, fromX, fromY)` line ~1262
|
|
|
|
---
|
|
|
|
## 🎨 PHASE 3: VISUAL POLISH (OPTIONAL)
|
|
|
|
### Planned Features:
|
|
|
|
#### 1. **Cliff Edge Sprites**
|
|
```javascript
|
|
// Detect cliff edges (height diff > 1)
|
|
if (heightDiff > 1) {
|
|
// Add cliff edge sprite between tiles
|
|
const edgeSprite = this.add.sprite(x, y, 'cliff_edge');
|
|
edgeSprite.setRotation(angleToNeighbor);
|
|
}
|
|
```
|
|
|
|
#### 2. **Shadow Effects**
|
|
```javascript
|
|
// Add shadow to lower tiles near cliffs
|
|
const shadowAlpha = Math.min(heightDiff * 0.2, 0.6);
|
|
const shadow = this.add.rectangle(x, y, tileWidth, tileHeight, 0x000000, shadowAlpha);
|
|
```
|
|
|
|
#### 3. **Gradient Blending**
|
|
```javascript
|
|
// Smooth color transitions between heights
|
|
const neighborAvgHeight = (h1 + h2 + h3 + h4) / 4;
|
|
const blendedTint = interpolateColor(currentTint, avgTint, 0.3);
|
|
```
|
|
|
|
---
|
|
|
|
## 🎮 USAGE
|
|
|
|
### Reset World (New Seed):
|
|
```javascript
|
|
// In browser console (F12):
|
|
localStorage.clear();
|
|
// Refresh → New procedural world with hills!
|
|
```
|
|
|
|
### Test Height System:
|
|
```javascript
|
|
const scene = window.gameState.gameScene;
|
|
const tile = scene.terrainSystem.getTile(50, 50);
|
|
console.log('Height:', tile.height); // 0-5
|
|
```
|
|
|
|
### Test Collision:
|
|
```
|
|
1. Walk around the map
|
|
2. Try to climb steep hills (height diff > 1)
|
|
3. Console: "🏔️ Blocked by cliff!"
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 CURRENT STATUS
|
|
|
|
| Feature | Status | Description |
|
|
|---------|--------|-------------|
|
|
| Height Generation | ✅ Complete | Procedural hills with Perlin noise |
|
|
| Visual Height | ✅ Complete | Tint + Scale + Y-offset |
|
|
| Walkability | ✅ Complete | Height-based collision |
|
|
| Cliff Edges | ⏳ Optional | Visual borders (Phase 3) |
|
|
| Shadows | ⏳ Optional | Shadow effects (Phase 3) |
|
|
| Gradients | ⏳ Optional | Smooth blending (Phase 3) |
|
|
|
|
---
|
|
|
|
## 🔧 CUSTOMIZATION
|
|
|
|
### Adjust Height Intensity:
|
|
```javascript
|
|
// In TerrainSystem.js - generateChunk()
|
|
const heightNoise = this.noise.noise(x * 0.05, y * 0.05);
|
|
const rawHeight = (heightNoise + 1) * 2.5; // Change 2.5 to 5.0 for more extreme (0-10 range)
|
|
```
|
|
|
|
### Adjust Visual Effects:
|
|
```javascript
|
|
// In TerrainSystem.js - updateCulling()
|
|
const tintValue = 0x666666 + (height * 0x333333); // Adjust contrast
|
|
const scaleBonus = 1.0 + (height * 0.1); // Adjust size (0.1 = 10% per level)
|
|
const elevationOffset = -(height * 15); // Adjust elevation (15px per level)
|
|
```
|
|
|
|
### Adjust Walkability:
|
|
```javascript
|
|
// In TerrainSystem.js - isSolid()
|
|
if (heightDiff > 1) { // Change to 2 for more permissive, 0 for stricter
|
|
return true; // Blocked
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🐛 TROUBLESHOOTING
|
|
|
|
### Hills not visible?
|
|
1. Clear localStorage: `localStorage.clear()`
|
|
2. Refresh page
|
|
3. Check console for "🏔️ HEIGHT GENERATION" logs
|
|
|
|
### Can walk through cliffs?
|
|
1. Ensure player movement uses `terrainSystem.isSolid(x, y, fromX, fromY)` with 4 parameters
|
|
2. Check console for "🏔️ Blocked by cliff!" messages
|
|
|
|
### Tiles look glitchy?
|
|
1. Reduce elevation offset (try `height * 10` instead of `* 15`)
|
|
2. Reduce scale bonus (try `height * 0.05` instead of `* 0.1`)
|
|
|
|
---
|
|
|
|
## 📚 FILES MODIFIED
|
|
|
|
- `src/systems/TerrainSystem.js` - Height generation & visualization
|
|
- `docs/HEIGHT_SYSTEM_PLAN.md` - Implementation plan
|
|
- `docs/2.5D_TERRAIN_GUIDE.md` - This file
|
|
|
|
---
|
|
|
|
**Implementation Date:** 2025-12-14
|
|
**Status:** Phase 1-2 Complete, Phase 3 Optional
|
|
**Author:** Antigravity AI Assistant
|