// Preload Scene - Nalaganje assetov class PreloadScene extends Phaser.Scene { constructor() { super({ key: 'PreloadScene' }); } preload() { console.log('⏳ PreloadScene: Loading assets...'); // Load ALL custom sprites this.load.image('player_sprite', 'assets/player_sprite.png'); this.load.image('zombie_sprite', 'assets/zombie_sprite.png'); this.load.image('merchant_sprite', 'assets/merchant_sprite.png'); this.load.image('house_sprite', 'assets/house_sprite.png'); this.load.image('stone_sprite', 'assets/stone_sprite.png'); this.load.image('tree_sprite', 'assets/tree_sprite.png'); this.load.image('grass_sprite', 'assets/grass_sprite.png'); this.load.image('grass_tile', 'assets/grass_tile.png'); this.load.image('leaf_sprite', 'assets/leaf_sprite.png'); this.load.image('wheat_sprite', 'assets/wheat_sprite.png'); this.load.image('stone_texture', 'assets/stone_texture.png'); // New asset packs this.load.image('objects_pack', 'assets/objects_pack.png'); this.load.image('walls_pack', 'assets/walls_pack.png'); this.load.image('ground_tiles', 'assets/ground_tiles.png'); this.load.image('objects_pack2', 'assets/objects_pack2.png'); this.load.image('trees_vegetation', 'assets/trees_vegetation.png'); // Wait for load completion then process transparency this.load.once('complete', () => { this.processAllTransparency(); this.createAnimations(); }); // New Processed Animations (Standardized 64x64 strips) this.load.spritesheet('player_walk', 'assets/sprites/player_walk_strip.png', { frameWidth: 64, frameHeight: 64 }); this.load.spritesheet('zombie_walk', 'assets/sprites/zombie_walk_strip.png', { frameWidth: 64, frameHeight: 64 }); } createAnimations() { if (this.anims.exists('player_walk_anim')) return; this.anims.create({ key: 'player_walk_anim', frames: this.anims.generateFrameNumbers('player_walk', { start: 0, end: 5 }), frameRate: 12, repeat: -1 }); this.anims.create({ key: 'zombie_walk_anim', frames: this.anims.generateFrameNumbers('zombie_walk', { start: 0, end: 5 }), frameRate: 8, repeat: -1 }); console.log('🎞️ Animations created!'); } processAllTransparency() { // Process ALL sprites to remove backgrounds const spritesToProcess = [ 'player_sprite', 'zombie_sprite', 'merchant_sprite', 'house_sprite', 'stone_sprite', 'tree_sprite', 'grass_sprite', 'leaf_sprite', 'wheat_sprite', 'stone_texture' ]; spritesToProcess.forEach(spriteKey => { this.processSpriteTransparency(spriteKey); }); console.log('✅ All sprites transparency processed!'); } processSpriteTransparency(spriteKey) { if (!this.textures.exists(spriteKey)) return; const texture = this.textures.get(spriteKey); const source = texture.getSourceImage(); // Create canvas to process image const canvas = document.createElement('canvas'); canvas.width = source.width; canvas.height = source.height; const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Draw original image ctx.drawImage(source, 0, 0); // Get image data const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // Remove backgrounds 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 (all sprites) if (r > 200 && g > 200 && b > 200) { data[i + 3] = 0; } // Special: Remove brown/tan backgrounds (merchant sprite) if (spriteKey === 'merchant_sprite') { // Brown detection: R > G > B, warm tones const isBrown = r > 100 && r > g && g > b && (r - b) > 40; if (isBrown) { data[i + 3] = 0; } } } // Put processed data back ctx.putImageData(imageData, 0, 0); // Create new texture from processed canvas this.textures.remove(spriteKey); this.textures.addCanvas(spriteKey, canvas); } create() { console.log('✅ PreloadScene: Assets loaded!'); window.gameState.currentScene = 'PreloadScene'; const width = this.cameras.main.width; const height = this.cameras.main.height; const title = this.add.text(width / 2, height / 2 - 50, 'KRVAVA ŽETEV', { fontFamily: 'Courier New', fontSize: '48px', fill: '#ff0000', fontStyle: 'bold', stroke: '#000000', strokeThickness: 6 }); title.setOrigin(0.5); const subtitle = this.add.text(width / 2, height / 2 + 10, 'Zombie Roots', { fontFamily: 'Courier New', fontSize: '24px', fill: '#00ff41' }); subtitle.setOrigin(0.5); const instruction = this.add.text(width / 2, height / 2 + 60, 'Press SPACE to start', { fontFamily: 'Courier New', fontSize: '16px', fill: '#888888' }); instruction.setOrigin(0.5); this.tweens.add({ targets: instruction, alpha: 0.3, duration: 800, yoyo: true, repeat: -1 }); const startGame = () => { console.log('🎮 Starting StoryScene...'); this.input.keyboard.off('keydown'); this.input.off('pointerdown'); this.scene.start('StoryScene'); }; this.time.delayedCall(3000, () => { startGame(); }); this.input.keyboard.on('keydown', (event) => { if (event.code === 'Space' || event.code === 'Enter') { startGame(); } }); this.input.on('pointerdown', () => { startGame(); }); } }