melonjs 19.3.0 → 19.4.0

package/build/index.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - 19.3.0
+ * melonJS Game Engine - 19.4.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -6249,6 +6249,7 @@ var defaultApplicationSettings = {
   consoleHeader: true,
   blendMode: "normal",
   physic: "builtin",
+  gpuTilemap: true,
   failIfMajorPerformanceCaveat: true,
   highPrecisionShader: true,
   subPixel: false,
@@ -15792,6 +15793,41 @@ var Renderer = class {
   // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
   drawLight(light) {
   }
+  /**
+   * Draw a TMX tile layer. Default behavior:
+   *   - if `layer.canvasRenderer` is set (preRender bake), blit the cached
+   *     offscreen canvas in a single `drawImage` call;
+   *   - otherwise delegate to the layer's TMX orientation renderer for
+   *     the per-tile loop.
+   *
+   * `WebGLRenderer` overrides this to add the procedural shader fast
+   * path on top (when `layer.renderMode === "shader"`) and fall through
+   * to this base behavior for all other layers.
+   * @param {object} layer - the TMXLayer to draw
+   * @param {Rect} rect - the visible region in world coords
+   */
+  drawTileLayer(layer, rect) {
+    if (layer.canvasRenderer) {
+      const width = Math.min(rect.width, layer.width - rect.pos.x);
+      const height = Math.min(rect.height, layer.height - rect.pos.y);
+      if (width <= 0 || height <= 0) {
+        return;
+      }
+      this.drawImage(
+        layer.canvasRenderer.getCanvas(),
+        rect.pos.x,
+        rect.pos.y,
+        width,
+        height,
+        rect.pos.x,
+        rect.pos.y,
+        width,
+        height
+      );
+      return;
+    }
+    layer.getRenderer().drawTileLayer(this, layer, rect);
+  }
   /**
    * Set the current fill & stroke style color.
    * By default, or upon reset, the value is set to #000000.
@@ -16890,14 +16926,6 @@ var TextureCache = class {
    * cache the textureAltas for the given image
    */
   set(image, textureAtlas) {
-    const width = image.width || image.videoWidth;
-    const height = image.height || image.videoHeight;
-    if (this.renderer.WebGLVersion === 1 && (!isPowerOfTwo(width) || !isPowerOfTwo(height))) {
-      const src = typeof image.src !== "undefined" ? image.src : image;
-      console.warn(
-        "[Texture] " + src + " is not a POT texture (" + width + "x" + height + ")"
-      );
-    }
     return this.cache.put(image, textureAtlas);
   }
   /**
@@ -18073,6 +18101,30 @@ var CanvasRenderer = class extends Renderer {
 };
 
 // src/level/tiled/TMXTile.js
+var FLIP_H_BIT = 1 << 0;
+var FLIP_V_BIT = 1 << 1;
+var FLIP_AD_BIT = 1 << 2;
+function buildFlipTransform(transform, flipMask, width, height) {
+  const halfW = width / 2;
+  const halfH = height / 2;
+  const flippedH = (flipMask & FLIP_H_BIT) !== 0;
+  const flippedV = (flipMask & FLIP_V_BIT) !== 0;
+  const flippedAD = (flipMask & FLIP_AD_BIT) !== 0;
+  transform.identity();
+  transform.translate(halfW, halfH);
+  if (flippedAD) {
+    transform.rotate(degToRad(-90));
+    transform.scale(-1, 1);
+  }
+  if (flippedH) {
+    transform.scale(flippedAD ? 1 : -1, flippedAD ? -1 : 1);
+  }
+  if (flippedV) {
+    transform.scale(flippedAD ? -1 : 1, flippedAD ? 1 : -1);
+  }
+  transform.translate(-halfW, -halfH);
+  return transform;
+}
 var Tile = class extends Bounds {
   /**
    * @param {number} x - x index of the Tile in the map
@@ -18623,12 +18675,17 @@ function applyTMXProperties(obj, data2) {
 }
 
 // src/level/tiled/TMXLayer.js
-function initArray(rows, cols) {
-  const array = new Array(cols);
-  for (let col = 0; col < cols; col++) {
-    array[col] = new Array(rows).fill(null);
-  }
-  return array;
+var FLIP_H_BIT2 = 1 << 0;
+var FLIP_V_BIT2 = 1 << 1;
+var FLIP_AD_BIT2 = 1 << 2;
+function flipMaskFromGid(gid) {
+  return (gid & TMX_FLIP_H ? FLIP_H_BIT2 : 0) | (gid & TMX_FLIP_V ? FLIP_V_BIT2 : 0) | (gid & TMX_FLIP_AD ? FLIP_AD_BIT2 : 0);
+}
+function flipMaskFromTile(tile) {
+  return (tile.flippedX ? FLIP_H_BIT2 : 0) | (tile.flippedY ? FLIP_V_BIT2 : 0) | (tile.flippedAD ? FLIP_AD_BIT2 : 0);
+}
+function gidWithFlips(gid, flipMask) {
+  return gid | (flipMask & FLIP_H_BIT2 ? TMX_FLIP_H : 0) | (flipMask & FLIP_V_BIT2 ? TMX_FLIP_V : 0) | (flipMask & FLIP_AD_BIT2 ? TMX_FLIP_AD : 0);
 }
 function setLayerData(layer, bounds, data2) {
   let idx = 0;
@@ -18641,18 +18698,30 @@ function setLayerData(layer, bounds, data2) {
     width = bounds.cols;
     height = bounds.rows;
   }
+  const cols = layer.cols;
+  const layerData = layer.layerData;
+  const offsetX = bounds.x;
+  const offsetY = bounds.y;
+  let overflowedGid = 0;
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const gid = data2[idx++];
-      if (gid !== 0) {
-        layer.layerData[x + bounds.x][y + bounds.y] = layer.getTileById(
-          gid,
-          x + bounds.x,
-          y + bounds.y
-        );
+      const rawGid = data2[idx++];
+      if (rawGid !== 0) {
+        const flatIdx = ((y + offsetY) * cols + (x + offsetX)) * 2;
+        const cleanGid = rawGid & TMX_CLEAR_BIT_MASK;
+        if (cleanGid > 65535 && overflowedGid === 0) {
+          overflowedGid = cleanGid;
+        }
+        layerData[flatIdx] = cleanGid;
+        layerData[flatIdx + 1] = flipMaskFromGid(rawGid);
       }
     }
   }
+  if (overflowedGid !== 0) {
+    console.warn(
+      "melonJS: TMX layer contains GID " + overflowedGid + " which exceeds the 16-bit cell capacity (max 65535). Tiles will be truncated and render incorrectly."
+    );
+  }
 }
 var TMXLayer = class extends Renderable {
   /**
@@ -18712,7 +18781,10 @@ var TMXLayer = class extends Renderable {
     }
     applyTMXProperties(this, data2);
     this.setRenderer(map.getRenderer());
-    this.layerData = initArray(this.rows, this.cols);
+    this.layerData = new Uint16Array(this.cols * this.rows * 2);
+    this.cachedTile = null;
+    this.dataVersion = 0;
+    this.renderMode = "auto";
     if (map.infinite === 0) {
       setLayerData(
         this,
@@ -18742,12 +18814,8 @@ var TMXLayer = class extends Renderable {
       }
     }
     this.isAnimated = this.animatedTilesets.length > 0;
-    if (typeof this.preRender === "undefined" && this.isAnimated === false) {
-      this.preRender = this.ancestor.getRootAncestor().preRender;
-    } else {
-      this.preRender = false;
-    }
-    if (this.preRender === true && !this.canvasRenderer) {
+    this._resolveRenderMode();
+    if (this.renderMode === "prerender" && !this.canvasRenderer) {
       this.canvasRenderer = new CanvasRenderer({
         canvas: createCanvas(this.width, this.height),
         width: this.width,
@@ -18756,8 +18824,109 @@ var TMXLayer = class extends Renderable {
       });
       this.getRenderer().drawTileLayer(this.canvasRenderer, this, this);
     }
+    this.preRender = this.renderMode === "prerender";
     this.isDirty = true;
   }
+  /**
+   * Resolve `this.renderMode` to one of "shader" / "prerender" / "perTile"
+   * based on eligibility checks and user/world hints. Emits a single
+   * `console.warn` at activation when a forced mode is ineligible, or
+   * when an auto-eligible mode falls back due to a layer feature the GPU
+   * path doesn't support (orientation, collection-of-image tileset, etc.).
+   * @ignore
+   */
+  _resolveRenderMode() {
+    const root = this.ancestor?.getRootAncestor?.();
+    const renderer2 = this.parentApp?.renderer;
+    const gpuAllowed = root?.gpuTilemap !== false;
+    const preRenderHint = typeof this.preRender === "boolean" ? this.preRender : root?.preRender;
+    const elig = this._checkShaderEligibility(renderer2, gpuAllowed);
+    const requested = this.renderMode;
+    if (requested === "shader") {
+      if (elig.ok) {
+        return;
+      }
+      console.warn(
+        `melonJS: layer "${this.name}" forced renderMode "shader" not available (${elig.reason}) \u2014 falling back to perTile`
+      );
+      this.renderMode = "perTile";
+      return;
+    }
+    if (requested === "prerender") {
+      if (this.isAnimated) {
+        console.warn(
+          `melonJS: layer "${this.name}" forced renderMode "prerender" disabled (layer has animated tiles) \u2014 falling back to perTile`
+        );
+        this.renderMode = "perTile";
+      }
+      return;
+    }
+    if (requested === "perTile") {
+      return;
+    }
+    if (elig.ok) {
+      this.renderMode = "shader";
+      return;
+    }
+    if (gpuAllowed && elig.reason !== "no-webgl2-renderer") {
+      console.warn(
+        `melonJS: layer "${this.name}" using legacy tile renderer (${elig.reason})`
+      );
+    }
+    if (preRenderHint && !this.isAnimated) {
+      this.renderMode = "prerender";
+      return;
+    }
+    this.renderMode = "perTile";
+  }
+  /**
+   * Check whether this layer is eligible for the WebGL2 shader path.
+   * @param {object} renderer
+   * @param {boolean} gpuAllowed - whether `gpuTilemap` is enabled at the world level
+   * @returns {{ok: boolean, reason?: string}}
+   * @ignore
+   */
+  _checkShaderEligibility(renderer2, gpuAllowed) {
+    if (!gpuAllowed) {
+      return { ok: false, reason: "gpuTilemap disabled" };
+    }
+    if (!renderer2 || renderer2.WebGLVersion !== 2) {
+      return { ok: false, reason: "no-webgl2-renderer" };
+    }
+    if (this.orientation !== "orthogonal") {
+      return {
+        ok: false,
+        reason: `no gpu renderer supported yet for "${this.orientation}" orientation`
+      };
+    }
+    if (!this.tilesets || this.tilesets.tilesets.length === 0) {
+      return { ok: false, reason: "no tilesets" };
+    }
+    const MAX_OVERFLOW_CELLS = 4;
+    for (const ts of this.tilesets.tilesets) {
+      if (ts.isCollection) {
+        return { ok: false, reason: "collection-of-image tileset" };
+      }
+      if (ts.tilerendersize !== "tile") {
+        return {
+          ok: false,
+          reason: `tilerendersize "${ts.tilerendersize}" not supported`
+        };
+      }
+      if (ts.tileoffset.x !== 0 || ts.tileoffset.y !== 0) {
+        return { ok: false, reason: "non-zero tileoffset" };
+      }
+      const overflowX = Math.ceil(ts.tilewidth / this.tilewidth) - 1;
+      const overflowY = Math.ceil(ts.tileheight / this.tileheight) - 1;
+      if (overflowX > MAX_OVERFLOW_CELLS || overflowY > MAX_OVERFLOW_CELLS) {
+        return {
+          ok: false,
+          reason: `tile overflow exceeds shader limit (${MAX_OVERFLOW_CELLS} cells)`
+        };
+      }
+    }
+    return { ok: true };
+  }
   // called when the layer is removed from the game world or a container
   onDeactivateEvent() {
     this.animatedTilesets = void 0;
@@ -18818,12 +18987,29 @@ var TMXLayer = class extends Renderable {
   /**
    * assign the given Tile object to the specified position
    * @param {Tile} tile - the tile object to be assigned
-   * @param {number} x - x coordinate (in world/pixels coordinates)
-   * @param {number} y - y coordinate (in world/pixels coordinates)
+   * @param {number} x - x coordinate (in tile/column coordinates)
+   * @param {number} y - y coordinate (in tile/row coordinates)
    * @returns {Tile} the tile object
    */
   setTile(tile, x, y) {
-    this.layerData[x][y] = tile;
+    if (x < 0 || x >= this.cols || y < 0 || y >= this.rows) {
+      return tile;
+    }
+    const slot = y * this.cols + x;
+    const idx = slot * 2;
+    const cleanGid = tile.tileId & TMX_CLEAR_BIT_MASK;
+    if (cleanGid > 65535 && !this._truncationWarned) {
+      this._truncationWarned = true;
+      console.warn(
+        "melonJS: setTile received GID " + cleanGid + " which exceeds the 16-bit cell capacity (max 65535). Tile will be truncated and render incorrectly."
+      );
+    }
+    this.layerData[idx] = cleanGid;
+    this.layerData[idx + 1] = flipMaskFromTile(tile);
+    if (this.cachedTile !== null) {
+      this.cachedTile[slot] = tile;
+    }
+    this.dataVersion++;
     this.isDirty = true;
     return tile;
   }
@@ -18853,12 +19039,27 @@ var TMXLayer = class extends Renderable {
   cellAt(x, y, boundsCheck) {
     const _x = ~~x;
     const _y = ~~y;
-    const renderer2 = this.getRenderer();
-    if (boundsCheck === false || _x >= 0 && _x < renderer2.cols && _y >= 0 && _y < renderer2.rows) {
-      return this.layerData[_x][_y];
-    } else {
+    if (boundsCheck !== false && (_x < 0 || _x >= this.cols || _y < 0 || _y >= this.rows)) {
+      return null;
+    }
+    const slot = _y * this.cols + _x;
+    const idx = slot * 2;
+    const gid = this.layerData[idx];
+    if (!gid) {
       return null;
     }
+    if (this.cachedTile === null) {
+      this.cachedTile = new Array(this.cols * this.rows).fill(null);
+    } else {
+      const cached = this.cachedTile[slot];
+      if (cached !== null) {
+        return cached;
+      }
+    }
+    const flipMask = this.layerData[idx + 1];
+    const tile = this.getTileById(gidWithFlips(gid, flipMask), _x, _y);
+    this.cachedTile[slot] = tile;
+    return tile;
   }
   /**
    * clear the tile at the specified position
@@ -18871,7 +19072,16 @@ var TMXLayer = class extends Renderable {
    * });
    */
   clearTile(x, y) {
-    this.layerData[x][y] = null;
+    if (x < 0 || x >= this.cols || y < 0 || y >= this.rows) {
+      return;
+    }
+    const slot = y * this.cols + x;
+    const idx = slot * 2;
+    this.layerData[idx] = 0;
+    this.layerData[idx + 1] = 0;
+    if (this.cachedTile !== null) {
+      this.cachedTile[slot] = null;
+    }
     if (this.preRender) {
       this.canvasRenderer.clearRect(
         x * this.tilewidth,
@@ -18880,6 +19090,7 @@ var TMXLayer = class extends Renderable {
         this.tileheight
       );
     }
+    this.dataVersion++;
     this.isDirty = true;
   }
   /**
@@ -18900,27 +19111,7 @@ var TMXLayer = class extends Renderable {
    * @ignore
    */
   draw(renderer2, rect) {
-    if (this.preRender) {
-      const width = Math.min(rect.width, this.width);
-      const height = Math.min(rect.height, this.height);
-      renderer2.drawImage(
-        this.canvasRenderer.getCanvas(),
-        rect.pos.x,
-        rect.pos.y,
-        // sx,sy
-        width,
-        height,
-        // sw,sh
-        rect.pos.x,
-        rect.pos.y,
-        // dx,dy
-        width,
-        height
-        // dw,dh
-      );
-    } else {
-      this.getRenderer().drawTileLayer(renderer2, this, rect);
-    }
+    renderer2.drawTileLayer(this, rect);
   }
 };
 
@@ -19284,7 +19475,7 @@ var TMXHexagonalRenderer = class extends TMXRenderer {
     return ret;
   }
   /**
-   * draw the tile map
+   * draw the tile map (legacy entry point — accepts a fully-constructed Tile)
    * @ignore
    */
   drawTile(renderer2, x, y, tmxTile) {
@@ -19298,12 +19489,27 @@ var TMXHexagonalRenderer = class extends TMXRenderer {
     );
     vector2dPool.release(point);
   }
+  /**
+   * draw a tile from raw (gid, flipMask, tileset) data — used by the hot
+   * rendering loop to bypass Tile construction
+   * @ignore
+   */
+  drawTileRaw(renderer2, x, y, gid, flipMask, tileset) {
+    const point = this.tileToPixelCoords(x, y, vector2dPool.get());
+    tileset.drawTileRaw(
+      renderer2,
+      tileset.tileoffset.x + point.x,
+      tileset.tileoffset.y + point.y + (this.tileheight - tileset.tileheight),
+      gid,
+      flipMask
+    );
+    vector2dPool.release(point);
+  }
   /**
    * draw the tile map
    * @ignore
    */
   drawTileLayer(renderer2, layer, rect) {
-    let tile;
     const startTile = this.pixelToTileCoords(
       rect.pos.x,
       rect.pos.y,
@@ -19327,6 +19533,15 @@ var TMXHexagonalRenderer = class extends TMXRenderer {
     }
     const endX = layer.cols;
     const endY = layer.rows;
+    const layerCols = layer.cols;
+    const data2 = layer.layerData;
+    const tilesets = layer.tilesets;
+    let tilesetCache = layer.tileset;
+    if (tilesetCache === null) {
+      vector2dPool.release(startTile);
+      vector2dPool.release(startPos);
+      return;
+    }
     if (this.staggerX) {
       startTile.x = Math.max(0, startTile.x);
       startTile.y = Math.max(0, startTile.y);
@@ -19340,9 +19555,22 @@ var TMXHexagonalRenderer = class extends TMXRenderer {
         rowTile.setV(startTile);
         rowPos.setV(startPos);
         for (; rowPos.x < rect.right && rowTile.x < endX; rowTile.x += 2) {
-          tile = layer.cellAt(rowTile.x, rowTile.y, false);
-          if (tile) {
-            tile.tileset.drawTile(renderer2, rowPos.x, rowPos.y, tile);
+          if (rowTile.x >= 0 && rowTile.y >= 0 && rowTile.y < layer.rows) {
+            const idx = (rowTile.y * layerCols + rowTile.x) * 2;
+            const gid = data2[idx];
+            if (gid) {
+              const flipMask = data2[idx + 1];
+              if (!tilesetCache.contains(gid)) {
+                tilesetCache = tilesets.getTilesetByGid(gid);
+              }
+              tilesetCache.drawTileRaw(
+                renderer2,
+                rowPos.x,
+                rowPos.y,
+                gid,
+                flipMask
+              );
+            }
           }
           rowPos.x += this.tilewidth + this.sidelengthx;
         }
@@ -19378,9 +19606,22 @@ var TMXHexagonalRenderer = class extends TMXRenderer {
           rowPos.x += this.columnwidth;
         }
         for (; rowPos.x < rect.right && rowTile.x < endX; rowTile.x++) {
-          tile = layer.cellAt(rowTile.x, rowTile.y, false);
-          if (tile) {
-            tile.tileset.drawTile(renderer2, rowPos.x, rowPos.y, tile);
+          if (rowTile.x >= 0 && rowTile.y >= 0 && rowTile.y < layer.rows) {
+            const idx = (rowTile.y * layerCols + rowTile.x) * 2;
+            const gid = data2[idx];
+            if (gid) {
+              const flipMask = data2[idx + 1];
+              if (!tilesetCache.contains(gid)) {
+                tilesetCache = tilesets.getTilesetByGid(gid);
+              }
+              tilesetCache.drawTileRaw(
+                renderer2,
+                rowPos.x,
+                rowPos.y,
+                gid,
+                flipMask
+              );
+            }
           }
           rowPos.x += this.tilewidth + this.sidelengthx;
         }
@@ -19463,7 +19704,7 @@ var TMXIsometricRenderer = class extends TMXRenderer {
     vector2dPool.release(isoPos);
   }
   /**
-   * draw the tile map
+   * draw the tile map (legacy entry point — accepts a fully-constructed Tile)
    * @ignore
    */
   drawTile(renderer2, x, y, tmxTile) {
@@ -19475,6 +19716,20 @@ var TMXIsometricRenderer = class extends TMXRenderer {
       tmxTile
     );
   }
+  /**
+   * draw a tile from raw (gid, flipMask, tileset) data — used by the hot
+   * rendering loop to bypass Tile construction
+   * @ignore
+   */
+  drawTileRaw(renderer2, x, y, gid, flipMask, tileset) {
+    tileset.drawTileRaw(
+      renderer2,
+      (this.cols - 1) * tileset.tilewidth + (x - y) * tileset.tilewidth >> 1,
+      -tileset.tilewidth + (x + y) * tileset.tileheight >> 2,
+      gid,
+      flipMask
+    );
+  }
   /**
    * draw the tile map
    * @ignore
@@ -19517,19 +19772,41 @@ var TMXIsometricRenderer = class extends TMXRenderer {
     }
     let shifted = inUpperHalf ^ inLeftHalf;
     const columnItr = vector2dPool.get().setV(rowItr);
+    const layerCols = layer.cols;
+    const layerRows = layer.rows;
+    const data2 = layer.layerData;
+    const tilesets = layer.tilesets;
+    let tilesetCache = tileset;
+    if (tilesetCache === null) {
+      vector2dPool.release(columnItr);
+      vector2dPool.release(rowItr);
+      vector2dPool.release(tileEnd);
+      vector2dPool.release(rectEnd);
+      vector2dPool.release(startPos);
+      return;
+    }
     for (let y = startPos.y * 2; y - this.tileheight * 2 < rectEnd.y * 2; y += this.tileheight) {
       columnItr.setV(rowItr);
       for (let x = startPos.x; x < rectEnd.x; x += this.tilewidth) {
-        const tmxTile = layer.cellAt(columnItr.x, columnItr.y);
-        if (tmxTile) {
-          tileset = tmxTile.tileset;
-          const offset = tileset.tileoffset;
-          tileset.drawTile(
-            renderer2,
-            offset.x + x,
-            offset.y + y / 2 - tileset.tileheight,
-            tmxTile
-          );
+        const cx = columnItr.x;
+        const cy = columnItr.y;
+        if (cx >= 0 && cx < layerCols && cy >= 0 && cy < layerRows) {
+          const idx = (cy * layerCols + cx) * 2;
+          const gid = data2[idx];
+          if (gid !== 0) {
+            const flipMask = data2[idx + 1];
+            if (!tilesetCache.contains(gid)) {
+              tilesetCache = tilesets.getTilesetByGid(gid);
+            }
+            const offset = tilesetCache.tileoffset;
+            tilesetCache.drawTileRaw(
+              renderer2,
+              offset.x + x,
+              offset.y + y / 2 - tilesetCache.tileheight,
+              gid,
+              flipMask
+            );
+          }
         }
         columnItr.x++;
         columnItr.y--;
@@ -19584,7 +19861,7 @@ var TMXOrthogonalRenderer = class extends TMXRenderer {
     return ret.set(x * this.tilewidth, y * this.tileheight);
   }
   /**
-   * draw the tile map
+   * draw the tile map (legacy entry point — accepts a fully-constructed Tile)
    * @ignore
    */
   drawTile(renderer2, x, y, tmxTile) {
@@ -19596,6 +19873,20 @@ var TMXOrthogonalRenderer = class extends TMXRenderer {
       tmxTile
     );
   }
+  /**
+   * draw a tile from raw (gid, flipMask, tileset) data — used by the hot
+   * rendering loop to bypass Tile construction
+   * @ignore
+   */
+  drawTileRaw(renderer2, x, y, gid, flipMask, tileset) {
+    tileset.drawTileRaw(
+      renderer2,
+      tileset.tileoffset.x + x * this.tilewidth,
+      tileset.tileoffset.y + (y + 1) * this.tileheight - tileset.tileheight,
+      gid,
+      flipMask
+    );
+  }
   /**
    * draw the tile map
    * @ignore
@@ -19633,12 +19924,27 @@ var TMXOrthogonalRenderer = class extends TMXRenderer {
       default:
         break;
     }
+    const cols = layer.cols;
+    const data2 = layer.layerData;
+    const tilesets = layer.tilesets;
+    let tilesetCache = layer.tileset;
+    if (tilesetCache === null) {
+      vector2dPool.release(start);
+      vector2dPool.release(end);
+      return;
+    }
     for (let y = start.y; y !== end.y; y += incY) {
       for (let x = start.x; x !== end.x; x += incX) {
-        const tmxTile = layer.cellAt(x, y, false);
-        if (tmxTile) {
-          this.drawTile(renderer2, x, y, tmxTile);
+        const idx = (y * cols + x) * 2;
+        const gid = data2[idx];
+        if (!gid) {
+          continue;
         }
+        const flipMask = data2[idx + 1];
+        if (!tilesetCache.contains(gid)) {
+          tilesetCache = tilesets.getTilesetByGid(gid);
+        }
+        this.drawTileRaw(renderer2, x, y, gid, flipMask, tilesetCache);
       }
     }
     vector2dPool.release(start);
@@ -19707,7 +20013,7 @@ var TMXObliqueRenderer = class extends TMXOrthogonalRenderer {
     return ret.set(px + this.shearX * py, this.shearY * px + py);
   }
   /**
-   * draw the tile map
+   * draw the tile map (legacy entry point — accepts a fully-constructed Tile)
    * @ignore
    */
   drawTile(renderer2, x, y, tmxTile) {
@@ -19716,6 +20022,16 @@ var TMXObliqueRenderer = class extends TMXOrthogonalRenderer {
     const dy = tileset.tileoffset.y + (y + 1) * this.tileheight - tileset.tileheight + this.skewY * x;
     tileset.drawTile(renderer2, dx, dy, tmxTile);
   }
+  /**
+   * draw a tile from raw (gid, flipMask, tileset) data — used by the hot
+   * rendering loop to bypass Tile construction
+   * @ignore
+   */
+  drawTileRaw(renderer2, x, y, gid, flipMask, 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.drawTileRaw(renderer2, dx, dy, gid, flipMask);
+  }
   /**
    * draw the given TMX Layer for the given area
    * @ignore
@@ -19786,12 +20102,25 @@ var TMXObliqueRenderer = class extends TMXOrthogonalRenderer {
       default:
         break;
     }
+    const cols = layer.cols;
+    const data2 = layer.layerData;
+    const tilesets = layer.tilesets;
+    let tilesetCache = layer.tileset;
+    if (tilesetCache === null) {
+      return;
+    }
     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);
+        const idx = (y * cols + x) * 2;
+        const gid = data2[idx];
+        if (!gid) {
+          continue;
+        }
+        const flipMask = data2[idx + 1];
+        if (!tilesetCache.contains(gid)) {
+          tilesetCache = tilesets.getTilesetByGid(gid);
         }
+        this.drawTileRaw(renderer2, x, y, gid, flipMask, tilesetCache);
       }
     }
   }
@@ -20147,6 +20476,7 @@ var TMXGroup = class {
 };
 
 // src/level/tiled/TMXTileset.js
+var SCRATCH_MATRIX = new Matrix2d();
 var TMXTileset = class {
   /**
    *  @param {object} tileset - tileset data in JSON format ({@link http://docs.mapeditor.org/en/stable/reference/tmx-map-format/#tileset})
@@ -20477,6 +20807,96 @@ var TMXTileset = class {
       renderer2.restore();
     }
   }
+  /**
+   * draw a tile at the specified position from raw (gid, flipMask) data
+   *
+   * Like {@link drawTile} but bypasses the {@link Tile} object entirely:
+   * the renderer hot loop can pass the GID and flip mask straight from
+   * `layer.layerData` without ever allocating a Tile instance.
+   *
+   * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
+   * @param {number} dx - destination x position
+   * @param {number} dy - destination y position
+   * @param {number} gid - the tile's global id (with flip bits already stripped)
+   * @param {number} flipMask - 3-bit packed flip mask (H=1, V=2, AD=4)
+   * @ignore
+   */
+  drawTileRaw(renderer2, dx, dy, gid, flipMask) {
+    let dw, dh;
+    let tileImage;
+    if (this.isCollection) {
+      tileImage = this.imageCollection.get(gid);
+      const tileWidth = tileImage.width;
+      const tileHeight = tileImage.height;
+      if (this.tilerendersize === "grid") {
+        let scaleX = this.mapTilewidth / tileWidth;
+        let scaleY = this.mapTileheight / tileHeight;
+        if (this.fillmode === "preserve-aspect-fit") {
+          const scale2 = Math.min(scaleX, scaleY);
+          scaleX = scale2;
+          scaleY = scale2;
+        }
+        dw = tileWidth * scaleX;
+        dh = tileHeight * scaleY;
+        dy += this.tileheight - dh;
+        if (this.fillmode === "preserve-aspect-fit") {
+          dx += (this.mapTilewidth - dw) / 2;
+          dy -= (this.mapTileheight - dh) / 2;
+        }
+      } else {
+        dw = tileWidth;
+        dh = tileHeight;
+      }
+    } else {
+      dw = this._renderDw;
+      dh = this._renderDh;
+      dy += this._renderDyOffset;
+      dx += this._renderDxCenter;
+      dy += this._renderDyCenter;
+    }
+    if (flipMask !== 0) {
+      renderer2.save();
+      renderer2.translate(dx, dy);
+      renderer2.transform(
+        buildFlipTransform(
+          SCRATCH_MATRIX,
+          flipMask,
+          this.isCollection ? tileImage.width : this.tilewidth,
+          this.isCollection ? tileImage.height : this.tileheight
+        )
+      );
+      dx = dy = 0;
+    }
+    if (this.isCollection) {
+      renderer2.drawImage(
+        tileImage,
+        0,
+        0,
+        tileImage.width,
+        tileImage.height,
+        dx,
+        dy,
+        dw,
+        dh
+      );
+    } else {
+      const offset = this.atlas[this.getViewTileId(gid)].offset;
+      renderer2.drawImage(
+        this.image,
+        offset.x,
+        offset.y,
+        this.tilewidth,
+        this.tileheight,
+        dx,
+        dy,
+        dw + renderer2.uvOffset,
+        dh + renderer2.uvOffset
+      );
+    }
+    if (flipMask !== 0) {
+      renderer2.restore();
+    }
+  }
 };
 
 // src/level/tiled/TMXTilesetGroup.js
@@ -20595,6 +21015,14 @@ function readTileset(data2, mapTilewidth, mapTileheight) {
 function readObjectGroup(map, data2, z) {
   return new TMXGroup(map, data2, z);
 }
+function refreshAbsoluteBounds(container) {
+  container.forEach((child) => {
+    child.updateBounds(true);
+    if (child instanceof Container) {
+      refreshAbsoluteBounds(child);
+    }
+  });
+}
 var TMXTileMap = class {
   /**
    * @param {string} levelId - name of TMX map
@@ -20756,12 +21184,12 @@ var TMXTileMap = class {
           Math.max(levelBounds.width, width),
           Math.max(levelBounds.height, height)
         );
-        container.pos.set(
-          Math.max(0, ~~((width - levelBounds.width) / 2)),
-          Math.max(0, ~~((height - levelBounds.height) / 2)),
-          // don't change the container z position if defined
-          container.pos.z
-        );
+        const newX = Math.max(0, ~~((width - levelBounds.width) / 2));
+        const newY = Math.max(0, ~~((height - levelBounds.height) / 2));
+        if (container.pos.x !== newX || container.pos.y !== newY) {
+          container.pos.set(newX, newY, container.pos.z);
+          refreshAbsoluteBounds(container);
+        }
       };
       var _setBounds = _setBounds2;
       const app = container.getRootAncestor().app;
@@ -22401,7 +22829,7 @@ var ColorMatrix = class extends Matrix3d {
 // src/video/webgl/utils/attributes.js
 function extractAttributes(gl, shader) {
   const attributes = {};
-  const attrRx = /attribute\s+\w+\s+(\w+)/g;
+  const attrRx = /(?:^|\n)[ \t]*(?:attribute|in)[ \t]+(?:\w+[ \t]+)+(\w+)/g;
   let match;
   let i = 0;
   while (match = attrRx.exec(shader.vertex)) {
@@ -22412,10 +22840,18 @@ function extractAttributes(gl, shader) {
 
 // src/video/webgl/utils/precision.js
 function setPrecision(src, precision) {
-  if (src.substring(0, 9) !== "precision") {
-    return "precision " + precision + " float;\n" + src;
+  if (/^\s*(?:#version[^\n]*\n)?\s*precision\b/.test(src)) {
+    return src;
   }
-  return src;
+  if (src.substring(0, 8) === "#version") {
+    const inject = "\nprecision " + precision + " float;\nprecision " + precision + " int;";
+    const nl = src.indexOf("\n");
+    if (nl < 0) {
+      return src + inject;
+    }
+    return src.substring(0, nl) + inject + src.substring(nl);
+  }
+  return "precision " + precision + " float;\n" + src;
 }
 function getMaxShaderPrecision(gl, highPrecision = true) {
   if (highPrecision && gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision > 0 && gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT).precision > 0) {
@@ -22481,17 +22917,56 @@ var fnHash = {
   ivec2: "2iv",
   ivec3: "3iv",
   ivec4: "4iv",
+  uvec2: "2uiv",
+  uvec3: "3uiv",
+  uvec4: "4uiv",
   mat2: "Matrix2fv",
   mat3: "Matrix3fv",
   mat4: "Matrix4fv",
-  sampler2D: "1i"
+  sampler2D: "1i",
+  // WebGL2 integer-typed samplers — bound to a unit just like a
+  // `sampler2D`; the GLSL `usampler2D` / `isampler2D` types let the
+  // shader read raw integer values via `texelFetch` instead of the
+  // normalized-float `texture()` path.
+  usampler2D: "1i",
+  isampler2D: "1i"
 };
+function valuesMatch(cached, val) {
+  if (cached === void 0) {
+    return false;
+  }
+  if (val !== null && typeof val === "object" && typeof val.length === "number") {
+    if (cached.length !== val.length) {
+      return false;
+    }
+    for (let i = 0; i < val.length; i++) {
+      if (cached[i] !== val[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return cached === val;
+}
+function captureValue(prev, val) {
+  if (val === null || typeof val !== "object" || typeof val.length !== "number") {
+    return val;
+  }
+  if (prev !== void 0 && typeof prev === "object" && typeof prev.length === "number" && prev.length === val.length) {
+    for (let i = 0; i < val.length; i++) {
+      prev[i] = val[i];
+    }
+    return prev;
+  }
+  return typeof val.slice === "function" ? val.slice() : Array.from(val);
+}
 function extractUniforms(gl, shader) {
   const uniforms = {};
   const uniRx = /uniform\s+(\w+)\s+(\w+)/g;
   const uniformsData = {};
   const descriptor = {};
   const locations = {};
+  const cache2 = {};
   let match;
   [shader.vertex, shader.fragment].forEach((shader2) => {
     while (match = uniRx.exec(shader2)) {
@@ -22510,6 +22985,10 @@ function extractUniforms(gl, shader) {
       set: (function(name2, type2, fn) {
         if (/^mat/.test(type2)) {
           return function(val) {
+            if (valuesMatch(cache2[name2], val)) {
+              return;
+            }
+            cache2[name2] = captureValue(cache2[name2], val);
             gl[fn](locations[name2], false, val);
           };
         } else {
@@ -22518,6 +22997,10 @@ function extractUniforms(gl, shader) {
             if (val.length && !/v$/.test(fn)) {
               fnv += "v";
             }
+            if (valuesMatch(cache2[name2], val)) {
+              return;
+            }
+            cache2[name2] = captureValue(cache2[name2], val);
             gl[fnv](locations[name2], val);
           };
         }
@@ -27168,13 +27651,9 @@ var ImageLayer = class extends Sprite {
     if (this.mask) {
       renderer2.setMask(this.mask);
     }
-    renderer2.drawPattern(
-      this._pattern,
-      0,
-      0,
-      viewport.width * 2,
-      viewport.height * 2
-    );
+    const drawW = this.repeatX ? viewport.width * 2 : width;
+    const drawH = this.repeatY ? viewport.height * 2 : height;
+    renderer2.drawPattern(this._pattern, 0, 0, drawW, drawH);
   }
   // called when the layer is removed from the game world or a container
   onDeactivateEvent() {
@@ -27812,7 +28291,7 @@ var Trigger = class extends Renderable {
 };
 
 // src/version.ts
-var version = "19.3.0";
+var version = "19.4.0";
 
 // src/system/bootstrap.ts
 var initialized = false;
@@ -28673,10 +29152,7 @@ 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
           );
@@ -29189,7 +29665,7 @@ function testEllipseEllipse(a, ellipseA, b, ellipseB, response) {
       return testEllipsePolygon(a, ellipseA, b, ellipseB.toPolygon(), response);
     }
   }
-  const differenceV = T_VECTORS[--T_VECTORS_IDX].copy(b.pos).add(b.ancestor.getAbsolutePosition()).add(ellipseB.pos).sub(a.pos).add(a.ancestor.getAbsolutePosition()).sub(ellipseA.pos);
+  const differenceV = T_VECTORS[--T_VECTORS_IDX].copy(b.pos).add(b.ancestor.getAbsolutePosition()).add(ellipseB.pos).sub(a.pos).sub(a.ancestor.getAbsolutePosition()).sub(ellipseA.pos);
   const radiusA = ellipseA.radius;
   const radiusB = ellipseB.radius;
   const totalRadius = radiusA + radiusB;
@@ -29216,7 +29692,7 @@ function testPolygonEllipse(a, polyA, b, ellipseB, response) {
   if (ellipseB.radiusV.x !== ellipseB.radiusV.y) {
     return testPolygonPolygon(a, polyA, b, ellipseB.toPolygon(), response);
   }
-  const circlePos = T_VECTORS[--T_VECTORS_IDX].copy(b.pos).add(b.ancestor.getAbsolutePosition()).add(ellipseB.pos).sub(a.pos).add(a.ancestor.getAbsolutePosition()).sub(polyA.pos);
+  const circlePos = T_VECTORS[--T_VECTORS_IDX].copy(b.pos).add(b.ancestor.getAbsolutePosition()).add(ellipseB.pos).sub(a.pos).sub(a.ancestor.getAbsolutePosition()).sub(polyA.pos);
   const radius = ellipseB.radius;
   const radius2 = radius * radius;
   const points = polyA.points;
@@ -29842,6 +30318,7 @@ var World = class extends Container {
     this.fps = 60;
     this.gravity = new Vector2d(0, 0.98);
     this.preRender = false;
+    this.gpuTilemap = true;
     this.bodies = /* @__PURE__ */ new Set();
     this.broadphase = new QuadTree(
       this,
@@ -31037,8 +31514,15 @@ var MaterialBatcher = class extends Batcher {
   createTexture2D(unit, pixels = null, filter, repeat = "no-repeat", w = pixels.width, h = pixels.height, premultipliedAlpha = true, mipmap = true, texture, flush = true) {
     const gl = this.gl;
     const isPOT = isPowerOfTwo(w) && isPowerOfTwo(h);
-    const rs = repeat.search(/^repeat(-x)?$/) === 0 && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
-    const rt = repeat.search(/^repeat(-y)?$/) === 0 && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+    const wantsRepeat = repeat !== "no-repeat";
+    const canRepeat = isPOT || this.renderer.WebGLVersion > 1;
+    const rs = repeat.search(/^repeat(-x)?$/) === 0 && canRepeat ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+    const rt = repeat.search(/^repeat(-y)?$/) === 0 && canRepeat ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+    if (wantsRepeat && !canRepeat) {
+      console.warn(
+        "melonJS: repeat wrap (" + repeat + ") requested on a non-power-of-two texture (" + w + "x" + h + ") under WebGL 1 \u2014 downgrading to clamp-to-edge"
+      );
+    }
     let currentTexture = texture;
     if (!currentTexture) {
       currentTexture = gl.createTexture();
@@ -31049,7 +31533,9 @@ var MaterialBatcher = class extends Batcher {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultipliedAlpha);
-    if (pixels !== null && pixels.compressed === true) {
+    if (pixels !== null && typeof pixels.upload === "function") {
+      pixels.upload(gl, gl.TEXTURE_2D);
+    } else if (pixels !== null && pixels.compressed === true) {
       const mipmaps = pixels.mipmaps;
       for (let i = 0; i < mipmaps.length; i++) {
         gl.compressedTexImage2D(
@@ -31110,7 +31596,9 @@ var MaterialBatcher = class extends Batcher {
         pixels
       );
     }
-    if (isPOT && mipmap === true && (pixels === null || pixels.compressed !== true)) {
+    if (isPOT && mipmap === true && pixels !== null && pixels.compressed !== true && typeof pixels.upload !== "function") {
+      gl.generateMipmap(gl.TEXTURE_2D);
+    } else if (pixels === null && isPOT && mipmap === true) {
       gl.generateMipmap(gl.TEXTURE_2D);
     }
     return currentTexture;
@@ -31188,18 +31676,29 @@ var MaterialBatcher = class extends Batcher {
   }
   /**
    * @ignore
+   * @param {TextureAtlas|TextureResource} texture
+   * @param {number} [w] - ignored when the source has its own `width` (the
+   *   common case); kept for the legacy signature where callers passed a
+   *   destination size. Forwarded only as a last-resort default.
+   * @param {number} [h] - same as `w`.
+   * @param {boolean} [force=false]
+   * @param {boolean} [flush=true]
    */
   uploadTexture(texture, w, h, force = false, flush = true) {
     const unit = this.renderer.cache.getUnit(texture);
     const texture2D = this.boundTextures[unit];
     if (typeof texture2D === "undefined" || force) {
+      const filter = typeof texture.filter !== "undefined" ? texture.filter : this.renderer.settings.antiAlias ? this.gl.LINEAR : this.gl.NEAREST;
+      const source = texture.getTexture();
+      const texW = source.width || source.videoWidth || w;
+      const texH = source.height || source.videoHeight || h;
       this.createTexture2D(
         unit,
-        texture.getTexture(),
-        this.renderer.settings.antiAlias ? this.gl.LINEAR : this.gl.NEAREST,
+        source,
+        filter,
         texture.repeat,
-        w,
-        h,
+        texW,
+        texH,
         texture.premultipliedAlpha,
         void 0,
         texture2D,
@@ -32110,6 +32609,395 @@ function packLights(lights, ambient, translateX, translateY, scratch) {
   };
 }
 
+// src/video/texture/resource.js
+var TextureResource = class {
+  /**
+   * @param {object} options
+   * @param {number} options.width   - pixel width of the texture
+   * @param {number} options.height  - pixel height of the texture
+   * @param {boolean} [options.premultipliedAlpha=false]
+   * @param {string}  [options.repeat="no-repeat"] - "no-repeat" | "repeat" | "repeat-x" | "repeat-y"
+   * @param {number}  [options.filter] - `gl.NEAREST` or `gl.LINEAR`; when
+   *   omitted the batcher falls back to the renderer's `antiAlias` setting
+   */
+  constructor({
+    width,
+    height,
+    premultipliedAlpha = false,
+    repeat = "no-repeat",
+    filter
+  } = {}) {
+    this.width = width;
+    this.height = height;
+    this.premultipliedAlpha = premultipliedAlpha;
+    this.repeat = repeat;
+    this.filter = filter;
+    this.sources = /* @__PURE__ */ new Map([["default", this]]);
+    this.activeAtlas = "default";
+  }
+  /**
+   * Returns the upload "source" the batcher hands to `createTexture2D`.
+   * For a resource this is the resource itself — `createTexture2D`
+   * dispatches to `resource.upload(gl, target)`.
+   * @ignore
+   */
+  getTexture() {
+    return this;
+  }
+  /**
+   * Issue the `gl.texImage2D` (or equivalent) call that uploads this
+   * resource's data into the currently-bound `TEXTURE_2D` slot.
+   * Subclasses MUST override.
+   * @abstract
+   * @param {WebGLRenderingContext|WebGL2RenderingContext} gl
+   * @param {number} target - `gl.TEXTURE_2D` (or future cube-map targets)
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  upload(gl, target) {
+    throw new Error("TextureResource subclasses must implement upload()");
+  }
+};
+var BufferTextureResource = class extends TextureResource {
+  /**
+   * @param {ArrayBufferView} data - the pixel data; size must be
+   *   `width * height * 4` bytes for the default RGBA / UNSIGNED_BYTE
+   *   format
+   * @param {object} options
+   * @param {number}  options.width
+   * @param {number}  options.height
+   * @param {boolean} [options.premultipliedAlpha=false]
+   * @param {string}  [options.repeat="no-repeat"]
+   * @param {number}  [options.filter]
+   * @param {"rgba8"|"rgba8ui"} [options.format="rgba8"] - storage format.
+   *   `"rgba8"` (default): normalized RGBA, sampled via `sampler2D` /
+   *   `texture()`. `"rgba8ui"`: unsigned-integer RGBA, sampled via
+   *   `usampler2D` / `texelFetch()` — requires WebGL2. Use the integer
+   *   form for raw-data lookups (GID tables, palette indices, etc.) to
+   *   skip the float-decode round trip and gain exact integer reads.
+   */
+  constructor(data2, options) {
+    super(options);
+    this.data = data2;
+    this.format = options.format || "rgba8";
+  }
+  /** @ignore */
+  upload(gl, target) {
+    if (this.format === "rgba8ui") {
+      if (typeof gl.RGBA8UI === "undefined") {
+        throw new Error(
+          'BufferTextureResource: format "rgba8ui" requires a WebGL 2 context'
+        );
+      }
+      gl.texImage2D(
+        target,
+        0,
+        gl.RGBA8UI,
+        this.width,
+        this.height,
+        0,
+        gl.RGBA_INTEGER,
+        gl.UNSIGNED_BYTE,
+        this.data
+      );
+    } else {
+      gl.texImage2D(
+        target,
+        0,
+        gl.RGBA,
+        this.width,
+        this.height,
+        0,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        this.data
+      );
+    }
+  }
+};
+
+// src/video/webgl/shaders/orthogonal-tmxlayer.frag
+var orthogonal_tmxlayer_default = "#version 300 es\n\n// Fragment shader for the orthogonal TMX layer GPU renderer (WebGL2 /\n// GLSL ES 3.00).\n//\n// Per fragment the shader:\n//   1. recovers the world-pixel position from the host UV,\n//   2. walks candidate cells (geometric cell + cells whose oversized,\n//      bottom-aligned tiles could reach this fragment),\n//   3. fetches GIDs from the per-layer index texture, and\n//   4. samples the tileset atlas at the correct sub-region.\n//\n// Fast path: when the tileset has no oversized tiles (`uOverflow == (0, 0)`)\n// \u2014 the common case for grid-aligned maps \u2014 only the geometric cell can\n// hold this fragment's tile, so we skip the candidate loop entirely and\n// run a single `tryRenderCell` call. The loop branch is on a uniform\n// value, coherent across the wave, and trims 25 worst-case loop\n// iterations + their guard checks to a single inlined function call.\n//\n// Slow path: tiles drawing larger than the cell are bottom-aligned\n// vertically and left-aligned horizontally. Render order is \"right-down\":\n// later cells end up on top, so the candidate loop scans dy high\u2192low,\n// dx low\u2192high and picks the FIRST match.\n//\n// Index texture encoding (`RGBA8`, one cell per texel):\n//   R = GID low byte\n//   G = GID high byte    (combined: R | (G << 8) = 16-bit GID)\n//   B = flip mask        (bit 0 = H, bit 1 = V, bit 2 = AD)\n//   A = unused\n//\n// Animation lookup (`RGBA8`, 1 row, `tileCount` texels wide): per local\n// tile id, the CURRENT frame's local id, same R/G byte-pair encoding.\n//\n// Why `sampler2D` + float decode rather than `usampler2D`: the engine's\n// multi-texture default shader declares `uSampler0..uSamplerN-1` as\n// `sampler2D` \u2014 all of them are active for WebGL's draw-time validation.\n// A `usampler2D`-backed `RGBA8UI` texture cached at any of those units\n// (units 0..15 on a typical 16-unit fragment stage) would mismatch when\n// the default shader next draws sprites, killing every quad with\n// `GL_INVALID_OPERATION`. Staying on regular RGBA8 keeps the cache\n// path coherent \u2014 the cost is one `floor(c * 255 + 0.5)` per fetch.\n//\n// `texelFetch` is still used (vs `texture()`) for byte-exact reads \u2014\n// it bypasses interpolation, so the integer byte values come out\n// unmolested even on a normalized-float sampler.\n\n// The engine's `setPrecision` step injects precision declarations for\n// float and int after the `#version` line, using whatever precision the\n// renderer was configured with (`highPrecisionShader` setting on the\n// Application). Individual shader files don't hardcode precision so the\n// engine-wide preference applies.\n\nin vec2 vRegion;\nin vec4 vColor;\n\nuniform sampler2D uSampler;      // tileset atlas (RGBA)\nuniform sampler2D uTileIndex;    // per-layer GID index (RGBA8)\nuniform sampler2D uAnimLookup;   // per-tileset animation table (RGBA8)\n\nuniform vec2 uMapSize;\nuniform vec2 uCellSize;\nuniform vec2 uTileSize;\nuniform vec2 uOverflow;\nuniform vec2 uTilesetCols;\nuniform vec2 uInvTilesetSize;\nuniform vec4 uTilesetMargin;     // (marginX, marginY, spacingX, spacingY)\nuniform vec2 uGidRange;          // (firstgid, lastgid)\nuniform vec2 uVisibleStart;\nuniform vec2 uVisibleSize;\nuniform int  uAnimSize;          // number of entries in uAnimLookup, 0 if disabled\nuniform float uOpacity;\nuniform vec4 uTint;\n\nout vec4 fragColor;\n\nconst int MAX_OVERFLOW = 4;\n\n// Try to render the tile at cell (cx, cy) for the current fragment.\n// Returns true and writes the sampled color to `outColor` when the cell\n// contains a visible, in-range tile whose pixel covers this fragment.\n// Identical logic for both fast and slow paths \u2014 GLSL inlines this\n// trivially so there's no function-call overhead at runtime.\nbool tryRenderCell(int cx, int cy, vec2 worldPx, out vec4 outColor) {\n	int mapW = int(uMapSize.x);\n	int mapH = int(uMapSize.y);\n	if (cx < 0 || cx >= mapW || cy < 0 || cy >= mapH) {\n		return false;\n	}\n\n	// `texelFetch` skips filtering \u2014 the 8-bit channel values come back\n	// as normalized floats, decoded to byte ints below\n	vec4 cellF = texelFetch(uTileIndex, ivec2(cx, cy), 0);\n	uvec4 cell = uvec4(cellF * 255.0 + 0.5);\n	int firstGid = int(uGidRange.x);\n	int gid = int(cell.r) | (int(cell.g) << 8);\n	if (gid < firstGid || gid > int(uGidRange.y)) {\n		return false;\n	}\n\n	vec2 tileWorldOrigin = vec2(\n		float(cx) * uCellSize.x,\n		(float(cy) + 1.0) * uCellSize.y - uTileSize.y\n	);\n	vec2 inTile = (worldPx - tileWorldOrigin) / uTileSize;\n	if (inTile.x < 0.0 || inTile.x >= 1.0 || inTile.y < 0.0 || inTile.y >= 1.0) {\n		return false;\n	}\n\n	// flip mask + axis-swap trick: see TMX shader-path flip spec.\n	// AD performs a transpose; with AD set, H and V swap their effective\n	// axes (matches the legacy `buildFlipTransform`).\n	int flipMask = int(cell.b);\n	float flipH = float(flipMask & 1);\n	float flipV = float((flipMask >> 1) & 1);\n	float flipAD = float((flipMask >> 2) & 1);\n	inTile = mix(inTile, inTile.yx, flipAD);\n	float effH = mix(flipH, flipV, flipAD);\n	float effV = mix(flipV, flipH, flipAD);\n	inTile.x = mix(inTile.x, 1.0 - inTile.x, effH);\n	inTile.y = mix(inTile.y, 1.0 - inTile.y, effV);\n\n	int localId = gid - firstGid;\n\n	// animation: if the tileset has animated tiles, swap the local id for\n	// its current frame's id via the lookup texture (CPU updates the\n	// lookup in lockstep with `tileset.update(dt)`).\n	if (uAnimSize > 0) {\n		vec4 animF = texelFetch(uAnimLookup, ivec2(localId, 0), 0);\n		uvec4 animTexel = uvec4(animF * 255.0 + 0.5);\n		localId = int(animTexel.r) | (int(animTexel.g) << 8);\n	}\n\n	float row = floor(float(localId) / uTilesetCols.x);\n	float col = float(localId) - row * uTilesetCols.x;\n	vec2 tileOriginPx = uTilesetMargin.xy\n		+ vec2(col, row) * (uTileSize + uTilesetMargin.zw);\n	vec2 texelPx = tileOriginPx + inTile * uTileSize;\n	vec2 texelUV = texelPx * uInvTilesetSize;\n\n	vec4 sampled = texture(uSampler, texelUV);\n	if (sampled.a <= 0.0) {\n		return false;\n	}\n	outColor = sampled;\n	return true;\n}\n\nvoid main(void) {\n	vec2 tileCoord = uVisibleStart + vRegion * uVisibleSize;\n	vec2 geomCell = floor(tileCoord);\n	vec2 worldPx = tileCoord * uCellSize;\n\n	int gx = int(geomCell.x);\n	int gy = int(geomCell.y);\n	int overflowX = int(uOverflow.x + 0.5);\n	int overflowY = int(uOverflow.y + 0.5);\n\n	vec4 result;\n\n	// Fast path: tiles fit the cell exactly (the common case) \u2014 only the\n	// geometric cell can contain this fragment's tile.\n	if (overflowX == 0 && overflowY == 0) {\n		if (!tryRenderCell(gx, gy, worldPx, result)) {\n			discard;\n		}\n		result.a *= uOpacity;\n		fragColor = result * uTint;\n		return;\n	}\n\n	// Slow path: oversized tiles. Walk candidates dy high\u2192low, dx low\u2192high\n	// and pick the FIRST match \u2014 render order is \"right-down\" so later\n	// cells go on top.\n	bool found = false;\n	for (int idy = 0; idy <= MAX_OVERFLOW; idy++) {\n		int dy = MAX_OVERFLOW - idy;\n		if (dy > overflowY) continue;\n		for (int dx = 0; dx <= MAX_OVERFLOW; dx++) {\n			if (dx > overflowX) break;\n			if (tryRenderCell(gx - dx, gy + dy, worldPx, result)) {\n				found = true;\n				break;\n			}\n		}\n		if (found) break;\n	}\n	if (!found) discard;\n	result.a *= uOpacity;\n	fragColor = result * uTint;\n}\n";
+
+// src/video/webgl/shaders/orthogonal-tmxlayer.vert
+var orthogonal_tmxlayer_default2 = '#version 300 es\n\n// Vertex shader for the orthogonal TMX layer GPU renderer.\n//\n// Matches the quad batcher\'s vertex layout (`aVertex`, `aRegion`, `aColor`,\n// `uProjectionMatrix`) so the standard `setBatcher("quad", this.shader)` +\n// `addQuad()` flow drives it like any other quad. Same attribute names,\n// same uniforms \u2014 just expressed in GLSL ES 3.00 (`in`/`out` in place of\n// `attribute`/`varying`) so the program can pair with the 3.00 fragment\n// shader that uses `usampler2D` / `texelFetch` for integer-typed lookups.\n\nin vec2 aVertex;\nin vec2 aRegion;\nin vec4 aColor;\n\nuniform mat4 uProjectionMatrix;\n\nout vec2 vRegion;\nout vec4 vColor;\n\nvoid main(void) {\n	gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);\n	// premultiplied-alpha + bgra \u2192 rgba swap, same convention the batcher\n	// uses for its default sprite shader\n	vColor = vec4(aColor.bgr * aColor.a, aColor.a);\n	vRegion = aRegion;\n}\n';
+
+// src/video/webgl/renderers/tmxlayer/orthogonal.js
+var DEFAULT_TINT = new Float32Array([1, 1, 1, 1]);
+var OrthogonalTMXLayerGPURenderer = class {
+  /**
+   * @param {WebGLRenderer} renderer - the WebGL renderer instance
+   */
+  constructor(renderer2) {
+    this.renderer = renderer2;
+    this.gl = renderer2.gl;
+    this.shader = new GLShader(
+      renderer2.gl,
+      orthogonal_tmxlayer_default2,
+      orthogonal_tmxlayer_default,
+      renderer2.shaderPrecision
+    );
+    this.resources = /* @__PURE__ */ new Map();
+    this.animLookups = /* @__PURE__ */ new Map();
+    this._v2 = new Float32Array(2);
+    this._v4 = new Float32Array(4);
+  }
+  /**
+   * Free every cached per-layer index texture and empty the local
+   * resource map. Called from `WebGLRenderer.reset()` (which
+   * `GAME_RESET` triggers) so each level transition starts clean.
+   * @ignore
+   */
+  reset() {
+    const batcher = this.renderer.currentBatcher;
+    const cache2 = this.renderer.cache;
+    const drop = (resource) => {
+      if (batcher !== void 0) {
+        batcher.deleteTexture2D(resource);
+      } else {
+        cache2.freeTextureUnit(resource);
+        cache2.delete(resource);
+      }
+    };
+    for (const resource of this.resources.values()) {
+      drop(resource);
+    }
+    for (const entry of this.animLookups.values()) {
+      drop(entry.resource);
+    }
+    this.resources.clear();
+    this.animLookups.clear();
+  }
+  /**
+   * Write a `vec2` uniform without allocating a fresh Float32Array per
+   * call. Both components flow into the shared `_v2` scratch buffer,
+   * which `setUniform` reads synchronously and forwards to
+   * `gl.uniform2fv` — so reusing the buffer across calls is safe.
+   * @param {string} name
+   * @param {number} x
+   * @param {number} y
+   * @private
+   */
+  _setV2(name, x, y) {
+    this._v2[0] = x;
+    this._v2[1] = y;
+    this.shader.setUniform(name, this._v2);
+  }
+  /**
+   * `vec4` counterpart to {@link _setV2}.
+   * @param {string} name
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   * @param {number} w
+   * @private
+   */
+  _setV4(name, x, y, z, w) {
+    this._v4[0] = x;
+    this._v4[1] = y;
+    this._v4[2] = z;
+    this._v4[3] = w;
+    this.shader.setUniform(name, this._v4);
+  }
+  /**
+   * Get-or-create the per-tileset animation-lookup entry. Returns
+   * `undefined` for tilesets that have no animated tiles (the shader's
+   * `uAnimEnabled` uniform is then set to 0 and the lookup texture is
+   * not bound).
+   *
+   * The entry holds a `tileCount × 1` RGBA8 `BufferTextureResource`
+   * where texel `localId` encodes the CURRENT frame's local id as
+   * `R = lo byte, G = hi byte` (same encoding as the GID index
+   * texture). Each call walks `tileset.animations` and rewrites
+   * dirty texels — `tileset.update(dt)` (driven by the layer) advances
+   * `anim.cur.tileid` independently of this renderer.
+   *
+   * @param {object} tileset
+   * @param {number} tileCount - tiles in the tileset's atlas grid
+   *   (`atlasCols * atlasRows`)
+   * @returns {{resource: BufferTextureResource, data: Uint8Array,
+   *   tileCount: number, dirty: boolean}|undefined}
+   */
+  _getOrUpdateAnimLookup(tileset, tileCount) {
+    if (!tileset.isAnimated || tileset.animations.size === 0) {
+      return void 0;
+    }
+    let entry = this.animLookups.get(tileset);
+    if (entry === void 0) {
+      const data3 = new Uint8Array(tileCount * 4);
+      for (let id = 0; id < tileCount; id++) {
+        data3[id * 4 + 0] = id & 255;
+        data3[id * 4 + 1] = id >> 8 & 255;
+      }
+      const resource = new BufferTextureResource(data3, {
+        width: tileCount,
+        height: 1,
+        premultipliedAlpha: false,
+        repeat: "no-repeat",
+        // NEAREST so the shader's `texelFetch` reads byte-exact
+        // channel values back as normalized floats
+        filter: this.gl.NEAREST,
+        format: "rgba8"
+      });
+      entry = { resource, data: data3, tileCount, dirty: false };
+      this.animLookups.set(tileset, entry);
+    }
+    const data2 = entry.data;
+    for (const [localId, anim] of tileset.animations) {
+      const off2 = localId * 4;
+      const cur = anim.cur.tileid;
+      const lo = cur & 255;
+      const hi = cur >> 8 & 255;
+      if (data2[off2] !== lo || data2[off2 + 1] !== hi) {
+        data2[off2] = lo;
+        data2[off2 + 1] = hi;
+        entry.dirty = true;
+      }
+    }
+    return entry;
+  }
+  /**
+   * Get-or-create the per-layer index `BufferTextureResource`.
+   * @param {TMXLayer} layer
+   * @returns {BufferTextureResource}
+   */
+  _getResource(layer) {
+    let resource = this.resources.get(layer);
+    if (resource === void 0) {
+      resource = new BufferTextureResource(
+        new Uint8Array(layer.layerData.buffer),
+        {
+          width: layer.cols,
+          height: layer.rows,
+          // raw GID bytes — must NOT have alpha pre-multiplied
+          // into RGB, otherwise A=0 cells wipe their R/G/B
+          premultipliedAlpha: false,
+          repeat: "no-repeat",
+          // NEAREST so `texelFetch` returns the original byte
+          // values (as normalized floats) for the GID/flip
+          // decode below
+          filter: this.gl.NEAREST,
+          format: "rgba8"
+        }
+      );
+      resource._uploadedVersion = -1;
+      this.resources.set(layer, resource);
+    }
+    return resource;
+  }
+  /**
+   * Draw an orthogonal TMX layer through the shader path.
+   * @param {TMXLayer} layer
+   * @param {object} rect - the visible viewport rect (world coords)
+   */
+  draw(layer, rect) {
+    const renderer2 = this.renderer;
+    const tileWidth = layer.tilewidth;
+    const tileHeight = layer.tileheight;
+    const cols = layer.cols;
+    const rows = layer.rows;
+    const startTileX = Math.max(0, Math.floor(rect.pos.x / tileWidth));
+    const startTileY = Math.max(0, Math.floor(rect.pos.y / tileHeight));
+    const endTileX = Math.min(
+      cols,
+      Math.ceil((rect.pos.x + rect.width) / tileWidth)
+    );
+    const endTileY = Math.min(
+      rows,
+      Math.ceil((rect.pos.y + rect.height) / tileHeight)
+    );
+    if (endTileX <= startTileX || endTileY <= startTileY) {
+      return;
+    }
+    const worldX = startTileX * tileWidth;
+    const worldY = startTileY * tileHeight;
+    const worldW = (endTileX - startTileX) * tileWidth;
+    const worldH = (endTileY - startTileY) * tileHeight;
+    const visStartX = startTileX;
+    const visStartY = startTileY;
+    const visSizeX = endTileX - startTileX;
+    const visSizeY = endTileY - startTileY;
+    const batcher = renderer2.setBatcher("quad", this.shader);
+    const resource = this._getResource(layer);
+    const indexUnit = batcher.uploadTexture(
+      resource,
+      cols,
+      rows,
+      resource._uploadedVersion !== layer.dataVersion
+    );
+    resource._uploadedVersion = layer.dataVersion;
+    this.shader.setUniform("uTileIndex", indexUnit);
+    this._setV2("uMapSize", cols, rows);
+    this._setV2("uVisibleStart", visStartX, visStartY);
+    this._setV2("uVisibleSize", visSizeX, visSizeY);
+    this._setV2("uCellSize", tileWidth, tileHeight);
+    this.shader.setUniform("uOpacity", layer.getOpacity());
+    this.shader.setUniform(
+      "uTint",
+      layer.tint ? layer.tint.toArray() : DEFAULT_TINT
+    );
+    const tilesets = layer.tilesets.tilesets;
+    for (let i = 0; i < tilesets.length; i++) {
+      const tileset = tilesets[i];
+      if (tileset.isCollection || tileset.image === void 0) {
+        continue;
+      }
+      const tsW = tileset.tilewidth;
+      const tsH = tileset.tileheight;
+      const margin = tileset.margin;
+      const spacing = tileset.spacing;
+      const atlasW = tileset.image.width;
+      const atlasH = tileset.image.height;
+      const atlasCols = Math.max(
+        1,
+        Math.floor((atlasW - margin * 2 + spacing) / (tsW + spacing))
+      );
+      const atlasRows = Math.max(
+        1,
+        Math.floor((atlasH - margin * 2 + spacing) / (tsH + spacing))
+      );
+      const tileCount = atlasCols * atlasRows;
+      const animEntry = this._getOrUpdateAnimLookup(tileset, tileCount);
+      if (animEntry !== void 0) {
+        const animUnit = batcher.uploadTexture(
+          animEntry.resource,
+          animEntry.tileCount,
+          1,
+          animEntry.dirty
+        );
+        animEntry.dirty = false;
+        this.shader.setUniform("uAnimLookup", animUnit);
+        this.shader.setUniform("uAnimSize", animEntry.tileCount);
+      } else {
+        this.shader.setUniform("uAnimLookup", indexUnit);
+        this.shader.setUniform("uAnimSize", 0);
+      }
+      this._setV2("uTileSize", tsW, tsH);
+      this._setV2("uTilesetCols", atlasCols, atlasRows);
+      this._setV2("uInvTilesetSize", 1 / atlasW, 1 / atlasH);
+      this._setV4("uTilesetMargin", margin, margin, spacing, spacing);
+      this._setV2(
+        "uOverflow",
+        Math.max(0, Math.ceil(tsW / tileWidth) - 1),
+        Math.max(0, Math.ceil(tsH / tileHeight) - 1)
+      );
+      this._setV2("uGidRange", tileset.firstgid, tileset.lastgid);
+      batcher.addQuad(
+        tileset.texture,
+        worldX,
+        worldY,
+        worldW,
+        worldH,
+        0,
+        0,
+        1,
+        1,
+        4294967295
+      );
+      batcher.flush();
+    }
+  }
+};
+
 // src/video/webgl/webgl_renderer.js
 var _tempMatrix = new Matrix3d();
 var _savedTransform = new Matrix3d();
@@ -32252,6 +33140,7 @@ var WebGLRenderer = class extends Renderer {
   reset() {
     super.reset();
     this.clear();
+    this._orthogonalTMXGPURenderer?.reset();
     this.setViewport();
     if (this.gl.getParameter(this.gl.ARRAY_BUFFER_BINDING) !== this.vertexBuffer) {
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
@@ -32280,6 +33169,53 @@ var WebGLRenderer = class extends Renderer {
       });
       this._lightAtlas = void 0;
     }
+    if (this.isContextValid === false) {
+      this._orthogonalTMXGPURenderer = void 0;
+    }
+  }
+  /**
+   * Draw a TMX tile layer through whichever path the layer's `renderMode`
+   * resolves to. WebGL2-eligible layers (`renderMode === "shader"`) take
+   * the procedural shader path — one quad per tileset, GID lookup in a
+   * per-layer data texture. All other layers fall through to the base
+   * `Renderer.drawTileLayer` (preRender blit or per-tile loop).
+   * @param {object} layer - the TMXLayer to draw
+   * @param {object} rect - the visible region in world coords
+   */
+  drawTileLayer(layer, rect) {
+    if (layer.renderMode === "shader") {
+      const gpu = this._getTMXGPURendererFor(layer.orientation);
+      if (gpu !== void 0) {
+        gpu.draw(layer, rect);
+        return;
+      }
+    }
+    super.drawTileLayer(layer, rect);
+  }
+  /**
+   * Lazy-init the orientation-specific GPU tilemap renderer.
+   * @param {string} orientation
+   * @returns {object|undefined}
+   * @ignore
+   */
+  _getTMXGPURendererFor(orientation2) {
+    if (orientation2 === "orthogonal") {
+      if (this._orthogonalTMXGPURenderer === void 0) {
+        try {
+          this._orthogonalTMXGPURenderer = new OrthogonalTMXLayerGPURenderer(
+            this
+          );
+        } catch (err) {
+          console.warn(
+            "melonJS: GPU tilemap shader failed to compile, falling back to legacy renderer",
+            err
+          );
+          this._orthogonalTMXGPURenderer = null;
+        }
+      }
+      return this._orthogonalTMXGPURenderer || void 0;
+    }
+    return void 0;
   }
   /**
    * add a new batcher to this renderer
@@ -34202,6 +35138,14 @@ var Application = class {
     this.world = new World(0, 0, this.settings.width, this.settings.height);
     this.world.app = this;
     this.world.physic = this.settings.physic;
+    this.world.gpuTilemap = this.settings.gpuTilemap;
+    if (this.settings.gpuTilemap && // duck-type rather than `instanceof WebGLRenderer` to avoid a
+    // runtime import; only the WebGL renderer carries `WebGLVersion`
+    this.renderer.WebGLVersion !== 2) {
+      console.warn(
+        "melonJS: gpuTilemap is enabled but the active renderer is not WebGL 2 \u2014 falling back to the legacy tile renderer for every tile layer"
+      );
+    }
     this.lastUpdate = globalThis.performance.now();
     if (!this.isInitialized) {
       on(STATE_CHANGE, this.repaint, this);
@@ -34223,9 +35167,7 @@ var Application = class {
   reset() {
     const current = state_default.get();
     if (typeof current !== "undefined") {
-      this.viewport = current.cameras.get(
-        "default"
-      );
+      this.viewport = current.cameras.get("default");
     }
     emit(GAME_RESET);
     this.updateFrameRate();