minimojs 1.0.0-alpha.15 → 1.0.0-alpha.16

package/dist/internal/PhysicsSystem.js

@@ -37,12 +37,12 @@ export class PhysicsSystem {
         }
     }
     overlap(a, b) {
-        const halfWidthA = a.displayWidth / 2;
-        const halfHeightA = a.displayHeight / 2;
-        const halfWidthB = b.displayWidth / 2;
-        const halfHeightB = b.displayHeight / 2;
-        return (Math.abs(a.renderX - b.renderX) < halfWidthA + halfWidthB &&
-            Math.abs(a.renderY - b.renderY) < halfHeightA + halfHeightB);
+        const halfWidthA = a.bodyDisplayWidth / 2;
+        const halfHeightA = a.bodyDisplayHeight / 2;
+        const halfWidthB = b.bodyDisplayWidth / 2;
+        const halfHeightB = b.bodyDisplayHeight / 2;
+        return (Math.abs(a.bodyCenterX - b.bodyCenterX) < halfWidthA + halfWidthB &&
+            Math.abs(a.bodyCenterY - b.bodyCenterY) < halfHeightA + halfHeightB);
     }
     overlapAny(listA, listB) {
         for (const a of listA) {
@@ -100,12 +100,12 @@ export class PhysicsSystem {
         }
     }
     getCollisionResolution(a, b) {
-        const halfWidthA = a.displayWidth / 2;
-        const halfHeightA = a.displayHeight / 2;
-        const halfWidthB = b.displayWidth / 2;
-        const halfHeightB = b.displayHeight / 2;
-        const dx = b.renderX - a.renderX;
-        const dy = b.renderY - a.renderY;
+        const halfWidthA = a.bodyDisplayWidth / 2;
+        const halfHeightA = a.bodyDisplayHeight / 2;
+        const halfWidthB = b.bodyDisplayWidth / 2;
+        const halfHeightB = b.bodyDisplayHeight / 2;
+        const dx = b.bodyCenterX - a.bodyCenterX;
+        const dy = b.bodyCenterY - a.bodyCenterY;
         const overlapX = halfWidthA + halfWidthB - Math.abs(dx);
         const overlapY = halfHeightA + halfHeightB - Math.abs(dy);
         if (overlapX <= 0 || overlapY <= 0) {

package/dist/internal/RenderSystem.js

@@ -196,6 +196,60 @@ export class RenderSystem {
             ctx.fillText(entry.text, entry.x, entry.y);
             ctx.restore();
         }
+        if (options.debugBodies) {
+            this.drawBodyDebugOverlay(ctx, sorted, options.scrollX, options.scrollY);
+        }
+        if (options.debugInputAreas) {
+            this.drawInputDebugOverlay(ctx, sorted, options.scrollX, options.scrollY);
+        }
+    }
+    drawBodyDebugOverlay(ctx, sprites, scrollX, scrollY) {
+        ctx.save();
+        ctx.setLineDash([6, 4]);
+        ctx.lineWidth = 2;
+        for (const sprite of sprites) {
+            const halfWidth = sprite.bodyDisplayWidth / 2;
+            const halfHeight = sprite.bodyDisplayHeight / 2;
+            const centerX = sprite.ignoreScroll ? sprite.bodyCenterX : sprite.bodyCenterX - scrollX;
+            const centerY = sprite.ignoreScroll ? sprite.bodyCenterY : sprite.bodyCenterY - scrollY;
+            const left = Math.round(centerX - halfWidth) + 0.5;
+            const top = Math.round(centerY - halfHeight) + 0.5;
+            const width = Math.max(1, Math.round(sprite.bodyDisplayWidth) - 1);
+            const height = Math.max(1, Math.round(sprite.bodyDisplayHeight) - 1);
+            const stroke = sprite.isStatic
+                ? 'rgba(0, 217, 255, 0.95)'
+                : 'rgba(255, 77, 109, 0.95)';
+            const fill = sprite.isStatic
+                ? 'rgba(0, 217, 255, 0.12)'
+                : 'rgba(255, 77, 109, 0.12)';
+            ctx.strokeStyle = stroke;
+            ctx.fillStyle = fill;
+            ctx.fillRect(left, top, width, height);
+            ctx.strokeRect(left, top, width, height);
+        }
+        ctx.restore();
+    }
+    drawInputDebugOverlay(ctx, sprites, scrollX, scrollY) {
+        ctx.save();
+        ctx.setLineDash([3, 5]);
+        ctx.lineWidth = 2;
+        for (const sprite of sprites) {
+            const halfWidth = sprite.displayWidth / 2;
+            const halfHeight = sprite.displayHeight / 2;
+            const centerX = sprite.ignoreScroll ? sprite.renderX : sprite.renderX - scrollX;
+            const centerY = sprite.ignoreScroll ? sprite.renderY : sprite.renderY - scrollY;
+            const left = Math.round(centerX - halfWidth) + 0.5;
+            const top = Math.round(centerY - halfHeight) + 0.5;
+            const width = Math.max(1, Math.round(sprite.displayWidth) - 1);
+            const height = Math.max(1, Math.round(sprite.displayHeight) - 1);
+            const stroke = "rgba(255, 196, 0, 0.98)";
+            const fill = "rgba(255, 196, 0, 0.10)";
+            ctx.strokeStyle = stroke;
+            ctx.fillStyle = fill;
+            ctx.fillRect(left, top, width, height);
+            ctx.strokeRect(left, top, width, height);
+        }
+        ctx.restore();
     }
     renderLoadingScreen(options) {
         const ctx = options.context;

package/dist/minimo.d.ts

@@ -252,6 +252,52 @@ export declare abstract class BaseSprite {
      * Effective rendered/collision height in pixels.
      */
     get displayHeight(): number;
+    /**
+     * Optional logical body width used by physics helpers and collision checks.
+     *
+     * When `null` (default), MinimoJS uses the sprite's visual {@link BaseSprite.width}.
+     * When set, this value is scaled by {@link BaseSprite.scale} the same way as the
+     * visual sprite size.
+     */
+    bodyWidth: number | null;
+    /**
+     * Optional logical body height used by physics helpers and collision checks.
+     *
+     * When `null` (default), MinimoJS uses the sprite's visual {@link BaseSprite.height}.
+     * When set, this value is scaled by {@link BaseSprite.scale} the same way as the
+     * visual sprite size.
+     */
+    bodyHeight: number | null;
+    /**
+     * Horizontal body offset, in local sprite pixels before scale is applied.
+     *
+     * Positive values move the collision body to the right of the sprite's rendered center.
+     * Negative values move it to the left.
+     */
+    bodyOffsetX: number;
+    /**
+     * Vertical body offset, in local sprite pixels before scale is applied.
+     *
+     * Positive values move the collision body downward relative to the sprite's
+     * rendered center. Negative values move it upward.
+     */
+    bodyOffsetY: number;
+    /**
+     * Effective collision-body width in pixels after applying {@link BaseSprite.scale}.
+     */
+    get bodyDisplayWidth(): number;
+    /**
+     * Effective collision-body height in pixels after applying {@link BaseSprite.scale}.
+     */
+    get bodyDisplayHeight(): number;
+    /**
+     * Resolved body center X used internally by physics helpers and collision checks.
+     */
+    get bodyCenterX(): number;
+    /**
+     * Resolved body center Y used internally by physics helpers and collision checks.
+     */
+    get bodyCenterY(): number;
     /**
      * CSS text color used when rendering this sprite.
      *
@@ -982,6 +1028,20 @@ export declare class Game {
         from: string;
         to: string;
     } | null;
+    /**
+     * When `true`, MinimoJS draws every sprite's collision body as an overlay.
+     *
+     * This is a runtime debugging aid only. It does not change collisions,
+     * input, rendering order, or physics behavior.
+     */
+    debugBodies: boolean;
+    /**
+     * When `true`, MinimoJS draws every sprite's input area as an overlay.
+     *
+     * This is a runtime debugging aid only. It does not change input behavior,
+     * physics, or rendering.
+     */
+    debugInputAreas: boolean;
     /**
      * Background color for the full web page (`document.body`).
      * Set to any valid CSS color string. Default: `null` (engine leaves page background unchanged).

package/dist/minimo.js

@@ -53,6 +53,36 @@ export class BaseSprite {
         this.scale = 1;
         /** @internal */
         this._renderData = null;
+        /**
+         * Optional logical body width used by physics helpers and collision checks.
+         *
+         * When `null` (default), MinimoJS uses the sprite's visual {@link BaseSprite.width}.
+         * When set, this value is scaled by {@link BaseSprite.scale} the same way as the
+         * visual sprite size.
+         */
+        this.bodyWidth = null;
+        /**
+         * Optional logical body height used by physics helpers and collision checks.
+         *
+         * When `null` (default), MinimoJS uses the sprite's visual {@link BaseSprite.height}.
+         * When set, this value is scaled by {@link BaseSprite.scale} the same way as the
+         * visual sprite size.
+         */
+        this.bodyHeight = null;
+        /**
+         * Horizontal body offset, in local sprite pixels before scale is applied.
+         *
+         * Positive values move the collision body to the right of the sprite's rendered center.
+         * Negative values move it to the left.
+         */
+        this.bodyOffsetX = 0;
+        /**
+         * Vertical body offset, in local sprite pixels before scale is applied.
+         *
+         * Positive values move the collision body downward relative to the sprite's
+         * rendered center. Negative values move it upward.
+         */
+        this.bodyOffsetY = 0;
         /**
          * CSS text color used when rendering this sprite.
          *
@@ -179,6 +209,44 @@ export class BaseSprite {
         const safeScale = Number.isFinite(this.scale) ? this.scale : 1;
         return this.height * Math.max(0, safeScale);
     }
+    /**
+     * Effective collision-body width in pixels after applying {@link BaseSprite.scale}.
+     */
+    get bodyDisplayWidth() {
+        const safeScale = Number.isFinite(this.scale) ? this.scale : 1;
+        const baseWidth = typeof this.bodyWidth === "number" &&
+            Number.isFinite(this.bodyWidth) &&
+            this.bodyWidth > 0
+            ? this.bodyWidth
+            : this.width;
+        return baseWidth * Math.max(0, safeScale);
+    }
+    /**
+     * Effective collision-body height in pixels after applying {@link BaseSprite.scale}.
+     */
+    get bodyDisplayHeight() {
+        const safeScale = Number.isFinite(this.scale) ? this.scale : 1;
+        const baseHeight = typeof this.bodyHeight === "number" &&
+            Number.isFinite(this.bodyHeight) &&
+            this.bodyHeight > 0
+            ? this.bodyHeight
+            : this.height;
+        return baseHeight * Math.max(0, safeScale);
+    }
+    /**
+     * Resolved body center X used internally by physics helpers and collision checks.
+     */
+    get bodyCenterX() {
+        const safeScale = Number.isFinite(this.scale) ? this.scale : 1;
+        return this.renderX + this.bodyOffsetX * Math.max(0, safeScale);
+    }
+    /**
+     * Resolved body center Y used internally by physics helpers and collision checks.
+     */
+    get bodyCenterY() {
+        const safeScale = Number.isFinite(this.scale) ? this.scale : 1;
+        return this.renderY + this.bodyOffsetY * Math.max(0, safeScale);
+    }
     getAnchorOffsetX() {
         return 0;
     }
@@ -1053,6 +1121,20 @@ export class Game {
          * ```
          */
         this.backgroundGradient = null;
+        /**
+         * When `true`, MinimoJS draws every sprite's collision body as an overlay.
+         *
+         * This is a runtime debugging aid only. It does not change collisions,
+         * input, rendering order, or physics behavior.
+         */
+        this.debugBodies = false;
+        /**
+         * When `true`, MinimoJS draws every sprite's input area as an overlay.
+         *
+         * This is a runtime debugging aid only. It does not change input behavior,
+         * physics, or rendering.
+         */
+        this.debugInputAreas = false;
         /**
          * Background color for the full web page (`document.body`).
          * Set to any valid CSS color string. Default: `null` (engine leaves page background unchanged).
@@ -2584,6 +2666,8 @@ export class Game {
             background: this.background,
             backgroundGradient: this.backgroundGradient,
             pageBackground: this.pageBackground,
+            debugBodies: this.debugBodies,
+            debugInputAreas: this.debugInputAreas,
         });
     }
     /** @internal */ _renderTransition() {
@@ -2615,6 +2699,8 @@ export class Game {
             background: this.background,
             backgroundGradient: this.backgroundGradient,
             pageBackground: this.pageBackground,
+            debugBodies: this.debugBodies,
+            debugInputAreas: this.debugInputAreas,
         });
     }
     /** @internal */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minimojs",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.16",
   "description": "MinimoJS v1 — ultra-minimal, flat, deterministic 2D web game engine. Emoji-only sprites, rAF loop, TypeScript-first, LLM-friendly.",
   "type": "module",
   "main": "dist/minimo.js",