minimojs 1.0.0-alpha.4 → 1.0.0-alpha.6

package/README.md

@@ -70,6 +70,7 @@ Note: `drawText()` uses `"Press Start 2P", monospace`. Load the font in your HTM
 - `examples/space-invader/`
 - `examples/super-minimo-bros/`
 - `examples/scale-shift/`
+- `examples/animations/`
 
 Run locally from the `minimojs` directory:
 

package/dist/internal/AnimationSystem.js

@@ -0,0 +1,332 @@
+/** @internal */
+export class AnimationSystem {
+    constructor() {
+        this._animations = [];
+        this._deformAnimations = [];
+        this._motionAnimations = [];
+        this._shakeAnimations = [];
+        this._blinkAnimations = [];
+        this._flickerAnimations = [];
+        this._renderDataSprites = new Set();
+    }
+    update(dtMs) {
+        const animations = this._animations;
+        const toRemove = [];
+        for (let i = 0; i < animations.length; i++) {
+            const anim = animations[i];
+            anim.elapsed += dtMs;
+            const t = Math.min(anim.elapsed / anim.durationMs, 1);
+            anim.sprite[anim.property] = anim.from + (anim.to - anim.from) * t;
+            if (t >= 1) {
+                toRemove.push(i);
+                anim.onComplete?.();
+            }
+        }
+        for (let i = toRemove.length - 1; i >= 0; i--) {
+            animations.splice(toRemove[i], 1);
+        }
+        const deformAnimations = this._deformAnimations;
+        const deformToRemove = [];
+        for (let i = 0; i < deformAnimations.length; i++) {
+            const anim = deformAnimations[i];
+            anim.elapsed += dtMs;
+            const t = Math.min(anim.elapsed / anim.durationMs, 1);
+            if (t >= 1) {
+                deformToRemove.push(i);
+                anim.onComplete?.();
+            }
+        }
+        for (let i = deformToRemove.length - 1; i >= 0; i--) {
+            deformAnimations.splice(deformToRemove[i], 1);
+        }
+        const motionAnimations = this._motionAnimations;
+        const motionToRemove = [];
+        for (let i = 0; i < motionAnimations.length; i++) {
+            const anim = motionAnimations[i];
+            anim.elapsed += dtMs;
+            const t = Math.min(anim.elapsed / anim.durationMs, 1);
+            if (anim.kind === "arc") {
+                anim.sprite.x = anim.fromX + (anim.toX - anim.fromX) * t;
+                anim.sprite.y =
+                    anim.fromY +
+                        (anim.toY - anim.fromY) * t -
+                        anim.magnitude * 4 * t * (1 - t);
+            }
+            else if (anim.kind === "bounce") {
+                anim.sprite.x = anim.fromX;
+                anim.sprite.y = anim.fromY - anim.magnitude * 4 * t * (1 - t);
+            }
+            else {
+                anim.sprite.x = anim.fromX;
+                anim.sprite.y = anim.fromY - Math.sin(t * Math.PI) * anim.magnitude;
+            }
+            if (t >= 1) {
+                motionToRemove.push(i);
+                anim.onComplete?.();
+            }
+        }
+        for (let i = motionToRemove.length - 1; i >= 0; i--) {
+            motionAnimations.splice(motionToRemove[i], 1);
+        }
+        this.rebuildRenderData(dtMs);
+    }
+    animateAlpha(sprite, to, durationMs, onComplete) {
+        const animations = this._animations.filter((a) => !(a.sprite === sprite && a.property === "alpha"));
+        animations.push({
+            sprite,
+            property: "alpha",
+            from: sprite.alpha,
+            to,
+            durationMs,
+            elapsed: 0,
+            onComplete,
+        });
+        this._animations = animations;
+    }
+    animateRotation(sprite, to, durationMs, onComplete) {
+        const animations = this._animations.filter((a) => !(a.sprite === sprite && a.property === "rotation"));
+        animations.push({
+            sprite,
+            property: "rotation",
+            from: sprite.rotation,
+            to,
+            durationMs,
+            elapsed: 0,
+            onComplete,
+        });
+        this._animations = animations;
+    }
+    animateDeform(sprite, toScaleX, toScaleY, pivotX, pivotY, durationMs, onComplete) {
+        const current = sprite._renderData;
+        const fromScaleX = current?.scaleX ?? 1;
+        const fromScaleY = current?.scaleY ?? 1;
+        const deformAnimations = this._deformAnimations.filter((a) => a.sprite !== sprite);
+        deformAnimations.push({
+            sprite,
+            fromScaleX,
+            fromScaleY,
+            toScaleX: this.sanitizeScale(toScaleX),
+            toScaleY: this.sanitizeScale(toScaleY),
+            pivotX: this.sanitizePivot(pivotX),
+            pivotY: this.sanitizePivot(pivotY),
+            durationMs,
+            elapsed: 0,
+            onComplete,
+        });
+        this._deformAnimations = deformAnimations;
+    }
+    animateShake(sprite, intensity, durationMs, onComplete) {
+        const animations = this._shakeAnimations.filter((a) => a.sprite !== sprite);
+        animations.push({
+            sprite,
+            intensity: this.sanitizeNonNegative(intensity),
+            durationMs: this.sanitizeDuration(durationMs),
+            elapsed: 0,
+            onComplete,
+        });
+        this._shakeAnimations = animations;
+    }
+    animateBounce(sprite, height, durationMs, onComplete) {
+        this.replaceMotionAnimation({
+            sprite,
+            kind: "bounce",
+            fromX: sprite.x,
+            fromY: sprite.y,
+            toX: sprite.x,
+            toY: sprite.y,
+            magnitude: this.sanitizeNonNegative(height),
+            durationMs: this.sanitizeDuration(durationMs),
+            elapsed: 0,
+            onComplete,
+        });
+    }
+    animateFloat(sprite, distance, durationMs, onComplete) {
+        this.replaceMotionAnimation({
+            sprite,
+            kind: "float",
+            fromX: sprite.x,
+            fromY: sprite.y,
+            toX: sprite.x,
+            toY: sprite.y,
+            magnitude: this.sanitizeNonNegative(distance),
+            durationMs: this.sanitizeDuration(durationMs),
+            elapsed: 0,
+            onComplete,
+        });
+    }
+    animateArc(sprite, toX, toY, arcHeight, durationMs, onComplete) {
+        this.replaceMotionAnimation({
+            sprite,
+            kind: "arc",
+            fromX: sprite.x,
+            fromY: sprite.y,
+            toX,
+            toY,
+            magnitude: this.sanitizeNonNegative(arcHeight),
+            durationMs: this.sanitizeDuration(durationMs),
+            elapsed: 0,
+            onComplete,
+        });
+    }
+    animateBlink(sprite, times, durationMs, onComplete) {
+        const animations = this._blinkAnimations.filter((a) => a.sprite !== sprite);
+        animations.push({
+            sprite,
+            times: Math.max(1, Math.round(Number.isFinite(times) ? times : 1)),
+            durationMs: this.sanitizeDuration(durationMs),
+            elapsed: 0,
+            onComplete,
+        });
+        this._blinkAnimations = animations;
+    }
+    animateFlicker(sprite, durationMs, onComplete) {
+        const animations = this._flickerAnimations.filter((a) => a.sprite !== sprite);
+        animations.push({
+            sprite,
+            durationMs: this.sanitizeDuration(durationMs),
+            elapsed: 0,
+            onComplete,
+        });
+        this._flickerAnimations = animations;
+    }
+    clearSpriteAnimations(sprite) {
+        this._animations = this._animations.filter((a) => a.sprite !== sprite);
+        this._deformAnimations = this._deformAnimations.filter((a) => a.sprite !== sprite);
+        this._motionAnimations = this._motionAnimations.filter((a) => a.sprite !== sprite);
+        this._shakeAnimations = this._shakeAnimations.filter((a) => a.sprite !== sprite);
+        this._blinkAnimations = this._blinkAnimations.filter((a) => a.sprite !== sprite);
+        this._flickerAnimations = this._flickerAnimations.filter((a) => a.sprite !== sprite);
+        this._renderDataSprites.delete(sprite);
+        sprite._renderData = null;
+    }
+    clearAll() {
+        for (const sprite of this._renderDataSprites) {
+            sprite._renderData = null;
+        }
+        this._animations = [];
+        this._deformAnimations = [];
+        this._motionAnimations = [];
+        this._shakeAnimations = [];
+        this._blinkAnimations = [];
+        this._flickerAnimations = [];
+        this._renderDataSprites.clear();
+    }
+    sanitizeScale(value) {
+        if (!Number.isFinite(value))
+            return 1;
+        return Math.max(0, value);
+    }
+    sanitizeDuration(value) {
+        if (!Number.isFinite(value))
+            return 1;
+        return Math.max(1, value);
+    }
+    sanitizeNonNegative(value) {
+        if (!Number.isFinite(value))
+            return 0;
+        return Math.max(0, value);
+    }
+    sanitizePivot(value) {
+        if (!Number.isFinite(value))
+            return 0.5;
+        return Math.max(0, Math.min(1, value));
+    }
+    replaceMotionAnimation(entry) {
+        const animations = this._motionAnimations.filter((a) => a.sprite !== entry.sprite);
+        animations.push(entry);
+        this._motionAnimations = animations;
+    }
+    rebuildRenderData(dtMs) {
+        const next = new Map();
+        const nextSprites = new Set();
+        const upsert = (sprite) => {
+            let state = next.get(sprite);
+            if (!state) {
+                state = {
+                    scaleX: 1,
+                    scaleY: 1,
+                    pivotX: 0.5,
+                    pivotY: 0.5,
+                    offsetX: 0,
+                    offsetY: 0,
+                    alphaMultiplier: 1,
+                };
+                next.set(sprite, state);
+                nextSprites.add(sprite);
+            }
+            return state;
+        };
+        for (const anim of this._deformAnimations) {
+            const state = upsert(anim.sprite);
+            const t = Math.min(anim.elapsed / anim.durationMs, 1);
+            state.scaleX = anim.fromScaleX + (anim.toScaleX - anim.fromScaleX) * t;
+            state.scaleY = anim.fromScaleY + (anim.toScaleY - anim.fromScaleY) * t;
+            state.pivotX = anim.pivotX;
+            state.pivotY = anim.pivotY;
+        }
+        const shakeToRemove = [];
+        for (let i = 0; i < this._shakeAnimations.length; i++) {
+            const anim = this._shakeAnimations[i];
+            anim.elapsed += dtMs;
+            const t = Math.min(anim.elapsed / anim.durationMs, 1);
+            const decay = 1 - t;
+            const state = upsert(anim.sprite);
+            state.offsetX += (Math.random() * 2 - 1) * anim.intensity * decay;
+            state.offsetY += (Math.random() * 2 - 1) * anim.intensity * decay;
+            if (t >= 1) {
+                shakeToRemove.push(i);
+                anim.onComplete?.();
+            }
+        }
+        for (let i = shakeToRemove.length - 1; i >= 0; i--) {
+            this._shakeAnimations.splice(shakeToRemove[i], 1);
+        }
+        const blinkToRemove = [];
+        for (let i = 0; i < this._blinkAnimations.length; i++) {
+            const anim = this._blinkAnimations[i];
+            anim.elapsed += dtMs;
+            const t = Math.min(anim.elapsed / anim.durationMs, 1);
+            const state = upsert(anim.sprite);
+            const step = Math.floor(t * anim.times * 2);
+            state.alphaMultiplier *= step % 2 === 0 ? 1 : 0;
+            if (t >= 1) {
+                blinkToRemove.push(i);
+                anim.onComplete?.();
+            }
+        }
+        for (let i = blinkToRemove.length - 1; i >= 0; i--) {
+            this._blinkAnimations.splice(blinkToRemove[i], 1);
+        }
+        const flickerToRemove = [];
+        for (let i = 0; i < this._flickerAnimations.length; i++) {
+            const anim = this._flickerAnimations[i];
+            anim.elapsed += dtMs;
+            const t = Math.min(anim.elapsed / anim.durationMs, 1);
+            const state = upsert(anim.sprite);
+            state.alphaMultiplier *= 0.25 + Math.random() * 0.75;
+            if (t >= 1) {
+                flickerToRemove.push(i);
+                anim.onComplete?.();
+            }
+        }
+        for (let i = flickerToRemove.length - 1; i >= 0; i--) {
+            this._flickerAnimations.splice(flickerToRemove[i], 1);
+        }
+        for (const sprite of this._renderDataSprites) {
+            if (!nextSprites.has(sprite)) {
+                sprite._renderData = null;
+            }
+        }
+        for (const [sprite, state] of next.entries()) {
+            const isDefault = state.scaleX === 1 &&
+                state.scaleY === 1 &&
+                state.pivotX === 0.5 &&
+                state.pivotY === 0.5 &&
+                state.offsetX === 0 &&
+                state.offsetY === 0 &&
+                state.alphaMultiplier === 1;
+            sprite._renderData = isDefault ? null : state;
+        }
+        this._renderDataSprites = nextSprites;
+    }
+}

package/dist/internal/CanvasSystem.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/internal/CanvasSystem.js

@@ -0,0 +1,37 @@
+/** @internal */
+export class CanvasSystem {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.onResize = () => this.applyResponsiveCanvasLayout();
+    }
+    initialize() {
+        const mountCanvas = () => {
+            if (document.body && !this.canvas.isConnected) {
+                document.body.appendChild(this.canvas);
+            }
+            this.applyResponsiveCanvasLayout();
+        };
+        if (document.body) {
+            mountCanvas();
+        }
+        else {
+            window.addEventListener("DOMContentLoaded", mountCanvas, { once: true });
+        }
+        window.addEventListener("resize", this.onResize);
+    }
+    applyResponsiveCanvasLayout() {
+        if (!document.body)
+            return;
+        document.body.style.margin = "0";
+        document.body.style.minHeight = "100vh";
+        document.body.style.display = "grid";
+        document.body.style.placeItems = "center";
+        document.body.style.touchAction = "manipulation";
+        const viewportW = Math.max(1, window.innerWidth);
+        const viewportH = Math.max(1, window.innerHeight);
+        const scale = Math.min(viewportW / this.canvas.width, viewportH / this.canvas.height);
+        const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+        this.canvas.style.width = `${Math.floor(this.canvas.width * safeScale)}px`;
+        this.canvas.style.height = `${Math.floor(this.canvas.height * safeScale)}px`;
+    }
+}

package/dist/internal/ExplosionSystem.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/internal/ExplosionSystem.js

@@ -0,0 +1,214 @@
+const DEFAULT_OPTIONS = {
+    rows: 3,
+    cols: 3,
+    durationMs: 500,
+    speed: 260,
+    gravityY: 900,
+    spin: 220,
+    fade: true,
+    destroySprite: true,
+};
+/** @internal */
+export class ExplosionSystem {
+    constructor() {
+        this._explosions = [];
+    }
+    animateExplode(sprite, glyphCanvas, options, onComplete) {
+        this.clearSpriteExplosions(sprite);
+        const rows = this.sanitizeCount(options?.rows, DEFAULT_OPTIONS.rows);
+        const cols = this.sanitizeCount(options?.cols, DEFAULT_OPTIONS.cols);
+        const durationMs = this.sanitizeDuration(options?.durationMs, DEFAULT_OPTIONS.durationMs);
+        const speed = this.sanitizeNonNegative(options?.speed, DEFAULT_OPTIONS.speed);
+        const gravityY = this.sanitizeNumber(options?.gravityY, DEFAULT_OPTIONS.gravityY);
+        const spin = this.sanitizeNonNegative(options?.spin, DEFAULT_OPTIONS.spin);
+        const fade = options?.fade ?? DEFAULT_OPTIONS.fade;
+        const destroySprite = options?.destroySprite ?? DEFAULT_OPTIONS.destroySprite;
+        const originalVisible = sprite.visible;
+        const renderData = sprite._renderData;
+        const deformScaleX = this.getSafeScale(renderData?.scaleX);
+        const deformScaleY = this.getSafeScale(renderData?.scaleY);
+        const pivotX = this.getSafePivot(renderData?.pivotX);
+        const pivotY = this.getSafePivot(renderData?.pivotY);
+        const offsetX = this.getSafeNumber(renderData?.offsetX, 0);
+        const offsetY = this.getSafeNumber(renderData?.offsetY, 0);
+        const alphaMultiplier = this.getSafeNumber(renderData?.alphaMultiplier, 1);
+        const baseDisplaySize = sprite.displaySize;
+        const pivotOffsetX = (pivotX - 0.5) * baseDisplaySize * (1 - deformScaleX);
+        const pivotOffsetY = (pivotY - 0.5) * baseDisplaySize * (1 - deformScaleY);
+        const signedScaleX = this.getSafeScale(sprite.scale) * deformScaleX * (sprite.flipX ? -1 : 1);
+        const signedScaleY = this.getSafeScale(sprite.scale) * deformScaleY * (sprite.flipY ? -1 : 1);
+        const absScaleX = Math.abs(signedScaleX);
+        const absScaleY = Math.abs(signedScaleY);
+        const rotationRad = (sprite.rotation * Math.PI) / 180;
+        const baseX = sprite.x + pivotOffsetX + offsetX;
+        const baseY = sprite.y + pivotOffsetY + offsetY;
+        const baseAlpha = Math.max(0, Math.min(1, sprite.alpha * alphaMultiplier));
+        const pieces = [];
+        for (let row = 0; row < rows; row++) {
+            const sy = Math.floor((row * glyphCanvas.height) / rows);
+            const nextSy = Math.floor(((row + 1) * glyphCanvas.height) / rows);
+            const sh = Math.max(1, nextSy - sy);
+            for (let col = 0; col < cols; col++) {
+                const sx = Math.floor((col * glyphCanvas.width) / cols);
+                const nextSx = Math.floor(((col + 1) * glyphCanvas.width) / cols);
+                const sw = Math.max(1, nextSx - sx);
+                const localX = (sx + sw / 2 - glyphCanvas.width / 2) * signedScaleX;
+                const localY = (sy + sh / 2 - glyphCanvas.height / 2) * signedScaleY;
+                const rotated = this.rotate(localX, localY, rotationRad);
+                const velocity = this.getPieceVelocity(rotated.x, rotated.y, speed);
+                pieces.push({
+                    x: baseX + rotated.x,
+                    y: baseY + rotated.y,
+                    rotation: sprite.rotation,
+                    alpha: baseAlpha,
+                    flipX: sprite.flipX,
+                    flipY: sprite.flipY,
+                    sx,
+                    sy,
+                    sw,
+                    sh,
+                    drawWidth: sw * absScaleX,
+                    drawHeight: sh * absScaleY,
+                    vx: velocity.x,
+                    vy: velocity.y,
+                    angularVelocity: (Math.random() * 2 - 1) * spin,
+                });
+            }
+        }
+        if (!destroySprite) {
+            sprite.visible = false;
+        }
+        this._explosions.push({
+            sprite,
+            canvas: glyphCanvas,
+            layer: sprite.layer,
+            ignoreScroll: sprite.ignoreScroll,
+            pieces,
+            elapsedMs: 0,
+            durationMs,
+            gravityY,
+            fade,
+            baseAlpha,
+            restoreVisibility: !destroySprite,
+            originalVisible,
+            onComplete,
+        });
+    }
+    update(dt, dtMs) {
+        const explosions = this._explosions;
+        const toRemove = [];
+        for (let i = 0; i < explosions.length; i++) {
+            const explosion = explosions[i];
+            explosion.elapsedMs += dtMs;
+            const t = Math.min(explosion.elapsedMs / explosion.durationMs, 1);
+            for (const piece of explosion.pieces) {
+                piece.vy += explosion.gravityY * dt;
+                piece.x += piece.vx * dt;
+                piece.y += piece.vy * dt;
+                piece.rotation += piece.angularVelocity * dt;
+                piece.alpha = explosion.fade
+                    ? explosion.baseAlpha * (1 - t)
+                    : explosion.baseAlpha;
+            }
+            if (t >= 1) {
+                toRemove.push(i);
+                if (explosion.restoreVisibility) {
+                    explosion.sprite.visible = explosion.originalVisible;
+                }
+                explosion.onComplete?.();
+            }
+        }
+        for (let i = toRemove.length - 1; i >= 0; i--) {
+            explosions.splice(toRemove[i], 1);
+        }
+    }
+    getRenderEntries() {
+        return this._explosions;
+    }
+    clearAll() {
+        for (const explosion of this._explosions) {
+            if (explosion.restoreVisibility) {
+                explosion.sprite.visible = explosion.originalVisible;
+            }
+        }
+        this._explosions = [];
+    }
+    clearSpriteExplosions(sprite) {
+        const remaining = [];
+        for (const explosion of this._explosions) {
+            if (explosion.sprite === sprite) {
+                if (explosion.restoreVisibility) {
+                    explosion.sprite.visible = explosion.originalVisible;
+                }
+            }
+            else {
+                remaining.push(explosion);
+            }
+        }
+        this._explosions = remaining;
+    }
+    getPieceVelocity(x, y, speed) {
+        const magnitude = Math.hypot(x, y);
+        let dirX = 0;
+        let dirY = 0;
+        if (magnitude > 0.001) {
+            dirX = x / magnitude;
+            dirY = y / magnitude;
+        }
+        else {
+            const angle = Math.random() * Math.PI * 2;
+            dirX = Math.cos(angle);
+            dirY = Math.sin(angle);
+        }
+        const jitterAngle = (Math.random() - 0.5) * (Math.PI / 2);
+        const jittered = this.rotate(dirX, dirY, jitterAngle);
+        const pieceSpeed = speed * (0.65 + Math.random() * 0.7);
+        return {
+            x: jittered.x * pieceSpeed,
+            y: jittered.y * pieceSpeed,
+        };
+    }
+    rotate(x, y, radians) {
+        const cos = Math.cos(radians);
+        const sin = Math.sin(radians);
+        return {
+            x: x * cos - y * sin,
+            y: x * sin + y * cos,
+        };
+    }
+    getSafeScale(value) {
+        if (!Number.isFinite(value))
+            return 1;
+        return Math.max(0, value);
+    }
+    getSafePivot(value) {
+        if (!Number.isFinite(value))
+            return 0.5;
+        return Math.max(0, Math.min(1, value));
+    }
+    getSafeNumber(value, fallback) {
+        if (!Number.isFinite(value))
+            return fallback;
+        return value;
+    }
+    sanitizeCount(value, fallback) {
+        if (!Number.isFinite(value))
+            return fallback;
+        return Math.max(1, Math.round(value));
+    }
+    sanitizeDuration(value, fallback) {
+        if (!Number.isFinite(value))
+            return fallback;
+        return Math.max(1, value);
+    }
+    sanitizeNonNegative(value, fallback) {
+        if (!Number.isFinite(value))
+            return fallback;
+        return Math.max(0, value);
+    }
+    sanitizeNumber(value, fallback) {
+        if (!Number.isFinite(value))
+            return fallback;
+        return value;
+    }
+}

package/dist/internal/InputSystem.d.ts

@@ -0,0 +1 @@
+export {};