minimojs 1.0.0-alpha.16 → 1.0.0-alpha.18

package/README.md

@@ -40,17 +40,35 @@ npm install minimojs
 ## Quick Start
 
 ```ts
-import { Game, Sprite, type IScene } from "minimojs";
+import { DrawSprite, Game, Sprite, type IScene } from "minimojs";
 
 const game = new Game(720, 1280);
 game.gravityY = 980;
 
+class MeterSprite extends DrawSprite {
+  public value = 0.5;
+
+  constructor(x: number, y: number) {
+    super(160, 28, x, y);
+  }
+
+  redraw(ctx: CanvasRenderingContext2D) {
+    ctx.fillStyle = "#1a2236";
+    ctx.fillRect(0, 0, this.width, this.height);
+    ctx.fillStyle = "#7ce7ff";
+    ctx.fillRect(0, 0, this.width * this.value, this.height);
+  }
+}
+
 class DemoScene implements IScene {
   private player: Sprite | null = null;
+  private meter: MeterSprite | null = null;
 
   onCreate() {
     this.player = game.add(new Sprite("🐢", 360, 640, 48));
     this.player.gravityScale = 1;
+    this.meter = game.add(new MeterSprite(360, 80));
+    this.meter.ignoreScroll = true;
   }
 
   onUpdate(dt: number) {
@@ -61,6 +79,7 @@ class DemoScene implements IScene {
     else this.player.vx = 0;
 
     if (game.isKeyPressed(" ")) this.player.vy = -600;
+    if (this.meter) this.meter.value = Math.abs(this.player.vx) / 200;
     game.drawText("MinimoJS", 10, 10, 16);
   }
 }
@@ -80,6 +99,8 @@ Note: `drawText()` uses `"Press Start 2P", monospace`. Load the font in your HTM
 - `examples/background-desert/`
 - `examples/scene-lab/`
 - `examples/image-sprite-sad-plush/`
+- `examples/draw-sprite/`
+- `examples/pseudo-3d-racer/`
 - `examples/animations/`
 
 Run locally from the `minimojs` directory:

package/dist/internal/AnimationSystem.js

@@ -1,12 +1,19 @@
 /** @internal */
 export class AnimationSystem {
     constructor() {
+        /** @internal */
         this._animations = [];
+        /** @internal */
         this._deformAnimations = [];
+        /** @internal */
         this._motionAnimations = [];
+        /** @internal */
         this._shakeAnimations = [];
+        /** @internal */
         this._blinkAnimations = [];
+        /** @internal */
         this._flickerAnimations = [];
+        /** @internal */
         this._renderDataSprites = new Set();
     }
     update(dtMs) {
@@ -211,31 +218,37 @@ export class AnimationSystem {
         this._flickerAnimations = [];
         this._renderDataSprites.clear();
     }
+    /** @internal */
     sanitizeScale(value) {
         if (!Number.isFinite(value))
             return 1;
         return Math.max(0, value);
     }
+    /** @internal */
     sanitizeDuration(value) {
         if (!Number.isFinite(value))
             return 1;
         return Math.max(1, value);
     }
+    /** @internal */
     sanitizeNonNegative(value) {
         if (!Number.isFinite(value))
             return 0;
         return Math.max(0, value);
     }
+    /** @internal */
     sanitizePivot(value) {
         if (!Number.isFinite(value))
             return 0.5;
         return Math.max(0, Math.min(1, value));
     }
+    /** @internal */
     replaceMotionAnimation(entry) {
         const animations = this._motionAnimations.filter((a) => a.sprite !== entry.sprite);
         animations.push(entry);
         this._motionAnimations = animations;
     }
+    /** @internal */
     rebuildRenderData(dtMs) {
         const next = new Map();
         const nextSprites = new Set();

package/dist/internal/AssetSystem.js

@@ -1,8 +1,11 @@
 /** @internal */
 export class AssetSystem {
     constructor() {
+        /** @internal */
         this._queuedImages = new Map();
+        /** @internal */
         this._loadedImages = new Map();
+        /** @internal */
         this._imageSources = new Map();
     }
     queueImage(key, src) {
@@ -51,6 +54,7 @@ export class AssetSystem {
         }));
         this._queuedImages.clear();
     }
+    /** @internal */
     loadImage(src) {
         return new Promise((resolve, reject) => {
             const image = new Image();

package/dist/internal/BackgroundSystem.js

@@ -1,6 +1,7 @@
 /** @internal */
 export class BackgroundSystem {
     constructor() {
+        /** @internal */
         this._layers = [];
     }
     add(layer) {

package/dist/internal/CanvasSystem.js

@@ -1,8 +1,10 @@
 /** @internal */
 export class CanvasSystem {
-    constructor(canvas) {
+    constructor(/** @internal */ canvas) {
         this.canvas = canvas;
+        /** @internal */
         this.onResize = () => this.applyResponsiveCanvasLayout();
+        /** @internal */
         this.onViewportChange = () => this.applyResponsiveCanvasLayout();
     }
     initialize() {
@@ -22,6 +24,7 @@ export class CanvasSystem {
         window.visualViewport?.addEventListener("resize", this.onViewportChange);
         window.visualViewport?.addEventListener("scroll", this.onViewportChange);
     }
+    /** @internal */
     applyResponsiveCanvasLayout() {
         if (!document.body)
             return;

package/dist/internal/ExplosionSystem.js

@@ -45,7 +45,9 @@ const DEFAULT_WIPE_OPTIONS = {
 /** @internal */
 export class ExplosionSystem {
     constructor() {
+        /** @internal */
         this._pieceEffects = [];
+        /** @internal */
         this._wipes = [];
     }
     animateExplode(sprite, glyphCanvas, options, onComplete) {
@@ -190,6 +192,7 @@ export class ExplosionSystem {
         this._pieceEffects = [];
         this._wipes = [];
     }
+    /** @internal */
     spawnRadialEffect(mode, sprite, glyphCanvas, context, options, forceHideSprite, restoreVisibility, finalVisible, onComplete) {
         this.clearSpriteEffects(sprite);
         if (forceHideSprite || restoreVisibility) {
@@ -241,6 +244,7 @@ export class ExplosionSystem {
             onComplete,
         });
     }
+    /** @internal */
     spawnDirectionalEffect(mode, sprite, glyphCanvas, context, options, forceHideSprite, restoreVisibility, finalVisible, onComplete) {
         this.clearSpriteEffects(sprite);
         if (forceHideSprite || restoreVisibility) {
@@ -298,6 +302,7 @@ export class ExplosionSystem {
             onComplete,
         });
     }
+    /** @internal */
     buildPieceGrid(glyphCanvas, context, rows, cols, builder, mode) {
         const pieces = [];
         const rotationRad = (context.rotation * Math.PI) / 180;
@@ -362,6 +367,7 @@ export class ExplosionSystem {
         }
         return pieces;
     }
+    /** @internal */
     buildPieceSpriteContext(sprite, glyphCanvas) {
         const renderData = sprite._renderData;
         const deformScaleX = this.getSafeScale(renderData?.scaleX);
@@ -392,6 +398,7 @@ export class ExplosionSystem {
             absScaleY: Math.abs(signedScaleY),
         };
     }
+    /** @internal */
     clearSpriteEffects(sprite) {
         const remainingPieces = [];
         for (const effect of this._pieceEffects) {
@@ -418,6 +425,7 @@ export class ExplosionSystem {
         }
         this._wipes = remainingWipes;
     }
+    /** @internal */
     getDirectionalProgress(row, col, rows, cols, direction) {
         const rowProgress = rows <= 1 ? 0 : row / (rows - 1);
         const colProgress = cols <= 1 ? 0 : col / (cols - 1);
@@ -432,6 +440,7 @@ export class ExplosionSystem {
                 return 1 - rowProgress;
         }
     }
+    /** @internal */
     getDirectionVector(direction) {
         switch (direction) {
             case "left-to-right":
@@ -444,6 +453,7 @@ export class ExplosionSystem {
                 return { x: 0, y: -1 };
         }
     }
+    /** @internal */
     getRadialVelocity(x, y) {
         const magnitude = Math.hypot(x, y);
         let dirX = 0;
@@ -460,6 +470,7 @@ export class ExplosionSystem {
         const jitterAngle = (Math.random() - 0.5) * (Math.PI / 2);
         return this.rotate(dirX, dirY, jitterAngle);
     }
+    /** @internal */
     easePieceProgress(mode, t) {
         const clamped = Math.max(0, Math.min(1, t));
         switch (mode) {
@@ -471,6 +482,7 @@ export class ExplosionSystem {
                 return clamped * clamped * (3 - 2 * clamped);
         }
     }
+    /** @internal */
     rotate(x, y, radians) {
         const cos = Math.cos(radians);
         const sin = Math.sin(radians);
@@ -479,39 +491,47 @@ export class ExplosionSystem {
             y: x * sin + y * cos,
         };
     }
+    /** @internal */
     lerp(from, to, t) {
         return from + (to - from) * t;
     }
+    /** @internal */
     getSafeScale(value) {
         if (!Number.isFinite(value))
             return 1;
         return Math.max(0, value);
     }
+    /** @internal */
     getSafePivot(value) {
         if (!Number.isFinite(value))
             return 0.5;
         return Math.max(0, Math.min(1, value));
     }
+    /** @internal */
     getSafeNumber(value, fallback) {
         if (!Number.isFinite(value))
             return fallback;
         return value;
     }
+    /** @internal */
     sanitizeCount(value, fallback) {
         if (!Number.isFinite(value))
             return fallback;
         return Math.max(1, Math.round(value));
     }
+    /** @internal */
     sanitizeDuration(value, fallback) {
         if (!Number.isFinite(value))
             return fallback;
         return Math.max(1, value);
     }
+    /** @internal */
     sanitizeNonNegative(value, fallback) {
         if (!Number.isFinite(value))
             return fallback;
         return Math.max(0, value);
     }
+    /** @internal */
     sanitizeNumber(value, fallback) {
         if (!Number.isFinite(value))
             return fallback;

package/dist/internal/InputSystem.js

@@ -1,19 +1,33 @@
 /** @internal */
 export class InputSystem {
-    constructor(game, canvas) {
+    constructor(
+    /** @internal */ game, 
+    /** @internal */ canvas) {
         this.game = game;
         this.canvas = canvas;
+        /** @internal */
         this._keysDown = new Set();
+        /** @internal */
         this._keysPressed = new Set();
+        /** @internal */
         this._pointerDown = false;
+        /** @internal */
         this._pointerPressed = false;
+        /** @internal */
         this._pointerX = 0;
+        /** @internal */
         this._pointerY = 0;
+        /** @internal */
         this._mouseDown = false;
+        /** @internal */
         this._mousePressed = false;
+        /** @internal */
         this._mouseX = 0;
+        /** @internal */
         this._mouseY = 0;
+        /** @internal */
         this._touchPointers = new Map();
+        /** @internal */
         this._primaryTouchId = null;
     }
     get pointerX() {
@@ -176,6 +190,7 @@ export class InputSystem {
     resetPressedState() {
         this.clearFramePressedState();
     }
+    /** @internal */
     getCanvasPoint(clientX, clientY) {
         const rect = this.canvas.getBoundingClientRect();
         const scaleX = this.canvas.width / rect.width;
@@ -185,6 +200,7 @@ export class InputSystem {
             y: (clientY - rect.top) * scaleY,
         };
     }
+    /** @internal */
     isScreenPointOverSprite(x, y, sprite) {
         const halfWidth = sprite.displayWidth / 2;
         const halfHeight = sprite.displayHeight / 2;
@@ -192,6 +208,7 @@ export class InputSystem {
         const drawY = sprite.ignoreScroll ? sprite.renderY : sprite.renderY - this.game.scrollY;
         return Math.abs(x - drawX) <= halfWidth && Math.abs(y - drawY) <= halfHeight;
     }
+    /** @internal */
     collectPointers() {
         const pointers = [];
         if (this._mouseDown) {
@@ -214,6 +231,7 @@ export class InputSystem {
         }
         return pointers;
     }
+    /** @internal */
     syncPrimaryPointer() {
         if (this._primaryTouchId !== null) {
             const primaryTouch = this._touchPointers.get(this._primaryTouchId);

package/dist/internal/LoopSystem.js

@@ -1,12 +1,18 @@
 /** @internal */
 export class LoopSystem {
-    constructor(onFrame) {
+    constructor(/** @internal */ onFrame) {
         this.onFrame = onFrame;
+        /** @internal */
         this._rafId = null;
+        /** @internal */
         this._lastTimestamp = null;
+        /** @internal */
         this._running = false;
+        /** @internal */
         this._hasCreated = false;
+        /** @internal */
         this._onCreate = null;
+        /** @internal */
         this.loop = (timestamp) => {
             if (!this._running)
                 return;

package/dist/internal/PhysicsSystem.js

@@ -1,8 +1,11 @@
 /** @internal */
 export class PhysicsSystem {
     constructor() {
+        /** @internal */
         this._gravityX = 0;
+        /** @internal */
         this._gravityY = 0;
+        /** @internal */
         this._enabled = false;
     }
     get gravityX() {
@@ -94,11 +97,13 @@ export class PhysicsSystem {
         }
         return null;
     }
+    /** @internal */
     assertEnabled() {
         if (!this._enabled) {
             throw new Error("MinimoJS: collide() and collideAny() require game.physics = true.");
         }
     }
+    /** @internal */
     getCollisionResolution(a, b) {
         const halfWidthA = a.bodyDisplayWidth / 2;
         const halfHeightA = a.bodyDisplayHeight / 2;