Session 3: Tree Variety System Complete

TREE VARIETIES IMPLEMENTED:
- Added 5 tree types: Cherry, Oak, Pine, Dead, Apple
- AI-generated PNG sprites with transparent backgrounds
- Random tree selection for natural diversity
- Growth scaling (0.4-0.6x for variety)

 VISUAL IMPROVEMENTS:
- 2.5D depth sorting (Y-position based)
- Proper shadows matching tree size
- Layered rendering for perspective

 TRANSPARENCY FIXES:
- Disabled automatic sprite processing
- User manually removed green screen backgrounds
- Fixed pink/red color preservation
- Trees now render with proper transparency

 TREE DISTRIBUTION:
- Reduced from ~78 to 10 trees (87% reduction)
- Removed corner forest clusters (too crowded)
- Sparse scattered placement across 100x100 map
- Wider spacing (8-15 tiles apart)
- Small tree sizes (0.35-0.7x scale, ~50% reduction)

 TECHNICAL CHANGES:
- PreloadScene: Added tree sprite loading
- PreloadScene: Disabled processAllTransparency()
- Flat2DTerrainSystem: PNG sprite rendering with fallback
- map2d_data.js: Sparse tree generation
- Green removal threshold: g > 180 (preserves pink/red)

 FILES MODIFIED:
- src/scenes/PreloadScene.js
- src/systems/Flat2DTerrainSystem.js
- data/map2d_data.js
- assets/sprites/tree_*.png (5 new sprites)
- docs/DNEVNIK.md (updated with user availability)

Session: 1.5h (23:28-00:48)
Date: 14-15.12.2024

src/scenes/PreloadScene.js

@@ -56,9 +56,12 @@ class PreloadScene extends Phaser.Scene {
         this.load.image('tree_blue_final', 'assets/tree_blue_final.png');
         this.load.image('tree_dead_final', 'assets/tree_dead_final.png');
 
-        // 🌸 CHERRY BLOSSOM TREES (NEW!)
-        this.load.image('cesnjevo_drevo', 'assets/sprites/roza_cesnjevo_drevo.png');
-        this.load.image('cesnja', 'assets/sprites/cesnja_sadje.png');
+        // 🌳 TREE VARIETY SPRITES (GREEN SCREEN!)
+        this.load.image('tree_cherry', 'assets/sprites/tree_cherry.png');
+        this.load.image('tree_oak', 'assets/sprites/tree_oak.png');
+        this.load.image('tree_pine', 'assets/sprites/tree_pine.png');
+        this.load.image('tree_dead', 'assets/sprites/tree_dead.png');
+        this.load.image('tree_apple', 'assets/sprites/tree_apple.png');
 
         // STARDEW VALLEY FOREST TREES (NEW!)
         this.load.image('tree_purple', 'assets/tree_purple.png');
@@ -153,7 +156,9 @@ class PreloadScene extends Phaser.Scene {
             // NOTE: Do NOT process spritesheets - they already have proper alpha!
             // Processing destroys frame definitions
 
-            this.processAllTransparency();
+            // 🚫 DISABLED - Tree sprites already have transparency!
+            // this.processAllTransparency();
+
             this.createAnimations();
         });
 
@@ -345,10 +350,10 @@ class PreloadScene extends Phaser.Scene {
             'wheat_sprite',
             'grass_sprite',
             'leaf_sprite',
-            'stone_sprite',
+            'stone_sprite'
 
-            // 🌸 CHERRY BLOSSOM TREE
-            'cesnjevo_drevo'
+            // 🌳 TREES REMOVED - already have transparent PNG!
+            // (green removal would delete green leaves!)
         ];
 
         spritesToProcess.forEach(spriteKey => {
@@ -360,10 +365,10 @@ class PreloadScene extends Phaser.Scene {
             this.ultraRemoveBackground('fence_post');
         }
 
-        // ULTRA AGGRESSIVE: Cherry Blossom Tree (remove black outlines!)
-        if (this.textures.exists('cesnjevo_drevo')) {
-            this.ultraRemoveBackground('cesnjevo_drevo');
-        }
+        // ULTRA REMOVED - new tree sprites already have transparency!
+        // if (this.textures.exists('cesnjevo_drevo')) {
+        //     this.ultraRemoveBackground('cesnjevo_drevo');
+        // }
 
         console.log('✅ All sprites transparency processed!');
     }
@@ -399,15 +404,16 @@ class PreloadScene extends Phaser.Scene {
 
             const brightness = (r + g + b) / 3;
 
-            // 🟢 NUCLEAR GREEN SCREEN REMOVAL!
-            // Remove ANY pixel where green is even SLIGHTLY dominant
+            // 🟢 GREEN REMOVAL - Only BRIGHT greens!
+            // Pink (255,105,180) has g=105 - MUST KEEP!
+            // Bright green (0,255,0) has g=255 - REMOVE!
             const isGreen = (
-                g > 100 &&  // Even darker greens
-                g > r &&    // Green beats red
-                g > b       // Green beats blue
+                g > 180 &&  // Only very bright green
+                g > r * 1.3 &&  // Green dominates red
+                g > b * 1.3     // Green dominates blue
             );
             if (isGreen) {
-                data[i + 3] = 0; // NUKE IT!
+                data[i + 3] = 0;
                 continue;
             }