posodobitev

src/scenes/PreloadScene.js

@@ -78,12 +78,44 @@ class PreloadScene extends Phaser.Scene {
         this.load.image('fence_full', 'assets/fence_full.png');
         this.load.image('wall_damaged', 'assets/wall_damaged.png');
 
+
         // Voxel stil asset-i (2.5D)
         this.load.image('tree_voxel_green', 'assets/tree_voxel_green.png');
         this.load.image('tree_voxel_blue', 'assets/tree_voxel_blue.png');
         this.load.image('tree_voxel_dead', 'assets/tree_voxel_dead.png');
         this.load.image('rock_voxel', 'assets/rock_voxel.png');
 
+        // NEW ISOMETRIC 2.5D ASSETS (Stardew Valley style)
+        // Buildings & Structures
+        this.load.image('barn_isometric', 'assets/barn_isometric.png');
+        this.load.image('farmhouse_isometric', 'assets/farmhouse_isometric.png');
+        this.load.image('fence_isometric', 'assets/fence_isometric.png');
+        this.load.image('bridge_isometric', 'assets/bridge_isometric.png');
+        this.load.image('blacksmith_workshop', 'assets/blacksmith_workshop.png');
+        this.load.image('ruins_building', 'assets/ruins_building.png');
+
+        // Farm & Crops
+        this.load.image('soil_tilled', 'assets/soil_tilled.png');
+        this.load.image('carrots_stages', 'assets/carrots_stages.png');
+        this.load.image('flowers_pink_isometric', 'assets/flowers_pink_isometric.png');
+
+        // Characters - SPRITESHEETS (6 frames @ 64x64 each)
+        this.load.spritesheet('player_dreadlocks', 'assets/player_dreadlocks.png', {
+            frameWidth: 64,
+            frameHeight: 64
+        });
+        this.load.spritesheet('zombie_worker', 'assets/zombie_worker.png', {
+            frameWidth: 64,
+            frameHeight: 64
+        });
+        this.load.image('grave_zombie', 'assets/grave_zombie.png');
+
+        // Fence pieces (separate parts)
+        this.load.image('fence_post', 'assets/fence_post.png');
+        this.load.image('fence_horizontal', 'assets/fence_horizontal.png');
+        this.load.image('fence_vertical', 'assets/fence_vertical.png');
+        this.load.image('fence_corner', 'assets/fence_corner.png');
+
         // Wait for load completion then process transparency
         this.load.once('complete', () => {
             this.processAllTransparency();
@@ -98,6 +130,7 @@ class PreloadScene extends Phaser.Scene {
     createAnimations() {
         if (this.anims.exists('player_walk_anim')) return;
 
+        // Old animations
         this.anims.create({
             key: 'player_walk_anim',
             frames: this.anims.generateFrameNumbers('player_walk', { start: 0, end: 5 }),
@@ -111,6 +144,22 @@ class PreloadScene extends Phaser.Scene {
             frameRate: 8,
             repeat: -1
         });
+
+        // NEW: Isometric character animations (6 frames)
+        this.anims.create({
+            key: 'player_dreadlocks_walk',
+            frames: this.anims.generateFrameNumbers('player_dreadlocks', { start: 0, end: 5 }),
+            frameRate: 10,
+            repeat: -1
+        });
+
+        this.anims.create({
+            key: 'zombie_worker_walk',
+            frames: this.anims.generateFrameNumbers('zombie_worker', { start: 0, end: 5 }),
+            frameRate: 8,
+            repeat: -1
+        });
+
         console.log('🎞️ Animations created!');
     }
 
@@ -162,13 +211,58 @@ class PreloadScene extends Phaser.Scene {
             'tree_voxel_green',
             'tree_voxel_blue',
             'tree_voxel_dead',
-            'rock_voxel'
+            'rock_voxel',
+
+            // NEW ISOMETRIC 2.5D ASSETS - Remove transparency
+            'barn_isometric',
+            'farmhouse_isometric',
+            'fence_isometric',
+            'bridge_isometric',
+            'blacksmith_workshop',
+            'ruins_building',
+            'soil_tilled',
+            'carrots_stages',
+            'flowers_pink_isometric',
+            // NOTE: player_dreadlocks and zombie_worker are SPRITESHEETS - don't process!
+            'grave_zombie',
+
+            // NEW FENCE PIECES
+            'fence_post',
+            'fence_horizontal',
+            'fence_vertical',
+            'fence_corner',
+
+            // ANIMALS & NPCs
+            'chicken',
+            'cow',
+            'cow_mutant',
+            'elf',
+            'troll',
+            'villager',
+            'npc_merchant',
+            'npc_zombie',
+
+            // STRUCTURES
+            'structure_house',
+            'wall_damaged',
+            'city_wall',
+
+            // MISC OBJECTS
+            'wheat_sprite',
+            'grass_sprite',
+            'leaf_sprite',
+            'stone_sprite'
         ];
 
         spritesToProcess.forEach(spriteKey => {
             this.processSpriteTransparency(spriteKey);
         });
 
+        // ULTRA AGGRESSIVE: Fence Post only
+        if (this.textures.exists('fence_post')) {
+            this.ultraRemoveBackground('fence_post');
+        }
+
         console.log('✅ All sprites transparency processed!');
     }
 
@@ -191,21 +285,45 @@ class PreloadScene extends Phaser.Scene {
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
         const data = imageData.data;
 
-        // Remove backgrounds
+        // Remove backgrounds - IMPROVED CHECKBOARD DETECTION
         for (let i = 0; i < data.length; i += 4) {
             const r = data[i];
             const g = data[i + 1];
             const b = data[i + 2];
 
-            // Remove white/light gray backgrounds (Checkerboard & White)
-            // Target grays: R,G,B should be similar and high value.
-            if (r > 150 && g > 150 && b > 150) {
-                // Check if it's grayscale (checkerboard is usually perfect gray)
-                if (Math.abs(r - g) < 30 && Math.abs(g - b) < 30) {
-                    data[i + 3] = 0;
+            // Remove ALL grayscale colors (checkboard pattern)
+            // Checkboard has both light (204,204,204) and dark (153,153,153) squares
+            const isGrayscale = Math.abs(r - g) < 15 && Math.abs(g - b) < 15 && Math.abs(r - b) < 15;
+
+            if (isGrayscale) {
+                // ULTRA-AGGRESSIVE: Remove ALL grays from 100-240
+                const isAnyGray = r >= 100 && r <= 240;
+
+                if (isAnyGray) {
+                    data[i + 3] = 0; // Make transparent
                 }
             }
 
+            // AGGRESSIVE: Remove ALL light backgrounds (AI-generated sprites)
+            const brightness = (r + g + b) / 3;
+            const isVeryLight = brightness > 170 && Math.abs(r - g) < 50 && Math.abs(g - b) < 50;
+
+            if (isVeryLight) {
+                data[i + 3] = 0; // Make transparent
+            }
+
+            // ULTRA AGGRESSIVE: Remove PURE WHITE backgrounds
+            const isWhite = r > 240 && g > 240 && b > 240;
+            if (isWhite) {
+                data[i + 3] = 0; // Make transparent
+            }
+
+            // ULTRA AGGRESSIVE: Remove OFF-WHITE backgrounds (cream, beige)
+            const isOffWhite = brightness > 230 && Math.abs(r - g) < 20 && Math.abs(g - b) < 20;
+            if (isOffWhite) {
+                data[i + 3] = 0; // Make transparent
+            }
+
             // Special: Remove brown/tan backgrounds (merchant sprite)
             if (spriteKey === 'merchant_sprite') {
                 // Brown detection: R > G > B, warm tones
@@ -360,4 +478,42 @@ class PreloadScene extends Phaser.Scene {
             startGame();
         });
     }
+
+    ultraRemoveBackground(spriteKey) {
+        if (!this.textures.exists(spriteKey)) return;
+
+        const texture = this.textures.get(spriteKey);
+        const source = texture.getSourceImage();
+
+        const canvas = document.createElement('canvas');
+        canvas.width = source.width;
+        canvas.height = source.height;
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+        ctx.drawImage(source, 0, 0);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+
+        // Remove EVERYTHING except brown wood colors
+        for (let i = 0; i < data.length; i += 4) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+
+            // Keep only brown/wood colors: R > G > B and R is dominant
+            const isBrown = r > g && g > b && r > 80 && r < 200;
+
+            if (!isBrown) {
+                data[i + 3] = 0; // Make transparent
+            }
+        }
+
+        ctx.putImageData(imageData, 0, 0);
+
+        // Remove old texture and create new one from canvas
+        this.textures.remove(spriteKey);
+        this.textures.addCanvas(spriteKey, canvas);
+
+        console.log(`🔥 ULTRA removed background from ${spriteKey}`);
+    }
 }