@@ -63,7 +63,7 @@
Preview ({{ previewSprites.length }} sprites)
-
+
![Sprite preview]()
@@ -93,7 +93,7 @@
diff --git a/src/workers/irregularSpriteDetection.worker.ts b/src/workers/irregularSpriteDetection.worker.ts
new file mode 100644
index 0000000..b9129ae
--- /dev/null
+++ b/src/workers/irregularSpriteDetection.worker.ts
@@ -0,0 +1,378 @@
+interface SpriteRegion {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ pixelCount: number;
+}
+
+interface WorkerMessage {
+ type: 'detectIrregularSprites';
+ imageData: ImageData;
+ sensitivity: number;
+ maxSize?: number;
+}
+
+interface WorkerResponse {
+ type: 'spritesDetected';
+ sprites: SpriteRegion[];
+ backgroundColor: [number, number, number, number];
+}
+
+// Pre-allocate arrays for better performance
+let maskBuffer: Uint8Array;
+let visitedBuffer: Uint8Array;
+let stackBuffer: Int32Array;
+
+self.onmessage = function (e: MessageEvent) {
+ const { type, imageData, sensitivity, maxSize = 2048 } = e.data;
+
+ if (type === 'detectIrregularSprites') {
+ const { sprites, backgroundColor } = detectIrregularSprites(imageData, sensitivity, maxSize);
+
+ const response: WorkerResponse = {
+ type: 'spritesDetected',
+ sprites,
+ backgroundColor,
+ };
+
+ self.postMessage(response);
+ }
+};
+
+function detectIrregularSprites(imageData: ImageData, sensitivity: number, maxSize: number): { sprites: SpriteRegion[]; backgroundColor: [number, number, number, number] } {
+ const { data, width, height } = imageData;
+
+ // Downsample for very large images
+ const shouldDownsample = width > maxSize || height > maxSize;
+ let processedData: Uint8ClampedArray;
+ let processedWidth: number;
+ let processedHeight: number;
+ let scale = 1;
+
+ if (shouldDownsample) {
+ scale = Math.min(maxSize / width, maxSize / height);
+ processedWidth = Math.floor(width * scale);
+ processedHeight = Math.floor(height * scale);
+ processedData = downsampleImageData(data, width, height, processedWidth, processedHeight);
+ } else {
+ processedData = data;
+ processedWidth = width;
+ processedHeight = height;
+ }
+
+ // Fast background detection using histogram
+ const backgroundColor = fastBackgroundDetection(processedData, processedWidth, processedHeight);
+
+ // Create optimized mask
+ const mask = createOptimizedMask(processedData, processedWidth, processedHeight, backgroundColor, sensitivity);
+
+ // Clean up mask with morphological operations
+ const cleanedMask = cleanUpMask(mask, processedWidth, processedHeight);
+
+ // Find connected components with optimized flood fill
+ const sprites = findOptimizedConnectedComponents(cleanedMask, processedWidth, processedHeight);
+
+ // Filter noise
+ const minSpriteSize = Math.max(4, Math.floor(Math.min(processedWidth, processedHeight) / 100));
+ const filteredSprites = sprites.filter(sprite => sprite.pixelCount >= minSpriteSize);
+
+ // Scale results back up if downsampled
+ const finalSprites = shouldDownsample
+ ? filteredSprites.map(sprite => ({
+ x: Math.floor(sprite.x / scale),
+ y: Math.floor(sprite.y / scale),
+ width: Math.ceil(sprite.width / scale),
+ height: Math.ceil(sprite.height / scale),
+ pixelCount: sprite.pixelCount,
+ }))
+ : filteredSprites;
+
+ // Convert background color back to original format
+ const finalBackgroundColor: [number, number, number, number] = [backgroundColor[0], backgroundColor[1], backgroundColor[2], backgroundColor[3]];
+
+ return {
+ sprites: finalSprites,
+ backgroundColor: finalBackgroundColor,
+ };
+}
+
+function downsampleImageData(data: Uint8ClampedArray, width: number, height: number, newWidth: number, newHeight: number): Uint8ClampedArray {
+ const result = new Uint8ClampedArray(newWidth * newHeight * 4);
+ const scaleX = width / newWidth;
+ const scaleY = height / newHeight;
+
+ for (let y = 0; y < newHeight; y++) {
+ for (let x = 0; x < newWidth; x++) {
+ const srcX = Math.floor(x * scaleX);
+ const srcY = Math.floor(y * scaleY);
+ const srcIdx = (srcY * width + srcX) * 4;
+ const dstIdx = (y * newWidth + x) * 4;
+
+ result[dstIdx] = data[srcIdx];
+ result[dstIdx + 1] = data[srcIdx + 1];
+ result[dstIdx + 2] = data[srcIdx + 2];
+ result[dstIdx + 3] = data[srcIdx + 3];
+ }
+ }
+
+ return result;
+}
+
+function fastBackgroundDetection(data: Uint8ClampedArray, width: number, height: number): Uint32Array {
+ // Enhanced background detection focusing on edges and corners
+ const colorCounts = new Map();
+
+ // Sample from corners (most likely to be background)
+ const cornerSamples = [
+ [0, 0],
+ [width - 1, 0],
+ [0, height - 1],
+ [width - 1, height - 1],
+ ];
+
+ // Sample from edges (also likely background)
+ const edgeSamples: [number, number][] = [];
+ const edgeStep = Math.max(1, Math.floor(Math.min(width, height) / 20));
+
+ // Top and bottom edges
+ for (let x = 0; x < width; x += edgeStep) {
+ edgeSamples.push([x, 0]);
+ edgeSamples.push([x, height - 1]);
+ }
+
+ // Left and right edges
+ for (let y = 0; y < height; y += edgeStep) {
+ edgeSamples.push([0, y]);
+ edgeSamples.push([width - 1, y]);
+ }
+
+ // Collect all samples
+ const allSamples = [...cornerSamples, ...edgeSamples];
+
+ // Count colors with tolerance grouping
+ const tolerance = 15;
+
+ for (const [x, y] of allSamples) {
+ const idx = (y * width + x) * 4;
+ const r = data[idx];
+ const g = data[idx + 1];
+ const b = data[idx + 2];
+ const a = data[idx + 3];
+
+ // Find existing similar color or create new entry
+ let matched = false;
+ for (const [colorKey, count] of colorCounts.entries()) {
+ const [existingR, existingG, existingB, existingA] = colorKey.split(',').map(Number);
+
+ if (Math.abs(r - existingR) <= tolerance && Math.abs(g - existingG) <= tolerance && Math.abs(b - existingB) <= tolerance && Math.abs(a - existingA) <= tolerance) {
+ colorCounts.set(colorKey, count + 1);
+ matched = true;
+ break;
+ }
+ }
+
+ if (!matched) {
+ const colorKey = `${r},${g},${b},${a}`;
+ colorCounts.set(colorKey, 1);
+ }
+ }
+
+ // Find most common color
+ let maxCount = 0;
+ let backgroundColor = [0, 0, 0, 0];
+
+ for (const [colorKey, count] of colorCounts.entries()) {
+ if (count > maxCount) {
+ maxCount = count;
+ backgroundColor = colorKey.split(',').map(Number);
+ }
+ }
+
+ return new Uint32Array(backgroundColor);
+}
+
+function createOptimizedMask(data: Uint8ClampedArray, width: number, height: number, backgroundColor: Uint32Array, sensitivity: number): Uint8Array {
+ const size = width * height;
+
+ // Reuse buffer if possible
+ if (!maskBuffer || maskBuffer.length < size) {
+ maskBuffer = new Uint8Array(size);
+ }
+
+ // Map sensitivity (1-100) to more aggressive thresholds
+ // Higher sensitivity = stricter background matching (lower tolerance)
+ const colorTolerance = Math.round(50 - sensitivity * 0.45); // 50 down to 5
+ const alphaTolerance = Math.round(40 - sensitivity * 0.35); // 40 down to 5
+
+ const [bgR, bgG, bgB, bgA] = backgroundColor;
+
+ let idx = 0;
+ for (let i = 0; i < size; i++) {
+ const r = data[idx];
+ const g = data[idx + 1];
+ const b = data[idx + 2];
+ const a = data[idx + 3];
+
+ // Handle fully transparent pixels (common background case)
+ if (a < 10) {
+ maskBuffer[i] = 0; // Treat as background
+ idx += 4;
+ continue;
+ }
+
+ // Calculate color difference using Euclidean distance for better accuracy
+ const rDiff = r - bgR;
+ const gDiff = g - bgG;
+ const bDiff = b - bgB;
+ const aDiff = a - bgA;
+
+ const colorDistance = Math.sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff);
+ const alphaDistance = Math.abs(aDiff);
+
+ // Pixel is foreground if it's significantly different from background
+ const isBackground = colorDistance <= colorTolerance && alphaDistance <= alphaTolerance;
+ maskBuffer[i] = isBackground ? 0 : 1;
+
+ idx += 4;
+ }
+
+ return maskBuffer;
+}
+
+function cleanUpMask(mask: Uint8Array, width: number, height: number): Uint8Array {
+ // Simple morphological closing to fill small gaps in sprites
+ // and opening to remove small noise
+
+ const cleaned = new Uint8Array(mask.length);
+
+ // Erosion followed by dilation (opening) to remove small noise
+ // Then dilation followed by erosion (closing) to fill gaps
+
+ // Simple 3x3 kernel operations
+ for (let y = 1; y < height - 1; y++) {
+ for (let x = 1; x < width - 1; x++) {
+ const idx = y * width + x;
+
+ // Count non-zero neighbors in 3x3 area
+ let neighbors = 0;
+ for (let dy = -1; dy <= 1; dy++) {
+ for (let dx = -1; dx <= 1; dx++) {
+ const nIdx = (y + dy) * width + (x + dx);
+ if (mask[nIdx]) neighbors++;
+ }
+ }
+
+ // Use majority rule for cleaning
+ // If more than half the neighbors are foreground, make this foreground
+ cleaned[idx] = neighbors >= 5 ? 1 : 0;
+ }
+ }
+
+ // Copy borders as-is
+ for (let x = 0; x < width; x++) {
+ cleaned[x] = mask[x]; // Top row
+ cleaned[(height - 1) * width + x] = mask[(height - 1) * width + x]; // Bottom row
+ }
+ for (let y = 0; y < height; y++) {
+ cleaned[y * width] = mask[y * width]; // Left column
+ cleaned[y * width + width - 1] = mask[y * width + width - 1]; // Right column
+ }
+
+ return cleaned;
+}
+
+function findOptimizedConnectedComponents(mask: Uint8Array, width: number, height: number): SpriteRegion[] {
+ const size = width * height;
+
+ // Reuse buffers
+ if (!visitedBuffer || visitedBuffer.length < size) {
+ visitedBuffer = new Uint8Array(size);
+ }
+ if (!stackBuffer || stackBuffer.length < size * 2) {
+ stackBuffer = new Int32Array(size * 2);
+ }
+
+ // Clear visited array
+ visitedBuffer.fill(0);
+
+ const sprites: SpriteRegion[] = [];
+
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ const idx = y * width + x;
+
+ if (mask[idx] && !visitedBuffer[idx]) {
+ const sprite = optimizedFloodFill(mask, visitedBuffer, x, y, width, height);
+ if (sprite) {
+ sprites.push(sprite);
+ }
+ }
+ }
+ }
+
+ return sprites;
+}
+
+function optimizedFloodFill(mask: Uint8Array, visited: Uint8Array, startX: number, startY: number, width: number, height: number): SpriteRegion | null {
+ let stackTop = 0;
+ stackBuffer[stackTop++] = startX;
+ stackBuffer[stackTop++] = startY;
+
+ let minX = startX;
+ let minY = startY;
+ let maxX = startX;
+ let maxY = startY;
+ let pixelCount = 0;
+
+ while (stackTop > 0) {
+ const y = stackBuffer[--stackTop];
+ const x = stackBuffer[--stackTop];
+ const idx = y * width + x;
+
+ if (x < 0 || x >= width || y < 0 || y >= height || visited[idx] || !mask[idx]) {
+ continue;
+ }
+
+ visited[idx] = 1;
+ pixelCount++;
+
+ // Update bounding box
+ if (x < minX) minX = x;
+ if (y < minY) minY = y;
+ if (x > maxX) maxX = x;
+ if (y > maxY) maxY = y;
+
+ // Add neighbors (check bounds to avoid stack overflow)
+ if (x + 1 < width && !visited[idx + 1] && mask[idx + 1]) {
+ stackBuffer[stackTop++] = x + 1;
+ stackBuffer[stackTop++] = y;
+ }
+ if (x - 1 >= 0 && !visited[idx - 1] && mask[idx - 1]) {
+ stackBuffer[stackTop++] = x - 1;
+ stackBuffer[stackTop++] = y;
+ }
+ if (y + 1 < height && !visited[idx + width] && mask[idx + width]) {
+ stackBuffer[stackTop++] = x;
+ stackBuffer[stackTop++] = y + 1;
+ }
+ if (y - 1 >= 0 && !visited[idx - width] && mask[idx - width]) {
+ stackBuffer[stackTop++] = x;
+ stackBuffer[stackTop++] = y - 1;
+ }
+ }
+
+ if (pixelCount === 0) return null;
+
+ // Add padding
+ const padding = 1;
+ return {
+ x: Math.max(0, minX - padding),
+ y: Math.max(0, minY - padding),
+ width: Math.min(width - Math.max(0, minX - padding), maxX - minX + 1 + 2 * padding),
+ height: Math.min(height - Math.max(0, minY - padding), maxY - minY + 1 + 2 * padding),
+ pixelCount,
+ };
+}
+
+export {};