carakter

src/scenes/PreloadScene.js

@@ -131,18 +131,24 @@ class PreloadScene extends Phaser.Scene {
 
         // Wait for load completion then process transparency
         this.load.once('complete', () => {
+            // NOTE: Do NOT process spritesheets - they already have proper alpha!
+            // Processing destroys frame definitions
+
             this.processAllTransparency();
             this.createAnimations();
         });
 
         // New Processed Animations (Standardized 64x64 strips)
-        this.load.spritesheet('zombie_walk', 'assets/sprites/zombie_walk_strip.png', { frameWidth: 64, frameHeight: 64 });
+        // NOTE: zombie_walk_strip.png is missing - commented out for now
+        // this.load.spritesheet('zombie_walk', 'assets/sprites/zombie_walk_strip.png', { frameWidth: 64, frameHeight: 64 });
 
-        // KRVAVA ŽETEV - New Player Sprite (Protagonist with dreadlocks)
-        this.load.spritesheet('player_protagonist', 'assets/sprites/player_walk_animations.png', {
-            frameWidth: 128,  // Adjust based on actual sprite size
-            frameHeight: 128
+        // KRVAVA ŽETEV - CLEAN Player Sprite (100% Clean Transparency - No Checkerboard!)
+        this.load.spritesheet('player_protagonist', 'assets/sprites/player_walking_clean.png', {
+            frameWidth: 256,  // 256x256 per frame, 4x4 grid = 16 frames (1024x1024 total)
+            frameHeight: 256
         });
+
+
     }
 
     createAnimations() {
@@ -163,21 +169,64 @@ class PreloadScene extends Phaser.Scene {
             repeat: -1
         });
 
-        // KRVAVA ŽETEV: Protagonist animations
+        // KRVAVA ŽETEV: Protagonist 4-directional walking animations
+        // Row 1: DOWN (frames 0-3)
         this.anims.create({
-            key: 'protagonist_walk',
-            frames: this.anims.generateFrameNumbers('player_protagonist', { start: 0, end: 7 }),
-            frameRate: 10,
+            key: 'protagonist_walk_down',
+            frames: this.anims.generateFrameNumbers('player_protagonist', { start: 0, end: 3 }),
+            frameRate: 8,
             repeat: -1
         });
 
+        // Row 2: LEFT (frames 4-7)
         this.anims.create({
-            key: 'protagonist_idle',
-            frames: this.anims.generateFrameNumbers('player_protagonist', { start: 8, end: 9 }),
-            frameRate: 2,
+            key: 'protagonist_walk_left',
+            frames: this.anims.generateFrameNumbers('player_protagonist', { start: 4, end: 7 }),
+            frameRate: 8,
             repeat: -1
         });
 
+        // Row 3: RIGHT (frames 8-11)
+        this.anims.create({
+            key: 'protagonist_walk_right',
+            frames: this.anims.generateFrameNumbers('player_protagonist', { start: 8, end: 11 }),
+            frameRate: 8,
+            repeat: -1
+        });
+
+        // Row 4: UP (frames 12-15)
+        this.anims.create({
+            key: 'protagonist_walk_up',
+            frames: this.anims.generateFrameNumbers('player_protagonist', { start: 12, end: 15 }),
+            frameRate: 8,
+            repeat: -1
+        });
+
+        // IDLE: Use first frame of each direction
+        this.anims.create({
+            key: 'protagonist_idle_down',
+            frames: [{ key: 'player_protagonist', frame: 0 }],
+            frameRate: 1
+        });
+
+        this.anims.create({
+            key: 'protagonist_idle_left',
+            frames: [{ key: 'player_protagonist', frame: 4 }],
+            frameRate: 1
+        });
+
+        this.anims.create({
+            key: 'protagonist_idle_right',
+            frames: [{ key: 'player_protagonist', frame: 8 }],
+            frameRate: 1
+        });
+
+        this.anims.create({
+            key: 'protagonist_idle_up',
+            frames: [{ key: 'player_protagonist', frame: 12 }],
+            frameRate: 1
+        });
+
         console.log('🎞️ Animations created!');
     }
 
@@ -470,6 +519,83 @@ class PreloadScene extends Phaser.Scene {
         });
     }
 
+    processPlayerSpritesheet() {
+        const spriteKey = 'player_protagonist';
+
+        if (!this.textures.exists(spriteKey)) {
+            console.warn('⚠️ Player protagonist texture not found!');
+            return;
+        }
+
+        console.log('🎨 Processing player spritesheet transparency...');
+
+        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;
+
+        // ULTRA AGGRESSIVE: Remove ALL checkerboard patterns and gray backgrounds
+        for (let i = 0; i < data.length; i += 4) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            const a = data[i + 3];
+
+            // Skip if already transparent
+            if (a === 0) continue;
+
+            // 1. Remove PERFECT GRAY (checkerboard pattern: RGB 204,204,204 and 153,153,153)
+            if (r === g && g === b) {
+                if (r === 204 || r === 153 || r === 192 || r === 128 || (r >= 180 && r <= 210)) {
+                    data[i + 3] = 0;
+                    continue;
+                }
+            }
+
+            // 2. Remove ANY grayscale (R≈G≈B within 15 units)
+            const isGrayscale = Math.abs(r - g) < 15 && Math.abs(g - b) < 15 && Math.abs(r - b) < 15;
+            const brightness = (r + g + b) / 3;
+
+            if (isGrayscale && brightness > 100) {
+                data[i + 3] = 0;
+                continue;
+            }
+
+            // 3. Remove LIGHT backgrounds (brightness > 150)
+            if (brightness > 150) {
+                data[i + 3] = 0;
+                continue;
+            }
+
+            // 4. Keep ONLY colored pixels (character skin, clothing, hair)
+            // Character has: blue hoodie, brown pants, brown skin
+            const maxChannel = Math.max(r, g, b);
+            const minChannel = Math.min(r, g, b);
+            const saturation = maxChannel === 0 ? 0 : (maxChannel - minChannel) / maxChannel;
+
+            // If low saturation AND bright = background
+            if (saturation < 0.15 && brightness > 80) {
+                data[i + 3] = 0;
+                continue;
+            }
+        }
+
+        ctx.putImageData(imageData, 0, 0);
+
+        // Replace texture
+        this.textures.remove(spriteKey);
+        this.textures.addCanvas(spriteKey, canvas);
+
+        console.log('✅ Player spritesheet transparency processed!');
+    }
+
     ultraRemoveBackground(spriteKey) {
         if (!this.textures.exists(spriteKey)) return;