okayuScroller/js/spriteProcessor.js

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;