Expand convex hull bounds by half a pixel per side

Author: adroitwhiz

src/Drawable.js

@@ -503,6 +503,38 @@ class Drawable {
         return this.skin.isTouchingLinear(getLocalPosition(this, vec));
     }
 
+    /**
+     * Initialize a bounding rectangle with a set of convex hull points, taking into account that the points refer to
+     * pixel centers and not pixel edges.
+     * @param {Rectangle} rect The bounding rectangle to initialize
+     * @param {Array<Array.number>} points The convex hull points
+     */
+    _initRectangleFromConvexHullPoints (rect, points) {
+        rect.left = Infinity;
+        rect.right = -Infinity;
+        rect.top = -Infinity;
+        rect.bottom = Infinity;
+
+        // Each convex hull point is the center of a pixel. However, said pixels each have area. We must take into
+        // account the size of the pixels when calculating the bounds. The pixel dimensions depend on the scale and
+        // rotation (as we're treating pixels as squares, which change dimensions when rotated).
+
+        // The "Scratch-space" size of one texture pixel at the drawable's current size.
+        const pixelScale = (this.scale[0] / 100) * (this.skin.size[0] / this.skin._silhouette._width);
+        // Half the size of a rotated pixel, if we assume pixels are shaped like squares.
+        // At 0 degrees of rotation, this will be 0.5. At 45 degrees, it'll be 0.707 (half the square root of 2), etc.
+        const halfPixel = (Math.abs(this._rotationMatrix[0]) + Math.abs(this._rotationMatrix[1])) * 0.5 * pixelScale;
+
+        for (let i = 0; i < points.length; i++) {
+            const x = points[i][0];
+            const y = points[i][1];
+            if ((x - halfPixel) < rect.left) rect.left = x - halfPixel;
+            if ((x + halfPixel) > rect.right) rect.right = x + halfPixel;
+            if ((y + halfPixel) > rect.top) rect.top = y + halfPixel;
+            if ((y - halfPixel) < rect.bottom) rect.bottom = y - halfPixel;
+        }
+    }
+
     /**
      * Get the precise bounds for a Drawable.
      * This function applies the transform matrix to the known convex hull,
@@ -521,7 +553,7 @@ class Drawable {
         const transformedHullPoints = this._getTransformedHullPoints();
         // Search through transformed points to generate box on axes.
         result = result || new Rectangle();
-        result.initFromPointsAABB(transformedHullPoints);
+        this._initRectangleFromConvexHullPoints(result, transformedHullPoints);
         return result;
     }
 
@@ -545,7 +577,7 @@ class Drawable {
         const filteredHullPoints = transformedHullPoints.filter(p => p[1] > maxY - slice);
         // Search through filtered points to generate box on axes.
         result = result || new Rectangle();
-        result.initFromPointsAABB(filteredHullPoints);
+        this._initRectangleFromConvexHullPoints(result, filteredHullPoints);
         return result;
     }
 

src/Rectangle.js

@@ -26,34 +26,6 @@ class Rectangle {
         this.top = top;
     }
 
-    /**
-     * Initialize a Rectangle to the minimum AABB around a set of points.
-     * @param {Array<Array<number>>} points Array of [x, y] points.
-     */
-    initFromPointsAABB (points) {
-        this.left = Infinity;
-        this.right = -Infinity;
-        this.top = -Infinity;
-        this.bottom = Infinity;
-
-        for (let i = 0; i < points.length; i++) {
-            const x = points[i][0];
-            const y = points[i][1];
-            if (x < this.left) {
-                this.left = x;
-            }
-            if (x > this.right) {
-                this.right = x;
-            }
-            if (y > this.top) {
-                this.top = y;
-            }
-            if (y < this.bottom) {
-                this.bottom = y;
-            }
-        }
-    }
-
     /**
      * Initialize a Rectangle to a 1 unit square centered at 0 x 0 transformed
      * by a model matrix.
@@ -123,7 +95,7 @@ class Rectangle {
         this.right = Math.min(this.right, right);
         this.bottom = Math.max(this.bottom, bottom);
         this.top = Math.min(this.top, top);
-        
+
         this.left = Math.min(this.left, right);
         this.right = Math.max(this.right, left);
         this.bottom = Math.min(this.bottom, top);