minimojs 1.0.0-alpha.6 → 1.0.0-alpha.7

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/background-desert/`
 - `examples/animations/`
 
 Run locally from the `minimojs` directory:

package/dist/internal/AssetSystem.d.ts

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

package/dist/internal/AssetSystem.js

@@ -0,0 +1,64 @@
+/** @internal */
+export class AssetSystem {
+    constructor() {
+        this._queuedImages = new Map();
+        this._loadedImages = new Map();
+        this._imageSources = new Map();
+    }
+    queueImage(key, src) {
+        const safeKey = key.trim();
+        const safeSrc = src.trim();
+        if (safeKey.length === 0) {
+            throw new Error("MinimoJS: Image keys must be non-empty strings.");
+        }
+        if (safeSrc.length === 0) {
+            throw new Error("MinimoJS: Image sources must be non-empty strings.");
+        }
+        const existingSrc = this._imageSources.get(safeKey);
+        if (existingSrc !== undefined && existingSrc !== safeSrc) {
+            throw new Error(`MinimoJS: Image key "${safeKey}" is already registered with a different source.`);
+        }
+        this._imageSources.set(safeKey, safeSrc);
+        this._queuedImages.set(safeKey, safeSrc);
+    }
+    getImage(key) {
+        return this._loadedImages.get(key);
+    }
+    hasImage(key) {
+        return this._loadedImages.has(key);
+    }
+    getQueuedImageCount() {
+        let total = 0;
+        for (const key of this._queuedImages.keys()) {
+            if (!this._loadedImages.has(key)) {
+                total++;
+            }
+        }
+        return total;
+    }
+    async loadQueuedImages(onProgress) {
+        const entries = [...this._queuedImages.entries()].filter(([key]) => !this._loadedImages.has(key));
+        const total = entries.length;
+        let loaded = 0;
+        onProgress?.(0, total, null);
+        if (total === 0)
+            return;
+        await Promise.all(entries.map(async ([key, src]) => {
+            const image = await this.loadImage(src);
+            this._loadedImages.set(key, image);
+            loaded += 1;
+            onProgress?.(loaded, total, key);
+        }));
+        this._queuedImages.clear();
+    }
+    loadImage(src) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.onload = () => resolve(image);
+            image.onerror = () => {
+                reject(new Error(`MinimoJS: Failed to load image "${src}".`));
+            };
+            image.src = src;
+        });
+    }
+}

package/dist/internal/BackgroundSystem.d.ts

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

package/dist/internal/BackgroundSystem.js

@@ -0,0 +1,25 @@
+/** @internal */
+export class BackgroundSystem {
+    constructor() {
+        this._layers = [];
+    }
+    add(layer) {
+        this._layers.push(layer);
+        return layer;
+    }
+    destroyLayer(layer) {
+        const index = this._layers.indexOf(layer);
+        if (index !== -1) {
+            this._layers.splice(index, 1);
+        }
+    }
+    getLayers() {
+        return [...this._layers];
+    }
+    getMutableLayers() {
+        return this._layers;
+    }
+    clearAll() {
+        this._layers = [];
+    }
+}

package/dist/internal/ExplosionSystem.js

@@ -32,16 +32,17 @@ export class ExplosionSystem {
         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 baseDisplayWidth = sprite.displayWidth;
+        const baseDisplayHeight = sprite.displayHeight;
+        const pivotOffsetX = (pivotX - 0.5) * baseDisplayWidth * (1 - deformScaleX);
+        const pivotOffsetY = (pivotY - 0.5) * baseDisplayHeight * (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 baseX = sprite.renderX + pivotOffsetX + offsetX;
+        const baseY = sprite.renderY + pivotOffsetY + offsetY;
         const baseAlpha = Math.max(0, Math.min(1, sprite.alpha * alphaMultiplier));
         const pieces = [];
         for (let row = 0; row < rows; row++) {

package/dist/internal/InputSystem.js

@@ -187,10 +187,11 @@ export class InputSystem {
     }
     isScreenPointOverSprite(x, y, sprite, radiusScale) {
         const safeScale = Math.max(0, radiusScale);
-        const halfSize = sprite.displaySize * safeScale;
-        const drawX = sprite.ignoreScroll ? sprite.x : sprite.x - this.game.scrollX;
-        const drawY = sprite.ignoreScroll ? sprite.y : sprite.y - this.game.scrollY;
-        return Math.abs(x - drawX) <= halfSize && Math.abs(y - drawY) <= halfSize;
+        const halfWidth = (sprite.displayWidth * safeScale) / 2;
+        const halfHeight = (sprite.displayHeight * safeScale) / 2;
+        const drawX = sprite.ignoreScroll ? sprite.renderX : sprite.renderX - this.game.scrollX;
+        const drawY = sprite.ignoreScroll ? sprite.renderY : sprite.renderY - this.game.scrollY;
+        return Math.abs(x - drawX) <= halfWidth && Math.abs(y - drawY) <= halfHeight;
     }
     collectPointers() {
         const pointers = [];

package/dist/internal/PhysicsSystem.js

@@ -37,10 +37,12 @@ export class PhysicsSystem {
         }
     }
     overlap(a, b) {
-        const halfA = a.displaySize / 2;
-        const halfB = b.displaySize / 2;
-        return (Math.abs(a.x - b.x) < halfA + halfB &&
-            Math.abs(a.y - b.y) < halfA + halfB);
+        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);
     }
     overlapAny(listA, listB) {
         for (const a of listA) {
@@ -98,12 +100,14 @@ export class PhysicsSystem {
         }
     }
     getCollisionResolution(a, b) {
-        const halfA = a.displaySize / 2;
-        const halfB = b.displaySize / 2;
-        const dx = b.x - a.x;
-        const dy = b.y - a.y;
-        const overlapX = halfA + halfB - Math.abs(dx);
-        const overlapY = halfA + halfB - Math.abs(dy);
+        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 overlapX = halfWidthA + halfWidthB - Math.abs(dx);
+        const overlapY = halfHeightA + halfHeightB - Math.abs(dy);
         if (overlapX <= 0 || overlapY <= 0) {
             return null;
         }

package/dist/internal/RenderSystem.js

@@ -1,16 +1,17 @@
 /** @internal */
 export class RenderSystem {
     constructor() {
-        this._spriteGlyphCache = new Map();
+        this._surfaceCache = new Map();
         this._lastAppliedPageBackground = undefined;
     }
     clearSpriteCache() {
-        this._spriteGlyphCache.clear();
+        this._surfaceCache.clear();
     }
     getSpriteGlyphCanvasForEffects(sprite) {
-        return this.getSpriteGlyphCanvas(sprite);
+        return this.getRenderSurface(sprite);
     }
     getSpriteRenderSnapshot(sprite) {
+        const canvas = this.getRenderSurface(sprite);
         const renderData = sprite._renderData;
         const deformScaleX = this.getSafeRenderScale(renderData?.scaleX);
         const deformScaleY = this.getSafeRenderScale(renderData?.scaleY);
@@ -22,14 +23,14 @@ export class RenderSystem {
         const safeRenderScale = this.getSafeRenderScale(sprite.scale);
         const finalScaleX = safeRenderScale * deformScaleX;
         const finalScaleY = safeRenderScale * deformScaleY;
-        const baseDisplaySize = sprite.displaySize;
-        const pivotOffsetX = (pivotX - 0.5) * baseDisplaySize * (1 - deformScaleX);
-        const pivotOffsetY = (pivotY - 0.5) * baseDisplaySize * (1 - deformScaleY);
-        const canvas = this.getSpriteGlyphCanvas(sprite);
+        const baseDisplayWidth = sprite.displayWidth;
+        const baseDisplayHeight = sprite.displayHeight;
+        const pivotOffsetX = (pivotX - 0.5) * baseDisplayWidth * (1 - deformScaleX);
+        const pivotOffsetY = (pivotY - 0.5) * baseDisplayHeight * (1 - deformScaleY);
         return {
             canvas,
-            x: sprite.x + pivotOffsetX + offsetX,
-            y: sprite.y + pivotOffsetY + offsetY,
+            x: sprite.renderX + pivotOffsetX + offsetX,
+            y: sprite.renderY + pivotOffsetY + offsetY,
             rotation: sprite.rotation,
             alpha: Math.max(0, Math.min(1, sprite.alpha * alphaMultiplier)),
             flipX: sprite.flipX,
@@ -45,17 +46,15 @@ export class RenderSystem {
         const W = options.canvas.width;
         const H = options.canvas.height;
         this.applyPageBackground(options.pageBackground);
-        ctx.clearRect(0, 0, W, H);
-        if (options.backgroundGradient !== null) {
-            const gradient = ctx.createLinearGradient(0, 0, 0, H);
-            gradient.addColorStop(0, options.backgroundGradient.from);
-            gradient.addColorStop(1, options.backgroundGradient.to);
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, W, H);
-        }
-        else if (options.background !== null) {
-            ctx.fillStyle = options.background;
-            ctx.fillRect(0, 0, W, H);
+        this.paintCanvasBackground(ctx, W, H, options.background, options.backgroundGradient);
+        const backgrounds = [...options.backgroundLayers].sort((a, b) => a.layer - b.layer);
+        for (const layer of backgrounds) {
+            if (!layer.visible)
+                continue;
+            const image = options.resolveImage(layer.imageKey);
+            if (!image)
+                continue;
+            this.drawBackgroundLayer(ctx, options.canvas, layer, image);
         }
         const sorted = [...options.sprites].sort((a, b) => a.layer - b.layer);
         const trailEntries = [...options.trails].sort((a, b) => a.layer - b.layer);
@@ -124,13 +123,49 @@ export class RenderSystem {
             ctx.restore();
         }
     }
-    getSpriteGlyphCanvas(sprite) {
-        const size = Math.max(1, Math.round(sprite.size));
-        const color = sprite.color;
-        const cacheKey = `${sprite.sprite}::${size}::${color}`;
-        const cached = this._spriteGlyphCache.get(cacheKey);
+    renderLoadingScreen(options) {
+        const ctx = options.context;
+        const W = options.canvas.width;
+        const H = options.canvas.height;
+        const safeTotal = Math.max(0, options.total);
+        const safeLoaded = Math.max(0, Math.min(options.loaded, safeTotal));
+        const progress = safeTotal === 0 ? 1 : safeLoaded / safeTotal;
+        const barWidth = Math.min(420, Math.max(220, Math.floor(W * 0.46)));
+        const barHeight = 18;
+        const barX = Math.round((W - barWidth) / 2);
+        const barY = Math.round(H / 2 + 24);
+        this.applyPageBackground(options.pageBackground);
+        this.paintCanvasBackground(ctx, W, H, options.background ?? "#101820", options.backgroundGradient);
+        ctx.save();
+        ctx.fillStyle = "rgba(8, 18, 28, 0.76)";
+        ctx.fillRect(0, 0, W, H);
+        ctx.font = `26px "Press Start 2P", monospace`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillStyle = "#ffffff";
+        ctx.fillText("Loading...", W / 2, H / 2 - 28);
+        ctx.fillStyle = "rgba(255, 255, 255, 0.16)";
+        ctx.fillRect(barX, barY, barWidth, barHeight);
+        ctx.fillStyle = "#f7fbff";
+        ctx.fillRect(barX, barY, Math.round(barWidth * progress), barHeight);
+        ctx.strokeStyle = "rgba(255, 255, 255, 0.35)";
+        ctx.strokeRect(barX, barY, barWidth, barHeight);
+        ctx.restore();
+    }
+    getRenderSurface(sprite) {
+        const cacheKey = sprite.getRenderCacheKey();
+        const cached = this._surfaceCache.get(cacheKey);
         if (cached)
             return cached;
+        const surface = this.isTextSprite(sprite)
+            ? this.createTextSurface(sprite)
+            : this.createEmojiSurface(this.asEmojiSprite(sprite));
+        this._surfaceCache.set(cacheKey, surface);
+        return surface;
+    }
+    createEmojiSurface(sprite) {
+        const size = Math.max(1, Math.round(sprite.size));
+        const color = sprite.color;
         const glyphCanvas = document.createElement("canvas");
         const boxSize = Math.max(2, Math.ceil(size * 2));
         glyphCanvas.width = boxSize;
@@ -149,9 +184,127 @@ export class RenderSystem {
         glyphCtx.textAlign = "center";
         glyphCtx.textBaseline = "middle";
         glyphCtx.fillText(sprite.sprite, boxSize / 2, boxSize / 2);
-        this._spriteGlyphCache.set(cacheKey, glyphCanvas);
         return glyphCanvas;
     }
+    createTextSurface(sprite) {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("MinimoJS: Could not acquire a text rendering context.");
+        }
+        const lines = this.layoutTextLines(ctx, sprite);
+        const measuredWidth = Math.max(1, Math.ceil(lines.reduce((maxWidth, line) => Math.max(maxWidth, ctx.measureText(line).width), 0)));
+        const lineHeightPx = Math.max(1, Math.ceil(sprite.fontSize * sprite.lineHeight));
+        const contentHeight = Math.max(1, lineHeightPx * Math.max(lines.length, 1));
+        const borderPad = Math.max(0, sprite.borderWidth) * 2;
+        const totalWidth = Math.max(1, Math.ceil(measuredWidth + sprite.paddingX * 2 + borderPad));
+        const totalHeight = Math.max(1, Math.ceil(contentHeight + sprite.paddingY * 2 + borderPad));
+        sprite._measuredWidth = totalWidth;
+        sprite._measuredHeight = totalHeight;
+        canvas.width = totalWidth;
+        canvas.height = totalHeight;
+        const drawCtx = canvas.getContext("2d");
+        if (!drawCtx) {
+            throw new Error("MinimoJS: Could not acquire a text rendering context.");
+        }
+        this.applyTextStyle(drawCtx, sprite);
+        if (sprite.backgroundColor !== null) {
+            drawCtx.fillStyle = sprite.backgroundColor;
+            this.fillRoundedRect(drawCtx, 0, 0, totalWidth, totalHeight, sprite.cornerRadius);
+        }
+        if (sprite.borderColor !== null && sprite.borderWidth > 0) {
+            drawCtx.strokeStyle = sprite.borderColor;
+            drawCtx.lineWidth = sprite.borderWidth;
+            this.strokeRoundedRect(drawCtx, sprite.borderWidth / 2, sprite.borderWidth / 2, totalWidth - sprite.borderWidth, totalHeight - sprite.borderWidth, sprite.cornerRadius);
+        }
+        drawCtx.fillStyle = sprite.color;
+        drawCtx.textAlign = sprite.textAlign;
+        drawCtx.textBaseline = "middle";
+        const contentLeft = sprite.paddingX + sprite.borderWidth;
+        const contentRight = totalWidth - sprite.paddingX - sprite.borderWidth;
+        const contentCenter = totalWidth / 2;
+        const startY = sprite.paddingY + sprite.borderWidth + lineHeightPx / 2;
+        const drawX = sprite.textAlign === "left"
+            ? contentLeft
+            : sprite.textAlign === "right"
+                ? contentRight
+                : contentCenter;
+        for (let i = 0; i < lines.length; i++) {
+            drawCtx.fillText(lines[i], drawX, startY + i * lineHeightPx);
+        }
+        return canvas;
+    }
+    isTextSprite(sprite) {
+        return "text" in sprite && "fontFamily" in sprite && "fontSize" in sprite;
+    }
+    asEmojiSprite(sprite) {
+        if ("sprite" in sprite && "size" in sprite) {
+            return sprite;
+        }
+        throw new Error("MinimoJS: Unsupported sprite type for emoji rendering.");
+    }
+    layoutTextLines(ctx, sprite) {
+        this.applyTextStyle(ctx, sprite);
+        const rawLines = sprite.text.split("\n");
+        if (sprite.maxWidth <= 0) {
+            return rawLines.length > 0 ? rawLines : [""];
+        }
+        const maxWidth = Math.max(1, sprite.maxWidth - sprite.paddingX * 2);
+        const wrappedLines = [];
+        for (const rawLine of rawLines) {
+            const words = rawLine.split(/\s+/).filter((word) => word.length > 0);
+            if (words.length === 0) {
+                wrappedLines.push("");
+                continue;
+            }
+            let currentLine = words[0];
+            for (let i = 1; i < words.length; i++) {
+                const candidate = `${currentLine} ${words[i]}`;
+                if (ctx.measureText(candidate).width <= maxWidth) {
+                    currentLine = candidate;
+                }
+                else {
+                    wrappedLines.push(currentLine);
+                    currentLine = words[i];
+                }
+            }
+            wrappedLines.push(currentLine);
+        }
+        return wrappedLines.length > 0 ? wrappedLines : [""];
+    }
+    applyTextStyle(ctx, sprite) {
+        ctx.font = `${sprite.fontWeight} ${sprite.fontSize}px ${sprite.fontFamily}`;
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+    }
+    fillRoundedRect(ctx, x, y, width, height, radius) {
+        this.buildRoundedRectPath(ctx, x, y, width, height, radius);
+        ctx.fill();
+    }
+    strokeRoundedRect(ctx, x, y, width, height, radius) {
+        this.buildRoundedRectPath(ctx, x, y, width, height, radius);
+        ctx.stroke();
+    }
+    buildRoundedRectPath(ctx, x, y, width, height, radius) {
+        const safeRadius = Math.max(0, Math.min(radius, width / 2, height / 2));
+        ctx.beginPath();
+        if (safeRadius <= 0) {
+            ctx.rect(x, y, width, height);
+            return;
+        }
+        ctx.moveTo(x + safeRadius, y);
+        ctx.lineTo(x + width - safeRadius, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y + safeRadius);
+        ctx.lineTo(x + width, y + height - safeRadius);
+        ctx.quadraticCurveTo(x + width, y + height, x + width - safeRadius, y + height);
+        ctx.lineTo(x + safeRadius, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height - safeRadius);
+        ctx.lineTo(x, y + safeRadius);
+        ctx.quadraticCurveTo(x, y, x + safeRadius, y);
+        ctx.closePath();
+    }
     getSafeRenderScale(value) {
         if (!Number.isFinite(value))
             return 1;
@@ -169,6 +322,66 @@ export class RenderSystem {
             return fallback;
         return value;
     }
+    paintCanvasBackground(ctx, width, height, background, backgroundGradient) {
+        ctx.clearRect(0, 0, width, height);
+        if (backgroundGradient !== null) {
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, backgroundGradient.from);
+            gradient.addColorStop(1, backgroundGradient.to);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+        }
+        else if (background !== null) {
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, width, height);
+        }
+    }
+    drawBackgroundLayer(ctx, canvas, layer, image) {
+        const destX = Math.round(layer.x);
+        const destY = Math.round(layer.y);
+        const destW = this.getPositiveLength(layer.width, canvas.width);
+        const destH = this.getPositiveLength(layer.height, canvas.height);
+        const alpha = Math.max(0, Math.min(1, layer.alpha));
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        if (layer.fit === "none") {
+            ctx.drawImage(image, destX, destY);
+            ctx.restore();
+            return;
+        }
+        if (layer.fit === "stretch") {
+            ctx.drawImage(image, destX, destY, destW, destH);
+            ctx.restore();
+            return;
+        }
+        const imageW = Math.max(1, image.naturalWidth || image.width);
+        const imageH = Math.max(1, image.naturalHeight || image.height);
+        const scale = this.getBackgroundScale(layer.fit, destW, destH, imageW, imageH);
+        const drawW = imageW * scale;
+        const drawH = imageH * scale;
+        const drawX = destX + (destW - drawW) / 2;
+        const drawY = destY + (destH - drawH) / 2;
+        if (layer.fit === "cover") {
+            ctx.beginPath();
+            ctx.rect(destX, destY, destW, destH);
+            ctx.clip();
+        }
+        ctx.drawImage(image, drawX, drawY, drawW, drawH);
+        ctx.restore();
+    }
+    getPositiveLength(value, fallback) {
+        if (!Number.isFinite(value) || value <= 0)
+            return fallback;
+        return Math.round(value);
+    }
+    getBackgroundScale(fit, destW, destH, imageW, imageH) {
+        const scaleX = destW / imageW;
+        const scaleY = destH / imageH;
+        if (fit === "contain") {
+            return Math.min(scaleX, scaleY);
+        }
+        return Math.max(scaleX, scaleY);
+    }
     applyPageBackground(pageBackground) {
         if (!document.body)
             return;