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
103 lines
2.3 KiB
Markdown
103 lines
2.3 KiB
Markdown
# 🏔️ HEIGHT SYSTEM & 2.5D TERRAIN IMPLEMENTATION PLAN
|
|
|
|
## 📋 OVERVIEW
|
|
|
|
Transforming flat pixel-art terrain into 2.5D with procedural hills and elevation.
|
|
|
|
---
|
|
|
|
## 🎯 PHASE 1: HEIGHT GENERATION (IMPLEMENTING NOW)
|
|
|
|
### Changes:
|
|
1. **Add height property to tiles** (already exists in terrainTypes)
|
|
2. **Generate height using 2nd Perlin noise layer**
|
|
3. **Visual height representation:**
|
|
- Tint (darker = lower, lighter = higher)
|
|
- Scale (higher tiles = slightly bigger)
|
|
- Y-offset (elevation visual)
|
|
|
|
### Code Changes:
|
|
|
|
**TerrainSystem.js - generateChunk():**
|
|
```javascript
|
|
// NEW: Height noise (separate from terrain type noise)
|
|
const heightNoise = this.noise.noise(x * 0.05, y * 0.05);
|
|
const elevationHeight = Math.floor((heightNoise + 1) * 2.5); // 0-5 range
|
|
|
|
// Store height in tile
|
|
this.tiles[y][x] = {
|
|
type: tileType,
|
|
height: elevationHeight, // NEW!
|
|
solid: false
|
|
};
|
|
```
|
|
|
|
**TerrainSystem.js - updateCulling() rendering:**
|
|
```javascript
|
|
// Apply visual height effects
|
|
const tile = this.tiles[y][x];
|
|
const height = tile.height || 0;
|
|
|
|
// 1. Tint (darker low, lighter high)
|
|
const tintValue = 0xffffff - (height * 0x111111);
|
|
sprite.setTint(tintValue);
|
|
|
|
// 2. Scale (subtle)
|
|
const scaleBonus = 1 + (height * 0.02);
|
|
sprite.setScale(scaleBonus);
|
|
|
|
// 3. Y-offset (elevation)
|
|
const yOffset = -(height * 4);
|
|
sprite.y += yOffset;
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 VISUAL RESULTS:
|
|
|
|
```
|
|
Before (Flat):
|
|
████████████
|
|
████████████
|
|
████████████
|
|
|
|
After (Hills):
|
|
▓▓▓▓ ← Height 4 (lighter, higher)
|
|
▒▒▒▒▒▒▒▒ ← Height 3
|
|
░░░░░░░░░░░░ ← Height 2
|
|
████████████ ← Height 0 (valleys, base)
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 NEXT STEPS (PHASE 2):
|
|
|
|
1. **Walkability constraints**
|
|
- Can't walk over height diff > 1
|
|
- Pathfinding with elevation
|
|
|
|
2. **Smooth transitions**
|
|
- Slope tiles between heights
|
|
- Gradient blending
|
|
|
|
3. **Cliff edges**
|
|
- Visual edge sprites
|
|
- Shadow effects
|
|
|
|
---
|
|
|
|
## 📊 CURRENT STATUS:
|
|
|
|
- ✅ TerrainTypes have height property
|
|
- ✅ Perlin noise available
|
|
- ⏳ Height generation (implementing)
|
|
- ⏳ Visual rendering (implementing)
|
|
- ❌ Walkability (Phase 2)
|
|
- ❌ Slope transitions (Phase 2)
|
|
|
|
---
|
|
|
|
**Implementation Date:** 2025-12-14
|
|
**Status:** In Progress
|
|
**Files Modified:** TerrainSystem.js
|