yuuna-engine 0.6.0 → 0.8.0

package/lib/index.cjs

@@ -149,6 +149,48 @@ const createPlaceholderSheet = (size) => {
     }
     return canvas;
 };
+// Used only when a resource declares neither `size` (see settle() below)
+// nor actually loads — there's no image to measure and nothing declared
+// to fall back to, so there's no way to know the intended dimensions at
+// all. An arbitrary, small-but-visible size, purely so the placeholder
+// still draws as *something* instead of a 0x0/NaN canvas.
+const DEFAULT_PLACEHOLDER_SIZE = { width: 64, height: 64 };
+// Loads a single resources[id] entry into a ResourceEntry — shared by the
+// startup resources (below) and addResource (returned from runEngine, at
+// the bottom of this file) so a resource registered later loads exactly
+// the same way, placeholder fallback included.
+const loadResource = (value) => new Promise((resolve) => {
+    const image = new Image();
+    // A single, unsliced image (1x1) if unset — only an actual
+    // spritesheet needs this declared.
+    const slices = value.slices ?? { horizontal: 1, vertical: 1 };
+    // sheetSize is the whole loaded sheet's pixel dimensions — value's
+    // declared `size` if set, otherwise whatever the image actually
+    // measures once it's loaded (or DEFAULT_PLACEHOLDER_SIZE if even
+    // that isn't available, i.e. no `size` declared *and* the image
+    // failed to load too).
+    const settle = (loadedImage, sheetSize) => {
+        resolve({
+            image: loadedImage,
+            size: {
+                width: sheetSize.width / slices.horizontal,
+                height: sheetSize.height / slices.vertical,
+            },
+            slices,
+            animations: value.animations ?? {},
+        });
+    };
+    image.src = value.src;
+    image.onload = () => settle(image, value.size ?? { width: image.naturalWidth, height: image.naturalHeight });
+    // Missing/failed-to-load asset (see .gitignore's dist/resources/
+    // note) — a placeholder sheet, sized to match what this resource
+    // declared, keeps every frame/slice/animation index the caller
+    // already computes valid instead of drawing nothing or throwing.
+    image.onerror = () => {
+        const placeholderSize = value.size ?? DEFAULT_PLACEHOLDER_SIZE;
+        settle(createPlaceholderSheet(placeholderSize), placeholderSize);
+    };
+});
 const runEngine = async (props) => {
     const runId = ++latestRunId;
     resetCanvas?.();
@@ -172,9 +214,39 @@ const runEngine = async (props) => {
     if (props.canvas?.backgroundColor !== undefined) {
         canvas.style.backgroundColor = props.canvas.backgroundColor;
     }
+    // The canvas's *logical* resolution — the fixed space every renderable
+    // position, and every mouse/touch coordinate, is expressed in. Captured
+    // here, before pixelRatio (below) scales the actual backing buffer past
+    // it, so both stay anchored to this regardless of what pixelRatio does.
+    const logicalWidth = canvas.width;
+    const logicalHeight = canvas.height;
+    // Scales the backing buffer beyond logicalWidth/logicalHeight so text
+    // and vector shapes (fillText, arc, ...) render crisply on a HiDPI
+    // screen — most phones — instead of the same logical-resolution buffer
+    // just being stretched larger by applyResize below. `true` follows the
+    // display's own devicePixelRatio; a number sets it explicitly; leaving
+    // this unset keeps today's 1x behavior. Sprites are unaffected either
+    // way — imageSmoothingEnabled stays false below regardless — so pixel
+    // art has no reason to turn this on.
+    const pixelRatio = props.canvas?.pixelRatio === true ? window.devicePixelRatio || 1 : props.canvas?.pixelRatio ?? 1;
+    if (pixelRatio !== 1) {
+        // Resizing the backing buffer resets the 2D context's transform (and
+        // everything else about its state), so context.scale below has to
+        // come after this, not before.
+        canvas.width = logicalWidth * pixelRatio;
+        canvas.height = logicalHeight * pixelRatio;
+        canvas.style.width = `${logicalWidth}px`;
+        canvas.style.height = `${logicalHeight}px`;
+        context.scale(pixelRatio, pixelRatio);
+    }
     // Make the canvas focusable so keyboard input is scoped to it instead of
     // leaking to the rest of the page (e.g. arrow keys scrolling the window).
     canvas.tabIndex = 0;
+    // Stops the browser from treating a drag/pinch on the canvas as page
+    // scroll/zoom — backs up the touchstart/touchmove preventDefault calls
+    // below for gestures (e.g. a pinch starting on the canvas) preventDefault
+    // alone doesn't reliably stop.
+    canvas.style.touchAction = "none";
     // Resizes the *display* size only (CSS width/height) — canvas.width/
     // height above stays the fixed logical resolution every renderable's
     // position is already expressed in, so this never needs to touch any
@@ -210,27 +282,14 @@ const runEngine = async (props) => {
         events.push({ tag: "CUSTOM", event });
     };
     const resources = props.resources ?? {};
-    const resourceById = await iterateRecordAsync(resources, async ({ value }) => new Promise((resolve) => {
-        const image = new Image();
-        const settle = (loadedImage) => {
-            resolve({
-                image: loadedImage,
-                size: {
-                    width: value.size.width / value.slices.horizontal,
-                    height: value.size.height / value.slices.vertical,
-                },
-                slices: value.slices,
-                animations: value.animations ?? {},
-            });
-        };
-        image.src = value.src;
-        image.onload = () => settle(image);
-        // Missing/failed-to-load asset (see .gitignore's dist/resources/
-        // note) — a placeholder sheet, sized to match what this resource
-        // declared, keeps every frame/slice/animation index the example
-        // already computes valid instead of drawing nothing or throwing.
-        image.onerror = () => settle(createPlaceholderSheet(value.size));
-    }));
+    const resourceById = await iterateRecordAsync(resources, ({ value }) => loadResource(value));
+    // Registers a resource after startup — loads it exactly like the
+    // resources above (loadResource is the same function), then adds it to
+    // the same resourceById map every SPRITE/ANIMATED_SPRITE lookup already
+    // reads from, so it's usable by `resourceId` as soon as this resolves.
+    const addResource = async (id, resource) => {
+        resourceById[id] = await loadResource(resource);
+    };
     const loadAudio = (src) => new Promise((resolve) => {
         const audio = new Audio(src);
         audio.oncanplaythrough = function () {
@@ -310,7 +369,12 @@ const runEngine = async (props) => {
     // fullscreen functions are no-ops here since this run never gets far
     // enough to own the canvas — the newer run's are the ones that matter.
     if (runId !== latestRunId) {
-        return { sendEvent, requestFullscreen: () => Promise.resolve(), exitFullscreen: () => Promise.resolve() };
+        return {
+            sendEvent,
+            requestFullscreen: () => Promise.resolve(),
+            exitFullscreen: () => Promise.resolve(),
+            addResource,
+        };
     }
     context.imageSmoothingEnabled = false;
     // An offscreen 1x1 canvas used only to resolve a CSS color string (a
@@ -398,7 +462,12 @@ const runEngine = async (props) => {
         seenAnimationIds.add(renderable.id);
         const resource = resourceById[renderable.resourceId];
         const animation = resource.animations[renderable.animation];
-        const timeScale = renderable.timeScale ?? 1;
+        // Composed with RunEngineProps.timeScale (currentTimeScale, set once
+        // per tick below) — this renderable's own speed multiplied by
+        // whatever the whole game's currently running at, so a global 2x/4x/
+        // stop control speeds up (or freezes) every animation right along
+        // with the rest of the simulation, not just movement/timers.
+        const timeScale = (renderable.timeScale ?? 1) * currentTimeScale;
         const paused = renderable.paused ?? false;
         const now = Date.now();
         const tracked = animationStateById.get(renderable.id);
@@ -590,8 +659,20 @@ const runEngine = async (props) => {
     // the same conversion to line up.
     const getCanvasPosition = (ev) => {
         return {
-            x: (ev.offsetX * canvas.width) / canvas.clientWidth,
-            y: (ev.offsetY * canvas.height) / canvas.clientHeight,
+            x: (ev.offsetX * logicalWidth) / canvas.clientWidth,
+            y: (ev.offsetY * logicalHeight) / canvas.clientHeight,
+        };
+    };
+    // Touch's equivalent of getCanvasPosition — a Touch has no offsetX/Y
+    // (that's a MouseEvent-only convenience), so this gets there manually
+    // via getBoundingClientRect instead. clientX/Y and the rect are both
+    // viewport-relative, so their difference stays correct regardless of
+    // page scroll.
+    const getTouchPosition = (touch) => {
+        const rect = canvas.getBoundingClientRect();
+        return {
+            x: ((touch.clientX - rect.left) * logicalWidth) / canvas.clientWidth,
+            y: ((touch.clientY - rect.top) * logicalHeight) / canvas.clientHeight,
         };
     };
     const updateState = (updateFn) => {
@@ -600,8 +681,19 @@ const runEngine = async (props) => {
     const nextStateFns = Array.isArray(props.nextState) ? props.nextState : [props.nextState];
     let lastFrame = Date.now();
     let hoveredId = null;
-    const handleClick = (ev) => {
-        const mouse = getCanvasPosition(ev);
+    // How much this tick's simulated time is scaled by (see
+    // RunEngineProps.timeScale) — set once per tick, right before that
+    // tick's own TIME event delta is computed, and read again later the
+    // same tick by resolveAnimatedSprite (below) so a single number
+    // governs both game logic and animation playback consistently within
+    // one tick rather than each recomputing props.timeScale(state)
+    // separately (state may itself have just changed this same tick).
+    let currentTimeScale = 1;
+    // Shared by the mouse "click" listener and the touch handlers below —
+    // firing a CLICK is the same "is whatever's currently hovered
+    // isClickable" check either way; only how `mouse` was determined
+    // differs (a real click event vs. a lifted finger).
+    const fireClick = (mouse) => {
         if (hoveredId === null)
             return;
         const { renderables, camera } = renderState(state);
@@ -610,6 +702,7 @@ const runEngine = async (props) => {
             events.push({ tag: "CLICK", id: hovered.id, mouse, worldMouse: toWorldPosition(mouse, camera) });
         }
     };
+    const handleClick = (ev) => fireClick(getCanvasPosition(ev));
     canvas.addEventListener("click", handleClick);
     const initialState = {
         keyboardState: createRecord(keyboardKeys, () => false),
@@ -639,8 +732,34 @@ const runEngine = async (props) => {
         }
     };
     canvas.addEventListener("keyup", handleKeyUp);
-    const handleMouseMoveHover = (ev) => {
-        const mouse = getCanvasPosition(ev);
+    // mouseButton state (see NextStateProps.mouseButton) — a double-buffer
+    // exactly like keyboardState above, just for the primary mouse button.
+    let previousMouseButtonState = { isPressed: false };
+    const currentMouseButtonState = { isPressed: false };
+    const handleMouseDown = (event) => {
+        // Left/primary button only — matching CLICK, which already only
+        // ever fires for it.
+        if (event.button === 0) {
+            currentMouseButtonState.isPressed = true;
+        }
+    };
+    canvas.addEventListener("mousedown", handleMouseDown);
+    const handleMouseUp = (event) => {
+        if (event.button === 0) {
+            currentMouseButtonState.isPressed = false;
+        }
+    };
+    // On window rather than the canvas — so releasing the button after
+    // having dragged off the canvas while still holding it down still
+    // clears isPressed, instead of leaving it stuck true forever.
+    window.addEventListener("mouseup", handleMouseUp);
+    // Shared by mousemove and the touch handlers below — updates hoveredId
+    // from a canvas position and fires HOVER_IN/HOVER_OUT as whatever's
+    // underneath it changes. Touch has no ambient hover the way a mouse
+    // does (nothing is "hovered" until a finger actually touches down), but
+    // feeding a touch's position through this the same as the mouse's is
+    // what lets an isHoverable renderable react to a tap/drag at all.
+    const updateHover = (mouse) => {
         const { renderables, camera } = renderState(state);
         const worldMouse = toWorldPosition(mouse, camera);
         const hovered = [...renderables]
@@ -657,9 +776,9 @@ const runEngine = async (props) => {
         }
         hoveredId = hovered === undefined ? null : hovered.id ?? null;
     };
+    const handleMouseMoveHover = (ev) => updateHover(getCanvasPosition(ev));
     canvas.addEventListener("mousemove", handleMouseMoveHover);
-    const handleMouseMoveTracking = (ev) => {
-        const mouse = getCanvasPosition(ev);
+    const updateTracking = (mouse) => {
         if (hoveredId === null) {
             return;
         }
@@ -669,13 +788,17 @@ const runEngine = async (props) => {
             events.push({ tag: "MOUSE_MOVE", mouse, worldMouse: toWorldPosition(mouse, camera), id: hovered.id });
         }
     };
+    const handleMouseMoveTracking = (ev) => updateTracking(getCanvasPosition(ev));
     canvas.addEventListener("mousemove", handleMouseMoveTracking);
     // No further mousemove fires once the mouse is off the canvas, so this
     // is also the only chance to report a HOVER_OUT for whatever was
     // hovered when it left — otherwise that hover would just dangle,
     // never explicitly ended.
-    const handleMouseLeave = (ev) => {
-        const mouse = getCanvasPosition(ev);
+    // Shared by mouseleave and the touch handlers below — clears whatever's
+    // hovered (firing HOVER_OUT for it) without a HOVER_IN taking its
+    // place. Returns worldMouse so callers that need it (MOUSE_LEAVE below)
+    // don't have to call renderState() a second time just to get it.
+    const clearHover = (mouse) => {
         const { renderables, camera } = renderState(state);
         const worldMouse = toWorldPosition(mouse, camera);
         if (hoveredId !== null) {
@@ -685,9 +808,79 @@ const runEngine = async (props) => {
             }
         }
         hoveredId = null;
+        return worldMouse;
+    };
+    const handleMouseLeave = (ev) => {
+        const mouse = getCanvasPosition(ev);
+        const worldMouse = clearHover(mouse);
         events.push({ tag: "MOUSE_LEAVE", mouse, worldMouse });
     };
     canvas.addEventListener("mouseleave", handleMouseLeave);
+    // Translates touch into the same HOVER_IN/HOVER_OUT/MOUSE_MOVE/CLICK
+    // events mouse input already produces (via updateHover/updateTracking/
+    // fireClick/clearHover above), so existing game code written against
+    // those events works on a touchscreen with no changes of its own.
+    // Single-touch only — touches[0]/changedTouches[0] — the same "one
+    // active pointer" model mouse input already assumes; a second finger is
+    // ignored rather than tracked as its own pointer.
+    //
+    // preventDefault on start/move keeps a drag/tap on the canvas from also
+    // scrolling, pinch-zooming, or triggering pull-to-refresh — the browser
+    // gestures a touchscreen normally reserves that space for; { passive:
+    // false } is what makes preventDefault actually take effect here.
+    const handleTouchStart = (ev) => {
+        ev.preventDefault();
+        const touch = ev.touches[0];
+        if (touch === undefined)
+            return;
+        currentMouseButtonState.isPressed = true;
+        const mouse = getTouchPosition(touch);
+        updateHover(mouse);
+        updateTracking(mouse);
+    };
+    canvas.addEventListener("touchstart", handleTouchStart, { passive: false });
+    const handleTouchMove = (ev) => {
+        ev.preventDefault();
+        const touch = ev.touches[0];
+        if (touch === undefined)
+            return;
+        const mouse = getTouchPosition(touch);
+        updateHover(mouse);
+        updateTracking(mouse);
+    };
+    canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+    // A lifted finger both releases (mirroring mouseup) and clicks
+    // (mirroring the browser's own click-after-mouseup) — touch has no
+    // separate "up" and "click" events of its own the way mouse does, so
+    // both happen here together, in that order. hover is updated once more
+    // first so a plain tap (touchstart immediately followed by touchend,
+    // with no touchmove between them to have already done this) still
+    // fires CLICK against whatever's actually under it; hover is then
+    // cleared, since nothing's left touching it once the finger lifts.
+    const handleTouchEnd = (ev) => {
+        ev.preventDefault();
+        currentMouseButtonState.isPressed = false;
+        const touch = ev.changedTouches[0];
+        if (touch === undefined)
+            return;
+        const mouse = getTouchPosition(touch);
+        updateHover(mouse);
+        fireClick(mouse);
+        clearHover(mouse);
+    };
+    canvas.addEventListener("touchend", handleTouchEnd, { passive: false });
+    // A cancelled touch (e.g. an incoming call interrupting the page, or
+    // the OS deciding it's a system gesture instead) never fires touchend —
+    // handled the same as lifting the finger, minus the click, since
+    // there's no tap to speak of once the touch itself has been cancelled.
+    const handleTouchCancel = (ev) => {
+        currentMouseButtonState.isPressed = false;
+        const touch = ev.changedTouches[0];
+        if (touch === undefined)
+            return;
+        clearHover(getTouchPosition(touch));
+    };
+    canvas.addEventListener("touchcancel", handleTouchCancel, { passive: false });
     // Tab switches are a document-level concern (visibilitychange), not
     // something that ever reaches the canvas itself the way mouse/keyboard
     // events do.
@@ -808,7 +1001,14 @@ const runEngine = async (props) => {
     };
     const intervalId = setInterval(() => {
         const now = Date.now();
-        const delta = now - lastFrame;
+        const rawDelta = now - lastFrame;
+        // Read from state as this tick starts (i.e. still last tick's own
+        // result) — resolveAnimatedSprite (below, during this same tick's
+        // render pass) reads this same currentTimeScale rather than calling
+        // props.timeScale itself, so a single value governs both the TIME
+        // event about to fire and every animation's playback consistently.
+        currentTimeScale = props.timeScale?.(state) ?? 1;
+        const delta = rawDelta * currentTimeScale;
         events.push({ tag: "TIME", delta: delta });
         for (const event of events) {
             const keyboard = iterateRecord(previousState.keyboardState, ({ key, value: previouslyPressed }) => {
@@ -819,11 +1019,17 @@ const runEngine = async (props) => {
                     isJustReleased: !isPressed && previouslyPressed,
                 };
             });
+            const mouseButton = {
+                isPressed: currentMouseButtonState.isPressed,
+                isJustPressed: currentMouseButtonState.isPressed && !previousMouseButtonState.isPressed,
+                isJustReleased: !currentMouseButtonState.isPressed && previousMouseButtonState.isPressed,
+            };
             for (const nextState of nextStateFns) {
                 const result = nextState({
                     state,
                     event,
                     keyboard,
+                    mouseButton,
                     playSound,
                     playMusic,
                     pauseMusic,
@@ -843,7 +1049,7 @@ const runEngine = async (props) => {
             }
         }
         events.splice(0, events.length);
-        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.clearRect(0, 0, logicalWidth, logicalHeight);
         const { cursor, renderables } = renderState(state);
         canvas.style.cursor = cursor ?? "default";
         for (const renderable of renderables) {
@@ -876,12 +1082,11 @@ const runEngine = async (props) => {
                 continue;
             }
             if (renderable.type === "SPRITE") {
-                const { opacity = 1, flipX = false, modulate, swapColors } = renderable;
+                const { opacity = 1, flipX = false, frame: frameIndex = 0, modulate, swapColors } = renderable;
                 const resource = resourceById[renderable.resourceId];
                 const frame = {
-                    x: renderable.frame % resource.slices.horizontal,
-                    y: Math.floor(renderable.frame / resource.slices.horizontal) %
-                        resource.slices.vertical,
+                    x: frameIndex % resource.slices.horizontal,
+                    y: Math.floor(frameIndex / resource.slices.horizontal) % resource.slices.vertical,
                 };
                 const source = {
                     x: frame.x * resource.size.width,
@@ -901,7 +1106,7 @@ const runEngine = async (props) => {
                 let image = resource.image;
                 let imageSource = source;
                 if (swapColors !== undefined && swapColors.length > 0) {
-                    image = swappedSpriteFrame(renderable.resourceId, renderable.frame, image, imageSource, swapColors);
+                    image = swappedSpriteFrame(renderable.resourceId, frameIndex, image, imageSource, swapColors);
                     imageSource = { x: 0, y: 0, width: source.width, height: source.height };
                 }
                 if (modulate !== undefined) {
@@ -955,6 +1160,7 @@ const runEngine = async (props) => {
         }
         lastFrame = now;
         previousState.keyboardState = { ...currentState.keyboardState };
+        previousMouseButtonState = { ...currentMouseButtonState };
     }, 0);
     resetCanvas = () => {
         clearInterval(intervalId);
@@ -978,9 +1184,16 @@ const runEngine = async (props) => {
         canvas.removeEventListener("click", handleClick);
         canvas.removeEventListener("keydown", handleKeyDown);
         canvas.removeEventListener("keyup", handleKeyUp);
+        canvas.removeEventListener("mousedown", handleMouseDown);
         canvas.removeEventListener("mousemove", handleMouseMoveHover);
         canvas.removeEventListener("mousemove", handleMouseMoveTracking);
         canvas.removeEventListener("mouseleave", handleMouseLeave);
+        canvas.removeEventListener("touchstart", handleTouchStart);
+        canvas.removeEventListener("touchmove", handleTouchMove);
+        canvas.removeEventListener("touchend", handleTouchEnd);
+        canvas.removeEventListener("touchcancel", handleTouchCancel);
+        // On window, not the canvas — see where it's added above for why.
+        window.removeEventListener("mouseup", handleMouseUp);
         // This one's on `document`, not the canvas — same reasoning as above,
         // just doubly true since `document` isn't even scoped to this canvas.
         window.document.removeEventListener("visibilitychange", handleVisibilityChange);
@@ -988,9 +1201,53 @@ const runEngine = async (props) => {
         // Same pile-up risk as the canvas listeners above, but on `window`.
         window.removeEventListener("resize", applyResize);
     };
-    return { sendEvent, requestFullscreen, exitFullscreen };
+    return { sendEvent, requestFullscreen, exitFullscreen, addResource };
 };
 
+// One factory per Renderable variant — literally just `{ type: "X",
+// ...props }`, so `sprite({...})` (or `Yuuna.sprite({...})` in the
+// browser bundle/playground) reads the same as writing the object
+// literal by hand, minus needing to get `type` right yourself.
+// Deliberately not a place defaults live: besides SpriteRenderable.frame
+// (optional at the type level, see types.ts — the engine itself defaults
+// it to 0), each factory still requires whatever its Renderable type
+// still requires.
+const rectangle = (props) => ({
+    type: "RECTANGLE",
+    ...props,
+});
+const circle = (props) => ({
+    type: "CIRCLE",
+    ...props,
+});
+const text = (props) => ({
+    type: "TEXT",
+    ...props,
+});
+const sprite = (props) => ({
+    type: "SPRITE",
+    ...props,
+});
+const animatedSprite = (props) => ({
+    type: "ANIMATED_SPRITE",
+    ...props,
+});
+const line = (props) => ({
+    type: "LINE",
+    ...props,
+});
+const group = (props) => ({
+    type: "GROUP",
+    ...props,
+});
+
 exports.STOP = STOP;
+exports.animatedSprite = animatedSprite;
+exports.circle = circle;
+exports.group = group;
+exports.line = line;
+exports.rectangle = rectangle;
 exports.runEngine = runEngine;
+exports.sprite = sprite;
+exports.text = text;
 //# sourceMappingURL=index.cjs.map

package/lib/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 import { runEngine } from "./engine/runEngine";
 import { STOP } from "./engine/types";
-export { runEngine, STOP };
-export type { NextStateFunction, NextStateProps, Renderable, GameEvent, CustomGameEvent, } from "./engine/types";
+import { animatedSprite, circle, group, line, rectangle, sprite, text } from "./engine/renderables";
+export { runEngine, STOP, rectangle, circle, text, sprite, animatedSprite, line, group };
+export type { NextStateFunction, NextStateProps, Renderable, ResourceConfig, GameEvent, CustomGameEvent, } from "./engine/types";