@gjsify/example-dom-excalibur-jelly-jumper 0.1.15 → 0.3.0

package/dist/browser.js

@@ -37086,6 +37086,10 @@ var PhysicsActor = class extends Actor {
   touching = new TouchingComponent();
   isOnGround = false;
   _oldPosGlobal = vec(0, 0);
+  // Pre-allocated rays for raycastSide — mutated in-place each call to avoid
+  // per-frame Ray + Vector allocations (8 vec() calls per raycastSide invocation).
+  _ray1 = new Ray(vec(0, 0), vec(1, 0));
+  _ray2 = new Ray(vec(0, 0), vec(1, 0));
   constructor(args) {
     super(args);
     this.addComponent(new CarriableComponent());
@@ -37096,7 +37100,8 @@ var PhysicsActor = class extends Actor {
       this.isOnGround = this.touching.bottom.size > 0;
     });
     this.on("postupdate", () => {
-      this._oldPosGlobal = this.getGlobalPos().clone();
+      const gp = this.getGlobalPos();
+      this._oldPosGlobal.setTo(gp.x, gp.y);
     });
   }
   get canBeCarried() {
@@ -37114,27 +37119,38 @@ var PhysicsActor = class extends Actor {
     }).filter(__assignType6((hit) => hit.body !== this.body, ["hit", "", 'P"2!"/"'])).sort(__assignType6((a, b) => a.distance - b.distance, ["a", "b", "", 'P"2!"2""/#']));
   }
   raycastSide(side, distance, opts) {
-    const bounds = new BoundingBox({
-      left: Math.round(this.collider.bounds.left) + 1,
-      right: Math.round(this.collider.bounds.right) - 1,
-      top: Math.round(this.collider.bounds.top) + 1,
-      bottom: Math.round(this.collider.bounds.bottom) - 1
-    });
-    let ray1;
-    let ray2;
+    const cb = this.collider.bounds;
+    const bl2 = Math.round(cb.left) + 1;
+    const br2 = Math.round(cb.right) - 1;
+    const bt2 = Math.round(cb.top) + 1;
+    const bb = Math.round(cb.bottom) - 1;
     if (side === "left" || side === "right") {
-      ray1 = new Ray(vec(side === "left" ? bounds.left : bounds.right, bounds.top), vec(side === "left" ? -1 : 1, 0));
-      ray2 = new Ray(vec(side === "left" ? bounds.left : bounds.right, bounds.bottom), vec(side === "left" ? -1 : 1, 0));
-    } else if (side === "top" || side === "bottom") {
-      ray1 = new Ray(vec(bounds.left, side === "top" ? bounds.top : bounds.bottom), vec(0, side === "top" ? -1 : 1));
-      ray2 = new Ray(vec(bounds.right, side === "top" ? bounds.top : bounds.bottom), vec(0, side === "top" ? -1 : 1));
+      const x2 = side === "left" ? bl2 : br2;
+      const dx = side === "left" ? -1 : 1;
+      this._ray1.pos.setTo(x2, bt2);
+      this._ray1.dir.setTo(dx, 0);
+      this._ray2.pos.setTo(x2, bb);
+      this._ray2.dir.setTo(dx, 0);
+    } else {
+      const y = side === "top" ? bt2 : bb;
+      const dy = side === "top" ? -1 : 1;
+      this._ray1.pos.setTo(bl2, y);
+      this._ray1.dir.setTo(0, dy);
+      this._ray2.pos.setTo(br2, y);
+      this._ray2.dir.setTo(0, dy);
+    }
+    const hits1 = this.raycast(this._ray1, distance, opts);
+    const hits2 = this.raycast(this._ray2, distance, opts);
+    if (hits2.length === 0)
+      return hits1;
+    if (hits1.length === 0)
+      return hits2;
+    const result = hits1.slice();
+    for (const h of hits2) {
+      if (hits1.indexOf(h) === -1)
+        result.push(h);
     }
-    return [
-      ...this.raycast(ray1, distance, opts),
-      ...this.raycast(ray2, distance, opts)
-    ].filter(__assignType6((value, index, self) => {
-      return self.indexOf(value) === index;
-    }, ["value", "index", "self", "", 'P"2!"2""2#"/$']));
+    return result;
   }
   getGlobalOldPos() {
     return this._oldPosGlobal;
@@ -37145,7 +37161,11 @@ var PhysicsActor = class extends Actor {
     return false;
   }, "_oldPosGlobal", function() {
     return vec(0, 0);
-  }, "args", "constructor", "engine", "onInitialize", "ray", "distance", () => __\u03A9Omit, "maxDistance", "opts", "raycast", "left", "right", "top", "bottom", "side", () => __\u03A9Omit, "maxDistance", "raycastSide", "getGlobalOldPos", "PhysicsActor", `P7!!3">#)3$>%!3&;>'P!2("0)P!2*$0+!P!2,'2-!./o.#208"01PP.2.3.4.5J26'2-!.8o7#208"09P"0:5w;`];
+  }, "_ray1", function() {
+    return new Ray(vec(0, 0), vec(1, 0));
+  }, "_ray2", function() {
+    return new Ray(vec(0, 0), vec(1, 0));
+  }, "args", "constructor", "engine", "onInitialize", "ray", "distance", () => __\u03A9Omit, "maxDistance", "opts", "raycast", "left", "right", "top", "bottom", "side", () => __\u03A9Omit, "maxDistance", "raycastSide", "getGlobalOldPos", "PhysicsActor", `P7!!3">#)3$>%!3&;>'!3(;>)!3*;>+P!2,"0-P!2.$0/!P!20'21!.3o2#248"05PP.6.7.8.9J2:'21!.<o;#248"0=P"0>5w?`];
 };
 
 // src/state/audio.ts
@@ -37957,7 +37977,11 @@ var Player = class _Player extends PhysicsActor {
     }
   }
   get bouncepad() {
-    return Array.from(this.touching.bottom).find(__assignType10((e2) => e2.hasTag("bouncepad"), ["e", "", 'P"2!"/"']));
+    for (const e2 of this.touching.bottom) {
+      if (e2.hasTag("bouncepad"))
+        return e2;
+    }
+    return void 0;
   }
   get isTouchingLadder() {
     return this.touching.ladders.size > 0;
@@ -38974,18 +38998,26 @@ var EnemySpawner = class extends Actor {
     });
     this.scene.engine.add(this.spawnedInstance);
   }
-  onPreUpdate(engine, elapsed) {
-    const camera = engine.currentScene.camera;
-    const boundsWithBuffer = new BoundingBox(camera.viewport.left - this.OFFSCREEN_BUFFER, camera.viewport.top - this.OFFSCREEN_BUFFER, camera.viewport.right + this.OFFSCREEN_BUFFER, camera.viewport.bottom + this.OFFSCREEN_BUFFER);
-    const isOffScreen = !boundsWithBuffer.contains(this.pos);
+  onPreUpdate(engine, _elapsed) {
+    const vp = engine.currentScene.camera.viewport;
+    const buf = this.OFFSCREEN_BUFFER;
+    const left = vp.left - buf;
+    const top = vp.top - buf;
+    const right = vp.right + buf;
+    const bottom = vp.bottom + buf;
+    const { x: x2, y } = this.pos;
+    const isOffScreen = x2 < left || x2 > right || y < top || y > bottom;
     if (!isOffScreen) {
       this.spawnInstance();
-    } else if (isOffScreen && !this.spawnedInstance) {
+    } else if (!this.spawnedInstance) {
       this.canSpawn = true;
     }
-    if (this.spawnedInstance && !boundsWithBuffer.contains(this.spawnedInstance.getGlobalPos())) {
-      this.spawnedInstance.kill();
-      this.spawnedInstance = null;
+    if (this.spawnedInstance) {
+      const ip = this.spawnedInstance.getGlobalPos();
+      if (ip.x < left || ip.x > right || ip.y < top || ip.y > bottom) {
+        this.spawnedInstance.kill();
+        this.spawnedInstance = null;
+      }
     }
   }
   static __type = [() => Actor, "OFFSCREEN_BUFFER", function() {
@@ -38994,7 +39026,7 @@ var EnemySpawner = class extends Actor {
     return null;
   }, "canSpawn", function() {
     return true;
-  }, "pos", () => EnemyActor, "", "spawn", () => __\u03A9EnemySpawnerArgs, "param0", "constructor", "spawnInstance", "engine", "elapsed", "onPreUpdate", "EnemySpawner", `P7!'3">#PP7$,J3%;>&)3';>(P!2)P7*/+3,Pn-2."0/P"00P!21'22$035w4`];
+  }, "pos", () => EnemyActor, "", "spawn", () => __\u03A9EnemySpawnerArgs, "param0", "constructor", "spawnInstance", "engine", "_elapsed", "onPreUpdate", "EnemySpawner", `P7!'3">#PP7$,J3%;>&)3';>(P!2)P7*/+3,Pn-2."0/P"00P!21'22$035w4`];
 };
 
 // src/actors/enemies/bird.ts
@@ -39867,6 +39899,204 @@ var Demo = class extends Scene {
   static __type = [() => Scene, "onInitialize", "Demo", 'P7!P"0"5w#'];
 };
 
+// src/perf/performance-monitor.ts
+function __assignType17(fn2, args) {
+  fn2.__type = args;
+  return fn2;
+}
+var __\u03A9PerfStats = ["platform", "frames", "fps_avg", "fps_min", "fps_max", "update_avg_ms", "draw_avg_ms", "frame_avg_ms", "dropped", "PerfStats", `P&4!'4"'4#'4$'4%'4&'4''4('4)Mw*y`];
+var PerformanceMonitor = class {
+  _platform;
+  _updateStart = 0;
+  _drawStart = 0;
+  _frameStart = 0;
+  _firstFrame = true;
+  _frameTimes = [];
+  _updateTimes = [];
+  _drawTimes = [];
+  _droppedFrames = 0;
+  _sampleCount = 0;
+  _logInterval = 60;
+  _logToConsole = false;
+  _updateCallback;
+  _lastStats = null;
+  constructor(platform) {
+    this._platform = platform;
+  }
+  get lastStats() {
+    return this._lastStats;
+  }
+  setLogging(enabled) {
+    this._logToConsole = enabled;
+  }
+  onUpdate(cb) {
+    this._updateCallback = cb;
+  }
+  attach(engine, logToConsole = false) {
+    this._logToConsole = logToConsole;
+    engine.on("preupdate", () => {
+      this._updateStart = performance.now();
+    });
+    engine.on("postupdate", () => {
+      this._updateTimes.push(performance.now() - this._updateStart);
+    });
+    engine.on("predraw", () => {
+      this._drawStart = performance.now();
+    });
+    engine.on("postdraw", () => {
+      this._drawTimes.push(performance.now() - this._drawStart);
+      const now = performance.now();
+      if (!this._firstFrame) {
+        const ft2 = now - this._frameStart;
+        this._frameTimes.push(ft2);
+        if (ft2 > 20)
+          this._droppedFrames++;
+      }
+      this._frameStart = now;
+      this._firstFrame = false;
+      this._sampleCount++;
+      if (this._sampleCount >= this._logInterval) {
+        this._report();
+        this._frameTimes = [];
+        this._updateTimes = [];
+        this._drawTimes = [];
+        this._droppedFrames = 0;
+        this._sampleCount = 0;
+      }
+    });
+  }
+  _avg(arr) {
+    return arr.length ? arr.reduce(__assignType17((a, b) => a + b, ["a", "b", "", 'P"2!"2""/#']), 0) / arr.length : 0;
+  }
+  _report() {
+    const frameAvg = this._avg(this._frameTimes);
+    const frameMax = this._frameTimes.length ? Math.max(...this._frameTimes) : 0;
+    const frameMin = this._frameTimes.length ? Math.min(...this._frameTimes) : 0;
+    const stats = {
+      platform: this._platform,
+      frames: this._frameTimes.length,
+      fps_avg: +(frameAvg > 0 ? 1e3 / frameAvg : 0).toFixed(1),
+      fps_min: +(frameMax > 0 ? 1e3 / frameMax : 0).toFixed(1),
+      fps_max: +(frameMin > 0 ? 1e3 / frameMin : 0).toFixed(1),
+      update_avg_ms: +this._avg(this._updateTimes).toFixed(2),
+      draw_avg_ms: +this._avg(this._drawTimes).toFixed(2),
+      frame_avg_ms: +frameAvg.toFixed(2),
+      dropped: this._droppedFrames
+    };
+    this._lastStats = stats;
+    if (this._logToConsole)
+      console.log("[PERF]", JSON.stringify(stats));
+    this._updateCallback?.(stats);
+  }
+  static __type = ["_platform", "_updateStart", function() {
+    return 0;
+  }, "_drawStart", function() {
+    return 0;
+  }, "_frameStart", function() {
+    return 0;
+  }, "_firstFrame", function() {
+    return true;
+  }, "_frameTimes", function() {
+    return [];
+  }, "_updateTimes", function() {
+    return [];
+  }, "_drawTimes", function() {
+    return [];
+  }, "_droppedFrames", function() {
+    return 0;
+  }, "_sampleCount", function() {
+    return 0;
+  }, "_logInterval", function() {
+    return 60;
+  }, "_logToConsole", function() {
+    return false;
+  }, () => __\u03A9PerfStats, "stats", "", "_updateCallback", () => __\u03A9PerfStats, "_lastStats", function() {
+    return null;
+  }, "gjs", "browser", "platform", "constructor", "enabled", "setLogging", () => __\u03A9PerfStats, "cb", "onUpdate", "engine", "logToConsole", "attach", "arr", "_avg", "_report", "PerformanceMonitor", `&3!9;'3";>#'3$;>%'3&;>')3(;>)'F3*;>+'F3,;>-'F3.;>/'30;>1'32;>3'349;>5)36;>7Pn829$/:3;8;Pn<,J3=;>>PP.?.@J2A"0B!P)2C$0DPPnE29$/:2F$0GP!2H"2I$0JP'F2K'0L;P$0M;5wN`];
+};
+
+// src/perf/performance-hud.ts
+function __assignType18(fn2, args) {
+  fn2.__type = args;
+  return fn2;
+}
+var PerformanceHUD = class extends ScreenElement {
+  _lines = [];
+  _frameCount = 0;
+  _monitor;
+  _platform;
+  _hudVisible = false;
+  constructor(monitor, platform) {
+    super({
+      pos: vec(3, 3),
+      anchor: vec(0, 0),
+      z: 9999,
+      coordPlane: CoordPlane.Screen
+    });
+    this._monitor = monitor;
+    this._platform = platform;
+  }
+  onInitialize(engine) {
+    const font = new Font({
+      family: "monospace",
+      size: 7
+    });
+    const initialTexts = [
+      `[${this._platform.toUpperCase()}] FPS: --`,
+      `Frame: --ms  Dropped: --`,
+      `Update: --ms  Draw: --ms`,
+      `F1: toggle`
+    ];
+    for (let i = 0; i < initialTexts.length; i++) {
+      const label = new Label({
+        text: initialTexts[i],
+        pos: vec(0, i * 9),
+        anchor: vec(0, 0),
+        font,
+        color: Color.Black,
+        z: this.z,
+        coordPlane: CoordPlane.Screen
+      });
+      this._lines.push(label);
+      this.addChild(label);
+    }
+    this._lines.forEach(__assignType18((l) => {
+      l.graphics.opacity = 0;
+    }, ["l", "", 'P"2!"/"']));
+    engine.input.keyboard.on("press", __assignType18((evt) => {
+      if (evt.key === Keys.F1) {
+        this._hudVisible = !this._hudVisible;
+        this._lines.forEach(__assignType18((l) => {
+          l.graphics.opacity = this._hudVisible ? 1 : 0;
+        }, ["l", "", 'P"2!"/"']));
+        this._monitor.setLogging(this._hudVisible);
+      }
+    }, ["evt", "", 'P!2!"/"']));
+  }
+  onPreUpdate(_engine, _delta) {
+    this._frameCount++;
+    if (this._frameCount < 30)
+      return;
+    this._frameCount = 0;
+    const stats = this._monitor.lastStats;
+    if (stats)
+      this._renderStats(stats);
+  }
+  _renderStats(s) {
+    this._lines[0].text = `[${s.platform.toUpperCase()}] FPS: ${s.fps_avg.toFixed(1)} (min:${s.fps_min.toFixed(1)})`;
+    this._lines[1].text = `Frame: ${s.frame_avg_ms.toFixed(1)}ms  Dropped: ${s.dropped}/${s.frames}`;
+    this._lines[2].text = `Update: ${s.update_avg_ms.toFixed(1)}ms  Draw: ${s.draw_avg_ms.toFixed(1)}ms`;
+    this._lines[3].text = `F1: toggle HUD`;
+  }
+  static __type = [() => ScreenElement, "_lines", function() {
+    return [];
+  }, "_frameCount", function() {
+    return 0;
+  }, "PerformanceMonitor", "_monitor", "_platform", "_hudVisible", function() {
+    return false;
+  }, "monitor", "platform", "constructor", "engine", "onInitialize", "_engine", "_delta", "onPreUpdate", "PerfStats", "s", "_renderStats", "PerformanceHUD", `P7!!F3"9;>#'3$;>%"w&3'9;&3(9;)3);>*P"w&2+&2,"0-P!2.$0/P!20'21$02P"w324$05;5w6`];
+};
+
 // src/game.ts
 var __\u03A9HTMLCanvasElement = [() => __\u03A9HTMLElement, "height", "width", "frameRequestRate", () => __\u03A9MediaStream, "captureStream", "2d", "contextId", () => __\u03A9CanvasRenderingContext2DSettings, "options", () => __\u03A9CanvasRenderingContext2D, "getContext", "bitmaprenderer", () => __\u03A9ImageBitmapRenderingContextSettings, () => __\u03A9ImageBitmapRenderingContext, "webgl", () => __\u03A9WebGLContextAttributes, () => __\u03A9WebGLRenderingContext, "webgl2", () => __\u03A9WebGLContextAttributes, () => __\u03A9WebGL2RenderingContext, () => __\u03A9RenderingContext, () => __\u03A9BlobCallback, "callback", "type", "quality", "toBlob", "toDataURL", () => __\u03A9OffscreenCanvas, "transferControlToOffscreen", 0, "this", () => __\u03A9HTMLElementEventMap, "ev", "", "listener", () => __\u03A9AddEventListenerOptions, "addEventListener", () => __\u03A9EventListenerOrEventListenerObject, () => __\u03A9AddEventListenerOptions, 0, () => __\u03A9HTMLElementEventMap, () => __\u03A9EventListenerOptions, "removeEventListener", () => __\u03A9EventListenerOrEventListenerObject, () => __\u03A9EventListenerOptions, "HTMLCanvasElement", `Pn!'4"'4#P'2$8n%1&P.'2(n)2*8Pn+,J1,P.-2(n.2*8Pn/,J1,P.02(n12*8Pn2,J1,P.32(n42*8Pn5,J1,P&2("2*8Pn6,J1,Pn728&298'2:8$1;P&298'2:8&1<Pn=1>P"29Pn?2@nA"f2B"/C2DP)nEJ2*8$1FP&29nG2DP)nHJ2*8$1FP"29PnI2@nJ"f2B"/C2DP)nKJ2*8$1LP&29nM2DP)nNJ2*8$1LMwOy`];
 var __\u03A9HTMLElement = [() => __\u03A9Element, () => __\u03A9ElementCSSInlineStyle, () => __\u03A9ElementContentEditable, () => __\u03A9GlobalEventHandlers, () => __\u03A9HTMLOrSVGElement, "accessKey", "accessKeyLabel", "autocapitalize", "autocorrect", "dir", "draggable", "until-found", "hidden", "inert", "innerText", "lang", "offsetHeight", "offsetLeft", () => __\u03A9Element, "offsetParent", "offsetTop", "offsetWidth", "outerText", "popover", "spellcheck", "title", "translate", "writingSuggestions", () => __\u03A9ElementInternals, "attachInternals", "click", "hidePopover", () => __\u03A9ShowPopoverOptions, "options", "showPopover", () => __\u03A9TogglePopoverOptions, "togglePopover", "type", 0, "this", () => __\u03A9HTMLElementEventMap, "ev", "", "listener", () => __\u03A9AddEventListenerOptions, "addEventListener", () => __\u03A9EventListenerOrEventListenerObject, () => __\u03A9AddEventListenerOptions, 0, () => __\u03A9HTMLElementEventMap, () => __\u03A9EventListenerOptions, "removeEventListener", () => __\u03A9EventListenerOrEventListenerObject, () => __\u03A9EventListenerOptions, "HTMLElement", `Pn!n"n#n$n%&4&&4'9&4()4)&4*)4+P).,J4-)4.&4/&40'419'429Pn3,J449'459'469&47P&,J48)49&4:)4;&4<Pn=1>P$1?P$1@PnA2B8$1CPPnD)J2B8)1EP"2FPnG2HnI"f2J"/K2LP)nMJ2B8$1NP&2FnO2LP)nPJ2B8$1NP"2FPnQ2HnR"f2J"/K2LP)nSJ2B8$1TP&2FnU2LP)nVJ2B8$1TMwWy`];
@@ -41103,13 +41333,13 @@ var __\u03A9PushEncryptionKeyName = ["auth", "p256dh", "PushEncryptionKeyName",
 var __\u03A9PushSubscriptionJSON = ["endpoint", () => __\u03A9EpochTimeStamp, "expirationTime", () => __\u03A9Record4, "keys", "PushSubscriptionJSON", 'P&4!8Pn",J4#8&&o$#4%8Mw&y'];
 var __\u03A9WriteParams = [() => __\u03A9BufferSource, () => __\u03A9Blob, "data", "position", "size", () => __\u03A9WriteCommandType, "type", "WriteParams", `PPn!n"&,J4#8P',J4$8P',J4%8n&4'Mw(y`];
 var __\u03A9WriteCommandType = ["seek", "truncate", "write", "WriteCommandType", 'P.!.".#Jw$y'];
-function __assignType17(fn2, args) {
+function __assignType19(fn2, args) {
   fn2.__type = args;
   return fn2;
 }
 var __\u03A9GameHandle = ["engine", "pause", "resume", "isPaused", "mute", "unmute", "isMuted", "GameHandle", `P!4!P$1"P$1#)4$9P$1%P$1&)4'9Mw(y`];
-var __\u03A9StartGameOptions = ["startMuted", "assetBase", "StartGameOptions", 'P)4!8&4"8Mw#y'];
-function buildEngineOptions(canvas) {
+var __\u03A9StartGameOptions = ["startMuted", "assetBase", "gjs", "browser", "platform", "pixelRatio", "fixedUpdateFps", "enablePerf", "StartGameOptions", `P)4!8&4"8P.#.$J4%8'4&8'4'8)4(8Mw)y`];
+function buildEngineOptions(canvas, options) {
   return {
     canvasElement: canvas,
     suppressMinimumBrowserFeatureDetection: true,
@@ -41119,7 +41349,7 @@ function buildEngineOptions(canvas) {
       width: Resolution.SNES.height / 9 * 16
     },
     displayMode: DisplayMode.FitContainerAndFill,
-    fixedUpdateFps: 60,
+    fixedUpdateFps: options?.fixedUpdateFps ?? 60,
     physics: {
       gravity: GRAVITY,
       solver: SolverStrategy.Arcade,
@@ -41130,7 +41360,7 @@ function buildEngineOptions(canvas) {
         compositeStrategy: "separate"
       }
     },
-    pixelRatio: 4,
+    pixelRatio: options?.pixelRatio ?? 4,
     pixelArt: true,
     scenes: {
       root: {
@@ -41144,14 +41374,14 @@ function buildEngineOptions(canvas) {
     }
   };
 }
-buildEngineOptions.__type = [() => __\u03A9HTMLCanvasElement, "canvas", "buildEngineOptions", 'Pn!2"!/#'];
+buildEngineOptions.__type = [() => __\u03A9HTMLCanvasElement, "canvas", () => __\u03A9StartGameOptions, "options", "buildEngineOptions", 'Pn!2"n#2$8!/%'];
 function rebaseResources(base) {
   for (const category of Object.values(Resources)) {
     for (const resource of Object.values(category)) {
       if (!resource || typeof resource !== "object")
         continue;
       const r = resource;
-      const rebase = __assignType17(
+      const rebase = __assignType19(
         (p) => p.startsWith("/res/") ? base + p.slice(1) : p,
         ["p", "", 'P&2!"/"']
       );
@@ -41169,23 +41399,29 @@ async function startGame(canvas, options) {
   if (options?.assetBase)
     rebaseResources(options.assetBase);
   AudioManager.init(options?.startMuted);
-  const game = new Engine(buildEngineOptions(canvas));
+  const pixelRatio = options?.pixelRatio ?? 4;
+  const platform = options?.platform ?? "browser";
+  const game = new Engine(buildEngineOptions(canvas, options));
   await game.start(loader);
-  game.screen.pixelRatioOverride = 4;
+  game.screen.pixelRatioOverride = pixelRatio;
   game.screen.applyResolutionAndViewport();
+  const monitor = new PerformanceMonitor(platform);
+  monitor.attach(game, false);
+  const hud = new PerformanceHUD(monitor, platform);
+  game.currentScene.add(hud);
   let paused = false;
   return {
     engine: game,
     get isPaused() {
       return paused;
     },
-    pause: __assignType17(function pause() {
+    pause: __assignType19(function pause() {
       if (!paused) {
         paused = true;
         game.stop();
       }
     }, ["pause", 'P"/!']),
-    resume: __assignType17(function resume() {
+    resume: __assignType19(function resume() {
       if (paused) {
         paused = false;
         game.start();
@@ -41194,10 +41430,10 @@ async function startGame(canvas, options) {
     get isMuted() {
       return AudioManager.isMuted;
     },
-    mute: __assignType17(function mute() {
+    mute: __assignType19(function mute() {
       AudioManager.muteAll();
     }, ["mute", 'P"/!']),
-    unmute: __assignType17(function unmute() {
+    unmute: __assignType19(function unmute() {
       AudioManager.unmuteAll();
     }, ["unmute", 'P"/!'])
   };
@@ -42440,11 +42676,11 @@ var __\u03A9GPUVertexFormat2 = ["float16", "float16x2", "float16x4", "float32",
 var __\u03A9WriteCommandType2 = ["seek", "truncate", "write", "WriteCommandType", 'P.!.".#Jw$y'];
 var __\u03A9GPUBlendFactor2 = ["constant", "dst", "dst-alpha", "one", "one-minus-constant", "one-minus-dst", "one-minus-dst-alpha", "one-minus-src", "one-minus-src-alpha", "src", "src-alpha", "src-alpha-saturated", "zero", "GPUBlendFactor", `P.!.".#.$.%.&.'.(.).*.+.,.-Jw.y`];
 var __\u03A9GPUBlendOperation2 = ["add", "max", "min", "reverse-subtract", "subtract", "GPUBlendOperation", 'P.!.".#.$.%Jw&y'];
-function __assignType18(fn2, args) {
+function __assignType20(fn2, args) {
   fn2.__type = args;
   return fn2;
 }
-var __\u03A9MountOptions = ["assetBase", "startMuted", "MountOptions", 'P&4!8)4"8Mw#y'];
+var __\u03A9MountOptions = ["assetBase", "startMuted", "enablePerf", "MountOptions", 'P&4!8)4"8)4#8Mw$y'];
 var __\u03A9ShowcaseHandle = ["pause", "resume", "isPaused", "mute", "unmute", "isMuted", "ShowcaseHandle", `PP$1!P$1")4#9P$1$P$1%)4&9Mw'y`];
 function parseSvg(src) {
   const doc = new DOMParser().parseFromString(src, "image/svg+xml");
@@ -42523,7 +42759,8 @@ function mount(container, options) {
     if (canvasContainer.clientWidth === 0 || canvasContainer.clientHeight === 0)
       return;
     ro2.disconnect();
-    startGame(canvas, { startMuted: pendingMuted, assetBase: options?.assetBase }).then(__assignType18((g) => {
+    const enablePerf = options?.enablePerf ?? (typeof location !== "undefined" && new URLSearchParams(location.search).get("perf") === "1");
+    startGame(canvas, { startMuted: pendingMuted, assetBase: options?.assetBase, platform: "browser", enablePerf }).then(__assignType20((g) => {
       game = g;
       if (pendingPause) {
         game.pause();
@@ -42531,7 +42768,7 @@ function mount(container, options) {
       }
       updatePauseButton(game.isPaused);
       updateAudioButton(game.isMuted);
-    }, ["g", "", 'P"2!"/"'])).catch(__assignType18((err) => {
+    }, ["g", "", 'P"2!"/"'])).catch(__assignType20((err) => {
       console.error("JellyJumper: startGame failed:", err);
     }, ["err", "", 'P"2!"/"']));
   });
@@ -42540,7 +42777,7 @@ function mount(container, options) {
     get isPaused() {
       return game ? game.isPaused : pendingPause;
     },
-    pause: __assignType18(function pause() {
+    pause: __assignType20(function pause() {
       if (game) {
         game.pause();
         updatePauseButton(true);
@@ -42549,7 +42786,7 @@ function mount(container, options) {
         updatePauseButton(true);
       }
     }, ["pause", 'P"/!']),
-    resume: __assignType18(function resume() {
+    resume: __assignType20(function resume() {
       if (game) {
         game.resume();
         updatePauseButton(false);
@@ -42561,7 +42798,7 @@ function mount(container, options) {
     get isMuted() {
       return game ? game.isMuted : pendingMuted;
     },
-    mute: __assignType18(function mute() {
+    mute: __assignType20(function mute() {
       if (game) {
         game.mute();
         updateAudioButton(true);
@@ -42570,7 +42807,7 @@ function mount(container, options) {
         updateAudioButton(true);
       }
     }, ["mute", 'P"/!']),
-    unmute: __assignType18(function unmute() {
+    unmute: __assignType20(function unmute() {
       if (game) {
         game.unmute();
         updateAudioButton(false);