melonjs 18.1.0 → 18.2.0

package/build/index.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - 18.1.0
+ * melonJS Game Engine - 18.2.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -153,10 +153,10 @@ var require_classof_raw = __commonJS({
   "../../node_modules/.pnpm/core-js@3.49.0/node_modules/core-js/internals/classof-raw.js"(exports, module) {
     "use strict";
     var uncurryThis = require_function_uncurry_this();
-    var toString2 = uncurryThis({}.toString);
+    var toString = uncurryThis({}.toString);
     var stringSlice = uncurryThis("".slice);
     module.exports = function(it) {
-      return stringSlice(toString2(it), 8, -1);
+      return stringSlice(toString(it), 8, -1);
     };
   }
 });
@@ -489,9 +489,9 @@ var require_uid = __commonJS({
     var uncurryThis = require_function_uncurry_this();
     var id = 0;
     var postfix = Math.random();
-    var toString2 = uncurryThis(1.1.toString);
+    var toString = uncurryThis(1.1.toString);
     module.exports = function(key) {
-      return "Symbol(" + (key === void 0 ? "" : key) + ")_" + toString2(++id + postfix, 36);
+      return "Symbol(" + (key === void 0 ? "" : key) + ")_" + toString(++id + postfix, 36);
     };
   }
 });
@@ -900,7 +900,7 @@ var require_make_built_in = __commonJS({
       }
       return value;
     };
-    Function.prototype.toString = makeBuiltIn(function toString2() {
+    Function.prototype.toString = makeBuiltIn(function toString() {
       return isCallable(this) && getInternalState(this).source || inspectSource(this);
     }, "toString");
   }
@@ -1299,14 +1299,14 @@ var require_string_trim = __commonJS({
     "use strict";
     var uncurryThis = require_function_uncurry_this();
     var requireObjectCoercible = require_require_object_coercible();
-    var toString2 = require_to_string();
+    var toString = require_to_string();
     var whitespaces = require_whitespaces();
     var replace = uncurryThis("".replace);
     var ltrim = RegExp("^[" + whitespaces + "]+");
     var rtrim = RegExp("(^|[^" + whitespaces + "])[" + whitespaces + "]+$");
     var createMethod = function(TYPE) {
       return function($this) {
-        var string = toString2(requireObjectCoercible($this));
+        var string = toString(requireObjectCoercible($this));
         if (TYPE & 1) string = replace(string, ltrim, "");
         if (TYPE & 2) string = replace(string, rtrim, "$1");
         return string;
@@ -3681,6 +3681,62 @@ if (typeof globalThis !== "undefined") {
   }
 }
 
+// src/polyfill/ellipse.ts
+function ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = false) {
+  if (radiusX < 0 || radiusY < 0) {
+    throw new RangeError("Radius values must be non-negative.");
+  }
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(radiusX) || !Number.isFinite(radiusY) || !Number.isFinite(rotation) || !Number.isFinite(startAngle) || !Number.isFinite(endAngle)) {
+    return;
+  }
+  const ctx = this;
+  const isFullEllipse = rotation === 0 && startAngle === 0 && (Math.abs(endAngle - Math.PI * 2) < 1e-6 || Math.abs(endAngle - 360) < 1e-6);
+  if (isFullEllipse && !counterclockwise) {
+    const kappa = 0.5522848;
+    const kx = radiusX * kappa;
+    const ky = radiusY * kappa;
+    ctx.lineTo(x + radiusX, y);
+    ctx.bezierCurveTo(x + radiusX, y + ky, x + kx, y + radiusY, x, y + radiusY);
+    ctx.bezierCurveTo(x - kx, y + radiusY, x - radiusX, y + ky, x - radiusX, y);
+    ctx.bezierCurveTo(x - radiusX, y - ky, x - kx, y - radiusY, x, y - radiusY);
+    ctx.bezierCurveTo(x + kx, y - radiusY, x + radiusX, y - ky, x + radiusX, y);
+  } else {
+    const step = Math.PI / 36;
+    const dir = counterclockwise ? -1 : 1;
+    let end = endAngle;
+    if (counterclockwise && endAngle > startAngle) {
+      end -= Math.PI * 2;
+    } else if (!counterclockwise && endAngle < startAngle) {
+      end += Math.PI * 2;
+    }
+    const maxSegments = Math.ceil(Math.abs(end - startAngle) / step) + 1;
+    const cos = Math.cos(rotation);
+    const sin = Math.sin(rotation);
+    for (let i = 0; i <= maxSegments; i++) {
+      const angle = i === maxSegments ? end : startAngle + i * step * dir;
+      if (dir > 0 && angle > end || dir < 0 && angle < end) {
+        break;
+      }
+      const px2 = x + radiusX * Math.cos(angle) * cos - radiusY * Math.sin(angle) * sin;
+      const py2 = y + radiusX * Math.cos(angle) * sin + radiusY * Math.sin(angle) * cos;
+      ctx.lineTo(px2, py2);
+    }
+    const px = x + radiusX * Math.cos(endAngle) * cos - radiusY * Math.sin(endAngle) * sin;
+    const py = y + radiusX * Math.cos(endAngle) * sin + radiusY * Math.sin(endAngle) * cos;
+    ctx.lineTo(px, py);
+  }
+}
+if (globalThis.CanvasRenderingContext2D) {
+  if (typeof globalThis.CanvasRenderingContext2D.prototype.ellipse === "undefined") {
+    globalThis.CanvasRenderingContext2D.prototype.ellipse = ellipse;
+  }
+}
+if (globalThis.OffscreenCanvasRenderingContext2D) {
+  if (typeof globalThis.OffscreenCanvasRenderingContext2D.prototype.ellipse === "undefined") {
+    globalThis.OffscreenCanvasRenderingContext2D.prototype.ellipse = ellipse;
+  }
+}
+
 // src/polyfill/roundrect.ts
 function roundRect(x, y, w, h, radii) {
   if (![x, y, w, h].every((input) => {
@@ -7081,7 +7137,7 @@ function hasVideoFormat(codec) {
   return result;
 }
 
-// src/audio/audio.js
+// src/audio/audio.ts
 var audio_exports = {};
 __export(audio_exports, {
   disable: () => disable,
@@ -7124,11 +7180,11 @@ var retry_counter = 0;
 var audioExts = [];
 var soundLoadError = function(sound_name, onerror_cb) {
   if (retry_counter++ > 3) {
-    const errmsg = "melonJS: failed loading " + sound_name;
-    if (stopOnAudioError === false) {
+    const errmsg = `melonJS: failed loading ${sound_name}`;
+    if (!stopOnAudioError) {
       disable();
       onerror_cb?.();
-      console.log(errmsg + ", disabling audio");
+      console.log(`${errmsg}, disabling audio`);
     } else {
       onerror_cb?.();
       throw new Error(errmsg);
@@ -7161,11 +7217,13 @@ function load(sound2, onloadcb, onerrorcb, settings = {}) {
       "target audio extension(s) should be set through me.audio.init() before calling the preloader."
     );
   }
-  if (isDataUrl(sound2.src) === true) {
+  if (isDataUrl(sound2.src)) {
     urls.push(sound2.src);
   } else {
     for (let i = 0; i < audioExts.length; i++) {
-      urls.push(sound2.src + sound2.name + "." + audioExts[i] + settings.nocache);
+      urls.push(
+        `${sound2.src + sound2.name}.${audioExts[i]}${settings.nocache ?? ""}`
+      );
     }
   }
   audioTracks[sound2.name] = new import_howler.Howl({
@@ -7174,6 +7232,7 @@ function load(sound2, onloadcb, onerrorcb, settings = {}) {
     autoplay: sound2.autoplay === true,
     loop: sound2.loop = true,
     html5: sound2.stream === true || sound2.html5 === true,
+    // @ts-expect-error xhrWithCredentials is a valid Howl option but not in the type definitions
     xhrWithCredentials: settings.withCredentials,
     onloaderror() {
       soundLoadError.call(this, sound2.name, onerrorcb);
@@ -7199,7 +7258,7 @@ function play(sound_name, loop = false, onend, volume) {
       id
     );
     if (typeof onend === "function") {
-      if (loop === true) {
+      if (loop) {
         sound2.on("end", onend, id);
       } else {
         sound2.once("end", onend, id);
@@ -7207,7 +7266,7 @@ function play(sound_name, loop = false, onend, volume) {
     }
     return id;
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function fade(sound_name, from, to, duration, id) {
@@ -7215,7 +7274,7 @@ function fade(sound_name, from, to, duration, id) {
   if (sound2 && typeof sound2 !== "undefined") {
     sound2.fade(from, to, duration, id);
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function seek(sound_name, ...args) {
@@ -7223,7 +7282,7 @@ function seek(sound_name, ...args) {
   if (sound2 && typeof sound2 !== "undefined") {
     return sound2.seek(...args);
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function rate(sound_name, ...args) {
@@ -7231,15 +7290,15 @@ function rate(sound_name, ...args) {
   if (sound2 && typeof sound2 !== "undefined") {
     return sound2.rate(...args);
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function stereo(sound_name, pan, id) {
   const sound2 = audioTracks[sound_name];
   if (sound2 && typeof sound2 !== "undefined") {
-    return sound2.stereo(pan, id);
+    return pan !== void 0 ? sound2.stereo(pan, id) : sound2.stereo();
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function position(sound_name, x, y, z, id) {
@@ -7247,7 +7306,7 @@ function position(sound_name, x, y, z, id) {
   if (sound2 && typeof sound2 !== "undefined") {
     return sound2.pos(x, y, z, id);
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function orientation(sound_name, x, y, z, id) {
@@ -7255,15 +7314,18 @@ function orientation(sound_name, x, y, z, id) {
   if (sound2 && typeof sound2 !== "undefined") {
     return sound2.orientation(x, y, z, id);
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function panner(sound_name, attributes, id) {
   const sound2 = audioTracks[sound_name];
   if (sound2 && typeof sound2 !== "undefined") {
-    return sound2.pannerAttr(attributes, id);
+    return sound2.pannerAttr(
+      attributes,
+      id
+    );
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function stop(sound_name, id) {
@@ -7273,7 +7335,7 @@ function stop(sound_name, id) {
       sound2.stop(id);
       sound2.off("end", void 0, id);
     } else {
-      throw new Error("audio clip " + sound_name + " does not exist");
+      throw new Error(`audio clip ${sound_name} does not exist`);
     }
   } else {
     import_howler.Howler.stop();
@@ -7284,7 +7346,7 @@ function pause(sound_name, id) {
   if (sound2 && typeof sound2 !== "undefined") {
     sound2.pause(id);
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function resume(sound_name, id) {
@@ -7292,7 +7354,7 @@ function resume(sound_name, id) {
   if (sound2 && typeof sound2 !== "undefined") {
     sound2.play(id);
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function playTrack(sound_name, volume) {
@@ -7324,12 +7386,12 @@ function setVolume(volume) {
 function getVolume() {
   return import_howler.Howler.volume();
 }
-function mute(sound_name, id, mute2 = true) {
+function mute(sound_name, id, shouldMute = true) {
   const sound2 = audioTracks[sound_name];
   if (sound2 && typeof sound2 !== "undefined") {
-    sound2.mute(mute2, id);
+    sound2.mute(shouldMute, id);
   } else {
-    throw new Error("audio clip " + sound_name + " does not exist");
+    throw new Error(`audio clip ${sound_name} does not exist`);
   }
 }
 function unmute(sound_name, id) {
@@ -7354,7 +7416,7 @@ function unload(sound_name) {
 }
 function unloadAll() {
   for (const sound_name in audioTracks) {
-    if (audioTracks.hasOwnProperty(sound_name)) {
+    if (Object.prototype.hasOwnProperty.call(audioTracks, sound_name)) {
       unload(sound_name);
     }
   }
@@ -7471,7 +7533,7 @@ var ObservablePoint = class _ObservablePoint {
   }
 };
 
-// src/input/input.js
+// src/input/input.ts
 var input_exports = {};
 __export(input_exports, {
   GAMEPAD: () => GAMEPAD,
@@ -7606,15 +7668,15 @@ function unbindKey(keyCode) {
   delete _preventDefaultForKeys[keyCode];
 }
 
-// src/input/gamepad.js
+// src/input/gamepad.ts
 var deadzone = 0.1;
-function wiredXbox360NormalizeFn(value, axis, button) {
+function wiredXbox360NormalizeFn(value, _axis, button) {
   if (button === this.GAMEPAD.BUTTONS.L2 || button === this.GAMEPAD.BUTTONS.R2) {
     return (value + 1) / 2;
   }
   return value;
 }
-function ouyaNormalizeFn(value, axis, button) {
+function ouyaNormalizeFn(value, _axis, button) {
   if (value > 0) {
     if (button === this.GAMEPAD.BUTTONS.L2) {
       value = Math.max(0, value - 2e4) / 111070;
@@ -7629,12 +7691,18 @@ function ouyaNormalizeFn(value, axis, button) {
 var vendorProductRE = /^([0-9a-f]{1,4})-([0-9a-f]{1,4})-/i;
 var leadingZeroRE = /^0+/;
 function addMapping(id, mapping) {
-  const expanded_id = id.replace(vendorProductRE, (_, a, b) => {
-    return "000".slice(a.length - 1) + a + "-" + "000".slice(b.length - 1) + b + "-";
-  });
-  const sparse_id = id.replace(vendorProductRE, (_, a, b) => {
-    return a.replace(leadingZeroRE, "") + "-" + b.replace(leadingZeroRE, "") + "-";
-  });
+  const expanded_id = id.replace(
+    vendorProductRE,
+    (_, a, b) => {
+      return `${"000".slice(a.length - 1) + a}-${"000".slice(b.length - 1)}${b}-`;
+    }
+  );
+  const sparse_id = id.replace(
+    vendorProductRE,
+    (_, a, b) => {
+      return `${a.replace(leadingZeroRE, "")}-${b.replace(leadingZeroRE, "")}-`;
+    }
+  );
   mapping.analog = mapping.analog || mapping.buttons.map(() => {
     return -1;
   });
@@ -7757,7 +7825,7 @@ var updateGamepads = function() {
     }
     let mapping = null;
     if (gamepad.mapping !== "standard") {
-      mapping = remap.get(gamepad.id);
+      mapping = remap.get(gamepad.id) || null;
     }
     const binding = bindings[index];
     Object.keys(binding.buttons).forEach((button) => {
@@ -7771,7 +7839,7 @@ var updateGamepads = function() {
           return;
         }
       }
-      let current = gamepad.buttons[mapped_button] || {};
+      let current = gamepad.buttons[mapped_button] || { value: 0, pressed: false };
       if (mapping) {
         if (mapped_axis >= 0) {
           const value = mapping.normalize_fn(
@@ -7787,9 +7855,9 @@ var updateGamepads = function() {
       }
       eventEmitter.emit(GAMEPAD_UPDATE, index, "buttons", +button, current);
       if (!last.pressed && current.pressed) {
-        triggerKeyEvent(last.keyCode, true, mapped_button + 256);
+        triggerKeyEvent(last.keyCode, true, Number(mapped_button) + 256);
       } else if (last.pressed && !current.pressed) {
-        triggerKeyEvent(last.keyCode, false, mapped_button + 256);
+        triggerKeyEvent(last.keyCode, false, Number(mapped_button) + 256);
       }
       last.value = current.value;
       last.pressed = current.pressed;
@@ -7814,18 +7882,22 @@ var updateGamepads = function() {
       if (last[range].keyCode === 0) {
         return;
       }
-      const pressed = Math.abs(value) >= deadzone + Math.abs(last[range].threshold);
+      const pressed = Math.abs(value) >= deadzone + Math.abs(last[range].threshold || 0);
       eventEmitter.emit(GAMEPAD_UPDATE, index, "axes", +axis, value);
       if (!last[range].pressed && pressed) {
         if (last[-range].pressed) {
-          triggerKeyEvent(last[-range].keyCode, false, mapped_axis + 256);
+          triggerKeyEvent(
+            last[-range].keyCode,
+            false,
+            Number(mapped_axis) + 256
+          );
           last[-range].value = 0;
           last[-range].pressed = false;
         }
-        triggerKeyEvent(last[range].keyCode, true, mapped_axis + 256);
+        triggerKeyEvent(last[range].keyCode, true, Number(mapped_axis) + 256);
       } else if ((last[range].pressed || last[-range].pressed) && !pressed) {
         range = last[range].pressed ? range : -range;
-        triggerKeyEvent(last[range].keyCode, false, mapped_axis + 256);
+        triggerKeyEvent(last[range].keyCode, false, Number(mapped_axis) + 256);
       }
       last[range].value = value;
       last[range].pressed = pressed;
@@ -7908,7 +7980,7 @@ var GAMEPAD = {
 };
 function bindGamepad(index, button, keyCode) {
   if (!getBindingKey(keyCode)) {
-    throw new Error("no action defined for keycode " + keyCode);
+    throw new Error(`no action defined for keycode ${keyCode}`);
   }
   if (!eventEmitter.hasListener(GAME_BEFORE_UPDATE, updateGamepads) && typeof navigator.getGamepads === "function") {
     eventEmitter.addListener(GAME_BEFORE_UPDATE, updateGamepads);
@@ -7948,7 +8020,7 @@ function bindGamepad(index, button, keyCode) {
 }
 function unbindGamepad(index, button) {
   if (!bindings[index]) {
-    throw new Error("no bindings for gamepad " + index);
+    throw new Error(`no bindings for gamepad ${index}`);
   }
   bindings[index].buttons[button] = {};
 }
@@ -8060,7 +8132,7 @@ var KEY = {
   SINGLE_QUOTE: 222
 };
 
-// src/input/input.js
+// src/input/input.ts
 var preventDefault = true;
 
 // src/math/color.ts
@@ -10828,11 +10900,71 @@ var linePool = createPool((x, y, points) => {
 
 // src/geometries/roundrect.ts
 var DEFAULT_RADIUS = 20;
-var RoundRect = class _RoundRect extends Rect {
+var CORNER_SEGMENTS = 8;
+var ROUNDED_VERTEX_COUNT = 4 * (CORNER_SEGMENTS + 1);
+var CORNER_COS = new Array(CORNER_SEGMENTS + 1);
+var CORNER_SIN = new Array(CORNER_SEGMENTS + 1);
+for (let i = 0; i <= CORNER_SEGMENTS; i++) {
+  const angle = i / CORNER_SEGMENTS * (Math.PI / 2);
+  CORNER_COS[i] = Math.cos(angle);
+  CORNER_SIN[i] = Math.sin(angle);
+}
+function updateRoundRectVertices(points, w, h, r) {
+  if (r <= 0) {
+    if (points.length === 4) {
+      points[0].set(0, 0);
+      points[1].set(w, 0);
+      points[2].set(w, h);
+      points[3].set(0, h);
+      return points;
+    }
+    return [
+      new Vector2d(0, 0),
+      new Vector2d(w, 0),
+      new Vector2d(w, h),
+      new Vector2d(0, h)
+    ];
+  }
+  const canReuse = points.length === ROUNDED_VERTEX_COUNT;
+  let idx = 0;
+  function setOrPush(x, y) {
+    if (canReuse) {
+      points[idx].set(x, y);
+    } else {
+      points[idx] = new Vector2d(x, y);
+    }
+    idx++;
+  }
+  if (!canReuse) {
+    points.length = ROUNDED_VERTEX_COUNT;
+  }
+  for (let i = 0; i <= CORNER_SEGMENTS; i++) {
+    setOrPush(w - r + r * CORNER_SIN[i], r - r * CORNER_COS[i]);
+  }
+  for (let i = 0; i <= CORNER_SEGMENTS; i++) {
+    setOrPush(w - r + r * CORNER_COS[i], h - r + r * CORNER_SIN[i]);
+  }
+  for (let i = 0; i <= CORNER_SEGMENTS; i++) {
+    setOrPush(r - r * CORNER_SIN[i], h - r + r * CORNER_COS[i]);
+  }
+  for (let i = 0; i <= CORNER_SEGMENTS; i++) {
+    setOrPush(r - r * CORNER_COS[i], r - r * CORNER_SIN[i]);
+  }
+  return points;
+}
+var RoundRect = class _RoundRect extends Polygon {
   /**
    * Corner radius.
    */
   _radius;
+  /**
+   * stored width
+   */
+  _width;
+  /**
+   * stored height
+   */
+  _height;
   /**
    * the shape type (used internally)
    */
@@ -10845,10 +10977,73 @@ var RoundRect = class _RoundRect extends Rect {
    * @param [radius=20] - the radius of the rounded corner
    */
   constructor(x, y, width, height, radius = DEFAULT_RADIUS) {
-    super(x, y, width, height);
+    super(x, y, [
+      new Vector2d(0, 0),
+      new Vector2d(width, 0),
+      new Vector2d(width, height),
+      new Vector2d(0, height)
+    ]);
     this.type = "RoundRect";
+    this._width = width;
+    this._height = height;
     this.radius = radius;
   }
+  /**
+   * width of the RoundRect
+   */
+  get width() {
+    return this._width;
+  }
+  set width(value) {
+    this._width = value;
+    this.radius = this._radius;
+  }
+  /**
+   * height of the RoundRect
+   */
+  get height() {
+    return this._height;
+  }
+  set height(value) {
+    this._height = value;
+    this.radius = this._radius;
+  }
+  /**
+   * left coordinate of the RoundRect
+   */
+  get left() {
+    return this.pos.x;
+  }
+  /**
+   * right coordinate of the RoundRect
+   */
+  get right() {
+    return this.pos.x + this._width;
+  }
+  /**
+   * top coordinate of the RoundRect
+   */
+  get top() {
+    return this.pos.y;
+  }
+  /**
+   * bottom coordinate of the RoundRect
+   */
+  get bottom() {
+    return this.pos.y + this._height;
+  }
+  /**
+   * absolute center of this RoundRect on the horizontal axis
+   */
+  get centerX() {
+    return this.pos.x + this._width / 2;
+  }
+  /**
+   * absolute center of this RoundRect on the vertical axis
+   */
+  get centerY() {
+    return this.pos.y + this._height / 2;
+  }
   /**
    * the radius of the rounded corner
    * @default 20
@@ -10857,18 +11052,61 @@ var RoundRect = class _RoundRect extends Rect {
     return this._radius;
   }
   set radius(value) {
-    if (this.width < 2 * value) {
-      value = this.width / 2;
+    value = Math.max(0, value);
+    if (this._width < 2 * value) {
+      value = this._width / 2;
     }
-    if (this.height < 2 * value) {
-      value = this.height / 2;
+    if (this._height < 2 * value) {
+      value = this._height / 2;
     }
     this._radius = value;
+    this._updateVertices();
+  }
+  /**
+   * Rebuild polygon vertices to approximate the rounded corners.
+   * Reuses existing Vector2d instances when the vertex count matches.
+   * @ignore
+   */
+  _updateVertices() {
+    const updated = updateRoundRectVertices(
+      this.points,
+      this._width,
+      this._height,
+      this._radius
+    );
+    if (updated !== this.points) {
+      this.setVertices(
+        updated
+      );
+    } else {
+      this.recalc();
+      this.updateBounds();
+    }
+  }
+  /**
+   * Set new dimensions for the rounded rectangle.
+   * @param width - The new width.
+   * @param height - The new height.
+   */
+  setSize(width, height) {
+    this._width = width;
+    this._height = height;
+    this.radius = this._radius;
+    return this;
+  }
+  /**
+   * resize the rounded rectangle
+   * @param w - new width
+   * @param h - new height
+   * @returns this rounded rectangle
+   */
+  resize(w, h) {
+    return this.setSize(w, h);
   }
   /**
    * copy the position, size and radius of the given rounded rectangle into this one
    * @param rrect - source rounded rectangle
-   * @returns new rectangle
+   * @returns this rounded rectangle
    */
   copy(rrect) {
     this.pos.set(rrect.pos.x, rrect.pos.y);
@@ -10894,8 +11132,8 @@ var RoundRect = class _RoundRect extends Rect {
     }
     let tx;
     let ty;
-    const radiusX = Math.max(0, Math.min(this.radius, this.width / 2));
-    const radiusY = Math.max(0, Math.min(this.radius, this.height / 2));
+    const radiusX = Math.max(0, Math.min(this.radius, this._width / 2));
+    const radiusY = Math.max(0, Math.min(this.radius, this._height / 2));
     if (_x < this.left + radiusX && _y < this.top + radiusY) {
       tx = _x - this.left - radiusX;
       ty = _y - this.top - radiusY;
@@ -10913,13 +11151,25 @@ var RoundRect = class _RoundRect extends Rect {
     }
     return tx * tx + ty * ty <= radiusX * radiusY;
   }
+  /**
+   * Returns true if the rounded rectangle contains the given rectangle
+   * @param rectangle - rectangle to test
+   * @param rectangle.left - left coordinate
+   * @param rectangle.right - right coordinate
+   * @param rectangle.top - top coordinate
+   * @param rectangle.bottom - bottom coordinate
+   * @returns true if contained
+   */
+  containsRectangle(rectangle) {
+    return rectangle.left >= this.left && rectangle.right <= this.right && rectangle.top >= this.top && rectangle.bottom <= this.bottom;
+  }
   /**
    * check if this RoundRect is identical to the specified one
    * @param rrect - Other rounded rectangle.
    * @returns true if equals
    */
   equals(rrect) {
-    return super.equals(rrect) && this.radius === rrect.radius;
+    return this.left === rrect.left && this.right === rrect.right && this.top === rrect.top && this.bottom === rrect.bottom && this.radius === rrect.radius;
   }
   /**
    * clone this RoundRect
@@ -10929,9 +11179,9 @@ var RoundRect = class _RoundRect extends Rect {
     return new _RoundRect(
       this.pos.x,
       this.pos.y,
-      this.width,
-      this.height,
-      this.radius
+      this._width,
+      this._height,
+      this._radius
     );
   }
 };
@@ -12553,6 +12803,7 @@ var Renderable = class _Renderable extends Rect {
     this.updateWhenPaused = false;
     this.isPersistent = false;
     this.floating = false;
+    this.visibleInAllCameras = false;
     this.autoTransform = true;
     this.alpha = 1;
     this.ancestor = void 0;
@@ -14474,19 +14725,29 @@ var Container = class _Container extends Renderable {
     if (this.backgroundColor.alpha > 1 / 255) {
       renderer2.clearColor(this.backgroundColor);
     }
+    const isNonDefaultCamera = !viewport.isDefault;
     const children = this.getChildren();
     for (let i = children.length, obj; i--, obj = children[i]; ) {
       if (obj.isRenderable) {
         isFloating = obj.floating === true;
         if (obj.inViewport || isFloating) {
+          if (isFloating && isNonDefaultCamera && !obj.visibleInAllCameras) {
+            continue;
+          }
           if (isFloating) {
             renderer2.save();
             renderer2.resetTransform();
+            if (isNonDefaultCamera) {
+              renderer2.setProjection(viewport.screenProjection);
+            }
           }
           obj.preDraw(renderer2);
           obj.draw(renderer2, viewport);
           obj.postDraw(renderer2);
           if (isFloating) {
+            if (isNonDefaultCamera) {
+              renderer2.setProjection(viewport.worldProjection);
+            }
             renderer2.restore();
           }
           this.drawCount++;
@@ -14497,7 +14758,7 @@ var Container = class _Container extends Renderable {
 };
 
 // src/level/tiled/constants.js
-var TILED_SUPPORTED_VERSION = "1.9";
+var TILED_SUPPORTED_VERSION = "1.12";
 var TMX_FLIP_H = 2147483648;
 var TMX_FLIP_V = 1073741824;
 var TMX_FLIP_AD = 536870912;
@@ -15450,6 +15711,7 @@ var Renderer = class {
     this.scaleRatio = new Vector2d(this.settings.scale, this.settings.scale);
     this.isContextValid = true;
     this.depthTest = "sorting";
+    this.GPURenderer = void 0;
     this.path2D = new path2d_default();
     this.type = "Generic";
     this.backgroundColor = new Color(
@@ -15571,6 +15833,15 @@ var Renderer = class {
   getBlendMode() {
     return this.currentBlendMode;
   }
+  /**
+   * set the current blend mode.
+   * Subclasses (CanvasRenderer, WebGLRenderer) implement the actual GL/Canvas logic.
+   * @param {string} [mode="normal"] - blend mode
+   * @param {boolean} [premultipliedAlpha=true] - whether textures use premultiplied alpha (WebGL only)
+   */
+  setBlendMode(mode = "normal") {
+    this.currentBlendMode = mode;
+  }
   /**
    * get the current fill & stroke style color.
    * @returns {Color} current global color
@@ -16675,39 +16946,89 @@ var CanvasRenderer = class extends Renderer {
     this.getContext().setTransform(1, 0, 0, 1, 0, 0);
   }
   /**
-   * set a blend mode for the given context. <br>
-   * Supported blend mode between Canvas and WebGL renderer : <br>
-   * - "normal" : this is the default mode and draws new content on top of the existing content <br>
-   * <img src="../images/normal-blendmode.png" width="510"/> <br>
-   * - "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result. <br>
-   * <img src="../images/multiply-blendmode.png" width="510"/> <br>
-   * - "additive or lighter" : where both content overlap the color is determined by adding color values. <br>
-   * <img src="../images/lighter-blendmode.png" width="510"/> <br>
-   * - "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) <br>
-   * <img src="../images/screen-blendmode.png" width="510"/> <br>
+   * set/change the current projection matrix.
+   * In Canvas mode, this applies the ortho projection as a canvas 2D transform
+   * (translate + scale) to map world coordinates to screen coordinates.
+   * @param {Matrix3d} matrix - the new projection matrix
+   */
+  setProjection(matrix) {
+    super.setProjection(matrix);
+    const val = matrix.val;
+    const w = this.getCanvas().width;
+    const h = this.getCanvas().height;
+    const sx = val[0] * w * 0.5;
+    const sy = -val[5] * h * 0.5;
+    const tx = (val[12] + 1) * w * 0.5;
+    const ty = (1 - val[13]) * h * 0.5;
+    this.getContext().setTransform(sx, 0, 0, sy, tx, ty);
+  }
+  /**
+   * set the current blend mode for this renderer. <br>
+   * All renderers support: <br>
+   * - "normal" : draws new content on top of the existing content <br>
+   * <img src="../images/normal-blendmode.png" width="180"/> <br>
+   * - "add", "additive", or "lighter" : color values are added together <br>
+   * <img src="../images/add-blendmode.png" width="180"/> <br>
+   * - "multiply" : pixels are multiplied, resulting in a darker picture <br>
+   * <img src="../images/multiply-blendmode.png" width="180"/> <br>
+   * - "screen" : pixels are inverted, multiplied, and inverted again (opposite of multiply) <br>
+   * <img src="../images/screen-blendmode.png" width="180"/> <br>
+   * Canvas (browser-dependent) and WebGL2: <br>
+   * - "darken" : retains the darkest pixels of both layers <br>
+   * <img src="../images/darken-blendmode.png" width="180"/> <br>
+   * - "lighten" : retains the lightest pixels of both layers <br>
+   * <img src="../images/lighten-blendmode.png" width="180"/> <br>
+   * Canvas only, browser-dependent (falls back to "normal" if unsupported or in WebGL): <br>
+   * - "overlay" <br>
+   * <img src="../images/overlay-blendmode.png" width="180"/> <br>
+   * - "color-dodge" <br>
+   * <img src="../images/color-dodge-blendmode.png" width="180"/> <br>
+   * - "color-burn" <br>
+   * <img src="../images/color-burn-blendmode.png" width="180"/> <br>
+   * - "hard-light" <br>
+   * <img src="../images/hard-light-blendmode.png" width="180"/> <br>
+   * - "soft-light" <br>
+   * <img src="../images/soft-light-blendmode.png" width="180"/> <br>
+   * - "difference" <br>
+   * <img src="../images/difference-blendmode.png" width="180"/> <br>
+   * - "exclusion" <br>
+   * <img src="../images/exclusion-blendmode.png" width="180"/> <br>
    * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-   * @param {string} [mode="normal"] - blend mode : "normal", "multiply", "lighter, "additive", "screen"
-   * @param {CanvasRenderingContext2D} [context]
+   * @param {string} [mode="normal"] - blend mode
+   * @returns {string} the blend mode actually applied (may differ if the requested mode is unsupported)
    */
-  setBlendMode(mode = "normal", context) {
-    context = context || this.getContext();
+  setBlendMode(mode = "normal") {
+    const context = this.getContext();
     this.currentBlendMode = mode;
     switch (mode) {
-      case "screen":
-        context.globalCompositeOperation = "screen";
-        break;
       case "lighter":
       case "additive":
+      case "add":
         context.globalCompositeOperation = "lighter";
         break;
       case "multiply":
-        context.globalCompositeOperation = "multiply";
+      case "screen":
+      case "overlay":
+      case "darken":
+      case "lighten":
+      case "color-dodge":
+      case "color-burn":
+      case "hard-light":
+      case "soft-light":
+      case "difference":
+      case "exclusion":
+        context.globalCompositeOperation = mode;
+        if (context.globalCompositeOperation !== mode) {
+          context.globalCompositeOperation = "source-over";
+          this.currentBlendMode = "normal";
+        }
         break;
       default:
         context.globalCompositeOperation = "source-over";
         this.currentBlendMode = "normal";
         break;
     }
+    return this.currentBlendMode;
   }
   /**
    * prepare the framebuffer for drawing a new frame
@@ -16975,24 +17296,8 @@ var CanvasRenderer = class extends Renderer {
       return;
     }
     const context = this.getContext();
-    const hw = w;
-    const hh = h;
-    const lx = x - hw;
-    const rx = x + hw;
-    const ty = y - hh;
-    const by = y + hh;
-    const xmagic = hw * 0.551784;
-    const ymagic = hh * 0.551784;
-    const xmin = x - xmagic;
-    const xmax = x + xmagic;
-    const ymin = y - ymagic;
-    const ymax = y + ymagic;
     context.beginPath();
-    context.moveTo(x, ty);
-    context.bezierCurveTo(xmax, ty, rx, ymin, rx, y);
-    context.bezierCurveTo(rx, ymax, xmax, by, x, by);
-    context.bezierCurveTo(xmin, by, lx, ymax, lx, y);
-    context.bezierCurveTo(lx, ymin, xmin, ty, x, ty);
+    context.ellipse(x, y, w, h, 0, 0, Math.PI * 2);
     context[fill === true ? "fill" : "stroke"]();
     context.closePath();
   }
@@ -17441,13 +17746,13 @@ var Tile = class extends Bounds {
    * @param {TMXTileset} tileset - the corresponding tileset object
    */
   constructor(x, y, gid, tileset) {
+    super();
     let width;
     let height;
-    super();
     if (tileset.isCollection) {
-      const image = tileset.getTileImage(gid & TMX_CLEAR_BIT_MASK);
-      width = image.width;
-      height = image.height;
+      const tileImage = tileset.getTileImage(gid & TMX_CLEAR_BIT_MASK);
+      width = tileImage.width;
+      height = tileImage.height;
     } else {
       width = tileset.tilewidth;
       height = tileset.tileheight;
@@ -17462,20 +17767,21 @@ var Tile = class extends Bounds {
     this.flippedY = (this.tileId & TMX_FLIP_V) !== 0;
     this.flippedAD = (this.tileId & TMX_FLIP_AD) !== 0;
     this.flipped = this.flippedX || this.flippedY || this.flippedAD;
-    if (this.flipped === true) {
-      if (this.currentTransform === null) {
-        this.currentTransform = new Matrix2d();
-      }
+    if (this.flipped) {
+      this.currentTransform = new Matrix2d();
       this.setTileTransform(this.currentTransform.identity());
     }
     this.tileId &= TMX_CLEAR_BIT_MASK;
   }
   /**
    * set the transformation matrix for this tile
+   * @param {Matrix2d} transform - the transformation matrix to apply
    * @ignore
    */
   setTileTransform(transform) {
-    transform.translate(this.width / 2, this.height / 2);
+    const halfW = this.width / 2;
+    const halfH = this.height / 2;
+    transform.translate(halfW, halfH);
     if (this.flippedAD) {
       transform.rotate(degToRad(-90));
       transform.scale(-1, 1);
@@ -17486,7 +17792,7 @@ var Tile = class extends Bounds {
     if (this.flippedY) {
       transform.scale(this.flippedAD ? -1 : 1, this.flippedAD ? 1 : -1);
     }
-    transform.translate(-this.width / 2, -this.height / 2);
+    transform.translate(-halfW, -halfH);
   }
   /**
    * return a renderable object for this Tile object
@@ -17496,51 +17802,43 @@ var Tile = class extends Bounds {
   getRenderable(settings) {
     let renderable;
     const tileset = this.tileset;
-    if (tileset.animations.has(this.tileId)) {
+    const localId = this.tileId - tileset.firstgid;
+    if (tileset.animations.has(localId)) {
       const frames = [];
       const frameId = [];
-      tileset.animations.get(this.tileId).frames.forEach((frame) => {
+      for (const frame of tileset.animations.get(localId).frames) {
         frameId.push(frame.tileid);
         frames.push({
           name: "" + frame.tileid,
           delay: frame.duration
         });
-      });
+      }
       renderable = tileset.texture.createAnimationFromName(frameId, settings);
-      renderable.addAnimation(this.tileId - tileset.firstgid, frames);
-      renderable.setCurrentAnimation(this.tileId - tileset.firstgid);
-    } else {
-      if (tileset.isCollection === true) {
-        const image = tileset.getTileImage(this.tileId);
-        renderable = new Sprite(
-          0,
-          0,
-          Object.assign({
-            image
-          })
-          //, settings)
-        );
-        renderable.anchorPoint.set(0, 0);
-        renderable.scale(
-          settings.width / this.width,
-          settings.height / this.height
-        );
-        if (typeof settings.rotation !== "undefined") {
-          renderable.anchorPoint.set(0.5, 0.5);
-          renderable.currentTransform.rotate(settings.rotation);
-          renderable.currentTransform.translate(
-            settings.width / 2,
-            settings.height / 2
-          );
-          settings.rotation = void 0;
-        }
-      } else {
-        renderable = tileset.texture.createSpriteFromName(
-          this.tileId - tileset.firstgid,
-          settings
+      renderable.addAnimation(localId, frames);
+      renderable.setCurrentAnimation(localId);
+    } else if (tileset.isCollection) {
+      const image = tileset.getTileImage(this.tileId);
+      renderable = new Sprite(0, 0, { image });
+      renderable.anchorPoint.set(0, 0);
+      renderable.scale(
+        settings.width / this.width,
+        settings.height / this.height
+      );
+      if (settings.rotation !== void 0) {
+        renderable.anchorPoint.set(0.5, 0.5);
+        renderable.currentTransform.rotate(settings.rotation);
+        renderable.currentTransform.translate(
+          settings.width / 2,
+          settings.height / 2
         );
-        renderable.anchorPoint.set(0, 0);
+        settings.rotation = void 0;
       }
+    } else {
+      renderable = tileset.texture.createSpriteFromName(
+        this.tileId - tileset.firstgid,
+        settings
+      );
+      renderable.anchorPoint.set(0, 0);
     }
     this.setTileTransform(renderable.currentTransform);
     return renderable;
@@ -17551,9 +17849,12 @@ var Tile = class extends Bounds {
 var TMXUtils_exports = {};
 __export(TMXUtils_exports, {
   applyTMXProperties: () => applyTMXProperties,
+  cacheEmbeddedImage: () => cacheEmbeddedImage,
   decode: () => decode,
   parse: () => parse,
-  setInflateFunction: () => setInflateFunction
+  resolveEmbeddedImage: () => resolveEmbeddedImage,
+  setInflateFunction: () => setInflateFunction,
+  tiledBlendMode: () => tiledBlendMode
 });
 
 // src/utils/decode.ts
@@ -17615,6 +17916,22 @@ function decodeBase64AsArray(input, bytes = 1) {
   }
   return ar;
 }
+var mimeTypes = {
+  jpg: "image/jpeg",
+  svg: "image/svg+xml"
+};
+function decodeBase64Image(base64, format = "png", width, height) {
+  const img = new Image();
+  if (width != null) {
+    img.width = width;
+  }
+  if (height != null) {
+    img.height = height;
+  }
+  const mime = mimeTypes[format] || `image/${format}`;
+  img.src = `data:${mime};base64,${base64}`;
+  return img;
+}
 function decode(data2, encoding, compression) {
   const comp = compression || "none";
   const enc = encoding || "none";
@@ -17670,10 +17987,35 @@ function xmlToObject(element, normalizer) {
 }
 
 // src/level/tiled/TMXUtils.js
+var embeddedImageId = 0;
+function cacheEmbeddedImage(base64, format = "png", width, height) {
+  const name = `__embedded_${embeddedImageId++}`;
+  imgList[name] = decodeBase64Image(base64, format, width, height);
+  return `${name}.${format}`;
+}
+function resolveEmbeddedImage(data2) {
+  if (data2.imagedata) {
+    const format = data2.imageformat || "png";
+    data2.image = cacheEmbeddedImage(
+      data2.imagedata,
+      format,
+      data2.imagewidth ? +data2.imagewidth : void 0,
+      data2.imageheight ? +data2.imageheight : void 0
+    );
+    delete data2.imagedata;
+    delete data2.imageformat;
+  }
+}
+function tiledBlendMode(mode) {
+  if (typeof mode === "undefined" || mode === "normal") {
+    return "normal";
+  }
+  return mode === "add" ? "lighter" : mode;
+}
 var SHORT_ARGB = /^#([\da-fA-F])([\da-fA-F]{3})$/;
 var LONG_ARGB = /^#([\da-fA-F]{2})([\da-fA-F]{6})$/;
 function coerceTMXValue(name, type, raw) {
-  if (typeof raw !== "string") {
+  if (typeof raw !== "string" && type !== "list") {
     return raw;
   }
   switch (type) {
@@ -17682,6 +18024,13 @@ function coerceTMXValue(name, type, raw) {
       return Number(raw);
     case "bool":
       return raw === "true";
+    case "list":
+      if (Array.isArray(raw)) {
+        return raw.map((item) => {
+          return coerceTMXValue("", item.type || "string", item.value);
+        });
+      }
+      return raw;
     default:
       break;
   }
@@ -17730,7 +18079,20 @@ function flattenImage(obj) {
   if (obj.image) {
     obj.imagewidth = obj.image.width;
     obj.imageheight = obj.image.height;
-    obj.image = obj.image.source;
+    if (obj.image.source) {
+      obj.image = obj.image.source;
+    } else if (obj.image.data) {
+      const format = obj.image.format || "png";
+      const base64 = obj.image.data.text || obj.image.data;
+      obj.image = cacheEmbeddedImage(
+        base64,
+        format,
+        obj.image.width ? +obj.image.width : void 0,
+        obj.image.height ? +obj.image.height : void 0
+      );
+    } else {
+      obj.image = obj.image.source;
+    }
   }
 }
 function normalizeTMX(obj, item, parse2) {
@@ -17773,7 +18135,18 @@ function normalizeTMX(obj, item, parse2) {
       const layer = parse2(item);
       layer.type = nodeName === "layer" ? "tilelayer" : nodeName;
       if (layer.image) {
-        layer.image = layer.image.source;
+        if (layer.image.source) {
+          layer.image = layer.image.source;
+        } else if (layer.image.data) {
+          const format = layer.image.format || "png";
+          const base64 = layer.image.data.text || layer.image.data;
+          layer.image = cacheEmbeddedImage(
+            base64,
+            format,
+            layer.image.width ? +layer.image.width : void 0,
+            layer.image.height ? +layer.image.height : void 0
+          );
+        }
       }
       const layers = obj.layers || (obj.layers = []);
       layers.push(layer);
@@ -17821,16 +18194,37 @@ function normalizeTMX(obj, item, parse2) {
     case "properties":
       obj.properties = parse2(item);
       break;
+    case "item": {
+      const itemData = parse2(item);
+      const items = obj.items || (obj.items = []);
+      items.push(
+        coerceTMXValue(
+          "",
+          itemData.type || "string",
+          itemData.value !== void 0 ? itemData.value : itemData.text
+        )
+      );
+      break;
+    }
     case "property": {
       const prop = parse2(item);
-      obj[prop.name] = coerceTMXValue(
-        prop.name,
-        // in XML, type is undefined for "string" values
-        prop.type || "string",
-        prop.value !== void 0 ? prop.value : prop.text
-      );
+      if (prop.type === "class") {
+        obj[prop.name] = prop.properties || {};
+      } else if (prop.type === "list") {
+        obj[prop.name] = prop.items || [];
+      } else {
+        obj[prop.name] = coerceTMXValue(
+          prop.name,
+          // in XML, type is undefined for "string" values
+          prop.type || "string",
+          prop.value !== void 0 ? prop.value : prop.text
+        );
+      }
       break;
     }
+    case "image":
+      obj.image = xmlToObject(item);
+      break;
     default:
       obj[nodeName] = parse2(item);
       break;
@@ -17860,7 +18254,7 @@ function applyTMXProperties(obj, data2) {
   for (let i = 0, len = keys.length; i < len; i++) {
     const key = keys[i];
     const prop = properties[key];
-    if (prop !== null && typeof prop === "object" && prop.name !== void 0) {
+    if (prop !== null && typeof prop === "object" && !isNaN(key) && prop.name !== void 0 && prop.type !== void 0) {
       obj[prop.name] = coerceTMXValue(
         prop.name,
         prop.type || "string",
@@ -17950,6 +18344,7 @@ var TMXLayer = class extends Renderable {
     this.rows = +data2.height;
     const visible = typeof data2.visible !== "undefined" ? +data2.visible : 1;
     this.setOpacity(visible ? +data2.opacity : 0);
+    this.blendMode = tiledBlendMode(data2.mode);
     if (typeof data2.tintcolor === "string") {
       this.tint.parseHex(data2.tintcolor, true);
     }
@@ -18899,60 +19294,211 @@ var TMXOrthogonalRenderer = class extends TMXRenderer {
   }
 };
 
-// src/level/tiled/renderer/TMXStaggeredRenderer.js
-var TMXStaggeredRenderer = class extends TMXHexagonalRenderer {
+// src/level/tiled/renderer/TMXObliqueRenderer.js
+var TMXObliqueRenderer = class extends TMXOrthogonalRenderer {
+  /**
+   * @param {TMXTileMap} map - the TMX map
+   */
+  constructor(map) {
+    super(map);
+    this.skewX = map.skewx;
+    this.skewY = map.skewy;
+    this.shearX = this.tileheight !== 0 ? this.skewX / this.tileheight : 0;
+    this.shearY = this.tilewidth !== 0 ? this.skewY / this.tilewidth : 0;
+    this._det = 1 - this.shearX * this.shearY;
+  }
   /**
    * return true if the renderer can render the specified layer
    * @ignore
    */
   canRender(layer) {
-    return layer.orientation === "staggered" && super.canRender(layer);
+    return layer.orientation === "oblique" && this.tilewidth === layer.tilewidth && this.tileheight === layer.tileheight;
+  }
+  /**
+   * return the bounding rect for this map renderer
+   * @param {TMXLayer} [layer] - calculate the bounding rect for a specific layer
+   * @returns {Bounds}
+   */
+  getBounds(layer) {
+    const bounds = layer instanceof TMXLayer ? boundsPool.get() : this.bounds;
+    const cols = layer instanceof TMXLayer ? layer.cols : this.cols;
+    const rows = layer instanceof TMXLayer ? layer.rows : this.rows;
+    const w = cols * this.tilewidth;
+    const h = rows * this.tileheight;
+    const sx = this.skewX * rows;
+    const sy = this.skewY * cols;
+    const minX = Math.min(0, sx, sy * this.shearX, w + sx);
+    const minY = Math.min(0, sy, sx * this.shearY, h + sy);
+    const maxX = Math.max(0, w, w + sx, sx);
+    const maxY = Math.max(0, h, h + sy, sy);
+    bounds.setMinMax(minX, minY, maxX, maxY);
+    return bounds;
   }
   /**
    * return the tile position corresponding to the specified pixel
    * @ignore
    */
   pixelToTileCoords(x, y, v) {
-    let ret = v || vector2dPool.get();
-    let alignedX = x;
-    let alignedY = y;
-    if (this.staggerX) {
-      alignedX -= this.staggerEven ? this.sideoffsetx : 0;
-    } else {
-      alignedY -= this.staggerEven ? this.sideoffsety : 0;
-    }
-    let referencePoint = vector2dPool.get(
-      Math.floor(alignedX / this.tilewidth),
-      Math.floor(alignedY / this.tileheight)
-    );
-    if (this.staggerX) {
-      referencePoint.x = referencePoint.x * 2;
-      if (this.staggerEven) {
-        ++referencePoint.x;
+    const ret = v || vector2dPool.get();
+    const px = (x - this.shearX * y) / this._det;
+    const py = (y - this.shearY * x) / this._det;
+    return ret.set(px / this.tilewidth, py / this.tileheight);
+  }
+  /**
+   * return the pixel position corresponding of the specified tile
+   * @ignore
+   */
+  tileToPixelCoords(x, y, v) {
+    const ret = v || vector2dPool.get();
+    const px = x * this.tilewidth;
+    const py = y * this.tileheight;
+    return ret.set(px + this.shearX * py, this.shearY * px + py);
+  }
+  /**
+   * draw the tile map
+   * @ignore
+   */
+  drawTile(renderer2, x, y, tmxTile) {
+    const tileset = tmxTile.tileset;
+    const dx = tileset.tileoffset.x + x * this.tilewidth + this.skewX * y;
+    const dy = tileset.tileoffset.y + (y + 1) * this.tileheight - tileset.tileheight + this.skewY * x;
+    tileset.drawTile(renderer2, dx, dy, tmxTile);
+  }
+  /**
+   * draw the given TMX Layer for the given area
+   * @ignore
+   */
+  drawTileLayer(renderer2, layer, rect) {
+    let incX = 1;
+    let incY = 1;
+    const rxMin = rect.pos.x;
+    const ryMin = rect.pos.y;
+    const rxMax = rect.pos.x + rect.width;
+    const ryMax = rect.pos.y + rect.height;
+    const invCorners = [
+      this.pixelToTileCoords(rxMin, ryMin, vector2dPool.get()),
+      this.pixelToTileCoords(rxMax, ryMin, vector2dPool.get()),
+      this.pixelToTileCoords(rxMin, ryMax, vector2dPool.get()),
+      this.pixelToTileCoords(rxMax, ryMax, vector2dPool.get())
+    ];
+    let startX = Infinity;
+    let startY = Infinity;
+    let endX = -Infinity;
+    let endY = -Infinity;
+    for (const c of invCorners) {
+      if (c.x < startX) {
+        startX = c.x;
       }
-    } else {
-      referencePoint.y = referencePoint.y * 2;
-      if (this.staggerEven) {
-        ++referencePoint.y;
+      if (c.y < startY) {
+        startY = c.y;
+      }
+      if (c.x > endX) {
+        endX = c.x;
+      }
+      if (c.y > endY) {
+        endY = c.y;
       }
     }
-    const rel = vector2dPool.get(
-      alignedX - referencePoint.x * this.tilewidth,
-      alignedY - referencePoint.y * this.tileheight
-    );
-    const y_pos = rel.x * (this.tileheight / this.tilewidth);
-    if (this.sideoffsety - y_pos > rel.y) {
-      referencePoint = this.topLeft(
-        referencePoint.x,
-        referencePoint.y,
-        referencePoint
-      );
+    for (const c of invCorners) {
+      vector2dPool.release(c);
     }
-    if (-this.sideoffsety + y_pos > rel.y) {
-      referencePoint = this.topRight(
-        referencePoint.x,
-        referencePoint.y,
-        referencePoint
+    startX = Math.max(
+      Math.floor(
+        startX - (layer.maxTileSize.width - layer.tilewidth) / this.tilewidth
+      ),
+      0
+    );
+    startY = Math.max(
+      Math.floor(
+        startY - (layer.maxTileSize.height - layer.tileheight) / this.tileheight
+      ),
+      0
+    );
+    endX = Math.min(Math.ceil(endX) + 1, this.cols);
+    endY = Math.min(Math.ceil(endY) + 1, this.rows);
+    switch (layer.renderorder) {
+      case "right-up":
+        endY = startY + (startY = endY) - endY;
+        incY = -1;
+        break;
+      case "left-down":
+        endX = startX + (startX = endX) - endX;
+        incX = -1;
+        break;
+      case "left-up":
+        endX = startX + (startX = endX) - endX;
+        endY = startY + (startY = endY) - endY;
+        incX = -1;
+        incY = -1;
+        break;
+      default:
+        break;
+    }
+    for (let y = startY; y !== endY; y += incY) {
+      for (let x = startX; x !== endX; x += incX) {
+        const tmxTile = layer.cellAt(x, y, false);
+        if (tmxTile) {
+          this.drawTile(renderer2, x, y, tmxTile);
+        }
+      }
+    }
+  }
+};
+
+// src/level/tiled/renderer/TMXStaggeredRenderer.js
+var TMXStaggeredRenderer = class extends TMXHexagonalRenderer {
+  /**
+   * return true if the renderer can render the specified layer
+   * @ignore
+   */
+  canRender(layer) {
+    return layer.orientation === "staggered" && super.canRender(layer);
+  }
+  /**
+   * return the tile position corresponding to the specified pixel
+   * @ignore
+   */
+  pixelToTileCoords(x, y, v) {
+    let ret = v || vector2dPool.get();
+    let alignedX = x;
+    let alignedY = y;
+    if (this.staggerX) {
+      alignedX -= this.staggerEven ? this.sideoffsetx : 0;
+    } else {
+      alignedY -= this.staggerEven ? this.sideoffsety : 0;
+    }
+    let referencePoint = vector2dPool.get(
+      Math.floor(alignedX / this.tilewidth),
+      Math.floor(alignedY / this.tileheight)
+    );
+    if (this.staggerX) {
+      referencePoint.x = referencePoint.x * 2;
+      if (this.staggerEven) {
+        ++referencePoint.x;
+      }
+    } else {
+      referencePoint.y = referencePoint.y * 2;
+      if (this.staggerEven) {
+        ++referencePoint.y;
+      }
+    }
+    const rel = vector2dPool.get(
+      alignedX - referencePoint.x * this.tilewidth,
+      alignedY - referencePoint.y * this.tileheight
+    );
+    const y_pos = rel.x * (this.tileheight / this.tilewidth);
+    if (this.sideoffsety - y_pos > rel.y) {
+      referencePoint = this.topLeft(
+        referencePoint.x,
+        referencePoint.y,
+        referencePoint
+      );
+    }
+    if (-this.sideoffsety + y_pos > rel.y) {
+      referencePoint = this.topRight(
+        referencePoint.x,
+        referencePoint.y,
+        referencePoint
       );
     }
     if (this.sideoffsety + y_pos < rel.y) {
@@ -18993,6 +19539,8 @@ function getNewTMXRenderer(map) {
       return new TMXHexagonalRenderer(map);
     case "staggered":
       return new TMXStaggeredRenderer(map);
+    case "oblique":
+      return new TMXObliqueRenderer(map);
     // if none found, throw an exception
     default:
       throw new Error(`${map.orientation} type TMX Tile Map not supported!`);
@@ -19000,6 +19548,24 @@ function getNewTMXRenderer(map) {
 }
 
 // src/level/tiled/TMXObject.js
+function detectShape(settings) {
+  if (typeof settings.ellipse !== "undefined") {
+    return "ellipse";
+  }
+  if (typeof settings.capsule !== "undefined") {
+    return "capsule";
+  }
+  if (typeof settings.point !== "undefined") {
+    return "point";
+  }
+  if (typeof settings.polygon !== "undefined") {
+    return "polygon";
+  }
+  if (typeof settings.polyline !== "undefined") {
+    return "polyline";
+  }
+  return "rectangle";
+}
 var TMXObject = class {
   constructor(map, settings, z) {
     this.points = void 0;
@@ -19015,28 +19581,25 @@ var TMXObject = class {
     this.class = settings.class ?? settings.type;
     this.text = void 0;
     this.rotation = degToRad(+settings.rotation || 0);
+    this.opacity = +(settings.opacity ?? 1);
+    this.visible = +(settings.visible ?? 1) !== 0;
     this.id = +settings.id || void 0;
     this.orientation = map.orientation;
     this.shapes = void 0;
-    this.isEllipse = false;
-    this.isPoint = false;
-    this.isPolygon = false;
-    this.isPolyLine = false;
+    this.shapeType = "rectangle";
     if (typeof this.gid === "number") {
       this.setTile(map.tilesets);
     } else {
-      if (typeof settings.ellipse !== "undefined") {
-        this.isEllipse = true;
-      } else if (typeof settings.point !== "undefined") {
-        this.isPoint = true;
-      } else if (typeof settings.polygon !== "undefined") {
-        this.points = settings.polygon;
-        this.isPolygon = true;
-      } else if (typeof settings.polyline !== "undefined") {
-        this.points = settings.polyline;
-        this.isPolyLine = true;
+      this.shapeType = detectShape(settings);
+      if (this.shapeType === "polygon" || this.shapeType === "polyline") {
+        this.points = settings[this.shapeType];
       }
     }
+    this.isEllipse = this.shapeType === "ellipse";
+    this.isCapsule = this.shapeType === "capsule";
+    this.isPoint = this.shapeType === "point";
+    this.isPolygon = this.shapeType === "polygon";
+    this.isPolyLine = this.shapeType === "polyline";
     if (typeof settings.text !== "undefined") {
       this.text = settings.text;
       this.text.font = settings.text.fontfamily || "sans-serif";
@@ -19070,58 +19633,75 @@ var TMXObject = class {
     this.tile = new Tile(this.x, this.y, this.gid, tileset);
   }
   /**
-   * parses the TMX shape definition and returns a corresponding array of me.Shape object
+   * parses the TMX shape definition and returns a corresponding array of shape objects
    * @private
-   * @returns {Polygon[]|Line[]|Ellipse[]} an array of shape objects
+   * @returns {Polygon[]|Line[]|Ellipse[]|RoundRect[]} an array of shape objects
    */
   parseTMXShapes() {
     const shapes = [];
-    if (this.isEllipse === true) {
-      shapes.push(
-        ellipsePool.get(this.width / 2, this.height / 2, this.width, this.height).rotate(this.rotation)
-      );
-    } else if (this.isPoint === true) {
-      shapes.push(pointPool.get(this.x, this.y));
-    } else {
-      if (this.isPolygon === true) {
-        const _polygon = polygonPool.get(0, 0, this.points);
-        const isConvex = _polygon.isConvex();
+    switch (this.shapeType) {
+      case "ellipse":
+        shapes.push(
+          ellipsePool.get(this.width / 2, this.height / 2, this.width, this.height).rotate(this.rotation)
+        );
+        break;
+      case "capsule": {
+        const radius = Math.min(this.width, this.height) / 2;
+        shapes.push(
+          roundedRectanglePool.get(0, 0, this.width, this.height, radius).rotate(this.rotation)
+        );
+        break;
+      }
+      case "point":
+        shapes.push(pointPool.get(this.x, this.y));
+        break;
+      case "polygon": {
+        const polygon = polygonPool.get(0, 0, this.points);
+        const isConvex = polygon.isConvex();
         if (isConvex === true) {
-          shapes.push(_polygon.rotate(this.rotation));
+          shapes.push(polygon.rotate(this.rotation));
         } else if (isConvex === false) {
           console.warn(
             "melonJS: concave collision polygon detected, decomposing into convex triangles"
           );
-          const indices = _polygon.getIndices();
-          const pts = _polygon.points;
+          const indices = polygon.getIndices();
+          const pts = polygon.points;
           for (let t = 0; t < indices.length; t += 3) {
-            const tri = polygonPool.get(0, 0, [
-              vector2dPool.get(pts[indices[t]].x, pts[indices[t]].y),
-              vector2dPool.get(pts[indices[t + 1]].x, pts[indices[t + 1]].y),
-              vector2dPool.get(pts[indices[t + 2]].x, pts[indices[t + 2]].y)
-            ]);
-            shapes.push(tri.rotate(this.rotation));
+            shapes.push(
+              polygonPool.get(0, 0, [
+                vector2dPool.get(pts[indices[t]].x, pts[indices[t]].y),
+                vector2dPool.get(
+                  pts[indices[t + 1]].x,
+                  pts[indices[t + 1]].y
+                ),
+                vector2dPool.get(
+                  pts[indices[t + 2]].x,
+                  pts[indices[t + 2]].y
+                )
+              ]).rotate(this.rotation)
+            );
           }
-          polygonPool.release(_polygon);
+          polygonPool.release(polygon);
         } else {
           console.warn("melonJS: invalid polygon definition, skipping");
-          polygonPool.release(_polygon);
+          polygonPool.release(polygon);
         }
-      } else if (this.isPolyLine === true) {
+        break;
+      }
+      case "polyline": {
         const p = this.points;
-        let p1;
-        let p2;
-        const segments = p.length - 1;
-        for (let i = 0; i < segments; i++) {
-          p1 = vector2dPool.get(p[i].x, p[i].y);
-          p2 = vector2dPool.get(p[i + 1].x, p[i + 1].y);
+        for (let i = 0, len = p.length - 1; i < len; i++) {
+          let p1 = vector2dPool.get(p[i].x, p[i].y);
+          let p2 = vector2dPool.get(p[i + 1].x, p[i + 1].y);
           if (this.rotation !== 0) {
             p1 = p1.rotate(this.rotation);
             p2 = p2.rotate(this.rotation);
           }
           shapes.push(linePool.get(0, 0, [p1, p2]));
         }
-      } else {
+        break;
+      }
+      default:
         shapes.push(
           polygonPool.get(0, 0, [
             vector2dPool.get(),
@@ -19130,7 +19710,7 @@ var TMXObject = class {
             vector2dPool.get(0, this.height)
           ]).rotate(this.rotation)
         );
-      }
+        break;
     }
     if (this.orientation === "isometric") {
       for (let i = 0; i < shapes.length; i++) {
@@ -19162,6 +19742,7 @@ var TMXGroup = class {
     this.objects = [];
     const visible = data2.visible ?? true;
     this.opacity = visible === true ? clamp(+data2.opacity || 1, 0, 1) : 0;
+    this.blendMode = tiledBlendMode(data2.mode);
     applyTMXProperties(this, data2);
     if (data2.objects) {
       const objects = data2.objects;
@@ -19217,12 +19798,15 @@ var TMXGroup = class {
 var TMXTileset = class {
   /**
    *  @param {object} tileset - tileset data in JSON format ({@link http://docs.mapeditor.org/en/stable/reference/tmx-map-format/#tileset})
-   */
-  constructor(tileset) {
-    this.TileProperties = [];
-    this.imageCollection = [];
-    this.firstgid = this.lastgid = +tileset.firstgid;
-    if (typeof tileset.source !== "undefined") {
+   *  @param {number} [mapTilewidth] - the map's tile grid width in pixels
+   *  @param {number} [mapTileheight] - the map's tile grid height in pixels
+   */
+  constructor(tileset, mapTilewidth, mapTileheight) {
+    this.tileProperties = /* @__PURE__ */ new Map();
+    this.imageCollection = /* @__PURE__ */ new Map();
+    this.firstgid = +tileset.firstgid;
+    this.lastgid = this.firstgid;
+    if (tileset.source !== void 0) {
       const src = tileset.source;
       const ext = getExtension(src);
       if (ext === "tsx" || ext === "xml" || ext === "json" || ext === "tsj") {
@@ -19235,54 +19819,45 @@ var TMXTileset = class {
     this.name = tileset.name;
     this.tilewidth = +tileset.tilewidth;
     this.tileheight = +tileset.tileheight;
-    this.spacing = +tileset.spacing || 0;
-    this.margin = +tileset.margin || 0;
+    this.spacing = +(tileset.spacing ?? 0);
+    this.margin = +(tileset.margin ?? 0);
     this.tileoffset = new Vector2d();
     this.isAnimated = false;
     this.isCollection = false;
-    this.class = tileset.class;
+    this.class = tileset.class ?? tileset.type;
+    this.tilerendersize = tileset.tilerendersize ?? "tile";
+    this.fillmode = tileset.fillmode ?? "stretch";
+    this.mapTilewidth = mapTilewidth ?? this.tilewidth;
+    this.mapTileheight = mapTileheight ?? this.tileheight;
+    this._renderScaleX = 1;
+    this._renderScaleY = 1;
+    this._renderDw = this.tilewidth;
+    this._renderDh = this.tileheight;
+    this._renderDyOffset = 0;
+    this._renderDxCenter = 0;
+    this._renderDyCenter = 0;
+    if (this.tilerendersize === "grid") {
+      this._renderScaleX = this.mapTilewidth / this.tilewidth;
+      this._renderScaleY = this.mapTileheight / this.tileheight;
+      if (this.fillmode === "preserve-aspect-fit") {
+        const minScale = Math.min(this._renderScaleX, this._renderScaleY);
+        this._renderScaleX = minScale;
+        this._renderScaleY = minScale;
+      }
+      this._renderDw = this.tilewidth * this._renderScaleX;
+      this._renderDh = this.tileheight * this._renderScaleY;
+      this._renderDyOffset = this.tileheight - this._renderDh;
+      if (this.fillmode === "preserve-aspect-fit") {
+        this._renderDxCenter = (this.mapTilewidth - this._renderDw) / 2;
+        this._renderDyCenter = -(this.mapTileheight - this._renderDh) / 2;
+      }
+    }
+    this.tileSubRects = /* @__PURE__ */ new Map();
     this.animations = /* @__PURE__ */ new Map();
     this._lastUpdate = 0;
-    const tiles = tileset.tiles;
-    if (tiles) {
-      const tileEntries = Array.isArray(tiles) ? tiles : Object.values(tiles);
-      for (let t = 0, tLen = tileEntries.length; t < tLen; t++) {
-        const tile = tileEntries[t];
-        const tileId = +tile.id;
-        if (tile.animation) {
-          this.isAnimated = true;
-          const anim = tile.animation;
-          this.animations.set(anim[0].tileid, {
-            dt: 0,
-            idx: 0,
-            frames: anim,
-            cur: anim[0]
-          });
-        }
-        if (tile.properties) {
-          if (Array.isArray(tile.properties)) {
-            const tileProperty = {};
-            const props = tile.properties;
-            for (let j = 0, pLen = props.length; j < pLen; j++) {
-              tileProperty[props[j].name] = props[j].value;
-            }
-            this.setTileProperty(tileId + this.firstgid, tileProperty);
-          } else {
-            this.setTileProperty(tileId + this.firstgid, tile.properties);
-          }
-        }
-        if (tile.image) {
-          const image = getImage(tile.image);
-          if (!image) {
-            throw new Error(
-              `melonJS: '${tile.image}' file for tile '${tileId + this.firstgid}' not found!`
-            );
-          }
-          this.imageCollection[tileId + this.firstgid] = image;
-        }
-      }
-    }
-    this.isCollection = this.imageCollection.length > 0;
+    resolveEmbeddedImage(tileset);
+    this._parseTiles(tileset.tiles);
+    this.isCollection = tileset.isCollection ?? this.imageCollection.size > 0;
     const offset = tileset.tileoffset;
     if (offset) {
       this.tileoffset.x = +offset.x;
@@ -19290,55 +19865,138 @@ var TMXTileset = class {
     }
     const tileInfo = tileset.tileproperties;
     if (tileInfo) {
-      const tileIds = Object.keys(tileInfo);
-      for (let i = 0, len = tileIds.length; i < len; i++) {
-        const id = tileIds[i];
-        this.setTileProperty(+id + this.firstgid, tileInfo[id]);
+      for (const [id, props] of Object.entries(tileInfo)) {
+        this.setTileProperty(+id + this.firstgid, props);
       }
     }
-    if (this.isCollection === false) {
-      this.image = getImage(tileset.image);
-      if (!this.image) {
-        throw new Error(
-          `melonJS: '${tileset.image}' file for tileset '${this.name}' not found!`
-        );
-      }
-      this.texture = renderer.cache.get(this.image, {
-        framewidth: this.tilewidth,
-        frameheight: this.tileheight,
-        margin: this.margin,
-        spacing: this.spacing
+    if (!this.isCollection) {
+      this._initAtlas(tileset);
+    }
+  }
+  /**
+   * Parse individual tile entries for animations, properties, and images.
+   * @param {object[]|object} [tiles] - tile entries (array in JSON, object in XML)
+   * @ignore
+   */
+  _parseTiles(tiles) {
+    if (!tiles) {
+      return;
+    }
+    let tileEntries;
+    if (Array.isArray(tiles)) {
+      tileEntries = tiles;
+    } else {
+      tileEntries = Object.entries(tiles).map(([key, value]) => {
+        return { id: key, ...value };
       });
-      this.atlas = this.texture.getAtlas();
-      const hTileCount = +tileset.columns || Math.round(this.image.width / (this.tilewidth + this.spacing));
-      let vTileCount = Math.round(
-        this.image.height / (this.tileheight + this.spacing)
-      );
-      if (tileset.tilecount % hTileCount > 0) {
-        ++vTileCount;
+    }
+    for (const tile of tileEntries) {
+      const tileId = +tile.id;
+      if (tile.animation) {
+        this.isAnimated = true;
+        const anim = tile.animation;
+        this.animations.set(tileId, {
+          dt: 0,
+          idx: 0,
+          frames: anim,
+          cur: anim[0]
+        });
       }
-      this.lastgid = this.firstgid + (hTileCount * vTileCount - 1 || 0);
-      if (tileset.tilecount && this.lastgid - this.firstgid + 1 !== +tileset.tilecount) {
-        console.warn(
-          `Computed tilecount (${this.lastgid - this.firstgid + 1}) does not match expected tilecount (${tileset.tilecount})`
-        );
+      if (tile.properties) {
+        if (Array.isArray(tile.properties)) {
+          const tileProperty = {};
+          for (const prop of tile.properties) {
+            tileProperty[prop.name] = prop.value;
+          }
+          this.setTileProperty(tileId + this.firstgid, tileProperty);
+        } else {
+          this.setTileProperty(tileId + this.firstgid, tile.properties);
+        }
+      }
+      resolveEmbeddedImage(tile);
+      if (tile.image) {
+        const image = getImage(tile.image);
+        if (!image) {
+          throw new Error(
+            `melonJS: '${tile.image}' file for tile '${tileId + this.firstgid}' not found!`
+          );
+        }
+        const hasSubRect = typeof tile.x !== "undefined" || typeof tile.y !== "undefined" || typeof tile.width !== "undefined" || typeof tile.height !== "undefined";
+        if (hasSubRect) {
+          const sx = +(tile.x ?? 0);
+          const sy = +(tile.y ?? 0);
+          const sw = typeof tile.width !== "undefined" ? +tile.width : image.width;
+          const sh = typeof tile.height !== "undefined" ? +tile.height : image.height;
+          this.tileSubRects.set(tileId, {
+            x: sx,
+            y: sy,
+            width: sw,
+            height: sh
+          });
+          if (sx !== 0 || sy !== 0 || sw !== image.width || sh !== image.height) {
+            const canvas = document.createElement("canvas");
+            canvas.width = sw;
+            canvas.height = sh;
+            canvas.getContext("2d").drawImage(image, sx, sy, sw, sh, 0, 0, sw, sh);
+            this.imageCollection.set(tileId + this.firstgid, canvas);
+          } else {
+            this.imageCollection.set(tileId + this.firstgid, image);
+          }
+        } else {
+          this.imageCollection.set(tileId + this.firstgid, image);
+        }
       }
     }
   }
+  /**
+   * Initialize the texture atlas for a spritesheet tileset.
+   * @param {object} tileset - tileset data
+   * @ignore
+   */
+  _initAtlas(tileset) {
+    this.image = getImage(tileset.image);
+    if (!this.image) {
+      throw new Error(
+        `melonJS: '${tileset.image}' file for tileset '${this.name}' not found!`
+      );
+    }
+    this.texture = renderer.cache.get(this.image, {
+      framewidth: this.tilewidth,
+      frameheight: this.tileheight,
+      margin: this.margin,
+      spacing: this.spacing
+    });
+    this.atlas = this.texture.getAtlas();
+    const hTileCount = +tileset.columns || Math.round(this.image.width / (this.tilewidth + this.spacing));
+    let vTileCount = Math.round(
+      this.image.height / (this.tileheight + this.spacing)
+    );
+    if (tileset.tilecount % hTileCount > 0) {
+      ++vTileCount;
+    }
+    this.lastgid = this.firstgid + (hTileCount * vTileCount - 1 || 0);
+    if (tileset.tilecount && this.lastgid - this.firstgid + 1 !== +tileset.tilecount) {
+      console.warn(
+        `Computed tilecount (${this.lastgid - this.firstgid + 1}) does not match expected tilecount (${tileset.tilecount})`
+      );
+    }
+  }
   /**
    * return the tile image from a "Collection of Image" tileset
    * @param {number} gid
-   * @returns {Image} corresponding image or undefined
+   * @returns {HTMLImageElement|HTMLCanvasElement|undefined} corresponding image or undefined
    */
   getTileImage(gid) {
-    return this.imageCollection[gid];
+    return this.imageCollection.get(gid);
   }
   /**
    * set the tile properties
+   * @param {number} gid - global tile ID
+   * @param {object} prop - property object
    * @ignore
    */
   setTileProperty(gid, prop) {
-    this.TileProperties[gid] = prop;
+    this.tileProperties.set(gid, prop);
   }
   /**
    * return true if the gid belongs to the tileset
@@ -19355,29 +20013,34 @@ var TMXTileset = class {
    */
   getViewTileId(gid) {
     const localId = gid - this.firstgid;
-    if (this.animations.has(localId)) {
-      return this.animations.get(localId).cur.tileid;
+    const anim = this.animations.get(localId);
+    if (anim !== void 0) {
+      return anim.cur.tileid;
     }
     return localId;
   }
   /**
    * return the properties of the specified tile
-   * @param {number} tileId
-   * @returns {object}
+   * @param {number} tileId - global tile ID
+   * @returns {object|undefined} tile properties or undefined
    */
   getTileProperties(tileId) {
-    return this.TileProperties[tileId];
+    return this.tileProperties.get(tileId);
   }
-  // update tile animations
+  /**
+   * update tile animations
+   * @param {number} dt - time delta in milliseconds
+   * @returns {boolean} true if any animation frame changed
+   * @ignore
+   */
   update(dt) {
-    let duration = 0;
     const now = timer_default.getTime();
     let result = false;
     if (this._lastUpdate !== now) {
       this._lastUpdate = now;
-      this.animations.forEach((anim) => {
+      for (const anim of this.animations.values()) {
         anim.dt += dt;
-        duration = anim.cur.duration;
+        let duration = anim.cur.duration;
         while (anim.dt >= duration) {
           anim.dt -= duration;
           anim.idx = (anim.idx + 1) % anim.frames.length;
@@ -19385,29 +20048,64 @@ var TMXTileset = class {
           duration = anim.cur.duration;
           result = true;
         }
-      });
+      }
     }
     return result;
   }
-  // draw the x,y tile
+  /**
+   * draw a tile at the specified position
+   * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
+   * @param {number} dx - destination x position
+   * @param {number} dy - destination y position
+   * @param {Tile} tmxTile - the tile object to draw
+   * @ignore
+   */
   drawTile(renderer2, dx, dy, tmxTile) {
+    let dw, dh;
+    if (this.isCollection) {
+      if (this.tilerendersize === "grid") {
+        let scaleX = this.mapTilewidth / tmxTile.width;
+        let scaleY = this.mapTileheight / tmxTile.height;
+        if (this.fillmode === "preserve-aspect-fit") {
+          const scale2 = Math.min(scaleX, scaleY);
+          scaleX = scale2;
+          scaleY = scale2;
+        }
+        dw = tmxTile.width * scaleX;
+        dh = tmxTile.height * scaleY;
+        dy += this.tileheight - dh;
+        if (this.fillmode === "preserve-aspect-fit") {
+          dx += (this.mapTilewidth - dw) / 2;
+          dy -= (this.mapTileheight - dh) / 2;
+        }
+      } else {
+        dw = tmxTile.width;
+        dh = tmxTile.height;
+      }
+    } else {
+      dw = this._renderDw;
+      dh = this._renderDh;
+      dy += this._renderDyOffset;
+      dx += this._renderDxCenter;
+      dy += this._renderDyCenter;
+    }
     if (tmxTile.flipped) {
       renderer2.save();
       renderer2.translate(dx, dy);
       renderer2.transform(tmxTile.currentTransform);
       dx = dy = 0;
     }
-    if (this.isCollection === true) {
+    if (this.isCollection) {
       renderer2.drawImage(
-        this.imageCollection[tmxTile.tileId],
+        this.imageCollection.get(tmxTile.tileId),
         0,
         0,
         tmxTile.width,
         tmxTile.height,
         dx,
         dy,
-        tmxTile.width,
-        tmxTile.height
+        dw,
+        dh
       );
     } else {
       const offset = this.atlas[this.getViewTileId(tmxTile.tileId)].offset;
@@ -19419,8 +20117,8 @@ var TMXTileset = class {
         this.tileheight,
         dx,
         dy,
-        this.tilewidth + renderer2.uvOffset,
-        this.tileheight + renderer2.uvOffset
+        dw + renderer2.uvOffset,
+        dh + renderer2.uvOffset
       );
     }
     if (tmxTile.flipped) {
@@ -19498,30 +20196,50 @@ function readLayer(map, data2, z) {
   );
 }
 function readImageLayer(map, data2, z) {
+  resolveEmbeddedImage(data2);
   applyTMXProperties(data2.properties, data2);
+  const repX = data2.repeatx === true || data2.repeatx === "1";
+  const repY = data2.repeaty === true || data2.repeaty === "1";
+  let repeat = data2.properties?.repeat;
+  if (typeof repeat === "undefined" && (repX || repY)) {
+    if (repX && repY) {
+      repeat = "repeat";
+    } else if (repX) {
+      repeat = "repeat-x";
+    } else {
+      repeat = "repeat-y";
+    }
+  }
+  const pox = +(map.data.parallaxoriginx ?? 0);
+  const poy = +(map.data.parallaxoriginy ?? 0);
+  const ratioX = +(data2.parallaxx ?? 1);
+  const ratioY = +(data2.parallaxy ?? 1);
+  const ox = +(data2.offsetx ?? data2.x ?? 0) + pox * ratioX;
+  const oy = +(data2.offsety ?? data2.y ?? 0) + poy * ratioY;
   const imageLayer = legacy_pool_default.pull(
     "ImageLayer",
-    // x/y is deprecated since 0.15 and replace by offsetx/y
-    +data2.offsetx || +data2.x || 0,
-    +data2.offsety || +data2.y || 0,
+    ox,
+    oy,
     Object.assign(
       {
         name: data2.name,
         image: data2.image,
-        ratio: vector2dPool.get(+data2.parallaxx || 1, +data2.parallaxy || 1),
+        ratio: vector2dPool.get(ratioX, ratioY),
         // convert to melonJS color format (note: this should be done earlier when parsing data)
         tint: typeof data2.tintcolor !== "undefined" ? colorPool.get().parseHex(data2.tintcolor, true) : void 0,
-        z
+        z,
+        repeat
       },
       data2.properties
     )
   );
   const visible = data2.visible ?? true;
   imageLayer.setOpacity(visible ? +data2.opacity : 0);
+  imageLayer.blendMode = tiledBlendMode(data2.mode);
   return imageLayer;
 }
-function readTileset(data2) {
-  return new TMXTileset(data2);
+function readTileset(data2, mapTilewidth, mapTileheight) {
+  return new TMXTileset(data2, mapTilewidth, mapTileheight);
 }
 function readObjectGroup(map, data2, z) {
   return new TMXGroup(map, data2, z);
@@ -19545,6 +20263,8 @@ var TMXTileMap = class {
     this.tileheight = +data2.tileheight;
     this.infinite = +data2.infinite || 0;
     this.orientation = data2.orientation;
+    this.skewx = +(data2.skewx ?? 0);
+    this.skewy = +(data2.skewy ?? 0);
     this.renderorder = data2.renderorder || "right-down";
     this.version = "" + data2.version;
     this.tiledversion = "" + data2.tiledversion;
@@ -19614,7 +20334,9 @@ var TMXTileMap = class {
     if (typeof data2.tilesets !== "undefined") {
       const tilesets = data2.tilesets;
       for (let i = 0, len = tilesets.length; i < len; i++) {
-        this.tilesets.add(readTileset(tilesets[i]));
+        this.tilesets.add(
+          readTileset(tilesets[i], this.tilewidth, this.tileheight)
+        );
       }
     }
     if (this.background_image) {
@@ -19717,6 +20439,7 @@ var TMXTileMap = class {
         targetContainer.name = group.name;
         targetContainer.pos.z = group.z;
         targetContainer.setOpacity(group.opacity);
+        targetContainer.blendMode = group.blendMode;
         targetContainer.autoSort = false;
         targetContainer.autoDepth = false;
       }
@@ -19795,8 +20518,29 @@ var TMXTileMap = class {
           obj.body.collisionType = collision.types.WORLD_SHAPE;
           obj.body.isStatic = true;
         }
+        if (obj.isRenderable === true && !(settings instanceof TMXLayer)) {
+          if (!settings.visible) {
+            obj.setOpacity(0);
+            if (typeof obj.renderable !== "undefined" && obj.renderable.isRenderable === true) {
+              obj.renderable.setOpacity(0);
+            }
+          } else if (settings.opacity < 1) {
+            obj.setOpacity(obj.getOpacity() * settings.opacity);
+            if (typeof obj.renderable !== "undefined" && obj.renderable.isRenderable === true) {
+              obj.renderable.setOpacity(
+                obj.renderable.getOpacity() * settings.opacity
+              );
+            }
+          }
+        }
         if (flatten !== false) {
           if (obj.isRenderable === true) {
+            if (group.blendMode !== "normal" && obj.blendMode === "normal") {
+              obj.blendMode = group.blendMode;
+              if (typeof obj.renderable !== "undefined" && obj.renderable.isRenderable === true && obj.renderable.blendMode === "normal") {
+                obj.renderable.blendMode = group.blendMode;
+              }
+            }
             obj.setOpacity(obj.getOpacity() * group.opacity);
             if (typeof obj.renderable !== "undefined" && obj.renderable.isRenderable === true) {
               obj.renderable.setOpacity(
@@ -19806,6 +20550,12 @@ var TMXTileMap = class {
           }
           objects.push(obj);
         } else {
+          if (group.blendMode !== "normal" && obj.isRenderable === true && obj.blendMode === "normal") {
+            obj.blendMode = group.blendMode;
+            if (typeof obj.renderable !== "undefined" && obj.renderable.isRenderable === true && obj.renderable.blendMode === "normal") {
+              obj.renderable.blendMode = group.blendMode;
+            }
+          }
           targetContainer.addChild(obj);
         }
       }
@@ -21071,14 +21821,117 @@ var Sprite = class extends Renderable {
   }
 };
 
-// src/camera/camera2d.js
+// src/camera/camera2d.ts
 var targetV = new Vector2d();
 var Camera2d = class extends Renderable {
   /**
-   * @param {number} minX - start x offset
-   * @param {number} minY - start y offset
-   * @param {number} maxX - end x offset
-   * @param {number} maxY - end y offset
+   * Axis definition
+   * NONE no axis
+   * HORIZONTAL horizontal axis only
+   * VERTICAL vertical axis only
+   * BOTH both axis
+   */
+  AXIS;
+  /**
+   * Camera bounds
+   */
+  bounds;
+  /**
+   * enable or disable damping
+   * @default true
+   */
+  smoothFollow;
+  /**
+   * Camera damping for smooth transition [0 .. 1].
+   * 1 being the maximum value and will snap the camera to the target position
+   * @default 1.0
+   */
+  damping;
+  /**
+   * the closest point relative to the camera
+   * @default -1000
+   */
+  near;
+  /**
+   * the furthest point relative to the camera.
+   * @default 1000
+   */
+  far;
+  /**
+   * the x position on the screen where this camera viewport is rendered.
+   * @default 0
+   */
+  screenX;
+  /**
+   * the y position on the screen where this camera viewport is rendered.
+   * @default 0
+   */
+  screenY;
+  /**
+   * @ignore
+   */
+  _zoom;
+  /**
+   * the world-space projection matrix for non-default cameras (offset/zoomed).
+   * Maps world coordinates to the camera's screen viewport.
+   */
+  worldProjection;
+  /**
+   * the screen-space projection matrix for non-default cameras.
+   * Maps coordinates so that (0,0) aligns with the camera's screenX/screenY position.
+   * Used for rendering floating elements (e.g. background layers) in the correct screen area.
+   */
+  screenProjection;
+  /**
+   * Whether this camera should automatically resize when the canvas resizes.
+   * Set to false for non-default cameras with fixed dimensions
+   * (e.g. minimap, split-screen viewports).
+   * @default true
+   */
+  autoResize;
+  /**
+   * cached world view bounds
+   * @ignore
+   */
+  _worldView;
+  /**
+   * the default camera projection matrix
+   * (2d cameras use an orthographic projection by default).
+   */
+  projectionMatrix;
+  /**
+   * the invert camera transform used to unproject points
+   * @ignore
+   */
+  invCurrentTransform;
+  /** offset for shake effect */
+  offset;
+  /** target to follow */
+  target;
+  /** default value follow */
+  follow_axis;
+  /**
+   * shake variables
+   * @ignore
+   */
+  _shake;
+  /**
+   * flash variables
+   * @ignore
+   */
+  _fadeOut;
+  /**
+   * fade variables
+   * @ignore
+   */
+  _fadeIn;
+  /** the camera deadzone */
+  deadzone;
+  /**
+   * @param minX - start x offset
+   * @param minY - start y offset
+   * @param maxX - end x offset
+   * @param maxY - end y offset
    */
   constructor(minX, minY, maxX, maxY) {
     super(minX, minY, maxX - minX, maxY - minY);
@@ -21112,6 +21965,13 @@ var Camera2d = class extends Renderable {
       color: null,
       tween: null
     };
+    this.screenX = 0;
+    this.screenY = 0;
+    this.zoom = 1;
+    this.worldProjection = new Matrix3d();
+    this.screenProjection = new Matrix3d();
+    this._worldView = new Bounds();
+    this.autoResize = true;
     this.name = "default";
     this.setDeadzone(this.width / 6, this.height / 6);
     this.anchorPoint.set(0, 0);
@@ -21161,10 +22021,64 @@ var Camera2d = class extends Renderable {
     return targetY;
   }
   // -- public function ---
+  /**
+   * the zoom level of this camera.
+   * Values less than 1 zoom out (show more of the world),
+   * values greater than 1 zoom in (show less of the world).
+   * @default 1
+   * @example
+   * // zoom out to show the full level in a 180x100 minimap
+   * camera.zoom = Math.min(180 / levelWidth, 100 / levelHeight);
+   */
+  get zoom() {
+    return this._zoom;
+  }
+  set zoom(value) {
+    this._zoom = value > 0 ? value : 1;
+  }
+  /**
+   * Whether this camera is using default settings (no screen offset, no zoom).
+   * Non-default cameras use custom projections for viewport positioning and scaling.
+   * @returns true if this camera has no screen offset and zoom is 1
+   */
+  get isDefault() {
+    return this.screenX === 0 && this.screenY === 0 && this.zoom === 1;
+  }
+  /**
+   * The world-space bounds currently visible through this camera,
+   * taking into account position and zoom level.
+   * @returns the visible world area
+   */
+  get worldView() {
+    this._worldView.setMinMax(
+      this.pos.x,
+      this.pos.y,
+      this.pos.x + this.width / this.zoom,
+      this.pos.y + this.height / this.zoom
+    );
+    return this._worldView;
+  }
+  /**
+   * Set the camera screen position and size in a single call.
+   * @param x - x position on screen
+   * @param y - y position on screen
+   * @param [w] - width (defaults to current width)
+   * @param [h] - height (defaults to current height)
+   * @returns this camera for chaining
+   */
+  setViewport(x, y, w, h) {
+    this.screenX = x;
+    this.screenY = y;
+    if (typeof w !== "undefined" && typeof h !== "undefined") {
+      super.resize(w, h);
+      this._updateProjectionMatrix();
+    }
+    return this;
+  }
   /**
    * reset the camera position to specified coordinates
-   * @param {number} [x=0] - initial position of the camera on the x axis
-   * @param {number} [y=0] - initial position of the camera on the y axis
+   * @param [x=0] - initial position of the camera on the x axis
+   * @param [y=0] - initial position of the camera on the y axis
    */
   reset(x = 0, y = 0) {
     this.pos.x = x;
@@ -21174,6 +22088,8 @@ var Camera2d = class extends Renderable {
     this.damping = 1;
     this.currentTransform.identity();
     this.invCurrentTransform.identity().invert();
+    this.worldProjection.identity();
+    this.screenProjection.identity();
     this._updateProjectionMatrix();
   }
   /**
@@ -21181,8 +22097,8 @@ var Camera2d = class extends Renderable {
    * the "deadzone" defines an area within the current camera in which
    * the followed renderable can move without scrolling the camera.
    * @see {@link follow}
-   * @param {number} w - deadzone width
-   * @param {number} h - deadzone height
+   * @param w - deadzone width
+   * @param h - deadzone height
    */
   setDeadzone(w, h) {
     if (typeof this.deadzone === "undefined") {
@@ -21199,11 +22115,14 @@ var Camera2d = class extends Renderable {
   }
   /**
    * resize the camera
-   * @param {number} w - new width of the camera
-   * @param {number} h - new height of the camera
-   * @returns {Camera2d} this camera
+   * @param w - new width of the camera
+   * @param h - new height of the camera
+   * @returns this camera
    */
   resize(w, h) {
+    if (!this.autoResize) {
+      return this;
+    }
     super.resize(w, h);
     this.smoothFollow = false;
     this.setBounds(0, 0, w, h);
@@ -21217,10 +22136,10 @@ var Camera2d = class extends Renderable {
   /**
    * set the camera boundaries (set to the world limit by default).
    * the camera is bound to the given coordinates and cannot move/be scrolled outside of it.
-   * @param {number} x - world left limit
-   * @param {number} y - world top limit
-   * @param {number} w - world width limit
-   * @param {number} h - world height limit
+   * @param x - world left limit
+   * @param y - world top limit
+   * @param w - world width limit
+   * @param h - world height limit
    */
   setBounds(x, y, w, h) {
     this.smoothFollow = false;
@@ -21232,9 +22151,9 @@ var Camera2d = class extends Renderable {
   /**
    * set the camera to follow the specified renderable. <br>
    * (this will put the camera center around the given target)
-   * @param {Renderable|Vector2d} target - renderable or position vector to follow
-   * @param {number} [axis=me.game.viewport.AXIS.BOTH] - Which axis to follow (see {@link Camera2d.AXIS})
-   * @param {number} [damping=1] - default damping value
+   * @param target - renderable or position vector to follow
+   * @param [axis=me.game.viewport.AXIS.BOTH] - Which axis to follow (see {@link Camera2d.AXIS})
+   * @param [damping=1] - default damping value
    * @example
    * // set the camera to follow this renderable on both axis, and enable damping
    * me.game.viewport.follow(this, me.game.viewport.AXIS.BOTH, 0.1);
@@ -21267,8 +22186,8 @@ var Camera2d = class extends Renderable {
   /**
    * move the camera upper-left position by the specified offset.
    * @see {@link focusOn}
-   * @param {number} x - horizontal offset
-   * @param {number} y - vertical offset
+   * @param x - horizontal offset
+   * @param y - vertical offset
    * @example
    * // Move the camera up by four pixels
    * me.game.viewport.move(0, -4);
@@ -21279,8 +22198,8 @@ var Camera2d = class extends Renderable {
   /**
    * move the camera upper-left position to the specified coordinates
    * @see {@link focusOn}
-   * @param {number} x
-   * @param {number} y
+   * @param x - horizontal position
+   * @param y - vertical position
    */
   moveTo(x, y) {
     const _x = this.pos.x;
@@ -21292,7 +22211,8 @@ var Camera2d = class extends Renderable {
     }
   }
   /** @ignore */
-  updateTarget() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  updateTarget(_dt) {
     if (this.target) {
       targetV.setV(this.pos);
       switch (this.follow_axis) {
@@ -21312,7 +22232,7 @@ var Camera2d = class extends Renderable {
           break;
       }
       if (!this.pos.equals(targetV)) {
-        if (this.smoothFollow === true && this.damping < 1) {
+        if (this.smoothFollow && this.damping < 1) {
           if (toBeCloseTo(targetV.x, this.pos.x, 2) && toBeCloseTo(targetV.y, this.pos.y, 2)) {
             this.pos.setV(targetV);
             return;
@@ -21330,7 +22250,7 @@ var Camera2d = class extends Renderable {
   update(dt) {
     this.updateTarget(dt);
     if (this._shake.duration > 0) {
-      this._shake.duration -= dt;
+      this._shake.duration -= dt ?? 0;
       if (this._shake.duration <= 0) {
         this._shake.duration = 0;
         this.offset.setZero();
@@ -21347,7 +22267,7 @@ var Camera2d = class extends Renderable {
       }
       this.isDirty = true;
     }
-    if (this.isDirty === true) {
+    if (this.isDirty) {
       eventEmitter.emit(VIEWPORT_ONCHANGE, this.pos);
     }
     if (this._fadeIn.tween != null || this._fadeOut.tween != null) {
@@ -21358,16 +22278,16 @@ var Camera2d = class extends Renderable {
     } else {
       this.invCurrentTransform.identity();
     }
-    return super.update(dt);
+    return super.update(dt ?? 0);
   }
   /**
    * shake the camera
-   * @param {number} intensity - maximum offset that the screen can be moved
+   * @param intensity - maximum offset that the screen can be moved
    * while shaking
-   * @param {number} duration - expressed in milliseconds
-   * @param {number} [axis=me.game.viewport.AXIS.BOTH] - specify on which axis to apply the shake effect (see {@link Camera2d.AXIS})
-   * @param {Function} [onComplete] - callback once shaking effect is over
-   * @param {boolean} [force] - if true this will override the current effect
+   * @param duration - expressed in milliseconds
+   * @param [axis=me.game.viewport.AXIS.BOTH] - specify on which axis to apply the shake effect (see {@link Camera2d.AXIS})
+   * @param [onComplete] - callback once shaking effect is over
+   * @param [force] - if true this will override the current effect
    * @example
    * // shake it baby !
    * me.game.viewport.shake(10, 500, me.game.viewport.AXIS.BOTH);
@@ -21383,9 +22303,9 @@ var Camera2d = class extends Renderable {
   /**
    * fadeOut(flash) effect<p>
    * screen is filled with the specified color and slowly goes back to normal
-   * @param {Color|string} color - a CSS color value
-   * @param {number} [duration=1000] - expressed in milliseconds
-   * @param {Function} [onComplete] - callback once effect is over
+   * @param color - a CSS color value
+   * @param [duration=1000] - expressed in milliseconds
+   * @param [onComplete] - callback once effect is over
    * @example
    * // fade the camera to white upon dying, reload the level, and then fade out back
    * me.game.viewport.fadeIn("#fff", 150, function() {
@@ -21396,16 +22316,19 @@ var Camera2d = class extends Renderable {
    */
   fadeOut(color, duration = 1e3, onComplete) {
     this._fadeOut.color = colorPool.get(color);
-    this._fadeOut.tween = tweenPool.get(this._fadeOut.color).to({ alpha: 0 }, { duration }).onComplete(onComplete || null);
+    this._fadeOut.tween = tweenPool.get(this._fadeOut.color).to({ alpha: 0 }, { duration });
+    if (onComplete) {
+      this._fadeOut.tween.onComplete(onComplete);
+    }
     this._fadeOut.tween.isPersistent = true;
     this._fadeOut.tween.start();
   }
   /**
    * fadeIn effect <p>
    * fade to the specified color
-   * @param {Color|string} color - a CSS color value
-   * @param {number} [duration=1000] - expressed in milliseconds
-   * @param {Function} [onComplete] - callback once effect is over
+   * @param color - a CSS color value
+   * @param [duration=1000] - expressed in milliseconds
+   * @param [onComplete] - callback once effect is over
    * @example
    * // flash the camera to white for 75ms
    * me.game.viewport.fadeIn("#FFFFFF", 75);
@@ -21414,13 +22337,16 @@ var Camera2d = class extends Renderable {
     this._fadeIn.color = colorPool.get(color);
     const _alpha = this._fadeIn.color.alpha;
     this._fadeIn.color.alpha = 0;
-    this._fadeIn.tween = tweenPool.get(this._fadeIn.color).to({ alpha: _alpha }, { duration }).onComplete(onComplete || null);
+    this._fadeIn.tween = tweenPool.get(this._fadeIn.color).to({ alpha: _alpha }, { duration });
+    if (onComplete) {
+      this._fadeIn.tween.onComplete(onComplete);
+    }
     this._fadeIn.tween.isPersistent = true;
     this._fadeIn.tween.start();
   }
   /**
    * set the camera position around the specified object
-   * @param {Renderable|Entity|Sprite|NineSliceSprite} target - the renderable to focus the camera on
+   * @param target - the renderable to focus the camera on
    */
   focusOn(target) {
     const bounds = target.getBounds();
@@ -21431,23 +22357,22 @@ var Camera2d = class extends Renderable {
   }
   /**
    * check if the specified renderable is in the camera
-   * @param {Renderable|Entity|Sprite|NineSliceSprite} obj - to be checked against
-   * @param {boolean} [floating = obj.floating] - if visibility check should be done against screen coordinates
-   * @returns {boolean} true if within the viewport
+   * @param obj - to be checked against
+   * @param [floating = obj.floating] - if visibility check should be done against screen coordinates
+   * @returns true if within the viewport
    */
   isVisible(obj, floating = obj.floating) {
-    if (floating === true || obj.floating === true) {
+    if (floating || obj.floating) {
       return renderer.overlaps(obj.getBounds());
-    } else {
-      return obj.getBounds().overlaps(this);
     }
+    return obj.getBounds().overlaps(this.worldView);
   }
   /**
    * convert the given "local" (screen) coordinates into world coordinates
-   * @param {number} x - the x coordinate of the local point to be converted
-   * @param {number} y - the y coordinate of the local point to be converted
-   * @param {Vector2d} [v] - an optional vector object where to set the converted value
-   * @returns {Vector2d}
+   * @param x - the x coordinate of the local point to be converted
+   * @param y - the y coordinate of the local point to be converted
+   * @param [v] - an optional vector object where to set the converted value
+   * @returns the converted world coordinates as a Vector2d
    */
   localToWorld(x, y, v) {
     v = v || vector2dPool.get();
@@ -21459,10 +22384,10 @@ var Camera2d = class extends Renderable {
   }
   /**
    * convert the given world coordinates into "local" (screen) coordinates
-   * @param {number} x
-   * @param {number} y
-   * @param {number} [v] - an optional vector object where to set the converted value
-   * @returns {Vector2d} a vector with the converted local coordinates
+   * @param x - the x world coordinate to be converted
+   * @param y - the y world coordinate to be converted
+   * @param [v] - an optional vector object where to set the converted value
+   * @returns a vector with the converted local coordinates
    */
   worldToLocal(x, y, v) {
     v = v || vector2dPool.get();
@@ -21477,12 +22402,13 @@ var Camera2d = class extends Renderable {
    * @ignore
    */
   drawFX(renderer2) {
+    const r = renderer2;
     if (this._fadeIn.tween) {
-      renderer2.save();
-      renderer2.resetTransform();
-      renderer2.setColor(this._fadeIn.color);
-      renderer2.fillRect(0, 0, this.width, this.height);
-      renderer2.restore();
+      r.save();
+      r.resetTransform();
+      r.setColor(this._fadeIn.color);
+      r.fillRect(0, 0, this.width, this.height);
+      r.restore();
       if (this._fadeIn.color.alpha === 1) {
         this._fadeIn.tween = null;
         colorPool.release(this._fadeIn.color);
@@ -21490,11 +22416,11 @@ var Camera2d = class extends Renderable {
       }
     }
     if (this._fadeOut.tween) {
-      renderer2.save();
-      renderer2.resetTransform();
-      renderer2.setColor(this._fadeOut.color);
-      renderer2.fillRect(0, 0, this.width, this.height);
-      renderer2.restore();
+      r.save();
+      r.resetTransform();
+      r.setColor(this._fadeOut.color);
+      r.fillRect(0, 0, this.width, this.height);
+      r.restore();
       if (this._fadeOut.color.alpha === 0) {
         this._fadeOut.tween = null;
         colorPool.release(this._fadeOut.color);
@@ -21507,17 +22433,56 @@ var Camera2d = class extends Renderable {
    * @ignore
    */
   draw(renderer2, container) {
-    const translateX = this.pos.x + this.offset.x;
-    const translateY = this.pos.y + this.offset.y;
+    const r = renderer2;
+    const isNonDefault = !this.isDefault;
+    const containerOffsetX = isNonDefault ? container.pos.x : 0;
+    const containerOffsetY = isNonDefault ? container.pos.y : 0;
+    const translateX = this.pos.x + this.offset.x + containerOffsetX;
+    const translateY = this.pos.y + this.offset.y + containerOffsetY;
     container.currentTransform.translate(-translateX, -translateY);
-    renderer2.setProjection(this.projectionMatrix);
-    renderer2.clipRect(0, 0, this.width, this.height);
-    this.preDraw(renderer2);
-    container.preDraw(renderer2, this);
-    container.draw(renderer2, this);
+    this.preDraw(r);
+    r.clipRect(this.screenX, this.screenY, this.width, this.height);
+    if (isNonDefault) {
+      const left = -this.screenX / this.zoom;
+      const top = -this.screenY / this.zoom;
+      const rw = renderer2.width / this.zoom;
+      const rh = renderer2.height / this.zoom;
+      this.worldProjection.ortho(
+        left,
+        left + rw,
+        top + rh,
+        top,
+        this.near,
+        this.far
+      );
+      renderer2.setProjection(this.worldProjection);
+      this.screenProjection.ortho(
+        -this.screenX,
+        -this.screenX + renderer2.width,
+        -this.screenY + renderer2.height,
+        -this.screenY,
+        this.near,
+        this.far
+      );
+    } else {
+      renderer2.setProjection(this.projectionMatrix);
+    }
+    container.preDraw(r);
+    if (isNonDefault) {
+      const view = this.worldView;
+      const savedWidth = this.width;
+      const savedHeight = this.height;
+      this.width = view.width;
+      this.height = view.height;
+      container.draw(r, this);
+      this.width = savedWidth;
+      this.height = savedHeight;
+    } else {
+      container.draw(r, this);
+    }
     this.drawFX(renderer2);
-    container.postDraw(renderer2, this);
-    this.postDraw(renderer2);
+    container.postDraw(r);
+    this.postDraw(r);
     container.currentTransform.translate(translateX, translateY);
   }
 };
@@ -21756,7 +22721,7 @@ var DefaultLoadingScreen = class extends Stage {
 };
 var loadingscreen_default = DefaultLoadingScreen;
 
-// src/state/state.js
+// src/state/state.ts
 var _state = -1;
 var _animFrameId = -1;
 var _isPaused = false;
@@ -21791,14 +22756,18 @@ function _stopRunLoop() {
   globalThis.cancelAnimationFrame(_animFrameId);
   _animFrameId = -1;
 }
-function _switchState(state2) {
+function _switchState(stateId) {
   _stopRunLoop();
   if (_stages[_state]) {
     _stages[_state].stage.destroy();
   }
-  if (_stages[state2]) {
-    _state = state2;
-    _stages[_state].stage.reset.apply(_stages[_state].stage, _extraArgs);
+  if (_stages[stateId]) {
+    _state = stateId;
+    if (_extraArgs) {
+      _stages[_state].stage.reset(..._extraArgs);
+    } else {
+      _stages[_state].stage.reset();
+    }
     _startRunLoop();
     eventEmitter.emit(STATE_CHANGE);
     if (_onSwitchComplete) {
@@ -21816,80 +22785,47 @@ eventEmitter.addListenerOnce(BOOT, () => {
 var state = {
   /**
    * default state ID for Loading Stage
-   * @constant
-   * @name LOADING
-   * @memberof state
    */
   LOADING: 0,
   /**
    * default state ID for Menu Stage
-   * @constant
-   * @name MENU
-   * @memberof state
    */
   MENU: 1,
   /**
    * default state ID for "Ready" Stage
-   * @constant
-   * @name READY
-   * @memberof state
    */
   READY: 2,
   /**
    * default state ID for Play Stage
-   * @constant
-   * @name PLAY
-   * @memberof state
    */
   PLAY: 3,
   /**
    * default state ID for Game Over Stage
-   * @constant
-   * @name GAMEOVER
-   * @memberof state
    */
   GAMEOVER: 4,
   /**
    * default state ID for Game End Stage
-   * @constant
-   * @name GAME_END
-   * @memberof state
    */
   GAME_END: 5,
   /**
    * default state ID for High Score Stage
-   * @constant
-   * @name SCORE
-   * @memberof state
    */
   SCORE: 6,
   /**
    * default state ID for Credits Stage
-   * @constant
-   * @name CREDITS
-   * @memberof state
    */
   CREDITS: 7,
   /**
    * default state ID for Settings Stage
-   * @constant
-   * @name SETTINGS
-   * @memberof state
    */
   SETTINGS: 8,
   /**
    * default state ID for the default Stage
    * (the default stage is the one running as soon as melonJS is started)
-   * @constant
-   * @name DEFAULT
-   * @memberof state
    */
   DEFAULT: 9,
   /**
    * default state ID for user defined constants<br>
-   * @constant
-   * @name USER
-   * @memberof state
    * @example
    * let STATE_INFO = me.state.USER + 0;
    * let STATE_WARN = me.state.USER + 1;
@@ -21899,16 +22835,13 @@ var state = {
   USER: 100,
   /**
    * Stop the current stage.
-   * @name stop
-   * @memberof state
-   * @public
-   * @param {boolean} [pauseTrack=false] - pause current track on screen stop.
+   * @param [shouldPauseTrack=false] - pause current track on screen stop.
    */
-  stop(pauseTrack2 = false) {
+  stop(shouldPauseTrack = false) {
     if (_state !== this.LOADING && this.isRunning()) {
       _stopRunLoop();
-      if (pauseTrack2 === true) {
-        pauseTrack2();
+      if (shouldPauseTrack) {
+        pauseTrack();
       }
       _pauseTime = globalThis.performance.now();
       eventEmitter.emit(STATE_STOP);
@@ -21916,15 +22849,12 @@ var state = {
   },
   /**
    * pause the current stage
-   * @name pause
-   * @memberof state
-   * @public
-   * @param {boolean} [music=false] - pause current music track on screen pause
+   * @param [music=false] - pause current music track on screen pause
    */
   pause(music = false) {
     if (_state !== this.LOADING && !this.isPaused()) {
       _pauseRunLoop();
-      if (music === true) {
+      if (music) {
         pauseTrack();
       }
       _pauseTime = globalThis.performance.now();
@@ -21933,15 +22863,12 @@ var state = {
   },
   /**
    * Restart the current stage from a full stop.
-   * @name restart
-   * @memberof state
-   * @public
-   * @param {boolean} [music=false] - resume current music track on screen resume
+   * @param [music=false] - resume current music track on screen resume
    */
   restart(music = false) {
     if (!this.isRunning()) {
       _startRunLoop();
-      if (music === true) {
+      if (music) {
         resumeTrack();
       }
       _pauseTime = globalThis.performance.now() - _pauseTime;
@@ -21950,15 +22877,12 @@ var state = {
   },
   /**
    * resume the current stage
-   * @name resume
-   * @memberof state
-   * @public
-   * @param {boolean} [music=false] - resume current music track on screen resume
+   * @param [music=false] - resume current music track on screen resume
    */
   resume(music = false) {
     if (this.isPaused()) {
       _resumeRunLoop();
-      if (music === true) {
+      if (music) {
         resumeTrack();
       }
       _pauseTime = globalThis.performance.now() - _pauseTime;
@@ -21967,32 +22891,23 @@ var state = {
   },
   /**
    * return the running state of the state manager
-   * @name isRunning
-   * @memberof state
-   * @public
-   * @returns {boolean} true if a "process is running"
+   * @returns true if a "process is running"
    */
   isRunning() {
     return _animFrameId !== -1;
   },
   /**
    * Return the pause state of the state manager
-   * @name isPaused
-   * @memberof state
-   * @public
-   * @returns {boolean} true if the game is paused
+   * @returns true if the game is paused
    */
   isPaused() {
     return _isPaused;
   },
   /**
    * associate the specified state with a Stage
-   * @name set
-   * @memberof state
-   * @public
-   * @param {number} state - State ID (see constants)
-   * @param {Stage} stage - Instantiated Stage to associate with state ID
-   * @param {boolean} [start = false] - if true the state will be changed immediately after adding it.
+   * @param stateId - State ID (see constants)
+   * @param stage - Instantiated Stage to associate with state ID
+   * @param [start = false] - if true the state will be changed immediately after adding it.
    * @example
    * class MenuButton extends me.GUI_Object {
    *     onClick() {
@@ -22030,29 +22945,27 @@ var state = {
    *
    * me.state.set(me.state.MENU, new MenuScreen());
    */
-  set(state2, stage, start = false) {
+  set(stateId, stage, start = false) {
     if (!(stage instanceof Stage)) {
-      throw new Error(stage + " is not an instance of me.Stage");
+      throw new Error(`${String(stage)} is not an instance of me.Stage`);
     }
-    _stages[state2] = {};
-    _stages[state2].stage = stage;
-    _stages[state2].transition = true;
-    if (start === true) {
-      this.change(state2);
+    _stages[stateId] = {
+      stage,
+      transition: true
+    };
+    if (start) {
+      this.change(stateId);
     }
   },
   /**
    * returns the stage associated with the specified state
    * (or the current one if none is specified)
-   * @name set
-   * @memberof state
-   * @public
-   * @param {number} [state] - State ID (see constants)
-   * @returns {Stage}
+   * @param [stateId] - State ID (see constants)
+   * @returns the Stage instance associated with the given state ID, or undefined
    */
-  get(state2 = _state) {
-    if (typeof _stages[state2] !== "undefined") {
-      return _stages[state2].stage;
+  get(stateId = _state) {
+    if (typeof _stages[stateId] !== "undefined") {
+      return _stages[stateId].stage;
     } else {
       return void 0;
     }
@@ -22060,22 +22973,16 @@ var state = {
   /**
    * return a reference to the current stage<br>
    * useful to call a object specific method
-   * @name current
-   * @memberof state
-   * @public
-   * @returns {Stage}
+   * @returns the current Stage instance, or undefined if no stage is active
    */
   current() {
     return this.get();
   },
   /**
    * specify a global transition effect
-   * @name transition
-   * @memberof state
-   * @public
-   * @param {string} effect - (only "fade" is supported for now)
-   * @param {Color|string} color - a CSS color value
-   * @param {number} [duration=1000] - expressed in milliseconds
+   * @param effect - (only "fade" is supported for now)
+   * @param color - a CSS color value
+   * @param [duration=1000] - expressed in milliseconds
    */
   transition(effect, color, duration) {
     if (effect === "fade") {
@@ -22085,63 +22992,63 @@ var state = {
   },
   /**
    * enable/disable the transition to a particular state (by default enabled for all)
-   * @name setTransition
-   * @memberof state
-   * @public
-   * @param {number} state - State ID (see constants)
-   * @param {boolean} enable
+   * @param stateId - State ID (see constants)
+   * @param enable - true to enable transition, false to disable
    */
-  setTransition(state2, enable2) {
-    _stages[state2].transition = enable2;
+  setTransition(stateId, enable2) {
+    _stages[stateId].transition = enable2;
   },
   /**
    * change the game/app state
-   * @name change
-   * @memberof state
-   * @public
-   * @param {number} state - State ID (see constants)
-   * @param {boolean} [forceChange=false] - if true the state will be changed immediately (without waiting for the next frame)
-   * @param {...*} [args] - extra arguments to be passed to the reset functions
+   * @param stateId - State ID (see constants)
+   * @param [forceChange=false] - if true the state will be changed immediately (without waiting for the next frame)
+   * @param extraArgs - extra arguments to be passed to the reset functions
    * @example
    * // The onResetEvent method on the play screen will receive two args:
    * // "level_1" and the number 3
    * me.state.change(me.state.PLAY, "level_1", 3);
    */
-  change(state2, forceChange = false) {
-    if (typeof _stages[state2] === "undefined") {
-      throw new Error("Undefined Stage for state '" + state2 + "'");
+  change(stateId, forceChange = false, ...extraArgs) {
+    if (typeof _stages[stateId] === "undefined") {
+      throw new Error(`Undefined Stage for state '${stateId}'`);
     }
-    if (!this.isCurrent(state2)) {
-      _extraArgs = null;
-      if (arguments.length > 1) {
-        _extraArgs = Array.prototype.slice.call(arguments, 1);
-      }
-      if (_fade.duration && _stages[state2].transition) {
+    if (!this.isCurrent(stateId)) {
+      _extraArgs = extraArgs.length > 0 ? extraArgs : null;
+      if (_fade.duration && _stages[stateId].transition) {
         _onSwitchComplete = () => {
           game.viewport.fadeOut(_fade.color, _fade.duration);
         };
-        game.viewport.fadeIn(_fade.color, _fade.duration, function() {
-          defer(_switchState, this, state2);
-        });
+        game.viewport.fadeIn(
+          _fade.color,
+          _fade.duration,
+          function() {
+            defer(
+              _switchState,
+              this,
+              stateId
+            );
+          }
+        );
       } else {
-        if (forceChange === true) {
-          _switchState(state2);
+        if (forceChange) {
+          _switchState(stateId);
         } else {
-          defer(_switchState, this, state2);
+          defer(
+            _switchState,
+            this,
+            stateId
+          );
         }
       }
     }
   },
   /**
    * return true if the specified state is the current one
-   * @name isCurrent
-   * @memberof state
-   * @public
-   * @param {number} state - State ID (see constants)
-   * @returns {boolean} true if the specified state is the current one
+   * @param stateId - State ID (see constants)
+   * @returns true if the specified state is the current one
    */
-  isCurrent(state2) {
-    return _state === state2;
+  isCurrent(stateId) {
+    return _state === stateId;
   }
 };
 var state_default = state;
@@ -22357,9 +23264,142 @@ var Timer = class {
 var timer = new Timer();
 var timer_default = timer;
 
-// src/input/pointer.js
+// src/input/pointer.ts
 var tmpVec = new Vector2d();
 var Pointer = class extends Bounds {
+  /**
+   * constant for left button
+   */
+  LEFT;
+  /**
+   * constant for middle button
+   */
+  MIDDLE;
+  /**
+   * constant for right button
+   */
+  RIGHT;
+  /**
+   * the originating Event Object
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent}
+   */
+  event;
+  /**
+   * a string containing the event's type.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Event/type}
+   */
+  type = "";
+  /**
+   * the button property indicates which button was pressed on the mouse to trigger the event.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button}
+   */
+  button;
+  /**
+   * indicates whether or not the pointer device that created the event is the primary pointer.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary}
+   */
+  isPrimary;
+  /**
+   * the horizontal coordinate at which the event occurred, relative to the left edge of the entire document.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX}
+   */
+  pageX;
+  /**
+   * the vertical coordinate at which the event occurred, relative to the left edge of the entire document.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY}
+   */
+  pageY;
+  /**
+   * the horizontal coordinate within the application's client area at which the event occurred
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX}
+   */
+  clientX;
+  /**
+   * the vertical coordinate within the application's client area at which the event occurred
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY}
+   */
+  clientY;
+  /**
+   * the difference in the X coordinate of the pointer since the previous move event
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX}
+   */
+  movementX;
+  /**
+   * the difference in the Y coordinate of the pointer since the previous move event
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY}
+   */
+  movementY;
+  /**
+   * an unsigned long representing the unit of the delta values scroll amount
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode}
+   */
+  deltaMode;
+  /**
+   * a double representing the horizontal scroll amount in the Wheel Event deltaMode unit.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaX}
+   */
+  deltaX;
+  /**
+   * a double representing the vertical scroll amount in the Wheel Event deltaMode unit.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY}
+   */
+  deltaY;
+  /**
+   * a double representing the scroll amount in the z-axis, in the Wheel Event deltaMode unit.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaZ}
+   */
+  deltaZ;
+  /**
+   * Event normalized X coordinate within the game canvas itself<br>
+   * <img src="images/event_coord.png"/>
+   */
+  gameX;
+  /**
+   * Event normalized Y coordinate within the game canvas itself<br>
+   * <img src="images/event_coord.png"/>
+   */
+  gameY;
+  /**
+   * Event X coordinate relative to the viewport
+   */
+  gameScreenX;
+  /**
+   * Event Y coordinate relative to the viewport
+   */
+  gameScreenY;
+  /**
+   * Event X coordinate relative to the map
+   */
+  gameWorldX;
+  /**
+   * Event Y coordinate relative to the map
+   */
+  gameWorldY;
+  /**
+   * Event X coordinate relative to the holding container
+   */
+  gameLocalX;
+  /**
+   * Event Y coordinate relative to the holding container
+   */
+  gameLocalY;
+  /**
+   * The unique identifier of the contact for a touch, mouse or pen
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId}
+   */
+  pointerId;
+  /**
+   * true if not originally a pointer event
+   */
+  isNormalized;
+  /**
+   * true if the pointer is currently locked
+   */
+  locked;
+  // bind list for mouse buttons
+  bind;
   /**
    * @ignore
    */
@@ -22370,7 +23410,7 @@ var Pointer = class extends Bounds {
     this.MIDDLE = 1;
     this.RIGHT = 2;
     this.event = void 0;
-    this.type = void 0;
+    this.type = "";
     this.button = 0;
     this.isPrimary = false;
     this.pageX = 0;
@@ -22398,13 +23438,12 @@ var Pointer = class extends Bounds {
   }
   /**
    * initialize the Pointer object using the given Event Object
-   * @private
-   * @param {Event} event - the original Event object
-   * @param {number} [pageX=0] - the horizontal coordinate at which the event occurred, relative to the left edge of the entire document
-   * @param {number} [pageY=0] - the vertical coordinate at which the event occurred, relative to the left edge of the entire document
-   * @param {number} [clientX=0] - the horizontal coordinate within the application's client area at which the event occurred
-   * @param {number} [clientY=0] - the vertical coordinate within the application's client area at which the event occurred
-   * @param {number} [pointerId=1] - the Pointer, Touch or Mouse event Id (1)
+   * @param event - the original Event object
+   * @param pageX - the horizontal coordinate at which the event occurred, relative to the left edge of the entire document
+   * @param pageY - the vertical coordinate at which the event occurred, relative to the left edge of the entire document
+   * @param clientX - the horizontal coordinate within the application's client area at which the event occurred
+   * @param clientY - the vertical coordinate within the application's client area at which the event occurred
+   * @param pointerId - the Pointer, Touch or Mouse event Id (1)
    */
   setEvent(event, pageX = 0, pageY = 0, clientX = 0, clientY = 0, pointerId = 1) {
     this.event = event;
@@ -22439,7 +23478,7 @@ var Pointer = class extends Bounds {
     }
     this.gameWorldX = tmpVec.x;
     this.gameWorldY = tmpVec.y;
-    if (this.isNormalized === false) {
+    if (!this.isNormalized) {
       this.width = event.width || 1;
       this.height = event.height || 1;
     } else if (typeof event.radiusX === "number") {
@@ -22452,7 +23491,7 @@ var Pointer = class extends Bounds {
 };
 var pointer_default = Pointer;
 
-// src/input/pointerevent.js
+// src/input/pointerevent.ts
 var T_POINTERS = [];
 var eventHandlers = /* @__PURE__ */ new Map();
 var currentPointer;
@@ -22511,7 +23550,7 @@ function registerEventListener(eventList, callback) {
   for (let x = 0; x < eventList.length; x++) {
     if (POINTER_MOVE.indexOf(eventList[x]) === -1) {
       pointerEventTarget.addEventListener(eventList[x], callback, {
-        passive: preventDefault === false
+        passive: !preventDefault
       });
     }
   }
@@ -22522,7 +23561,7 @@ function enablePointerEvent() {
     for (let v = 0; v < maxTouchPoints; v++) {
       T_POINTERS.push(new pointer_default());
     }
-    if (pointerEventTarget === null) {
+    if (pointerEventTarget === null || pointerEventTarget === void 0) {
       pointerEventTarget = renderer.getCanvas();
     }
     if (pointerEvent) {
@@ -22537,7 +23576,7 @@ function enablePointerEvent() {
     if (typeof throttlingInterval === "undefined") {
       throttlingInterval = ~~(1e3 / timer_default.maxfps);
     }
-    if (autoFocus === true) {
+    if (autoFocus) {
       focus();
       pointerEventTarget.addEventListener(
         activeEventList[2],
@@ -22545,7 +23584,7 @@ function enablePointerEvent() {
         () => {
           focus();
         },
-        { passive: preventDefault === false }
+        { passive: !preventDefault }
       );
     }
     const events = findAllActiveEvents(activeEventList, POINTER_MOVE);
@@ -22565,7 +23604,10 @@ function enablePointerEvent() {
         if (activeEventList.indexOf(events[i]) !== -1) {
           pointerEventTarget.addEventListener(
             events[i],
-            throttle(onMoveEvent, throttlingInterval),
+            throttle(
+              onMoveEvent,
+              throttlingInterval
+            ),
             { passive: true }
             // do not preventDefault on Move events
           );
@@ -22606,7 +23648,7 @@ function findAllActiveEvents(activeEventList2, eventTypes) {
 }
 function triggerEvent(handlers, type, pointer2, pointerId) {
   let callback;
-  if (handlers.callbacks[type]) {
+  if (type && handlers.callbacks[type]) {
     handlers.pointerId = pointerId;
     for (let i = handlers.callbacks[type].length - 1; i >= 0 && (callback = handlers.callbacks[type][i]); i--) {
       if (callback(pointer2) === false) {
@@ -22621,7 +23663,7 @@ function dispatchEvent(normalizedEvents2) {
   while (normalizedEvents2.length > 0) {
     const pointer2 = normalizedEvents2.pop();
     T_POINTERS.push(pointer2);
-    if (pointer2.isNormalized === true && typeof pointer2.event.timeStamp !== "undefined") {
+    if (pointer2.isNormalized && typeof pointer2.event.timeStamp !== "undefined") {
       if (pointer2.event.timeStamp < lastTimeStamp) {
         continue;
       }
@@ -22636,7 +23678,8 @@ function dispatchEvent(normalizedEvents2) {
     }
     let candidates = game.world.broadphase.retrieve(
       currentPointer,
-      game.world._sortReverseZ
+      (a, b) => game.world._sortReverseZ(a, b),
+      void 0
     );
     candidates = candidates.concat([game.viewport]);
     for (let c = candidates.length, candidate; c--, candidate = candidates[c]; ) {
@@ -22714,7 +23757,12 @@ function dispatchEvent(normalizedEvents2) {
             break;
           default:
             if (eventInBounds) {
-              if (triggerEvent(handlers, pointer2.type, pointer2, pointer2.pointerId)) {
+              if (triggerEvent(
+                handlers,
+                pointer2.type,
+                pointer2,
+                pointer2.pointerId
+              )) {
                 handled = true;
                 break;
               }
@@ -22722,7 +23770,7 @@ function dispatchEvent(normalizedEvents2) {
             break;
         }
       }
-      if (handled === true) {
+      if (handled) {
         break;
       }
     }
@@ -22771,7 +23819,7 @@ function onPointerEvent(e) {
   normalizeEvent(e);
   const button = normalizedEvents[0].button;
   if (dispatchEvent(normalizedEvents) || e.type === "wheel") {
-    if (preventDefault === true) {
+    if (preventDefault) {
       e.preventDefault();
     }
   }
@@ -22806,12 +23854,12 @@ function globalToLocal(x, y, v) {
 function setTouchAction(element, value) {
   element.style["touch-action"] = value || "none";
 }
-function bindPointer() {
-  const button = arguments.length < 2 ? pointer.LEFT : arguments[0];
-  const keyCode = arguments.length < 2 ? arguments[0] : arguments[1];
+function bindPointer(...args) {
+  const button = args.length < 2 ? pointer.LEFT : args[0];
+  const keyCode = args.length < 2 ? args[0] : args[1];
   enablePointerEvent();
   if (!getBindingKey(keyCode)) {
-    throw new Error("no action defined for keycode " + keyCode);
+    throw new Error(`no action defined for keycode ${keyCode}`);
   }
   pointer.bind[button] = keyCode;
 }
@@ -22821,11 +23869,11 @@ function unbindPointer(button) {
 function registerPointerEvent(eventType, region, callback) {
   enablePointerEvent();
   if (pointerEventList.indexOf(eventType) === -1) {
-    throw new Error("invalid event type : " + eventType);
+    throw new Error(`invalid event type : ${eventType}`);
   }
   if (typeof region === "undefined") {
     throw new Error(
-      "registerPointerEvent: region for " + toString(region) + " event is undefined "
+      `registerPointerEvent: region for ${String(region)} event is undefined `
     );
   }
   const eventTypes = findAllActiveEvents(
@@ -22851,7 +23899,7 @@ function registerPointerEvent(eventType, region, callback) {
 }
 function releasePointerEvent(eventType, region, callback) {
   if (pointerEventList.indexOf(eventType) === -1) {
-    throw new Error("invalid event type : " + eventType);
+    throw new Error(`invalid event type : ${eventType}`);
   }
   const eventTypes = findAllActiveEvents(
     activeEventList,
@@ -22889,7 +23937,7 @@ function releaseAllPointerEvents(region) {
 function requestPointerLock() {
   if (hasPointerLockSupport) {
     const element = game.getParentElement();
-    element.requestPointerLock();
+    void element.requestPointerLock();
     return true;
   }
   return false;
@@ -23218,7 +24266,19 @@ var SAT_LOOKUP = {
   PolygonPolygon: testPolygonPolygon,
   PolygonEllipse: testPolygonEllipse,
   EllipsePolygon: testEllipsePolygon,
-  EllipseEllipse: testEllipseEllipse
+  EllipseEllipse: testEllipseEllipse,
+  RoundRectRoundRect: testPolygonPolygon,
+  RoundRectPolygon: testPolygonPolygon,
+  PolygonRoundRect: testPolygonPolygon,
+  RoundRectEllipse: testPolygonEllipse,
+  EllipseRoundRect: testEllipsePolygon,
+  RectangleRectangle: testPolygonPolygon,
+  RectanglePolygon: testPolygonPolygon,
+  PolygonRectangle: testPolygonPolygon,
+  RectangleEllipse: testPolygonEllipse,
+  EllipseRectangle: testEllipsePolygon,
+  RectangleRoundRect: testPolygonPolygon,
+  RoundRectRectangle: testPolygonPolygon
 };
 var dummyObj = {
   pos: new Vector2d(0, 0),
@@ -23831,6 +24891,85 @@ var primitive_default = "varying vec4 vColor;\n\nvoid main(void) {\n    gl_FragC
 // src/video/webgl/shaders/primitive.vert
 var primitive_default2 = "// Current vertex point\nattribute vec2 aVertex;\n// Per-vertex normal for line expansion\nattribute vec2 aNormal;\nattribute vec4 aColor;\n\n// Projection matrix\nuniform mat4 uProjectionMatrix;\n// Line width for stroke expansion\nuniform float uLineWidth;\n\nvarying vec4 vColor;\n\nvoid main(void) {\n    // Expand vertex position along the normal by half the line width\n    vec2 position = aVertex + aNormal * uLineWidth * 0.5;\n    // Transform the vertex position by the projection matrix\n    gl_Position = uProjectionMatrix * vec4(position, 0.0, 1.0);\n    // Pass the remaining attributes to the fragment shader\n    vColor = vec4(aColor.bgr * aColor.a, aColor.a);\n}\n";
 
+// src/video/webgl/buffer/index.js
+var IndexBuffer = class {
+  /**
+   * @param {WebGLRenderingContext|WebGL2RenderingContext} gl - the WebGL context
+   * @param {number} maxIndices - maximum number of indices this buffer can hold
+   * @param {boolean} [useUint32=false] - use Uint32 indices (WebGL2) instead of Uint16 (WebGL1)
+   * @param {boolean} [dynamic=false] - if true, use STREAM_DRAW for frequent updates; if false, use STATIC_DRAW
+   */
+  constructor(gl, maxIndices, useUint32 = false, dynamic = false) {
+    this.gl = gl;
+    this.dynamic = dynamic;
+    if (useUint32) {
+      this.type = gl.UNSIGNED_INT;
+      this.data = new Uint32Array(maxIndices);
+    } else {
+      this.type = gl.UNSIGNED_SHORT;
+      this.data = new Uint16Array(maxIndices);
+    }
+    this.length = 0;
+    this.buffer = gl.createBuffer();
+  }
+  /**
+   * Fill the buffer with a repeating quad index pattern [0,1,2, 2,1,3, 4,5,6, ...]
+   * and upload as a static buffer.
+   * @param {number} maxQuads - number of quads to generate indices for
+   */
+  fillQuadPattern(maxQuads) {
+    for (let i = 0, vertex = 0; i < maxQuads * 6; i += 6, vertex += 4) {
+      this.data[i] = vertex;
+      this.data[i + 1] = vertex + 1;
+      this.data[i + 2] = vertex + 2;
+      this.data[i + 3] = vertex + 2;
+      this.data[i + 4] = vertex + 1;
+      this.data[i + 5] = vertex + 3;
+    }
+    this.length = maxQuads * 6;
+    this.bind();
+    this.gl.bufferData(
+      this.gl.ELEMENT_ARRAY_BUFFER,
+      this.data,
+      this.gl.STATIC_DRAW
+    );
+  }
+  /**
+   * Reset the index count (for dynamic buffers)
+   */
+  clear() {
+    this.length = 0;
+  }
+  /**
+   * Add indices to the buffer, rebased by the given vertex offset
+   * @param {number[]} indices - source indices to add
+   * @param {number} vertexOffset - value to add to each index (vertex count at time of insertion)
+   */
+  add(indices, vertexOffset) {
+    for (let i = 0; i < indices.length; i++) {
+      this.data[this.length + i] = indices[i] + vertexOffset;
+    }
+    this.length += indices.length;
+  }
+  /**
+   * Upload the current index data to the GPU (for dynamic buffers)
+   */
+  upload() {
+    this.bind();
+    this.gl.bufferData(
+      this.gl.ELEMENT_ARRAY_BUFFER,
+      this.data.subarray(0, this.length),
+      this.gl.STREAM_DRAW
+    );
+  }
+  /**
+   * bind this index buffer
+   */
+  bind() {
+    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffer);
+  }
+};
+
 // src/video/webgl/buffer/vertex.js
 var VertexArrayBuffer = class {
   constructor(vertexSize, maxVertex) {
@@ -23858,7 +24997,7 @@ var VertexArrayBuffer = class {
     return this.vertexCount + vertex >= this.maxVertex;
   }
   /**
-   * push a new vertex to the buffer
+   * push a new vertex to the buffer (quad format: x, y, u, v, tint)
    * @ignore
    */
   push(x, y, u, v, tint) {
@@ -23871,6 +25010,21 @@ var VertexArrayBuffer = class {
     this.vertexCount++;
     return this;
   }
+  /**
+   * push a new vertex with all-float data to the buffer
+   * @param {ArrayLike<number>} data - float values for one vertex
+   * @param {number} srcOffset - start index in the source data
+   * @param {number} count - number of floats to copy (should equal vertexSize)
+   * @ignore
+   */
+  pushFloats(data2, srcOffset, count) {
+    const offset = this.vertexCount * this.vertexSize;
+    for (let i = 0; i < count; i++) {
+      this.bufferF32[offset + i] = data2[srcOffset + i];
+    }
+    this.vertexCount++;
+    return this;
+  }
   /**
    * return a reference to the data in Float32 format
    * @ignore
@@ -24152,20 +25306,23 @@ var GLShader = class {
 };
 
 // src/video/webgl/batchers/batcher.js
-var MAX_VERTICES = 4096;
+var DEFAULT_MAX_VERTICES = 4096;
 var Batcher = class {
   /**
    * @param {WebGLRenderer} renderer - the current WebGL renderer session
    * @param {object} settings - additional settings to initialize this batcher
-   * @param {object[]} settings.attribute - an array of attributes definition
-   * @param {string} settings.attribute.name - name of the attribute in the vertex shader
-   * @param {number} settings.attribute.size - number of components per vertex attribute. Must be 1, 2, 3, or 4.
-   * @param {GLenum} settings.attribute.type - data type of each component in the array
-   * @param {boolean} settings.attribute.normalized - whether integer data values should be normalized into a certain range when being cast to a float
-   * @param {number} settings.attribute.offset - offset in bytes of the first component in the vertex attribute array
-   * @param {object} settings.shader - an array of attributes definition
+   * @param {object[]} settings.attributes - an array of attributes definition
+   * @param {string} settings.attributes.name - name of the attribute in the vertex shader
+   * @param {number} settings.attributes.size - number of components per vertex attribute. Must be 1, 2, 3, or 4.
+   * @param {GLenum} settings.attributes.type - data type of each component in the array
+   * @param {boolean} settings.attributes.normalized - whether integer data values should be normalized into a certain range when being cast to a float
+   * @param {number} settings.attributes.offset - offset in bytes of the first component in the vertex attribute array
+   * @param {object} settings.shader - shader definition
    * @param {string} settings.shader.vertex - a string containing the GLSL source code to set
    * @param {string} settings.shader.fragment - a string containing the GLSL source code to set
+   * @param {number} [settings.maxVertices=4096] - the maximum number of vertices this batcher can hold
+   * @param {boolean} [settings.indexed=false] - whether this batcher uses an index buffer for indexed drawing (drawElements)
+   * @param {string} [settings.projectionUniform="uProjectionMatrix"] - the name of the projection matrix uniform in the shader
    */
   constructor(renderer2, settings) {
     this.init(renderer2, settings);
@@ -24185,6 +25342,7 @@ var Batcher = class {
     this.stride = 0;
     this.vertexSize = 0;
     this.vertexData = null;
+    const maxVertices = settings && settings.maxVertices || DEFAULT_MAX_VERTICES;
     if (typeof settings !== "undefined" && Array.isArray(settings.attributes)) {
       settings.attributes.forEach((attr) => {
         this.addAttribute(
@@ -24195,7 +25353,7 @@ var Batcher = class {
           attr.offset
         );
       });
-      this.vertexData = new VertexArrayBuffer(this.vertexSize, MAX_VERTICES);
+      this.vertexData = new VertexArrayBuffer(this.vertexSize, maxVertices);
     } else {
       throw new Error("attributes definition missing");
     }
@@ -24208,6 +25366,15 @@ var Batcher = class {
     } else {
       throw new Error("shader definition missing");
     }
+    this.projectionUniform = settings.projectionUniform || "uProjectionMatrix";
+    this.useIndexBuffer = settings.indexed === true;
+    this.glVertexBuffer = null;
+    this.indexBuffer = null;
+    if (this.useIndexBuffer) {
+      const gl = this.gl;
+      this.glVertexBuffer = gl.createBuffer();
+      this.indexBuffer = new IndexBuffer(gl, maxVertices * 3, false, true);
+    }
   }
   /**
    * Reset batcher internal state
@@ -24216,11 +25383,21 @@ var Batcher = class {
   reset() {
     this.gl = this.renderer.gl;
     this.vertexData.clear();
+    if (this.useIndexBuffer) {
+      this.indexBuffer.clear();
+    }
   }
   /**
    * called by the WebGL renderer when a batcher becomes the current one
    */
   bind() {
+    if (this.useIndexBuffer) {
+      const gl = this.gl;
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.glVertexBuffer);
+      if (this.indexBuffer) {
+        this.indexBuffer.bind();
+      }
+    }
     if (this.renderer.currentProgram !== this.defaultShader.program) {
       this.useShader(this.defaultShader);
     }
@@ -24234,7 +25411,7 @@ var Batcher = class {
     if (this.currentShader !== shader || this.renderer.currentProgram !== shader.program) {
       this.flush();
       shader.bind();
-      shader.setUniform("uProjectionMatrix", this.renderer.projectionMatrix);
+      shader.setUniform(this.projectionUniform, this.renderer.projectionMatrix);
       shader.setVertexAttributes(this.gl, this.attributes, this.stride);
       this.currentShader = shader;
       this.renderer.currentProgram = shader.program;
@@ -24285,7 +25462,18 @@ var Batcher = class {
    * @param {Matrix3d} matrix - the new projection matrix
    */
   setProjection(matrix) {
-    this.currentShader.setUniform("uProjectionMatrix", matrix);
+    this.currentShader.setUniform(this.projectionUniform, matrix);
+  }
+  /**
+   * Add index values to the index buffer (only for indexed batchers).
+   * Indices are rebased relative to the current vertex count.
+   * @param {number[]} indices - array of index values to add
+   */
+  addIndices(indices) {
+    if (!this.useIndexBuffer) {
+      return;
+    }
+    this.indexBuffer.add(indices, this.vertexData.vertexCount);
   }
   /**
    * Flush batched vertex data to the GPU
@@ -24297,22 +25485,54 @@ var Batcher = class {
     if (vertexCount > 0) {
       const gl = this.gl;
       const vertexSize = vertex.vertexSize;
-      if (this.renderer.WebGLVersion > 1) {
-        gl.bufferData(
-          gl.ARRAY_BUFFER,
-          vertex.toFloat32(),
-          gl.STREAM_DRAW,
-          0,
-          vertexCount * vertexSize
+      if (this.useIndexBuffer && this.indexBuffer.length > 0) {
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.glVertexBuffer);
+        this.currentShader.setVertexAttributes(
+          gl,
+          this.attributes,
+          this.stride
         );
-      } else {
-        gl.bufferData(
-          gl.ARRAY_BUFFER,
-          vertex.toFloat32(0, vertexCount * vertexSize),
-          gl.STREAM_DRAW
+        if (this.renderer.WebGLVersion > 1) {
+          gl.bufferData(
+            gl.ARRAY_BUFFER,
+            vertex.toFloat32(),
+            gl.STREAM_DRAW,
+            0,
+            vertexCount * vertexSize
+          );
+        } else {
+          gl.bufferData(
+            gl.ARRAY_BUFFER,
+            vertex.toFloat32(0, vertexCount * vertexSize),
+            gl.STREAM_DRAW
+          );
+        }
+        this.indexBuffer.upload();
+        gl.drawElements(
+          mode,
+          this.indexBuffer.length,
+          this.indexBuffer.type,
+          0
         );
+        this.indexBuffer.clear();
+      } else {
+        if (this.renderer.WebGLVersion > 1) {
+          gl.bufferData(
+            gl.ARRAY_BUFFER,
+            vertex.toFloat32(),
+            gl.STREAM_DRAW,
+            0,
+            vertexCount * vertexSize
+          );
+        } else {
+          gl.bufferData(
+            gl.ARRAY_BUFFER,
+            vertex.toFloat32(0, vertexCount * vertexSize),
+            gl.STREAM_DRAW
+          );
+        }
+        gl.drawArrays(mode, 0, vertexCount);
       }
-      gl.drawArrays(mode, 0, vertexCount);
       vertex.clear();
     }
   }
@@ -24483,43 +25703,6 @@ var PrimitiveBatcher = class extends Batcher {
   }
 };
 
-// src/video/webgl/buffer/index.js
-var IndexBuffer = class {
-  /**
-   * @param {WebGL2RenderingContext} gl - the WebGL context
-   * @param {number} maxQuads - maximum number of quads this buffer can index
-   * @param {boolean} [useUint32=false] - use Uint32 indices (WebGL2) instead of Uint16 (WebGL1)
-   */
-  constructor(gl, maxQuads, useUint32 = false) {
-    this.gl = gl;
-    if (useUint32) {
-      this.type = gl.UNSIGNED_INT;
-      this.data = new Uint32Array(maxQuads * 6);
-    } else {
-      this.type = gl.UNSIGNED_SHORT;
-      this.data = new Uint16Array(maxQuads * 6);
-    }
-    for (let i = 0, vertex = 0; i < this.data.length; i += 6, vertex += 4) {
-      this.data[i] = vertex;
-      this.data[i + 1] = vertex + 1;
-      this.data[i + 2] = vertex + 2;
-      this.data[i + 3] = vertex + 2;
-      this.data[i + 4] = vertex + 1;
-      this.data[i + 5] = vertex + 3;
-    }
-    this.buffer = gl.createBuffer();
-    this.bind();
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.data, gl.STATIC_DRAW);
-  }
-  /**
-   * bind this index buffer
-   * @ignore
-   */
-  bind() {
-    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffer);
-  }
-};
-
 // src/video/webgl/shaders/quad.frag
 var quad_default = "uniform sampler2D uSampler;\nvarying vec4 vColor;\nvarying vec2 vRegion;\n\nvoid main(void) {\n    gl_FragColor = texture2D(uSampler, vRegion) * vColor;\n}\n";
 
@@ -24571,11 +25754,13 @@ var QuadBatcher = class extends Batcher {
     this.currentTextureUnit = -1;
     this.boundTextures = [];
     this.currentSamplerUnit = -1;
+    const maxQuads = this.vertexData.maxVertex / 4;
     this.indexBuffer = new IndexBuffer(
       this.gl,
-      this.vertexData.maxVertex / 4,
+      maxQuads * 6,
       this.renderer.WebGLVersion > 1
     );
+    this.indexBuffer.fillQuadPattern(maxQuads);
   }
   /**
    * Reset compositor internal state
@@ -24591,11 +25776,13 @@ var QuadBatcher = class extends Batcher {
     }
     this.currentTextureUnit = -1;
     this.currentSamplerUnit = -1;
+    const maxQuads = this.vertexData.maxVertex / 4;
     this.indexBuffer = new IndexBuffer(
       this.gl,
-      this.vertexData.maxVertex / 4,
+      maxQuads * 6,
       this.renderer.WebGLVersion > 1
     );
+    this.indexBuffer.fillQuadPattern(maxQuads);
   }
   /**
    * Flush batched texture data to the GPU using indexed drawing.
@@ -25019,6 +26206,7 @@ var WebGLRenderer = class extends Renderer {
       if (this.currentBatcher !== void 0) {
         this.currentBatcher.flush();
       }
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
       this.currentBatcher = batcher;
       this.currentBatcher.bind();
     }
@@ -25074,6 +26262,7 @@ var WebGLRenderer = class extends Renderer {
    * @param {Matrix3d} matrix - the new projection matrix
    */
   setProjection(matrix) {
+    this.flush();
     super.setProjection(matrix);
     this.currentBatcher.setProjection(matrix);
   }
@@ -25326,42 +26515,79 @@ var WebGLRenderer = class extends Renderer {
     return this.gl;
   }
   /**
-   * set a blend mode for the given context. <br>
-   * Supported blend mode between Canvas and WebGL renderer : <br>
-   * - "normal" : this is the default mode and draws new content on top of the existing content <br>
-   * <img src="../images/normal-blendmode.png" width="510"/> <br>
-   * - "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result. <br>
-   * <img src="../images/multiply-blendmode.png" width="510"/> <br>
-   * - "additive or lighter" : where both content overlap the color is determined by adding color values. <br>
-   * <img src="../images/lighter-blendmode.png" width="510"/> <br>
-   * - "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) <br>
-   * <img src="../images/screen-blendmode.png" width="510"/> <br>
+   * set the current blend mode for this renderer. <br>
+   * All renderers support: <br>
+   * - "normal" : draws new content on top of the existing content <br>
+   * <img src="../images/normal-blendmode.png" width="180"/> <br>
+   * - "add", "additive", or "lighter" : color values are added together <br>
+   * <img src="../images/add-blendmode.png" width="180"/> <br>
+   * - "multiply" : pixels are multiplied, resulting in a darker picture <br>
+   * <img src="../images/multiply-blendmode.png" width="180"/> <br>
+   * - "screen" : pixels are inverted, multiplied, and inverted again (opposite of multiply) <br>
+   * <img src="../images/screen-blendmode.png" width="180"/> <br>
+   * WebGL2 additionally supports: <br>
+   * - "darken" : retains the darkest pixels of both layers <br>
+   * <img src="../images/darken-blendmode.png" width="180"/> <br>
+   * - "lighten" : retains the lightest pixels of both layers <br>
+   * <img src="../images/lighten-blendmode.png" width="180"/> <br>
+   * Other CSS blend modes ("overlay", "color-dodge", "color-burn", "hard-light", "soft-light",
+   * "difference", "exclusion") may be supported by the Canvas renderer (browser-dependent)
+   * and will always fall back to "normal" in WebGL. <br>
    * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-   * @param {string} [mode="normal"] - blend mode : "normal", "multiply", "lighter", "additive", "screen"
-   * @param {WebGLRenderingContext} [gl] - a WebGL context
+   * @param {string} [mode="normal"] - blend mode
+   * @param {boolean} [premultipliedAlpha=true] - whether textures use premultiplied alpha (affects source blend factor)
+   * @returns {string} the blend mode actually applied (may differ if the requested mode is unsupported)
    */
-  setBlendMode(mode = "normal", gl = this.gl) {
+  setBlendMode(mode = "normal", premultipliedAlpha = true) {
     if (this.currentBlendMode !== mode) {
+      const gl = this.gl;
       this.flush();
       gl.enable(gl.BLEND);
       this.currentBlendMode = mode;
+      const srcAlpha = premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
       switch (mode) {
         case "screen":
+          gl.blendEquation(gl.FUNC_ADD);
           gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
           break;
         case "lighter":
         case "additive":
-          gl.blendFunc(gl.ONE, gl.ONE);
+        case "add":
+          gl.blendEquation(gl.FUNC_ADD);
+          gl.blendFunc(srcAlpha, gl.ONE);
           break;
         case "multiply":
+          gl.blendEquation(gl.FUNC_ADD);
           gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
           break;
+        case "darken":
+          if (this.WebGLVersion > 1) {
+            gl.blendEquation(gl.MIN);
+            gl.blendFunc(gl.ONE, gl.ONE);
+          } else {
+            gl.blendEquation(gl.FUNC_ADD);
+            gl.blendFunc(srcAlpha, gl.ONE_MINUS_SRC_ALPHA);
+            this.currentBlendMode = "normal";
+          }
+          break;
+        case "lighten":
+          if (this.WebGLVersion > 1) {
+            gl.blendEquation(gl.MAX);
+            gl.blendFunc(gl.ONE, gl.ONE);
+          } else {
+            gl.blendEquation(gl.FUNC_ADD);
+            gl.blendFunc(srcAlpha, gl.ONE_MINUS_SRC_ALPHA);
+            this.currentBlendMode = "normal";
+          }
+          break;
         default:
-          gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+          gl.blendEquation(gl.FUNC_ADD);
+          gl.blendFunc(srcAlpha, gl.ONE_MINUS_SRC_ALPHA);
           this.currentBlendMode = "normal";
           break;
       }
     }
+    return this.currentBlendMode;
   }
   /**
    * restores the most recently saved renderer state by popping the top entry in the drawing state stack
@@ -26028,46 +27254,45 @@ function autoDetectRenderer(options) {
   return new CanvasRenderer(options);
 }
 
-// src/application/header.js
+// src/application/header.ts
 function consoleHeader(app) {
-  let renderType = app.renderer.type;
-  let gpu_renderer = typeof app.renderer.GPURenderer === "string" ? " (" + app.renderer.GPURenderer + ")" : "";
-  let depthTesting = renderType.includes("WebGL") && app.renderer.depthTest === "z-buffer" ? "Depth Test | " : "";
-  let audioType = hasWebAudio ? "Web Audio" : "HTML5 Audio";
+  const renderType = app.renderer.type;
+  const gpu_renderer = typeof app.renderer.GPURenderer === "string" ? ` (${app.renderer.GPURenderer})` : "";
+  const depthTesting = renderType.includes("WebGL") && app.renderer.depthTest === "z-buffer" ? "Depth Test | " : "";
+  const audioType = hasWebAudio ? "Web Audio" : "HTML5 Audio";
   console.log(
-    renderType + " renderer" + gpu_renderer + " | " + depthTesting + audioType + " | pixel ratio " + devicePixelRatio + " | " + (platform.nodeJS ? "node.js" : platform.isMobile ? "mobile" : "desktop") + " | " + getScreenOrientation() + " | " + language
+    `${renderType} renderer${gpu_renderer} | ${depthTesting}${audioType} | pixel ratio ${devicePixelRatio} | ${platform.nodeJS ? "node.js" : platform.isMobile ? "mobile" : "desktop"} | ${getScreenOrientation()} | ${language}`
   );
   console.log(
-    "resolution: requested " + app.settings.width + "x" + app.settings.height + ", got " + app.renderer.width + "x" + app.renderer.height
+    `resolution: requested ${app.settings.width}x${app.settings.height}, got ${app.renderer.width}x${app.renderer.height}`
   );
 }
 
-// src/application/resize.js
+// src/application/resize.ts
 function scale(game2, x, y) {
-  let renderer2 = game2.renderer;
-  let canvas = renderer2.getCanvas();
-  let context = renderer2.getContext();
-  let settings = renderer2.settings;
-  let pixelRatio = devicePixelRatio;
-  let w = settings.zoomX = canvas.width * x * pixelRatio;
-  let h = settings.zoomY = canvas.height * y * pixelRatio;
+  const renderer2 = game2.renderer;
+  const canvas = renderer2.getCanvas();
+  const settings = renderer2.settings;
+  const pixelRatio = devicePixelRatio;
+  const w = settings.zoomX = canvas.width * x * pixelRatio;
+  const h = settings.zoomY = canvas.height * y * pixelRatio;
   renderer2.scaleRatio.set(x * pixelRatio, y * pixelRatio);
-  canvas.style.width = w / pixelRatio + "px";
-  canvas.style.height = h / pixelRatio + "px";
+  canvas.style.width = `${w / pixelRatio}px`;
+  canvas.style.height = `${h / pixelRatio}px`;
   renderer2.setAntiAlias(settings.antiAlias);
-  renderer2.setBlendMode(settings.blendMode, context);
+  renderer2.setBlendMode(settings.blendMode);
   game2.repaint();
 }
 function onresize(game2) {
-  let renderer2 = game2.renderer;
-  let settings = renderer2.settings;
+  const renderer2 = game2.renderer;
+  const settings = renderer2.settings;
   let scaleX = settings.scale, scaleY = settings.scale;
   let nodeBounds;
   if (settings.autoScale) {
     let canvasMaxWidth = Infinity;
     let canvasMaxHeight = Infinity;
     if (globalThis.getComputedStyle) {
-      let style = globalThis.getComputedStyle(renderer2.getCanvas(), null);
+      const style = globalThis.getComputedStyle(renderer2.getCanvas(), null);
       canvasMaxWidth = parseInt(style.maxWidth, 10) || Infinity;
       canvasMaxHeight = parseInt(style.maxHeight, 10) || Infinity;
     }
@@ -26076,15 +27301,15 @@ function onresize(game2) {
     } else {
       nodeBounds = getParentBounds(game2.getParentElement());
     }
-    let _max_width = Math.min(canvasMaxWidth, nodeBounds.width);
-    let _max_height = Math.min(canvasMaxHeight, nodeBounds.height);
-    let screenRatio = _max_width / _max_height;
+    const _max_width = Math.min(canvasMaxWidth, nodeBounds.width);
+    const _max_height = Math.min(canvasMaxHeight, nodeBounds.height);
+    const screenRatio = _max_width / _max_height;
     if (settings.scaleMethod === "fill-min" && screenRatio > renderer2.designRatio || settings.scaleMethod === "fill-max" && screenRatio < renderer2.designRatio || settings.scaleMethod === "flex-width") {
-      let sWidth = Math.min(canvasMaxWidth, settings.height * screenRatio);
+      const sWidth = Math.min(canvasMaxWidth, settings.height * screenRatio);
       scaleX = scaleY = _max_width / sWidth;
       renderer2.resize(Math.floor(sWidth), settings.height);
     } else if (settings.scaleMethod === "fill-min" && screenRatio < renderer2.designRatio || settings.scaleMethod === "fill-max" && screenRatio > renderer2.designRatio || settings.scaleMethod === "flex-height") {
-      let sHeight = Math.min(
+      const sHeight = Math.min(
         canvasMaxHeight,
         settings.width * (_max_height / _max_width)
       );
@@ -26106,23 +27331,91 @@ function onresize(game2) {
   scale(game2, scaleX, scaleY);
 }
 
-// src/application/application.js
+// src/application/application.ts
 var Application = class {
   /**
-   * @param {number} width - The width of the canvas viewport
-   * @param {number} height - The height of the canvas viewport
-   * @param {ApplicationSettings} [options] - The optional parameters for the application and default renderer
-   * @throws Will throw an exception if it fails to instantiate a renderer
+   * the parent HTML element holding the main canvas of this application
+   */
+  parentElement;
+  /**
+   * a reference to the active Canvas or WebGL renderer
+   */
+  renderer;
+  /**
+   * the active stage "default" camera
+   */
+  viewport;
+  /**
+   * a reference to the game world, <br>
+   * a world is a virtual environment containing all the game objects
+   */
+  world;
+  /**
+   * when true, all objects will be added under the root world container.<br>
+   * When false, a `me.Container` object will be created for each corresponding groups
+   * @default true
+   */
+  mergeGroup;
+  /**
+   * Last time the game update loop was executed. <br>
+   * Use this value to implement frame prediction in drawing events,
+   * for creating smooth motion while running game update logic at
+   * a lower fps.
+   */
+  lastUpdate;
+  /**
+   * true when this app instance has been initialized
+   * @default false
+   */
+  isInitialized;
+  /**
+   * the given settings used when creating this application
+   */
+  settings;
+  /**
+   * Specify whether to pause this app when losing focus
+   * @default true
+   * @example
+   *  // keep the default game instance running even when losing focus
+   *  me.game.pauseOnBlur = false;
+   */
+  pauseOnBlur;
+  /**
+   * Specify whether to unpause this app when gaining back focus
+   * @default true
+   */
+  resumeOnFocus;
+  /**
+   * Specify whether to stop this app when losing focus
+   * @default false
    */
-  constructor(width, height, options) {
-    this.parentElement = void 0;
-    this.renderer = void 0;
-    this.viewport = void 0;
-    this.world = void 0;
+  stopOnBlur;
+  // to know when we have to refresh the display
+  isDirty;
+  // always refresh the display when updatesPerSecond are lower than fps
+  isAlwaysDirty;
+  // frame counter for frameSkipping
+  frameCounter;
+  frameRate;
+  // time accumulation for multiple update calls
+  accumulator;
+  accumulatorMax;
+  accumulatorUpdateDelta;
+  // min update step size
+  stepSize;
+  updateDelta;
+  lastUpdateStart;
+  updateAverageDelta;
+  /**
+   * @param width - The width of the canvas viewport
+   * @param height - The height of the canvas viewport
+   * @param options - The optional parameters for the application and default renderer
+   * @throws {Error} Will throw an exception if it fails to instantiate a renderer
+   */
+  constructor(width, height, options = {}) {
     this.mergeGroup = true;
     this.lastUpdate = 0;
     this.isInitialized = false;
-    this.settings = void 0;
     this.pauseOnBlur = true;
     this.resumeOnFocus = true;
     this.stopOnBlur = false;
@@ -26143,20 +27436,18 @@ var Application = class {
   }
   /**
    * init the game instance (create a physic world, update starting time, etc..)
-   * @param {number} width - The width of the canvas viewport
-   * @param {number} height - The height of the canvas viewport
-   * @param {ApplicationSettings} [options] - The optional parameters for the application and default renderer
+   * @param width - The width of the canvas viewport
+   * @param height - The height of the canvas viewport
+   * @param options - The optional parameters for the application and default renderer
    */
   init(width, height, options) {
-    this.settings = Object.assign(defaultApplicationSettings, options || {});
+    this.settings = Object.assign(
+      defaultApplicationSettings,
+      options || {}
+    );
     this.settings.width = width;
     this.settings.height = height;
-    this.settings.transparent = !!this.settings.transparent;
-    this.settings.antiAlias = !!this.settings.antiAlias;
-    this.settings.failIfMajorPerformanceCaveat = !!this.settings.failIfMajorPerformanceCaveat;
     this.settings.depthTest = this.settings.depthTest === "z-buffer" ? "z-buffer" : "sorting";
-    this.settings.subPixel = !!this.settings.subPixel;
-    this.settings.verbose = !!this.settings.verbose;
     if (this.settings.scaleMethod.search(
       /^(fill-(min|max)|fit|flex(-(width|height))?|stretch)$/
     ) !== -1) {
@@ -26165,7 +27456,7 @@ var Application = class {
       this.settings.scaleMethod = ScaleMethods.Fit;
       this.settings.autoScale = this.settings.scale === "auto" || false;
     }
-    let uriFragment = getUriFragment();
+    const uriFragment = getUriFragment();
     if (uriFragment.webgl === true || uriFragment.webgl1 === true || uriFragment.webgl2 === true) {
       this.settings.renderer = WEBGL;
       if (uriFragment.webgl1 === true) {
@@ -26192,14 +27483,14 @@ var Application = class {
           break;
       }
     } else {
-      let CustomRenderer = this.settings.renderer;
+      const CustomRenderer = this.settings.renderer;
       this.renderer = new CustomRenderer(this.settings);
     }
     eventEmitter.addListener(WINDOW_ONRESIZE, () => {
-      return onresize(this);
+      onresize(this);
     });
     eventEmitter.addListener(WINDOW_ONORIENTATION_CHANGE, () => {
-      return onresize(this);
+      onresize(this);
     });
     this.parentElement.appendChild(this.renderer.getCanvas());
     if (platform.isMobile) {
@@ -26207,8 +27498,8 @@ var Application = class {
     }
     onresize(this);
     if ("MutationObserver" in globalThis) {
-      let observer = new MutationObserver(() => {
-        return onresize(this);
+      const observer = new MutationObserver(() => {
+        onresize(this);
       });
       observer.observe(this.parentElement, {
         attributes: false,
@@ -26216,7 +27507,7 @@ var Application = class {
         subtree: true
       });
     }
-    if (this.settings.consoleHeader !== false) {
+    if (this.settings.consoleHeader) {
       consoleHeader(this);
     }
     this.world = new World(0, 0, this.settings.width, this.settings.height);
@@ -26235,18 +27526,18 @@ var Application = class {
       this.draw();
     });
     eventEmitter.addListener(BLUR, () => {
-      if (this.stopOnBlur === true) {
+      if (this.stopOnBlur) {
         state_default.stop(true);
       }
-      if (this.pauseOnBlur === true) {
+      if (this.pauseOnBlur) {
         state_default.pause(true);
       }
     });
     eventEmitter.addListener(FOCUS, () => {
-      if (this.stopOnBlur === true) {
+      if (this.stopOnBlur) {
         state_default.restart(true);
       }
-      if (this.resumeOnFocus === true) {
+      if (this.resumeOnFocus) {
         state_default.resume(true);
       }
     });
@@ -26256,9 +27547,11 @@ var Application = class {
    * destroy all current objects
    */
   reset() {
-    let current = state_default.get();
+    const current = state_default.get();
     if (typeof current !== "undefined") {
-      this.viewport = current.cameras.get("default");
+      this.viewport = current.cameras.get(
+        "default"
+      );
     }
     eventEmitter.emit(GAME_RESET);
     this.updateFrameRate();
@@ -26266,7 +27559,6 @@ var Application = class {
   /**
    * Specify the property to be used when sorting renderables for this application game world.
    * Accepted values : "x", "y", "z", "depth"
-   * @type {string}
    * @see {@link World.sortOn}
    */
   get sortOn() {
@@ -26299,7 +27591,7 @@ var Application = class {
   }
   /**
    * Returns the parent HTML Element holding the main canvas of this application
-   * @returns {HTMLElement} the parent HTML element
+   * @returns the parent HTML element
    */
   getParentElement() {
     return this.parentElement;
@@ -26312,7 +27604,7 @@ var Application = class {
   }
   /**
    * update all objects related to this game active scene/stage
-   * @param {number} time - current timestamp as provided by the RAF callback
+   * @param time - current timestamp as provided by the RAF callback
    */
   update(time) {
     if (++this.frameCounter % this.frameRate === 0) {
@@ -26324,7 +27616,7 @@ var Application = class {
       this.accumulatorUpdateDelta = timer_default.interpolation ? this.updateDelta : Math.max(this.updateDelta, this.updateAverageDelta);
       while (this.accumulator >= this.accumulatorUpdateDelta || timer_default.interpolation) {
         this.lastUpdateStart = globalThis.performance.now();
-        if (state_default.isPaused() !== true) {
+        if (!state_default.isPaused()) {
           eventEmitter.emit(GAME_UPDATE, time);
         }
         this.isDirty = this.world.update(this.updateDelta);
@@ -26344,7 +27636,7 @@ var Application = class {
    * draw the active scene/stage associated to this game
    */
   draw() {
-    if (this.renderer.isContextValid === true && (this.isDirty || this.isAlwaysDirty)) {
+    if (this.renderer.isContextValid && (this.isDirty || this.isAlwaysDirty)) {
       eventEmitter.emit(GAME_BEFORE_DRAW, globalThis.performance.now());
       this.renderer.clear();
       state_default.current().draw(this.renderer, this.world);
@@ -26681,7 +27973,7 @@ var ParticleEmitterSettings = {
 };
 var settings_default = ParticleEmitterSettings;
 
-// src/particles/emitter.js
+// src/particles/emitter.ts
 function createDefaultParticleTexture(w = 8, h = 8) {
   const defaultParticleTexture = new canvasrendertarget_default(w, h, {
     offscreenCanvas: true
@@ -26692,9 +27984,27 @@ function createDefaultParticleTexture(w = 8, h = 8) {
 }
 var ParticleEmitter = class extends Container {
   /**
-   * @param {number} x - x position of the particle emitter
-   * @param {number} y - y position of the particle emitter
-   * @param {ParticleEmitterSettings} [settings=ParticleEmitterSettings] - the settings for the particle emitter.
+   * the current (active) emitter settings
+   */
+  settings;
+  /** @ignore */
+  _stream;
+  /** @ignore */
+  _frequencyTimer;
+  /** @ignore */
+  _durationTimer;
+  /** @ignore */
+  _enabled;
+  /** @ignore */
+  _updateCount;
+  /** @ignore */
+  _dt;
+  /** @ignore */
+  _defaultParticle;
+  /**
+   * @param x - x position of the particle emitter
+   * @param y - y position of the particle emitter
+   * @param [settings=ParticleEmitterSettings] - the settings for the particle emitter.
    * @example
    * // Create a particle emitter at position 100, 100
    * let emitter = new ParticleEmitter(100, 100, {
@@ -26737,7 +28047,7 @@ var ParticleEmitter = class extends Container {
   }
   /**
    * Reset the emitter with particle emitter settings.
-   * @param {ParticleEmitterSettings} settings - [optional] object with emitter settings. See {@link ParticleEmitterSettings}
+   * @param settings - [optional] object with emitter settings. See {@link ParticleEmitterSettings}
    */
   reset(settings = {}) {
     Object.assign(this.settings, settings_default, settings);
@@ -26753,14 +28063,14 @@ var ParticleEmitter = class extends Container {
   }
   /**
    * returns a random point on the x axis within the bounds of this emitter
-   * @returns {number}
+   * @returns a random x position within the emitter bounds
    */
   getRandomPointX() {
     return randomFloat(0, this.getBounds().width);
   }
   /**
    * returns a random point on the y axis within the bounds this emitter
-   * @returns {number}
+   * @returns a random y position within the emitter bounds
    */
   getRandomPointY() {
     return randomFloat(0, this.getBounds().height);
@@ -26775,14 +28085,14 @@ var ParticleEmitter = class extends Container {
   }
   /**
    * Emitter is of type stream and is launching particles
-   * @returns {boolean} Emitter is Stream and is launching particles
+   * @returns Emitter is Stream and is launching particles
    */
   isRunning() {
     return this._enabled && this._stream;
   }
   /**
    * Launch particles from emitter constantly (e.g. for stream)
-   * @param {number} [duration] - time that the emitter releases particles in ms
+   * @param [duration] - time that the emitter releases particles in ms
    */
   streamParticles(duration) {
     this._enabled = true;
@@ -26798,7 +28108,7 @@ var ParticleEmitter = class extends Container {
   }
   /**
    * Launch all particles from emitter and stop (e.g. for explosion)
-   * @param {number} [total] - number of particles to launch
+   * @param [total] - number of particles to launch
    */
   burstParticles(total) {
     this._enabled = true;
@@ -26821,7 +28131,7 @@ var ParticleEmitter = class extends Container {
     }
     dt += this._dt;
     this._dt = 0;
-    this.isDirty |= super.update(dt);
+    this.isDirty = this.isDirty || super.update(dt);
     if (this._enabled && this._stream) {
       if (this._durationTimer !== Infinity) {
         this._durationTimer -= dt;
@@ -26831,7 +28141,7 @@ var ParticleEmitter = class extends Container {
         }
       }
       this._frequencyTimer += dt;
-      const particlesCount = this.children.length;
+      const particlesCount = this.children?.length ?? 0;
       if (particlesCount < this.settings.totalParticles && this._frequencyTimer >= this.settings.frequency) {
         if (particlesCount + this.settings.maxParticles <= this.settings.totalParticles) {
           this.addParticles(this.settings.maxParticles);
@@ -26849,7 +28159,7 @@ var ParticleEmitter = class extends Container {
    * @ignore
    */
   destroy() {
-    super.destroy(arguments);
+    super.destroy();
     if (typeof this._defaultParticle !== "undefined") {
       this._defaultParticle.destroy();
       this._defaultParticle = void 0;
@@ -26859,7 +28169,7 @@ var ParticleEmitter = class extends Container {
   }
 };
 
-// src/plugin/plugin.js
+// src/plugin/plugin.ts
 var plugin_exports = {};
 __export(plugin_exports, {
   BasePlugin: () => BasePlugin,
@@ -26870,14 +28180,20 @@ __export(plugin_exports, {
 });
 
 // src/version.ts
-var version = "18.1.0";
+var version = "18.2.0";
 
-// src/plugin/plugin.js
+// src/plugin/plugin.ts
 var cache = {};
 var BasePlugin = class {
   /**
-   * @param {Application} [app] - a reference to the app/game that registered this plugin
+   * define the minimum required version of melonJS
+   * this can be overridden by the plugin
    */
+  version;
+  /**
+   * a reference to the app/game that registered this plugin
+   */
+  app;
   constructor(app = game) {
     this.version = version;
     this.app = app;
@@ -26891,42 +28207,42 @@ function patch(proto, name, fn) {
     const _parent = proto[name];
     Object.defineProperty(proto, name, {
       configurable: true,
-      value: /* @__PURE__ */ (function(name2, fn2) {
-        return function() {
+      value: /* @__PURE__ */ (function(_name, fn2) {
+        return function(...args) {
           this._patched = _parent;
-          const ret = fn2.apply(this, arguments);
+          const ret = fn2.apply(this, args);
           this._patched = null;
           return ret;
         };
       })(name, fn)
     });
   } else {
-    throw new Error(name + " is not an existing function");
+    throw new Error(`${name} is not an existing function`);
   }
 }
-function register(plugin, name = plugin.toString().match(/ (\w+)/)[1]) {
-  if (cache[name]) {
-    throw new Error("plugin " + name + " already registered");
-  }
-  let _args = [];
-  if (arguments.length > 2) {
-    _args = Array.prototype.slice.call(arguments, 1);
+function register(pluginClass, name, ...args) {
+  const pluginName = name || pluginClass.name || pluginClass.toString().match(/ (\w+)/)[1];
+  if (cache[pluginName]) {
+    throw new Error(`plugin ${pluginName} already registered`);
   }
-  _args[0] = plugin;
-  const instance = new (plugin.bind.apply(plugin, _args))();
+  const instance = new pluginClass(...args);
   if (typeof instance === "undefined" || !(instance instanceof BasePlugin)) {
     throw new Error("Plugin should extend the BasePlugin Class !");
   }
   if (checkVersion(instance.version, version) > 0) {
     throw new Error(
-      "Plugin version mismatch, expected: " + instance.version + ", got: " + version
+      `Plugin version mismatch, expected: ${instance.version}, got: ${version}`
     );
   }
-  cache[name] = instance;
+  cache[pluginName] = instance;
 }
 function get(classType) {
   for (const name in cache) {
-    if (typeof classType === "string" && classType === name || cache[name] instanceof classType) {
+    if (typeof classType === "string") {
+      if (classType === name) {
+        return cache[name];
+      }
+    } else if (cache[name] instanceof classType) {
       return cache[name];
     }
   }
@@ -27344,6 +28660,7 @@ var ImageLayer = class extends Sprite {
   constructor(x, y, settings) {
     super(x, y, settings);
     this.floating = true;
+    this.visibleInAllCameras = true;
     this.offset.set(x, y);
     this.ratio = vector2dPool.get(1, 1);
     if (typeof settings.ratio !== "undefined") {
@@ -27489,13 +28806,25 @@ var ImageLayer = class extends Sprite {
     const bh = viewport.bounds.height;
     const ax = this.anchorPoint.x;
     const ay = this.anchorPoint.y;
-    let x = this.pos.x;
-    let y = this.pos.y;
-    if (this.ratio.x === 0 && this.ratio.y === 0) {
-      x = x + ax * (bw - width);
-      y = y + ay * (bh - height);
+    const rx = this.ratio.x;
+    const ry = this.ratio.y;
+    const vZoom = viewport.zoom;
+    let x, y;
+    if (rx === 0 && ry === 0) {
+      x = this.pos.x + ax * (bw - width);
+      y = this.pos.y + ay * (bh - height);
+    } else {
+      x = ax * (rx - 1) * (bw - viewport.width) + this.offset.x - rx * viewport.pos.x;
+      y = ay * (ry - 1) * (bh - viewport.height) + this.offset.y - ry * viewport.pos.y;
+      if (this.repeatX) {
+        x = x % width;
+      }
+      if (this.repeatY) {
+        y = y % height;
+      }
     }
-    renderer2.translate(x, y);
+    renderer2.translate(x * vZoom, y * vZoom);
+    renderer2.scale(vZoom, vZoom);
     renderer2.drawPattern(
       this._pattern,
       0,
@@ -28709,23 +30038,55 @@ var Trigger = class extends Renderable {
   }
 };
 
-// src/renderable/ui/uibaseelement.js
+// src/renderable/ui/uibaseelement.ts
 var UIBaseElement = class extends Container {
   #boundPointerMoveHandler;
   /**
    * UI base elements use screen coordinates by default
    * (Note: any child elements added to a UIBaseElement should have their floating property to false)
    * @see Renderable.floating
-   * @type {boolean}
    * @default true
    */
   floating = true;
   /**
-   *
-   * @param {number} x - The x position of the container
-   * @param {number} y - The y position of the container
-   * @param {number} w - width of the container
-   * @param {number} h - height of the container
+   * object can be clicked or not
+   * @default true
+   */
+  isClickable;
+  /**
+   * object can be dragged or not
+   * @default false
+   */
+  isDraggable;
+  /**
+   * Tap and hold threshold timeout in ms
+   * @default 250
+   */
+  holdThreshold;
+  /**
+   * object can be tap and hold
+   * @default false
+   */
+  isHoldable;
+  /**
+   * true if the pointer is over the object
+   * @default false
+   */
+  hover;
+  /**
+   * false if the pointer is down, or true when the pointer status is up
+   * @default true
+   */
+  released;
+  // object has been updated (clicked,etc..)
+  holdTimeout;
+  // grab offset for dragging
+  grabOffset;
+  /**
+   * @param x - The x position of the container
+   * @param y - The y position of the container
+   * @param w - width of the container
+   * @param h - height of the container
    */
   constructor(x, y, w, h) {
     super(x, y, w, h);
@@ -28752,7 +30113,7 @@ var UIBaseElement = class extends Container {
         timer_default.clearTimer(this.holdTimeout);
         this.holdTimeout = timer_default.setTimeout(
           () => {
-            return this.hold();
+            this.hold();
           },
           this.holdThreshold,
           false
@@ -28768,10 +30129,11 @@ var UIBaseElement = class extends Container {
   }
   /**
    * function called when the object is pressed (to be extended)
-   * @param {Pointer} event - the event object
-   * @returns {boolean} return false if we need to stop propagating the event
+   * @param _event - the event object
+   * @returns return false if we need to stop propagating the event
    */
-  onClick() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onClick(_event) {
     return true;
   }
   /**
@@ -28781,35 +30143,38 @@ var UIBaseElement = class extends Container {
   enter(event) {
     this.hover = true;
     this.isDirty = true;
-    if (this.isDraggable === true) {
+    if (this.isDraggable) {
       eventEmitter.addListener(POINTERMOVE, this.#boundPointerMoveHandler);
       this.grabOffset = vector2dPool.get(0, 0);
     }
-    return this.onOver(event);
+    this.onOver(event);
   }
   /**
    * pointermove function
    * @ignore
    */
   pointerMove(event) {
-    if (this.hover === true && this.released === false) {
+    if (this.hover && !this.released) {
       this.pos.set(event.gameX, event.gameY, this.pos.z);
       this.pos.sub(this.grabOffset);
       this.isDirty = true;
-      return this.onMove(event);
+      this.onMove(event);
+      return;
     }
   }
   /**
    * function called when the pointer is moved over the object
-   * @param {Pointer} event - the event object
+   * @param _event - the event object
    */
-  onMove() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onMove(_event) {
   }
   /**
    * function called when the pointer is over the object
-   * @param {Pointer} event - the event object
+   * @param _event - the event object
    */
-  onOver() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onOver(_event) {
   }
   /**
    * function callback for the pointerLeave event
@@ -28818,26 +30183,27 @@ var UIBaseElement = class extends Container {
   leave(event) {
     this.hover = false;
     this.isDirty = true;
-    if (this.isDraggable === true) {
+    if (this.isDraggable) {
       eventEmitter.removeListener(POINTERMOVE, this.#boundPointerMoveHandler);
       vector2dPool.release(this.grabOffset);
       this.grabOffset = void 0;
     }
     this.release(event);
-    return this.onOut(event);
+    this.onOut(event);
   }
   /**
    * function called when the pointer is leaving the object area
-   * @param {Pointer} event - the event object
+   * @param _event - the event object
    */
-  onOut() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onOut(_event) {
   }
   /**
    * function callback for the pointerup event
    * @ignore
    */
   release(event) {
-    if (this.released === false) {
+    if (!this.released) {
       this.released = true;
       this.isDirty = true;
       timer_default.clearTimer(this.holdTimeout);
@@ -28847,9 +30213,11 @@ var UIBaseElement = class extends Container {
   }
   /**
    * function called when the object is pressed and released (to be extended)
-   * @returns {boolean} return false if we need to stop propagating the event
+   * @param _event - the event object
+   * @returns return false if we need to stop propagating the event
    */
-  onRelease() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onRelease(_event) {
     return true;
   }
   /**
@@ -28885,10 +30253,10 @@ var UIBaseElement = class extends Container {
       return this.release(e);
     });
     registerPointerEvent("pointerenter", this, (e) => {
-      return this.enter(e);
+      this.enter(e);
     });
     registerPointerEvent("pointerleave", this, (e) => {
-      return this.leave(e);
+      this.leave(e);
     });
     super.onActivateEvent();
   }
@@ -28904,7 +30272,7 @@ var UIBaseElement = class extends Container {
     releasePointerEvent("pointerleave", this);
     timer_default.clearTimer(this.holdTimeout);
     this.holdTimeout = -1;
-    if (this.isDraggable === true) {
+    if (this.isDraggable) {
       eventEmitter.removeListener(POINTERMOVE, this.#boundPointerMoveHandler);
       if (typeof this.grabOffset !== "undefined") {
         vector2dPool.release(this.grabOffset);
@@ -28915,20 +30283,43 @@ var UIBaseElement = class extends Container {
   }
 };
 
-// src/renderable/ui/uispriteelement.js
+// src/renderable/ui/uispriteelement.ts
 var UISpriteElement = class extends Sprite {
   /**
    * if this UISpriteElement should use screen coordinates or local coordinates
    * (Note: any UISpriteElement elements added to a floating parent container should have their floating property to false)
    * @see Renderable.floating
-   * @type {boolean}
    * @default true
    */
   floating = true;
   /**
-   * @param {number} x - the x coordinate of the UISpriteElement Object
-   * @param {number} y - the y coordinate of the UISpriteElement Object
-   * @param {object} settings - See {@link Sprite}
+   * object can be clicked or not
+   * @default true
+   */
+  isClickable;
+  /**
+   * Tap and hold threshold timeout in ms
+   * @default 250
+   */
+  holdThreshold;
+  /**
+   * object can be tap and hold
+   * @default false
+   */
+  isHoldable;
+  /**
+   * true if the pointer is over the object
+   * @default false
+   */
+  hover;
+  // object has been updated (clicked,etc..)
+  holdTimeout;
+  released;
+  /**
+   * @param x - the x coordinate of the UISpriteElement Object
+   * @param y - the y coordinate of the UISpriteElement Object
+   * @param settings - See {@link Sprite}
+   * @param settings.image - the image to use for the sprite
    * @example
    * // create a basic GUI Object
    * class myButton extends UISpriteElement {
@@ -28975,7 +30366,7 @@ var UISpriteElement = class extends Sprite {
         timer_default.clearTimer(this.holdTimeout);
         this.holdTimeout = timer_default.setTimeout(
           () => {
-            return this.hold();
+            this.hold();
           },
           this.holdThreshold,
           false
@@ -28987,9 +30378,11 @@ var UISpriteElement = class extends Sprite {
   }
   /**
    * function called when the object is pressed (to be extended)
-   * @returns {boolean} return false if we need to stop propagating the event
+   * @param _event - the event object
+   * @returns return false if we need to stop propagating the event
    */
-  onClick() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onClick(_event) {
     return false;
   }
   /**
@@ -28999,13 +30392,14 @@ var UISpriteElement = class extends Sprite {
   enter(event) {
     this.hover = true;
     this.isDirty = true;
-    return this.onOver(event);
+    this.onOver(event);
   }
   /**
    * function called when the pointer is over the object
-   * @param {Pointer} event - the event object
+   * @param _event - the event object
    */
-  onOver() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onOver(_event) {
   }
   /**
    * function callback for the pointerLeave event
@@ -29015,20 +30409,21 @@ var UISpriteElement = class extends Sprite {
     this.hover = false;
     this.isDirty = true;
     this.release(event);
-    return this.onOut(event);
+    this.onOut(event);
   }
   /**
    * function called when the pointer is leaving the object area
-   * @param {Pointer} event - the event object
+   * @param _event - the event object
    */
-  onOut() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onOut(_event) {
   }
   /**
    * function callback for the pointerup event
    * @ignore
    */
   release(event) {
-    if (this.released === false) {
+    if (!this.released) {
       this.released = true;
       this.isDirty = true;
       timer_default.clearTimer(this.holdTimeout);
@@ -29038,9 +30433,11 @@ var UISpriteElement = class extends Sprite {
   }
   /**
    * function called when the object is pressed and released (to be extended)
-   * @returns {boolean} return false if we need to stop propagating the event
+   * @param _event - the event object
+   * @returns return false if we need to stop propagating the event
    */
-  onRelease() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onRelease(_event) {
     return false;
   }
   /**
@@ -29076,10 +30473,10 @@ var UISpriteElement = class extends Sprite {
       return this.release(e);
     });
     registerPointerEvent("pointerenter", this, (e) => {
-      return this.enter(e);
+      this.enter(e);
     });
     registerPointerEvent("pointerleave", this, (e) => {
-      return this.leave(e);
+      this.leave(e);
     });
   }
   /**
@@ -29097,28 +30494,56 @@ var UISpriteElement = class extends Sprite {
   }
 };
 
-// src/renderable/ui/uitextbutton.js
+// src/renderable/ui/uitextbutton.ts
 var UITextButton = class extends UIBaseElement {
+  /**
+   * The key to bind the action to
+   */
+  bindKey;
+  /**
+   * The css value of a color to be used if the pointer is not hovering over the button
+   */
+  hoverOffColor;
+  /**
+   * The css value of a color to be used if the pointer hovers over the button
+   */
+  hoverOnColor;
+  /**
+   * The css value of a color to be used to draw the border
+   */
+  borderStrokeColor;
+  /**
+   * Set the default text alignment (or justification),<br>
+   * possible values are "left", "right", and "center".
+   * @default "center"
+   */
+  textAlign;
+  /**
+   * Set the text baseline (e.g. the Y-coordinate for the draw operation), <br>
+   * possible values are "top", "hanging", "middle", "alphabetic", "ideographic", "bottom"<br>
+   * @default "middle"
+   */
+  textBaseline;
+  /**
+   * the bitmapText used by the UITextButton class
+   */
+  bitmapText;
+  /**
+   * the measured text dimensions
+   */
+  dimensions;
+  /**
+   * the round rect border
+   */
+  border;
   /**
    * A Bitmap Text Button with an outlined background border, filled with background color.
    * It uses a RoundRect as background and changes the background color on hovering over.
    * The background will be drawn with 0.5 opacity, so that the background of the button is
    * slightly shining through.
-   * @param {number} x - x pos of the button
-   * @param {number} y - y pos of the button
-   * @param {Object} settings - settings object
-   * @param {string} [settings.font] - The name of the BitmapText font to use
-   * @param {number} [settings.size=1] - The scale factor of the BitmapText
-   * @param {string} [settings.text] - The text to display
-   * @param {string} [settings.bindKey] - The key to bind the action to (default: none)
-   * @param {string} [settings.hoverOffColor="#00aa0080"] - The css value of a color to be used if the pointer is not hovering over the button
-   * @param {string} [settings.hoverOnColor="#00ff00ff"] - The css value of a color to be used if the pointer hovers over the button
-   * @param {string} [settings.borderStrokeColor="#000000"] - The css value of a color to be used to draw the border
-   * @param {string} [settings.fillStyle] - The css value of a tint color to be used to tint the BitmapText
-   * @param {string} [settings.textAlign="center"] - horizontal text alignment
-   * @param {string} [settings.textBaseline="middle"] - the text baseline
-   * @param {number} [settings.borderWidth] - Width of the button
-   * @param {number} [settings.borderHeight] - Height of the button
+   * @param x - x pos of the button
+   * @param y - y pos of the button
+   * @param settings - settings object
    * @example
    * // Create a new Button
    * class PlayButton extends UITextButton {
@@ -29164,14 +30589,15 @@ var UITextButton = class extends UIBaseElement {
     this.addChild(this.bitmapText);
   }
   draw(renderer2) {
-    if (this.hover === true) {
-      renderer2.setColor(this.hoverOnColor);
+    const r = renderer2;
+    if (this.hover) {
+      r.setColor(this.hoverOnColor);
     } else {
-      renderer2.setColor(this.hoverOffColor);
+      r.setColor(this.hoverOffColor);
     }
-    renderer2.fill(this.border);
-    renderer2.setColor(this.borderStrokeColor);
-    renderer2.stroke(this.border);
+    r.fill(this.border);
+    r.setColor(this.borderStrokeColor);
+    r.stroke(this.border);
     super.draw(renderer2);
   }
 };