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
This commit is contained in:
527
docs/FINAL_IMPLEMENTATION_ROADMAP.md
Normal file
527
docs/FINAL_IMPLEMENTATION_ROADMAP.md
Normal file
@@ -0,0 +1,527 @@
|
||||
# 🎯 NOVAFARMA - FINAL IMPLEMENTATION ROADMAP
|
||||
|
||||
**Goal:** Complete Phases 4 & 5
|
||||
**Time:** 7-11 hours
|
||||
**Status:** STARTING NOW! 🚀
|
||||
|
||||
---
|
||||
|
||||
## 📊 EXECUTION PLAN
|
||||
|
||||
### PART 1: IMMEDIATE INTEGRATION (1h) ⚡
|
||||
**Priority:** CRITICAL - Make existing work functional
|
||||
|
||||
#### Task 1.1: Integrate Crafting System (30 min)
|
||||
- [ ] Add scripts to index.html
|
||||
- [ ] Initialize in GameScene
|
||||
- [ ] Add update call
|
||||
- [ ] Test C key toggle
|
||||
- [ ] Verify all 10 recipes work
|
||||
|
||||
#### Task 1.2: Test All Systems (30 min)
|
||||
- [ ] Test water visuals (smooth check)
|
||||
- [ ] Test puddles (R → rain → puddles)
|
||||
- [ ] Test ripples (rain on water)
|
||||
- [ ] Test save (F5) and load (F9)
|
||||
- [ ] Test crafting (C key)
|
||||
- [ ] Fix any critical bugs
|
||||
|
||||
**Output:** All existing features working! ✅
|
||||
|
||||
---
|
||||
|
||||
### PART 2: TILED IMPLEMENTATION (4-6h) 🗺️
|
||||
**Priority:** HIGH - Professional level design
|
||||
|
||||
#### Phase 4A: Create Tileset (1.5-2h)
|
||||
|
||||
**Task 4A.1: Design Tileset Image**
|
||||
- [ ] Open image editor (Photoshop/GIMP/Aseprite)
|
||||
- [ ] Create 48x48 tile grid
|
||||
- [ ] Paint smooth tiles:
|
||||
- Grass (rich green #4a9d5f)
|
||||
- Dirt (brown #8b6f47)
|
||||
- Water (blue #2a7fbc) - already have!
|
||||
- Stone (gray #808080)
|
||||
- Sand (tan #d4c4a1)
|
||||
- Farmland (dark brown #6b4423)
|
||||
- Path/Pavement (light gray #a0a0a0)
|
||||
- Wood planks (brown #8B4513)
|
||||
|
||||
**Task 4A.2: Create Wang/Transition Tiles**
|
||||
- [ ] Grass → Dirt transitions (4 edges, 4 corners)
|
||||
- [ ] Grass → Water transitions
|
||||
- [ ] Sand → Water transitions
|
||||
- [ ] Smooth blending tiles
|
||||
|
||||
**Task 4A.3: Export Tileset**
|
||||
- [ ] Save as `assets/tilesets/smooth_tileset.png`
|
||||
- [ ] Verify 48x48 tile size
|
||||
- [ ] Check no grid lines in image
|
||||
- [ ] Total: ~64-100 tiles recommended
|
||||
|
||||
**Alternative:** Use existing procedural water texture!
|
||||
|
||||
---
|
||||
|
||||
#### Phase 4B: Build Map in Tiled (1.5-2h)
|
||||
|
||||
**Task 4B.1: Install & Setup Tiled**
|
||||
- [ ] Download Tiled (https://www.mapeditor.org/)
|
||||
- [ ] Install and launch
|
||||
- [ ] Create new tileset:
|
||||
- File → New → New Tileset
|
||||
- Image: smooth_tileset.png
|
||||
- Tile width: 48
|
||||
- Tile height: 48
|
||||
- Margin: 0, Spacing: 0
|
||||
|
||||
**Task 4B.2: Create Map**
|
||||
- [ ] File → New → New Map
|
||||
- [ ] Orientation: Isometric (for 2.5D)
|
||||
- [ ] Tile size: 48x48
|
||||
- [ ] Map size: 100x100 tiles
|
||||
- [ ] Save as `assets/maps/world.tmx`
|
||||
|
||||
**Task 4B.3: Paint Layers**
|
||||
- [ ] Layer 1 "Ground": Base terrain
|
||||
- Paint central 100x100 farm area
|
||||
- Use grass for most area
|
||||
- Add water pond/lake
|
||||
- Add dirt paths
|
||||
- [ ] Layer 2 "Decorations":
|
||||
- Trees (mark as solid)
|
||||
- Rocks (mark as solid)
|
||||
- Flowers, bushes
|
||||
- [ ] Layer 3 "Structures":
|
||||
- Buildings
|
||||
- Fences
|
||||
- Special objects
|
||||
|
||||
**Task 4B.4: Add Objects**
|
||||
- [ ] Create Object Layer "SpawnPoints"
|
||||
- [ ] Add PlayerSpawn point (center of farm)
|
||||
- [ ] Add NPC spawn points (optional)
|
||||
- [ ] Add interaction zones
|
||||
|
||||
**Task 4B.5: Set Collisions**
|
||||
- [ ] Select water tiles
|
||||
- [ ] Right-click → Tile Properties
|
||||
- [ ] Add custom property: `collides = true`
|
||||
- [ ] Repeat for trees, rocks, buildings
|
||||
|
||||
**Task 4B.6: Export**
|
||||
- [ ] File → Export As → JSON
|
||||
- [ ] Save to `assets/maps/world.json`
|
||||
- [ ] Verify JSON is valid
|
||||
|
||||
---
|
||||
|
||||
#### Phase 4C: Integrate with Phaser (1-2h)
|
||||
|
||||
**Task 4C.1: Load Assets**
|
||||
|
||||
In `PreloadScene.js`:
|
||||
```javascript
|
||||
preload() {
|
||||
// ... existing assets ...
|
||||
|
||||
// TILED MAP
|
||||
this.load.image('smooth_tileset', 'assets/tilesets/smooth_tileset.png');
|
||||
this.load.tilemapTiledJSON('world_map', 'assets/maps/world.json');
|
||||
}
|
||||
```
|
||||
|
||||
**Task 4C.2: Replace TerrainSystem**
|
||||
|
||||
In `GameScene.js` create():
|
||||
```javascript
|
||||
create() {
|
||||
// OPTION A: Comment out old terrain
|
||||
// this.terrainSystem = new TerrainSystem(...);
|
||||
// this.terrainSystem.generate();
|
||||
|
||||
// OPTION B: Use Tiled Map
|
||||
this.map = this.make.tilemap({ key: 'world_map' });
|
||||
this.tileset = this.map.addTilesetImage('smooth_tileset', 'smooth_tileset');
|
||||
|
||||
// Create layers
|
||||
this.groundLayer = this.map.createLayer('Ground', this.tileset, 0, 0);
|
||||
this.decorLayer = this.map.createLayer('Decorations', this.tileset, 0, 0);
|
||||
|
||||
// Set collisions
|
||||
this.groundLayer.setCollisionByProperty({ collides: true });
|
||||
|
||||
// Get spawn point
|
||||
const spawnLayer = this.map.getObjectLayer('SpawnPoints');
|
||||
const playerSpawn = spawnLayer.objects.find(obj => obj.name === 'PlayerSpawn');
|
||||
|
||||
// Create player at spawn
|
||||
const spawnX = playerSpawn ? playerSpawn.x : 50;
|
||||
const spawnY = playerSpawn ? playerSpawn.y : 50;
|
||||
this.player = new Player(this, spawnX, spawnY);
|
||||
}
|
||||
```
|
||||
|
||||
**Task 4C.3: Update Collision**
|
||||
|
||||
Update Player.js:
|
||||
```javascript
|
||||
// Check collision with tilemap instead of terrainSystem
|
||||
if (this.scene.groundLayer) {
|
||||
const tile = this.scene.groundLayer.getTileAtWorldXY(worldX, worldY);
|
||||
if (tile && tile.properties.collides) {
|
||||
// Blocked!
|
||||
return;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Task 4C.4: Test**
|
||||
- [ ] Game loads with Tiled map
|
||||
- [ ] Player spawns at correct location
|
||||
- [ ] Collision works
|
||||
- [ ] Layers display correctly
|
||||
- [ ] Camera follows player
|
||||
|
||||
**Checklist:**
|
||||
- [ ] Tileset created
|
||||
- [ ] Map built in Tiled
|
||||
- [ ] Exported to JSON
|
||||
- [ ] Loaded in Phaser
|
||||
- [ ] Terrain replaced
|
||||
- [ ] Collision working
|
||||
- [ ] Fully playable
|
||||
|
||||
---
|
||||
|
||||
### PART 3: POLISH & EFFECTS (3-5h) ✨
|
||||
**Priority:** HIGH - Visual wow factor
|
||||
|
||||
#### Phase 5A: Day/Night Cycle (1-1.5h)
|
||||
|
||||
**Task 5A.1: Time System**
|
||||
|
||||
Create `src/systems/TimeSystem.js`:
|
||||
```javascript
|
||||
class TimeSystem {
|
||||
constructor(scene) {
|
||||
this.scene = scene;
|
||||
this.timeOfDay = 0; // 0-1 (0=midnight, 0.5=noon)
|
||||
this.dayLength = 20 * 60 * 1000; // 20 min real time = 1 day
|
||||
this.currentDay = 1;
|
||||
}
|
||||
|
||||
update(delta) {
|
||||
this.timeOfDay += (delta / this.dayLength);
|
||||
if (this.timeOfDay >= 1.0) {
|
||||
this.timeOfDay = 0;
|
||||
this.currentDay++;
|
||||
}
|
||||
}
|
||||
|
||||
getHour() {
|
||||
return Math.floor(this.timeOfDay * 24);
|
||||
}
|
||||
|
||||
isDaytime() {
|
||||
return this.timeOfDay > 0.25 && this.timeOfDay < 0.75;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Task 5A.2: Dynamic Tint**
|
||||
|
||||
In GameScene.update():
|
||||
```javascript
|
||||
update() {
|
||||
if (this.timeSystem) {
|
||||
this.timeSystem.update(delta);
|
||||
|
||||
// Calculate tint based on time
|
||||
const t = this.timeSystem.timeOfDay;
|
||||
let tint;
|
||||
|
||||
if (t < 0.25) {
|
||||
// Night (midnight → sunrise)
|
||||
tint = 0x4466aa; // Dark blue
|
||||
} else if (t < 0.3) {
|
||||
// Sunrise
|
||||
tint = Phaser.Display.Color.Interpolate.ColorWithColor(
|
||||
{ r: 0x44, g: 0x66, b: 0xaa },
|
||||
{ r: 0xff, g: 0xff, b: 0xff },
|
||||
5,
|
||||
(t - 0.25) / 0.05
|
||||
);
|
||||
} else if (t < 0.7) {
|
||||
// Day
|
||||
tint = 0xffffff; // Bright
|
||||
} else if (t < 0.75) {
|
||||
// Sunset
|
||||
tint = Phaser.Display.Color.Interpolate.ColorWithColor(
|
||||
{ r: 0xff, g: 0xff, b: 0xff },
|
||||
{ r: 0xff, g: 0x88, b: 0x44 },
|
||||
5,
|
||||
(t - 0.7) / 0.05
|
||||
);
|
||||
} else {
|
||||
// Night
|
||||
tint = 0x4466aa;
|
||||
}
|
||||
|
||||
// Apply tint to camera (affects everything)
|
||||
this.cameras.main.setTint(tint);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Checklist:**
|
||||
- [ ] TimeSystem created
|
||||
- [ ] Integrated in GameScene
|
||||
- [ ] Tint changes smoothly
|
||||
- [ ] Day/night cycle complete
|
||||
|
||||
---
|
||||
|
||||
#### Phase 5B: Enhanced Weather (1-1.5h)
|
||||
|
||||
**Task 5B.1: Wind Effect on Rain**
|
||||
|
||||
In GameScene rain particles:
|
||||
```javascript
|
||||
this.rainEmitter.setConfig({
|
||||
// ... existing config ...
|
||||
|
||||
// Wind effect
|
||||
angle: { min: 260 + this.windStrength * 10, max: 280 + this.windStrength * 10 },
|
||||
speedX: { min: -50 * this.windStrength, max: 50 * this.windStrength }
|
||||
});
|
||||
|
||||
this.windStrength = 0.5; // 0-1, changes over time
|
||||
```
|
||||
|
||||
**Task 5B.2: Tree Sway**
|
||||
|
||||
Add to trees:
|
||||
```javascript
|
||||
// When creating tree decorations
|
||||
this.tweens.add({
|
||||
targets: treeSprite,
|
||||
angle: { from: -2, to: 2 },
|
||||
duration: 2000 + Math.random() * 1000,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
ease: 'Sine.easeInOut'
|
||||
});
|
||||
```
|
||||
|
||||
**Task 5B.3: Weather Transitions**
|
||||
|
||||
```javascript
|
||||
setWeather(newWeather) {
|
||||
// Fade out old weather
|
||||
this.tweens.add({
|
||||
targets: this.currentWeatherEmitter,
|
||||
alpha: 0,
|
||||
duration: 2000,
|
||||
onComplete: () => {
|
||||
this.currentWeatherEmitter.stop();
|
||||
}
|
||||
});
|
||||
|
||||
// Fade in new weather
|
||||
this.createWeatherEffect(newWeather);
|
||||
this.tweens.add({
|
||||
targets: this.newWeatherEmitter,
|
||||
alpha: { from: 0, to: 1 },
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
**Checklist:**
|
||||
- [ ] Wind affects rain angle
|
||||
- [ ] Trees sway
|
||||
- [ ] Weather transitions smoothly
|
||||
|
||||
---
|
||||
|
||||
#### Phase 5C: Lighting & Shadows (0.5-1h)
|
||||
|
||||
**Task 5C.1: Simple Shadows**
|
||||
|
||||
```javascript
|
||||
// Add shadow sprite under player
|
||||
this.playerShadow = this.add.ellipse(
|
||||
player.x,
|
||||
player.y + 10,
|
||||
30, 15,
|
||||
0x000000,
|
||||
0.3
|
||||
);
|
||||
|
||||
// Update in player update
|
||||
this.playerShadow.setPosition(this.sprite.x, this.sprite.y + 10);
|
||||
```
|
||||
|
||||
**Task 5C.2: Lighting Effects**
|
||||
|
||||
```javascript
|
||||
// Add spotlight effect (torch at night)
|
||||
if (!this.timeSystem.isDaytime()) {
|
||||
this.playerLight = this.add.circle(
|
||||
player.x,
|
||||
player.y,
|
||||
100,
|
||||
0xffee88,
|
||||
0.2
|
||||
);
|
||||
this.playerLight.setBlendMode(Phaser.BlendModes.ADD);
|
||||
}
|
||||
```
|
||||
|
||||
**Checklist:**
|
||||
- [ ] Shadows under objects
|
||||
- [ ] Night lighting
|
||||
- [ ] Flashlight/torch effect
|
||||
|
||||
---
|
||||
|
||||
#### Phase 5D: UI Polish (0.5-1h)
|
||||
|
||||
**Task 5D.1: Smooth Transitions**
|
||||
|
||||
```javascript
|
||||
// Fade in menus
|
||||
this.craftingUI.container.setAlpha(0);
|
||||
this.tweens.add({
|
||||
targets: this.craftingUI.container,
|
||||
alpha: 1,
|
||||
duration: 300,
|
||||
ease: 'Power2'
|
||||
});
|
||||
```
|
||||
|
||||
**Task 5D.2: Button Animations**
|
||||
|
||||
```javascript
|
||||
// Pulse effect on hover
|
||||
button.on('pointerover', () => {
|
||||
this.tweens.add({
|
||||
targets: button,
|
||||
scale: 1.1,
|
||||
duration: 200,
|
||||
ease: 'Back.easeOut'
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
**Task 5D.3: Tooltips**
|
||||
|
||||
```javascript
|
||||
// Show tooltip on hover
|
||||
button.on('pointerover', () => {
|
||||
this.tooltip = this.add.text(x, y, 'Tooltip text', {
|
||||
backgroundColor: '#000000',
|
||||
padding: { x: 10, y: 5 }
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
**Checklist:**
|
||||
- [ ] Menu transitions
|
||||
- [ ] Button animations
|
||||
- [ ] Tooltips
|
||||
- [ ] Polish complete
|
||||
|
||||
---
|
||||
|
||||
#### Phase 5E: Particle Effects (0.5-1h)
|
||||
|
||||
**Task 5E.1: Enhanced Sparkles**
|
||||
|
||||
```javascript
|
||||
// Sparkle when crafting
|
||||
this.add.particles(x, y, 'particle', {
|
||||
speed: { min: 50, max: 150 },
|
||||
scale: { start: 0.5, end: 0 },
|
||||
tint: [ 0xffffff, 0xffee88, 0xffaa00 ],
|
||||
lifespan: 1000,
|
||||
quantity: 20,
|
||||
blendMode: 'ADD'
|
||||
});
|
||||
```
|
||||
|
||||
**Task 5E.2: Dust Clouds**
|
||||
|
||||
```javascript
|
||||
// Dust when walking
|
||||
if (player.isMoving) {
|
||||
this.dustEmitter.emitParticleAt(
|
||||
player.x,
|
||||
player.y
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Checklist:**
|
||||
- [ ] Craft sparkles
|
||||
- [ ] Walk dust
|
||||
- [ ] Harvest particles
|
||||
- [ ] Polish sparkle
|
||||
|
||||
---
|
||||
|
||||
## 📋 MASTER CHECKLIST
|
||||
|
||||
### Integration (1h):
|
||||
- [ ] Crafting integrated
|
||||
- [ ] All systems tested
|
||||
- [ ] Bugs fixed
|
||||
|
||||
### Tiled (4-6h):
|
||||
- [ ] Tileset created
|
||||
- [ ] Map built
|
||||
- [ ] Exported to JSON
|
||||
- [ ] Loaded in Phaser
|
||||
- [ ] Collision working
|
||||
- [ ] Fully playable
|
||||
|
||||
### Polish (3-5h):
|
||||
- [ ] Day/night cycle
|
||||
- [ ] Weather enhancements
|
||||
- [ ] Lighting & shadows
|
||||
- [ ] UI polish
|
||||
- [ ] Particle effects
|
||||
|
||||
---
|
||||
|
||||
## 🎯 SUCCESS METRICS
|
||||
|
||||
**Game feels:**
|
||||
- ✨ Beautiful (smooth visuals)
|
||||
- 🎨 Professional (polished UI)
|
||||
- 🌍 Immersive (day/night, weather)
|
||||
- 🎮 Playable (Tiled map)
|
||||
- 🛠️ Feature-complete (crafting works)
|
||||
|
||||
**Technical:**
|
||||
- ✅ 0 console errors
|
||||
- ✅ 60 FPS stable
|
||||
- ✅ All features work
|
||||
- ✅ Save/load functional
|
||||
- ✅ Professional quality
|
||||
|
||||
---
|
||||
|
||||
## 🚀 LET'S GO!
|
||||
|
||||
**Total time:** 8-12 hours
|
||||
**Starting now!**
|
||||
**Goal:** 100% complete! 💯
|
||||
|
||||
Ready? **NAPREJ!** ⚡🔥
|
||||
|
||||
---
|
||||
|
||||
*Roadmap created: 2025-12-14 15:18*
|
||||
Reference in New Issue
Block a user