cubeforge 0.3.12 → 0.3.14

package/README.md

@@ -32,8 +32,8 @@ npm install cubeforge react react-dom
 ## What's included
 
 - **ECS** — archetype-based entity-component-system with query caching
-- **Physics** — two-pass AABB, capsule colliders, kinematic bodies, one-way platforms, 60 Hz fixed timestep
-- **Renderer** — WebGL2 instanced renderer by default; Canvas2D opt-in via `renderer={Canvas2DRenderSystem}`
+- **Physics** — two-pass AABB, kinematic bodies, one-way platforms, 60 Hz fixed timestep
+- **Renderer** — WebGL2 instanced renderer by default
 - **Input** — keyboard, mouse, gamepad, per-player input maps, input contexts, recording/playback
 - **Audio** — Web Audio API with volume groups, fade, crossfade, ducking (`useSound`)
 - **Gameplay hooks** — `usePlatformerController`, `useTopDownMovement`, `useHealth`, `useSave`, `useGameStateMachine`, `useLevelTransition`, `usePathfinding`, `useAISteering`, and more

package/dist/index.d.ts

@@ -153,8 +153,10 @@ interface RigidBodyProps {
     lockX?: boolean;
     /** Prevent any vertical movement — velocity.y is zeroed every frame (disables gravity) */
     lockY?: boolean;
+    /** Enable continuous collision detection to prevent tunneling through thin colliders */
+    ccd?: boolean;
 }
-declare function RigidBody({ mass, gravityScale, isStatic, bounce, friction, vx, vy, lockX, lockY, }: RigidBodyProps): null;
+declare function RigidBody({ mass, gravityScale, isStatic, bounce, friction, vx, vy, lockX, lockY, ccd, }: RigidBodyProps): null;
 
 interface BoxColliderProps {
     width: number;

package/dist/index.js

@@ -249,14 +249,16 @@ function findByTag(world, tag) {
 
 // ../../packages/core/src/loop/gameLoop.ts
 var GameLoop = class {
-  constructor(onTick) {
+  constructor(onTick, options) {
     this.onTick = onTick;
+    this.fixedDt = options?.fixedDt;
   }
   rafId = 0;
   lastTime = 0;
   running = false;
   paused = false;
   hitPauseTimer = 0;
+  fixedDt;
   hitPause(duration) {
     this.hitPauseTimer = duration;
   }
@@ -292,8 +294,9 @@ var GameLoop = class {
   }
   frame = (time) => {
     if (!this.running) return;
-    const dt = Math.min((time - this.lastTime) / 1e3, 0.1);
+    const rawDt = Math.min((time - this.lastTime) / 1e3, 0.1);
     this.lastTime = time;
+    const dt = this.fixedDt ?? rawDt;
     if (this.hitPauseTimer > 0) {
       this.hitPauseTimer -= dt;
     } else {
@@ -345,6 +348,11 @@ var AssetManager = class {
   _loaded = 0;
   _total = 0;
   _progressListeners = /* @__PURE__ */ new Set();
+  /** Base URL prefix applied to all asset paths starting with '/'. Set by Game component. */
+  baseURL = "";
+  resolve(src) {
+    return this.baseURL && src.startsWith("/") ? this.baseURL + src : src;
+  }
   getAudioContext() {
     if (!this.audioCtx) {
       this.audioCtx = new AudioContext();
@@ -373,28 +381,29 @@ var AssetManager = class {
     return () => this._progressListeners.delete(cb);
   }
   async loadImage(src) {
-    if (this.imagePromises.has(src)) return this.imagePromises.get(src);
+    const resolved = this.resolve(src);
+    if (this.imagePromises.has(resolved)) return this.imagePromises.get(resolved);
     this._total++;
     this.emitProgress();
     const promise = (async () => {
       const img = new Image();
-      img.src = src;
+      img.src = resolved;
       try {
         await new Promise((resolve, reject) => {
           img.onload = () => resolve();
           img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
         });
       } catch (err) {
-        console.warn(`[Cubeforge] Failed to load image: ${src}`);
+        console.warn(`[Cubeforge] Failed to load image: ${resolved}`);
         throw err;
       } finally {
         this._loaded++;
         this.emitProgress();
       }
-      this.images.set(src, img);
+      this.images.set(resolved, img);
       return img;
     })();
-    this.imagePromises.set(src, promise);
+    this.imagePromises.set(resolved, promise);
     return promise;
   }
   /** Resolves once every image that has been requested via loadImage() is settled. */
@@ -402,23 +411,24 @@ var AssetManager = class {
     await Promise.allSettled([...this.imagePromises.values()]);
   }
   getImage(src) {
-    return this.images.get(src);
+    return this.images.get(this.resolve(src));
   }
   /** Returns a read-only snapshot of all loaded images keyed by src. */
   getLoadedImages() {
     return this.images;
   }
   async loadAudio(src) {
-    if (this.audio.has(src)) return this.audio.get(src);
+    const resolved = this.resolve(src);
+    if (this.audio.has(resolved)) return this.audio.get(resolved);
     const ctx = this.getAudioContext();
     try {
-      const response = await fetch(src);
+      const response = await fetch(resolved);
       const arrayBuffer = await response.arrayBuffer();
       const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
-      this.audio.set(src, audioBuffer);
+      this.audio.set(resolved, audioBuffer);
       return audioBuffer;
     } catch (err) {
-      console.warn(`[Cubeforge] Failed to load audio: ${src}`);
+      console.warn(`[Cubeforge] Failed to load audio: ${resolved}`);
       throw err;
     }
   }
@@ -940,11 +950,16 @@ var Mouse = class {
 var InputManager = class {
   keyboard = new Keyboard();
   mouse = new Mouse();
+  _attachedElement = null;
   attach(canvas) {
+    if (this._attachedElement === canvas) return;
+    if (this._attachedElement) this.detach();
+    this._attachedElement = canvas;
     this.keyboard.attach(window);
     this.mouse.attach(canvas);
   }
   detach() {
+    this._attachedElement = null;
     this.keyboard.detach();
     this.mouse.detach();
   }
@@ -1384,6 +1399,7 @@ function parseCSSColor(css) {
 // ../../packages/renderer/src/webglRenderSystem.ts
 var FLOATS_PER_INSTANCE = 18;
 var MAX_INSTANCES = 8192;
+var MAX_SPRITE_TEXTURES = 512;
 var MAX_TEXT_CACHE = 200;
 function compileShader(gl, type, src) {
   const shader = gl.createShader(type);
@@ -1564,6 +1580,8 @@ var RenderSystem = class {
   instanceData;
   whiteTexture;
   textures = /* @__PURE__ */ new Map();
+  /** Tracks texture access order for LRU eviction (most recent at end). */
+  textureLRU = [];
   imageCache = /* @__PURE__ */ new Map();
   // Cached uniform locations — sprite program
   uCamPos;
@@ -1596,6 +1614,21 @@ var RenderSystem = class {
   getDefaultSampling() {
     return this._defaultSampling;
   }
+  // ── Sprite texture LRU helpers ──────────────────────────────────────────
+  /** Record a texture key as recently used; evict LRU entries if over limit. */
+  touchTexture(key) {
+    const idx = this.textureLRU.indexOf(key);
+    if (idx !== -1) this.textureLRU.splice(idx, 1);
+    this.textureLRU.push(key);
+    while (this.textureLRU.length > MAX_SPRITE_TEXTURES) {
+      const evict = this.textureLRU.shift();
+      const tex = this.textures.get(evict);
+      if (tex) {
+        this.gl.deleteTexture(tex);
+        this.textures.delete(evict);
+      }
+    }
+  }
   // ── Debug overlays ──────────────────────────────────────────────────────
   debugNavGrid = null;
   contactFlashPoints = [];
@@ -1613,7 +1646,10 @@ var RenderSystem = class {
   // ── Texture management (sprite textures — CLAMP_TO_EDGE) ──────────────────
   loadTexture(src) {
     const cached = this.textures.get(src);
-    if (cached) return cached;
+    if (cached) {
+      this.touchTexture(src);
+      return cached;
+    }
     let imgSrc = src;
     const sampIdx = imgSrc.indexOf(":s=");
     if (sampIdx !== -1) imgSrc = imgSrc.slice(0, sampIdx);
@@ -1629,6 +1665,7 @@ var RenderSystem = class {
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
       this.textures.set(src, tex);
+      this.touchTexture(src);
       return tex;
     }
     if (!existing) {
@@ -1646,6 +1683,11 @@ var RenderSystem = class {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap);
         this.textures.set(src, tex);
+        this.touchTexture(src);
+      };
+      img.onerror = () => {
+        console.warn(`[WebGLRenderSystem] Failed to load image: ${imgSrc}`);
+        this.imageCache.delete(imgSrc);
       };
       this.imageCache.set(imgSrc, img);
     }
@@ -1936,6 +1978,9 @@ var RenderSystem = class {
           gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_S, wrap);
           gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_T, wrap);
           this.textures.set(cacheKey, tex);
+          this.touchTexture(cacheKey);
+        } else if (cacheKey) {
+          this.touchTexture(cacheKey);
         }
       } else if (sprite.src && !sprite.image) {
         let img = this.imageCache.get(sprite.src);
@@ -1951,6 +1996,11 @@ var RenderSystem = class {
             gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MIN_FILTER, gl2.NEAREST);
             gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MAG_FILTER, gl2.NEAREST);
             this.textures.set(img.src, tex);
+            this.touchTexture(img.src);
+          };
+          img.onerror = () => {
+            console.warn(`[WebGLRenderSystem] Failed to load image: ${img.src}`);
+            this.imageCache.delete(img.src);
           };
         }
         sprite.image = img;
@@ -2259,6 +2309,7 @@ function createRigidBody(opts) {
     lockY: false,
     isKinematic: false,
     dropThrough: 0,
+    ccd: false,
     ...opts
   };
 }
@@ -2330,6 +2381,14 @@ function getAABB(transform, collider) {
     hh: collider.height / 2
   };
 }
+function getCapsuleAABB(transform, capsule) {
+  return {
+    cx: transform.x + capsule.offsetX,
+    cy: transform.y + capsule.offsetY,
+    hw: capsule.width / 2,
+    hh: capsule.height / 2
+  };
+}
 function getOverlap(a, b) {
   const dx = a.cx - b.cx;
   const dy = a.cy - b.cy;
@@ -2432,6 +2491,36 @@ function getCompoundBounds(tx, ty, shapes) {
 function canInteractGeneric(aLayer, aMask, bLayer, bMask) {
   return maskAllows(aMask, bLayer) && maskAllows(bMask, aLayer);
 }
+function sweepAABB(aCx, aCy, aHw, aHh, dx, dy, b) {
+  const eHw = b.hw + aHw;
+  const eHh = b.hh + aHh;
+  const left = b.cx - eHw;
+  const right = b.cx + eHw;
+  const top = b.cy - eHh;
+  const bottom = b.cy + eHh;
+  let tmin = -Infinity;
+  let tmax = Infinity;
+  if (dx !== 0) {
+    const t1 = (left - aCx) / dx;
+    const t2 = (right - aCx) / dx;
+    tmin = Math.max(tmin, Math.min(t1, t2));
+    tmax = Math.min(tmax, Math.max(t1, t2));
+  } else if (aCx < left || aCx > right) {
+    return null;
+  }
+  if (dy !== 0) {
+    const t1 = (top - aCy) / dy;
+    const t2 = (bottom - aCy) / dy;
+    tmin = Math.max(tmin, Math.min(t1, t2));
+    tmax = Math.min(tmax, Math.max(t1, t2));
+  } else if (aCy < top || aCy > bottom) {
+    return null;
+  }
+  if (tmax < 0 || tmin > tmax || tmin > 1) return null;
+  const t = Math.max(0, tmin);
+  if (t > 1) return null;
+  return t;
+}
 function pairKey(a, b) {
   return a < b ? `${a}:${b}` : `${b}:${a}`;
 }
@@ -2442,11 +2531,15 @@ var PhysicsSystem = class {
   }
   accumulator = 0;
   FIXED_DT = 1 / 60;
+  /** Maximum accumulated time (seconds). Prevents hundreds of sub-steps when
+   *  the tab is backgrounded and dt spikes on resume. 0.1s ≈ 6 steps at 60Hz. */
+  MAX_ACCUMULATOR = 0.1;
   // Active contact sets — updated each physics step.
   activeTriggerPairs = /* @__PURE__ */ new Map();
   activeCollisionPairs = /* @__PURE__ */ new Map();
   activeCirclePairs = /* @__PURE__ */ new Map();
   activeCompoundPairs = /* @__PURE__ */ new Map();
+  activeCapsulePairs = /* @__PURE__ */ new Map();
   // Previous-frame positions of static entities — used to compute platform carry delta.
   staticPrevPos = /* @__PURE__ */ new Map();
   setGravity(g) {
@@ -2454,8 +2547,8 @@ var PhysicsSystem = class {
   }
   update(world, dt) {
     this.accumulator += dt;
-    if (this.accumulator > 5 * this.FIXED_DT) {
-      this.accumulator = 5 * this.FIXED_DT;
+    if (this.accumulator > this.MAX_ACCUMULATOR) {
+      this.accumulator = this.MAX_ACCUMULATOR;
     }
     while (this.accumulator >= this.FIXED_DT) {
       this.step(world, this.FIXED_DT);
@@ -2483,6 +2576,12 @@ var PhysicsSystem = class {
       if (rb.isStatic) statics.push(id);
       else dynamics.push(id);
     }
+    const allCapsule = world.query("Transform", "RigidBody", "CapsuleCollider");
+    const capsuleDynamics = [];
+    for (const id of allCapsule) {
+      const rb = world.getComponent(id, "RigidBody");
+      if (!rb.isStatic) capsuleDynamics.push(id);
+    }
     for (const [key, [a, b]] of this.activeTriggerPairs) {
       if (!world.hasEntity(a) || !world.hasEntity(b)) {
         this.events?.emit("triggerExit", { a, b });
@@ -2507,6 +2606,12 @@ var PhysicsSystem = class {
         this.activeCompoundPairs.delete(key);
       }
     }
+    for (const [key, [a, b]] of this.activeCapsulePairs) {
+      if (!world.hasEntity(a) || !world.hasEntity(b)) {
+        this.events?.emit("capsuleExit", { a, b });
+        this.activeCapsulePairs.delete(key);
+      }
+    }
     const staticDelta = /* @__PURE__ */ new Map();
     for (const sid of statics) {
       const st = world.getComponent(sid, "Transform");
@@ -2541,6 +2646,24 @@ var PhysicsSystem = class {
       if (rb.lockY) rb.vy = 0;
       if (rb.dropThrough > 0) rb.dropThrough--;
     }
+    const ccdPrev = /* @__PURE__ */ new Map();
+    for (const id of dynamics) {
+      const rb = world.getComponent(id, "RigidBody");
+      if (rb.ccd) {
+        const t = world.getComponent(id, "Transform");
+        ccdPrev.set(id, { x: t.x, y: t.y });
+      }
+    }
+    for (const id of capsuleDynamics) {
+      const rb = world.getComponent(id, "RigidBody");
+      rb.onGround = false;
+      rb.isNearGround = false;
+      if (rb.isKinematic) continue;
+      if (!rb.lockY) rb.vy += this.gravity * rb.gravityScale * dt;
+      if (rb.lockX) rb.vx = 0;
+      if (rb.lockY) rb.vy = 0;
+      if (rb.dropThrough > 0) rb.dropThrough--;
+    }
     for (const id of dynamics) {
       const transform = world.getComponent(id, "Transform");
       const rb = world.getComponent(id, "RigidBody");
@@ -2571,6 +2694,36 @@ var PhysicsSystem = class {
         }
       }
     }
+    for (const id of capsuleDynamics) {
+      const transform = world.getComponent(id, "Transform");
+      const rb = world.getComponent(id, "RigidBody");
+      const cap = world.getComponent(id, "CapsuleCollider");
+      transform.x += rb.vx * dt;
+      if (!cap.isTrigger) {
+        const dynAABB = getCapsuleAABB(transform, cap);
+        const candidateCells = this.getCells(dynAABB.cx, dynAABB.cy, dynAABB.hw, dynAABB.hh);
+        const checked = /* @__PURE__ */ new Set();
+        for (const cell of candidateCells) {
+          const bucket = staticGrid.get(cell);
+          if (!bucket) continue;
+          for (const sid of bucket) {
+            if (checked.has(sid)) continue;
+            checked.add(sid);
+            const st = world.getComponent(sid, "Transform");
+            const sc = world.getComponent(sid, "BoxCollider");
+            if (sc.isTrigger) continue;
+            if (sc.slope !== 0) continue;
+            if (!canInteractGeneric(cap.layer, cap.mask, sc.layer, sc.mask)) continue;
+            const ov = getOverlap(getCapsuleAABB(transform, cap), getAABB(st, sc));
+            if (!ov) continue;
+            if (Math.abs(ov.x) < Math.abs(ov.y)) {
+              transform.x += ov.x;
+              rb.vx = rb.bounce > 0 ? -rb.vx * rb.bounce : 0;
+            }
+          }
+        }
+      }
+    }
     for (const id of dynamics) {
       const transform = world.getComponent(id, "Transform");
       const rb = world.getComponent(id, "RigidBody");
@@ -2630,6 +2783,127 @@ var PhysicsSystem = class {
         }
       }
     }
+    for (const [id, prev] of ccdPrev) {
+      const transform = world.getComponent(id, "Transform");
+      const rb = world.getComponent(id, "RigidBody");
+      const col = world.getComponent(id, "BoxCollider");
+      const totalDx = transform.x - prev.x;
+      const totalDy = transform.y - prev.y;
+      const moveLen = Math.abs(totalDx) + Math.abs(totalDy);
+      const halfSize = Math.min(col.width, col.height) / 2;
+      if (moveLen <= halfSize) continue;
+      const startCx = prev.x + col.offsetX;
+      const startCy = prev.y + col.offsetY;
+      const sweepDx = totalDx;
+      const sweepDy = totalDy;
+      const hw = col.width / 2;
+      const hh = col.height / 2;
+      let earliestT = 1;
+      let hitSid = null;
+      const endCx = startCx + sweepDx;
+      const endCy = startCy + sweepDy;
+      const minCx = Math.min(startCx, endCx);
+      const maxCx = Math.max(startCx, endCx);
+      const minCy = Math.min(startCy, endCy);
+      const maxCy = Math.max(startCy, endCy);
+      const sweepCells = this.getCells(
+        (minCx + maxCx) / 2,
+        (minCy + maxCy) / 2,
+        (maxCx - minCx) / 2 + hw,
+        (maxCy - minCy) / 2 + hh
+      );
+      const checked = /* @__PURE__ */ new Set();
+      for (const cell of sweepCells) {
+        const bucket = staticGrid.get(cell);
+        if (!bucket) continue;
+        for (const sid of bucket) {
+          if (checked.has(sid)) continue;
+          checked.add(sid);
+          const st = world.getComponent(sid, "Transform");
+          const sc = world.getComponent(sid, "BoxCollider");
+          if (sc.isTrigger) continue;
+          if (!canInteract(col, sc)) continue;
+          const staticAABB = getAABB(st, sc);
+          const t = sweepAABB(startCx, startCy, hw, hh, sweepDx, sweepDy, staticAABB);
+          if (t !== null && t < earliestT) {
+            earliestT = t;
+            hitSid = sid;
+          }
+        }
+      }
+      if (hitSid !== null && earliestT < 1) {
+        const eps = 0.01;
+        const clampedT = Math.max(0, earliestT - eps / (Math.hypot(sweepDx, sweepDy) || 1));
+        transform.x = prev.x + totalDx * clampedT;
+        transform.y = prev.y + totalDy * clampedT;
+        const st = world.getComponent(hitSid, "Transform");
+        const sc = world.getComponent(hitSid, "BoxCollider");
+        const staticAABB = getAABB(st, sc);
+        const contactCx = prev.x + col.offsetX + totalDx * earliestT;
+        const contactCy = prev.y + col.offsetY + totalDy * earliestT;
+        const dxFromCenter = contactCx - staticAABB.cx;
+        const dyFromCenter = contactCy - staticAABB.cy;
+        const overlapX = hw + staticAABB.hw - Math.abs(dxFromCenter);
+        const overlapY = hh + staticAABB.hh - Math.abs(dyFromCenter);
+        if (overlapX > overlapY) {
+          rb.vy = rb.bounce > 0 ? -rb.vy * rb.bounce : 0;
+          if (dyFromCenter < 0) {
+            rb.onGround = true;
+            if (rb.friction < 1) rb.vx *= rb.friction;
+          }
+        } else {
+          rb.vx = rb.bounce > 0 ? -rb.vx * rb.bounce : 0;
+        }
+      }
+    }
+    for (const id of capsuleDynamics) {
+      const transform = world.getComponent(id, "Transform");
+      const rb = world.getComponent(id, "RigidBody");
+      const cap = world.getComponent(id, "CapsuleCollider");
+      transform.y += rb.vy * dt;
+      if (!cap.isTrigger) {
+        const dynAABB = getCapsuleAABB(transform, cap);
+        const candidateCells = this.getCells(dynAABB.cx, dynAABB.cy, dynAABB.hw, dynAABB.hh);
+        const checked = /* @__PURE__ */ new Set();
+        for (const cell of candidateCells) {
+          const bucket = staticGrid.get(cell);
+          if (!bucket) continue;
+          for (const sid of bucket) {
+            if (checked.has(sid)) continue;
+            checked.add(sid);
+            const st = world.getComponent(sid, "Transform");
+            const sc = world.getComponent(sid, "BoxCollider");
+            if (sc.isTrigger) continue;
+            if (!canInteractGeneric(cap.layer, cap.mask, sc.layer, sc.mask)) continue;
+            if (sc.slope !== 0) continue;
+            const ov = getOverlap(getCapsuleAABB(transform, cap), getAABB(st, sc));
+            if (!ov) continue;
+            if (Math.abs(ov.y) <= Math.abs(ov.x)) {
+              if (sc.oneWay) {
+                if (rb.dropThrough > 0) continue;
+                if (ov.y >= 0) continue;
+                const platformTop = st.y + sc.offsetY - sc.height / 2;
+                const prevEntityBottom = transform.y - rb.vy * dt + cap.offsetY + cap.height / 2;
+                if (prevEntityBottom > platformTop) continue;
+              }
+              transform.y += ov.y;
+              if (ov.y < 0) {
+                rb.onGround = true;
+                if (rb.friction < 1) rb.vx *= rb.friction;
+                const delta = staticDelta.get(sid);
+                if (delta) {
+                  transform.x += delta.dx;
+                  if (delta.dy < 0) transform.y += delta.dy;
+                }
+              }
+              rb.vy = rb.bounce > 0 ? -rb.vy * rb.bounce : 0;
+            }
+          }
+        }
+      }
+    }
+    const POSITION_SLOP = 0.5;
+    const CORRECTION_FACTOR = 0.4;
     const currentCollisionPairs = /* @__PURE__ */ new Map();
     for (let i = 0; i < dynamics.length; i++) {
       for (let j = i + 1; j < dynamics.length; j++) {
@@ -2660,10 +2934,14 @@ var PhysicsSystem = class {
             rba.onGround = true;
           }
         }
-        ta.x += ov.x / 2;
-        ta.y += ov.y / 2;
-        tb.x -= ov.x / 2;
-        tb.y -= ov.y / 2;
+        const absOx = Math.abs(ov.x);
+        const absOy = Math.abs(ov.y);
+        const corrX = absOx > POSITION_SLOP ? Math.sign(ov.x) * (absOx - POSITION_SLOP) * CORRECTION_FACTOR : 0;
+        const corrY = absOy > POSITION_SLOP ? Math.sign(ov.y) * (absOy - POSITION_SLOP) * CORRECTION_FACTOR : 0;
+        ta.x += corrX / 2;
+        ta.y += corrY / 2;
+        tb.x -= corrX / 2;
+        tb.y -= corrY / 2;
         const key = pairKey(ia, ib);
         currentCollisionPairs.set(key, [ia, ib]);
       }
@@ -2716,6 +2994,40 @@ var PhysicsSystem = class {
         }
       }
     }
+    for (const id of capsuleDynamics) {
+      const rb = world.getComponent(id, "RigidBody");
+      if (rb.onGround) {
+        rb.isNearGround = true;
+        continue;
+      }
+      const transform = world.getComponent(id, "Transform");
+      const cap = world.getComponent(id, "CapsuleCollider");
+      const probeAABB = {
+        cx: transform.x + cap.offsetX,
+        cy: transform.y + cap.offsetY + 2,
+        hw: cap.width / 2,
+        hh: cap.height / 2
+      };
+      const candidateCells = this.getCells(probeAABB.cx, probeAABB.cy, probeAABB.hw, probeAABB.hh);
+      const checked = /* @__PURE__ */ new Set();
+      outerCapsule: for (const cell of candidateCells) {
+        const bucket = staticGrid.get(cell);
+        if (!bucket) continue;
+        for (const sid of bucket) {
+          if (checked.has(sid)) continue;
+          checked.add(sid);
+          const st = world.getComponent(sid, "Transform");
+          const sc = world.getComponent(sid, "BoxCollider");
+          if (sc.isTrigger) continue;
+          if (!canInteractGeneric(cap.layer, cap.mask, sc.layer, sc.mask)) continue;
+          const ov = getOverlap(probeAABB, getAABB(st, sc));
+          if (ov && Math.abs(ov.y) <= Math.abs(ov.x) && ov.y < 0) {
+            rb.isNearGround = true;
+            break outerCapsule;
+          }
+        }
+      }
+    }
     const allWithCollider = world.query("Transform", "BoxCollider");
     const currentTriggerPairs = /* @__PURE__ */ new Map();
     for (let i = 0; i < allWithCollider.length; i++) {
@@ -2904,6 +3216,55 @@ var PhysicsSystem = class {
       }
       this.activeCompoundPairs = /* @__PURE__ */ new Map();
     }
+    if (allCapsule.length > 0) {
+      const currentCapsulePairs = /* @__PURE__ */ new Map();
+      const allBoxForCapsule = world.query("Transform", "BoxCollider");
+      for (const cid of allCapsule) {
+        const cc = world.getComponent(cid, "CapsuleCollider");
+        const ct = world.getComponent(cid, "Transform");
+        const capsuleAABB = getCapsuleAABB(ct, cc);
+        for (const bid of allBoxForCapsule) {
+          if (bid === cid) continue;
+          const bc = world.getComponent(bid, "BoxCollider");
+          if (!canInteractGeneric(cc.layer, cc.mask, bc.layer, bc.mask)) continue;
+          const bt = world.getComponent(bid, "Transform");
+          const ov = getOverlap(capsuleAABB, getAABB(bt, bc));
+          if (ov) currentCapsulePairs.set(pairKey(cid, bid), [cid, bid]);
+        }
+      }
+      for (let i = 0; i < allCapsule.length; i++) {
+        for (let j = i + 1; j < allCapsule.length; j++) {
+          const ia = allCapsule[i];
+          const ib = allCapsule[j];
+          const ca = world.getComponent(ia, "CapsuleCollider");
+          const cb = world.getComponent(ib, "CapsuleCollider");
+          if (!canInteractGeneric(ca.layer, ca.mask, cb.layer, cb.mask)) continue;
+          const ta = world.getComponent(ia, "Transform");
+          const tb = world.getComponent(ib, "Transform");
+          const ov = getOverlap(getCapsuleAABB(ta, ca), getCapsuleAABB(tb, cb));
+          if (ov) currentCapsulePairs.set(pairKey(ia, ib), [ia, ib]);
+        }
+      }
+      for (const [key, [a, b]] of currentCapsulePairs) {
+        if (!this.activeCapsulePairs.has(key)) {
+          this.events?.emit("capsuleEnter", { a, b });
+        } else {
+          this.events?.emit("capsuleStay", { a, b });
+        }
+        this.events?.emit("capsule", { a, b });
+      }
+      for (const [key, [a, b]] of this.activeCapsulePairs) {
+        if (!currentCapsulePairs.has(key)) {
+          this.events?.emit("capsuleExit", { a, b });
+        }
+      }
+      this.activeCapsulePairs = currentCapsulePairs;
+    } else if (this.activeCapsulePairs.size > 0) {
+      for (const [, [a, b]] of this.activeCapsulePairs) {
+        this.events?.emit("capsuleExit", { a, b });
+      }
+      this.activeCapsulePairs = /* @__PURE__ */ new Map();
+    }
   }
 };
 
@@ -3886,6 +4247,8 @@ function Game({
     const input = new InputManager();
     const events = new EventBus();
     const assets = new AssetManager();
+    const viteEnv = import.meta.env;
+    assets.baseURL = (viteEnv?.BASE_URL ?? "/").replace(/\/$/, "");
     ecs.assets = assets;
     const physics = new PhysicsSystem(gravity, events);
     const entityIds = /* @__PURE__ */ new Map();
@@ -3919,7 +4282,7 @@ function Game({
         if (handle.buffer.length > MAX_DEVTOOLS_FRAMES) handle.buffer.shift();
         handle.onFrame?.();
       }
-    });
+    }, deterministic ? { fixedDt: 1 / 60 } : void 0);
     const state = {
       ecs,
       input,
@@ -4010,6 +4373,12 @@ function Game({
       cancelled = true;
     };
   }, [engine]);
+  useEffect3(() => {
+    if (!engine) return;
+    const canvas = engine.canvas;
+    if (canvas.width !== width) canvas.width = width;
+    if (canvas.height !== height) canvas.height = height;
+  }, [width, height, engine]);
   useEffect3(() => {
     engine?.physics.setGravity(gravity);
   }, [gravity, engine]);
@@ -4130,7 +4499,7 @@ function Entity({ id, tags = [], children }) {
     setEntityId(eid);
     return () => {
       engine.ecs.destroyEntity(eid);
-      if (id) engine.entityIds.delete(id);
+      if (id && engine.entityIds.get(id) === eid) engine.entityIds.delete(id);
     };
   }, []);
   if (entityId === null) return null;
@@ -4213,13 +4582,12 @@ function Sprite({
     });
     engine.ecs.addComponent(entityId, comp);
     if (src) {
-      const viteEnv = import.meta.env;
-      const base = (viteEnv?.BASE_URL ?? "/").replace(/\/$/, "");
-      const resolvedSrc = base && src.startsWith("/") ? base + src : src;
-      comp.src = resolvedSrc;
-      engine.assets.loadImage(resolvedSrc).then((img) => {
+      engine.assets.loadImage(src).then((img) => {
         const c = engine.ecs.getComponent(entityId, "Sprite");
-        if (c) c.image = img;
+        if (c) {
+          c.image = img;
+          c.src = img.src;
+        }
       }).catch(console.error);
     }
     return () => engine.ecs.removeComponent(entityId, "Sprite");
@@ -4293,12 +4661,13 @@ function RigidBody({
   vx = 0,
   vy = 0,
   lockX = false,
-  lockY = false
+  lockY = false,
+  ccd = false
 }) {
   const engine = useContext7(EngineContext);
   const entityId = useContext7(EntityContext);
   useEffect9(() => {
-    engine.ecs.addComponent(entityId, createRigidBody({ mass, gravityScale, isStatic, bounce, friction, vx, vy, lockX, lockY }));
+    engine.ecs.addComponent(entityId, createRigidBody({ mass, gravityScale, isStatic, bounce, friction, vx, vy, lockX, lockY, ccd }));
     return () => engine.ecs.removeComponent(entityId, "RigidBody");
   }, []);
   return null;
@@ -4398,19 +4767,24 @@ function CompoundCollider({
 }
 
 // src/components/Script.tsx
-import { useEffect as useEffect14, useContext as useContext12 } from "react";
+import { useEffect as useEffect14, useContext as useContext12, useRef as useRef4 } from "react";
 function Script({ init, update }) {
   const engine = useContext12(EngineContext);
   const entityId = useContext12(EntityContext);
+  const initRef = useRef4(init);
+  initRef.current = init;
+  const updateRef = useRef4(update);
+  updateRef.current = update;
   useEffect14(() => {
-    if (init) {
+    if (initRef.current) {
       try {
-        init(entityId, engine.ecs);
+        initRef.current(entityId, engine.ecs);
       } catch (err) {
         console.error(`[Cubeforge] Script init error on entity ${entityId}:`, err);
       }
     }
-    engine.ecs.addComponent(entityId, createScript(update));
+    const stableUpdate = (id, world, input, dt) => updateRef.current(id, world, input, dt);
+    engine.ecs.addComponent(entityId, createScript(stableUpdate));
     return () => engine.ecs.removeComponent(entityId, "Script");
   }, []);
   return null;
@@ -4640,7 +5014,7 @@ function ParticleEmitter({
 }
 
 // src/components/VirtualJoystick.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 
 // src/hooks/useVirtualInput.ts
 var _axes = { x: 0, y: 0 };
@@ -4674,10 +5048,10 @@ function VirtualJoystick({
   actionLabel = "A",
   actionName = "action"
 }) {
-  const baseRef = useRef4(null);
-  const stickRef = useRef4(null);
-  const activePtr = useRef4(null);
-  const baseCenterRef = useRef4({ x: 0, y: 0 });
+  const baseRef = useRef5(null);
+  const stickRef = useRef5(null);
+  const activePtr = useRef5(null);
+  const baseCenterRef = useRef5({ x: 0, y: 0 });
   const radius = size / 2 - 16;
   const applyStickPosition = (dx, dy) => {
     if (!stickRef.current) return;
@@ -5156,10 +5530,10 @@ function ParallaxLayer({
 }
 
 // src/components/ScreenFlash.tsx
-import { forwardRef, useImperativeHandle, useRef as useRef5 } from "react";
+import { forwardRef, useImperativeHandle, useRef as useRef6 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var ScreenFlash = forwardRef((_, ref) => {
-  const divRef = useRef5(null);
+  const divRef = useRef6(null);
   useImperativeHandle(ref, () => ({
     flash(color, duration) {
       const el = divRef.current;
@@ -5195,7 +5569,7 @@ var ScreenFlash = forwardRef((_, ref) => {
 ScreenFlash.displayName = "ScreenFlash";
 
 // src/components/CameraZone.tsx
-import { useEffect as useEffect21, useContext as useContext19, useRef as useRef6 } from "react";
+import { useEffect as useEffect21, useContext as useContext19, useRef as useRef7 } from "react";
 import { Fragment as Fragment5, jsx as jsx11 } from "react/jsx-runtime";
 function CameraZone({
   x,
@@ -5208,8 +5582,8 @@ function CameraZone({
   children
 }) {
   const engine = useContext19(EngineContext);
-  const prevFollowRef = useRef6(void 0);
-  const activeRef = useRef6(false);
+  const prevFollowRef = useRef7(void 0);
+  const activeRef = useRef7(false);
   useEffect21(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(eid, createScript(() => {
@@ -5450,7 +5824,7 @@ function useInputMap(bindings) {
 }
 
 // src/hooks/useEvents.ts
-import { useContext as useContext27, useEffect as useEffect26, useRef as useRef7 } from "react";
+import { useContext as useContext27, useEffect as useEffect26, useRef as useRef8 } from "react";
 function useEvents() {
   const engine = useContext27(EngineContext);
   if (!engine) throw new Error("useEvents must be used inside <Game>");
@@ -5458,7 +5832,7 @@ function useEvents() {
 }
 function useEvent(event, handler) {
   const events = useEvents();
-  const handlerRef = useRef7(handler);
+  const handlerRef = useRef8(handler);
   handlerRef.current = handler;
   useEffect26(() => {
     return events.on(event, (data) => handlerRef.current(data));
@@ -5536,11 +5910,11 @@ function useInputRecorder() {
 }
 
 // src/hooks/useGamepad.ts
-import { useEffect as useEffect28, useRef as useRef8, useState as useState7 } from "react";
+import { useEffect as useEffect28, useRef as useRef9, useState as useState7 } from "react";
 var EMPTY_STATE = { connected: false, axes: [], buttons: [] };
 function useGamepad(playerIndex = 0) {
   const [state, setState] = useState7(EMPTY_STATE);
-  const rafRef = useRef8(0);
+  const rafRef = useRef9(0);
   useEffect28(() => {
     const poll = () => {
       const gp = navigator.getGamepads()[playerIndex];
@@ -5654,12 +6028,12 @@ function useDropThrough(frames = 8) {
 }
 
 // ../gameplay/src/hooks/useGameStateMachine.ts
-import { useState as useState10, useRef as useRef9, useCallback as useCallback8, useEffect as useEffect29, useContext as useContext32 } from "react";
+import { useState as useState10, useRef as useRef10, useCallback as useCallback8, useEffect as useEffect29, useContext as useContext32 } from "react";
 function useGameStateMachine(states, initial) {
   const engine = useContext32(EngineContext);
   const [state, setState] = useState10(initial);
-  const stateRef = useRef9(initial);
-  const statesRef = useRef9(states);
+  const stateRef = useRef10(initial);
+  const statesRef = useRef10(states);
   statesRef.current = states;
   useEffect29(() => {
     statesRef.current[initial]?.onEnter?.();
@@ -5685,22 +6059,22 @@ function useGameStateMachine(states, initial) {
 }
 
 // ../gameplay/src/hooks/useHealth.ts
-import { useRef as useRef10, useEffect as useEffect30, useContext as useContext33, useCallback as useCallback9 } from "react";
+import { useRef as useRef11, useEffect as useEffect30, useContext as useContext33, useCallback as useCallback9 } from "react";
 function useHealth(maxHp, opts = {}) {
   const engine = useContext33(EngineContext);
   const entityId = useContext33(EntityContext);
-  const hpRef = useRef10(maxHp);
-  const invincibleRef = useRef10(false);
+  const hpRef = useRef11(maxHp);
+  const invincibleRef = useRef11(false);
   const iFrameDuration = opts.iFrames ?? 1;
-  const onDeathRef = useRef10(opts.onDeath);
-  const onDamageRef = useRef10(opts.onDamage);
+  const onDeathRef = useRef11(opts.onDeath);
+  const onDamageRef = useRef11(opts.onDamage);
   useEffect30(() => {
     onDeathRef.current = opts.onDeath;
   });
   useEffect30(() => {
     onDamageRef.current = opts.onDamage;
   });
-  const timerRef = useRef10(
+  const timerRef = useRef11(
     createTimer(iFrameDuration, () => {
       invincibleRef.current = false;
     })
@@ -5715,7 +6089,7 @@ function useHealth(maxHp, opts = {}) {
     }
     if (hpRef.current <= 0) onDeathRef.current?.();
   }, [iFrameDuration]);
-  const takeDamageRef = useRef10(takeDamage);
+  const takeDamageRef = useRef11(takeDamage);
   useEffect30(() => {
     takeDamageRef.current = takeDamage;
   }, [takeDamage]);
@@ -5802,11 +6176,11 @@ function useKinematicBody() {
 }
 
 // ../gameplay/src/hooks/useLevelTransition.ts
-import { useState as useState11, useRef as useRef11, useCallback as useCallback11 } from "react";
+import { useState as useState11, useRef as useRef12, useCallback as useCallback11 } from "react";
 function useLevelTransition(initial) {
   const [currentLevel, setCurrentLevel] = useState11(initial);
   const [isTransitioning, setIsTransitioning] = useState11(false);
-  const overlayRef = useRef11(null);
+  const overlayRef = useRef12(null);
   const transitionTo = useCallback11((level, opts = {}) => {
     const { duration = 0.4, type = "fade" } = opts;
     if (type === "instant") {
@@ -5985,10 +6359,10 @@ function useRestart() {
 }
 
 // ../gameplay/src/hooks/useSave.ts
-import { useCallback as useCallback15, useRef as useRef12 } from "react";
+import { useCallback as useCallback15, useRef as useRef13 } from "react";
 function useSave(key, defaultValue, opts = {}) {
   const version = opts.version ?? 1;
-  const dataRef = useRef12(defaultValue);
+  const dataRef = useRef13(defaultValue);
   const save = useCallback15((value) => {
     dataRef.current = value;
     const slot = { version, data: value };
@@ -6063,11 +6437,11 @@ function useTopDownMovement(entityId, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useDialogue.ts
-import { useState as useState14, useCallback as useCallback16, useRef as useRef13 } from "react";
+import { useState as useState14, useCallback as useCallback16, useRef as useRef14 } from "react";
 function useDialogue() {
   const [active, setActive] = useState14(false);
   const [currentId, setCurrentId] = useState14(null);
-  const scriptRef = useRef13(null);
+  const scriptRef = useRef14(null);
   const start = useCallback16((script, startId) => {
     scriptRef.current = script;
     const id = startId ?? Object.keys(script)[0];
@@ -6111,16 +6485,16 @@ function useDialogue() {
 }
 
 // ../gameplay/src/hooks/useCutscene.ts
-import { useState as useState15, useCallback as useCallback17, useRef as useRef14, useEffect as useEffect33, useContext as useContext38 } from "react";
+import { useState as useState15, useCallback as useCallback17, useRef as useRef15, useEffect as useEffect33, useContext as useContext38 } from "react";
 function useCutscene() {
   const engine = useContext38(EngineContext);
   const [playing, setPlaying] = useState15(false);
   const [stepIndex, setStepIndex] = useState15(0);
-  const stepsRef = useRef14([]);
-  const timerRef = useRef14(0);
-  const idxRef = useRef14(0);
-  const playingRef = useRef14(false);
-  const entityRef = useRef14(null);
+  const stepsRef = useRef15([]);
+  const timerRef = useRef15(0);
+  const idxRef = useRef15(0);
+  const playingRef = useRef15(false);
+  const entityRef = useRef15(null);
   const finish = useCallback17(() => {
     playingRef.current = false;
     setPlaying(false);
@@ -6245,7 +6619,7 @@ function useGameStore(key, initialState) {
 }
 
 // ../../packages/audio/src/useSound.ts
-import { useEffect as useEffect34, useRef as useRef15 } from "react";
+import { useEffect as useEffect34, useRef as useRef16 } from "react";
 var _audioCtx = null;
 function getAudioCtx() {
   if (!_audioCtx) _audioCtx = new AudioContext();
@@ -6312,12 +6686,12 @@ async function loadBuffer(src) {
   return buf;
 }
 function useSound(src, opts = {}) {
-  const bufferRef = useRef15(null);
-  const sourceRef = useRef15(null);
-  const gainRef = useRef15(null);
-  const volRef = useRef15(opts.volume ?? 1);
-  const loopRef = useRef15(opts.loop ?? false);
-  const groupRef = useRef15(opts.group);
+  const bufferRef = useRef16(null);
+  const sourceRef = useRef16(null);
+  const gainRef = useRef16(null);
+  const volRef = useRef16(opts.volume ?? 1);
+  const loopRef = useRef16(opts.loop ?? false);
+  const groupRef = useRef16(opts.group);
   useEffect34(() => {
     let cancelled = false;
     loadBuffer(src).then((buf) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cubeforge",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "description": "React-first 2D browser game engine",
   "type": "module",
   "main": "./dist/index.js",