class SpriteProcessor { constructor() { this.processedSprites = new Map(); } processSpriteSheet(originalImage, keyColor = '#00ffff') { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = originalImage.width; canvas.height = originalImage.height; // Draw original image ctx.drawImage(originalImage, 0, 0); // Get image data const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // Convert key colors to RGB const keyR = parseInt(keyColor.slice(1, 3), 16); const keyG = parseInt(keyColor.slice(3, 5), 16); const keyB = parseInt(keyColor.slice(5, 7), 16); // Convert spritesheet background color to RGB const bgColor = '#a0a7ca'; const bgR = parseInt(bgColor.slice(1, 3), 16); const bgG = parseInt(bgColor.slice(3, 5), 16); const bgB = parseInt(bgColor.slice(5, 7), 16); // Make key colors transparent for (let i = 0; i < data.length; i += 4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; // Check if pixel matches key color (with small tolerance) if (Math.abs(r - keyR) < 10 && Math.abs(g - keyG) < 10 && Math.abs(b - keyB) < 10) { data[i + 3] = 0; // Set alpha to 0 (transparent) } // Check if pixel matches spritesheet background color (with small tolerance) else if (Math.abs(r - bgR) < 10 && Math.abs(g - bgG) < 10 && Math.abs(b - bgB) < 10) { data[i + 3] = 0; // Set alpha to 0 (transparent) } } // Put processed image back ctx.putImageData(imageData, 0, 0); // Create new image with transparency const processedImage = new Image(); processedImage.src = canvas.toDataURL('image/png'); return processedImage; } } // Export for use in game window.SpriteProcessor = SpriteProcessor;