@react-three/drei 9.106.0 → 9.106.2

package/core/useSpriteLoader.js

@@ -18,6 +18,14 @@ const getFirstItem = param => {
     };
   }
 };
+const checkIfFrameIsEmpty = frameData => {
+  for (let i = 3; i < frameData.length; i += 4) {
+    if (frameData[i] !== 0) {
+      return false;
+    }
+  }
+  return true;
+};
 const calculateAspectRatio = (width, height, factor, v) => {
   const adaptedHeight = height * (v.aspect > width / height ? v.width / width : v.height / height);
   const adaptedWidth = width * (v.aspect > width / height ? v.width / width : v.height / height);
@@ -94,9 +102,14 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
         //get size from texture
         const width = _spriteTexture.image.width;
         const height = _spriteTexture.image.height;
-        const frameWidth = width / numberOfFrames;
-        const frameHeight = height;
         totalFrames.current = numberOfFrames;
+        const {
+          rows,
+          columns,
+          frameWidth,
+          frameHeight,
+          emptyFrames
+        } = getRowsAndColumns(_spriteTexture, numberOfFrames);
         spriteDataRef.current = {
           frames: [],
           meta: {
@@ -105,16 +118,23 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
               w: width,
               h: height
             },
+            rows,
+            columns,
+            frameWidth,
+            frameHeight,
             scale: '1'
           }
         };
-        if (parseInt(frameWidth.toString(), 10) === frameWidth) {
-          // if it fits
-          for (let i = 0; i < numberOfFrames; i++) {
+        for (let row = 0; row < rows; row++) {
+          for (let col = 0; col < columns; col++) {
+            const isExcluded = (emptyFrames !== null && emptyFrames !== void 0 ? emptyFrames : []).some(coord => coord.row === row && coord.col === col);
+            if (isExcluded) {
+              continue;
+            }
             spriteDataRef.current.frames.push({
               frame: {
-                x: i * frameWidth,
-                y: 0,
+                x: col * frameWidth,
+                y: row * frameHeight,
                 w: frameWidth,
                 h: frameHeight
               },
@@ -128,7 +148,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
               },
               sourceSize: {
                 w: frameWidth,
-                h: height
+                h: frameHeight
               }
             });
           }
@@ -157,6 +177,59 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
       aspect: aspect
     });
   };
+  const getRowsAndColumns = (texture, totalFrames) => {
+    if (texture.image) {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      canvas.width = texture.image.width;
+      canvas.height = texture.image.height;
+      ctx.drawImage(texture.image, 0, 0);
+      const width = texture.image.width;
+      const height = texture.image.height;
+
+      // Calculate rows and columns based on the number of frames and image dimensions
+      const cols = Math.round(Math.sqrt(totalFrames * (width / height)));
+      const rows = Math.round(totalFrames / cols);
+      const frameWidth = width / cols;
+      const frameHeight = height / rows;
+      const emptyFrames = [];
+      for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+          const frameIndex = row * cols + col;
+          if (frameIndex >= totalFrames) {
+            emptyFrames.push({
+              row,
+              col
+            });
+            continue;
+          }
+          const frameData = ctx.getImageData(col * frameWidth, row * frameHeight, frameWidth, frameHeight).data;
+          const isEmpty = checkIfFrameIsEmpty(frameData);
+          if (isEmpty) {
+            emptyFrames.push({
+              row,
+              col
+            });
+          }
+        }
+      }
+      return {
+        rows,
+        columns: cols,
+        frameWidth,
+        frameHeight,
+        emptyFrames
+      };
+    } else {
+      return {
+        rows: 0,
+        columns: 0,
+        frameWidth: 0,
+        frameHeight: 0,
+        emptyFrames: []
+      };
+    }
+  };
 
   // for frame based JSON Hash sprite data
   const parseFrames = () => {
@@ -240,4 +313,4 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
 useSpriteLoader.preload = url => useLoader.preload(TextureLoader, url);
 useSpriteLoader.clear = input => useLoader.clear(TextureLoader, input);
 
-export { calculateAspectRatio, getFirstItem, useSpriteLoader };
+export { calculateAspectRatio, checkIfFrameIsEmpty, getFirstItem, useSpriteLoader };