Merge pull request #1425 from melonjs/fix/imagelayer-predraw

fix(imagelayer): preDraw now applies flip / mask / post-effects

Author: obiot

packages/melonjs/CHANGELOG.md

@@ -45,6 +45,7 @@
 - Rendering: `IndexBuffer` split into renderer-agnostic `IndexBuffer` base (data accumulation) and `WebGLIndexBuffer` (GL buffer bind/upload)
 
 ### Fixed
+- ImageLayer: setting `mask`, `shader` / `postEffects`, `flipX()` or `flipY()` had no effect — `ImageLayer.preDraw()` was a stripped-down copy of `Renderable.preDraw()` that handled only alpha, tint and blend mode. The override now also applies flip, stencil mask, and post-effects (the anchor/`autoTransform` skip is preserved because `ImageLayer.draw()` computes its own world-space position).
 - WebGL: stencil masking (`setMask` / `MaskEffect`) now works correctly in WebGL1 mode (`preferWebGL1: true`). `WebGLRenderTarget` was relying on `gl.DEPTH_STENCIL` / `gl.DEPTH_STENCIL_ATTACHMENT` being exposed on the WebGL1 context, which some browser/driver combinations leave `undefined`, silently producing FBOs with no stencil attachment. The setup now uses spec-defined numeric fallbacks (0x84F9 / 0x821A) and validates completeness via `gl.checkFramebufferStatus()`. Also dropped the dead `WEBGL_depth_stencil` extension gate (those constants are core WebGL 1.0, no extension required) and removed the redundant `STENCIL_BUFFER_BIT` from `clearRenderTarget()` (which produced spurious `Clear called for non-existing buffers` warnings).
 - State: `state.freeze()` no longer leaves the game in inconsistent states when interacting with manual pause/resume or window blur. Specifically: (a) the freeze timer's auto-resume now respects whether the game was already paused when freeze started — won't unpause a manually-paused game on expiry; (b) calling `state.resume()` or `state.stop()` mid-freeze cancels the timer and resolves the freeze promise immediately; (c) window `BLUR` cancels the freeze (the visual "moment" is over by the time the user returns; regular `pauseOnBlur` keeps the game paused while away).
 - ParticleEmitter: constructor was using bitwise `|` instead of logical `||` for the `width`/`height` fallback, which silently rounded any provided value to the next odd number (e.g. `width: 16 → 17`, `width: 32 → 33`).

packages/melonjs/src/renderable/imagelayer.js

@@ -223,8 +223,19 @@ export default class ImageLayer extends Sprite {
 	}
 
 	/**
-	 * override the default predraw function
-	 * as repeat and anchor are managed directly in the draw method
+	 * Override the default preDraw to skip the base class's anchor offset
+	 * translation and `autoTransform` application — `ImageLayer.draw()`
+	 * computes its own world-space position from the viewport, the parallax
+	 * `ratio`, anchor, and zoom, so applying anchor/transform here would
+	 * double-translate the layer.
+	 *
+	 * Coordinate-sensitive setup (flip, stencil mask) is intentionally
+	 * deferred to `draw()` where it runs *after* the per-camera zoom
+	 * translate/scale — that way it stays correctly aligned at any
+	 * `viewport.zoom` and across multiple cameras. Coordinate-independent
+	 * setup (alpha, post-effects, tint, blend) stays here. The inherited
+	 * `Renderable.postDraw` cleans up symmetrically (`clearTint` /
+	 * `clearMask` / `endPostEffect` / `restore`).
 	 * @ignore
 	 */
 	preDraw(renderer) {
@@ -234,7 +245,12 @@ export default class ImageLayer extends Sprite {
 		// apply the defined alpha value
 		renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
 
-		// apply the defined tint, if any
+		// delegate post-effect setup to the renderer (custom shader / postEffects)
+		if (!this._postEffectManaged) {
+			renderer.beginPostEffect(this);
+		}
+
+		// apply the defined tint
 		renderer.setTint(this.tint);
 
 		// apply blending if different from "normal"
@@ -289,6 +305,25 @@ export default class ImageLayer extends Sprite {
 		renderer.translate(x * vZoom, y * vZoom);
 		renderer.scale(vZoom, vZoom);
 
+		// apply flip — pivot at the centre of the drawn pattern in the
+		// post-zoom local frame, so the mirror lands in the visible viewport
+		// regardless of `viewport.zoom`. Done here (not in preDraw) because
+		// preDraw runs before this translate/scale and would misalign.
+		if (this._flip.x || this._flip.y) {
+			const px = viewport.width;
+			const py = viewport.height;
+			renderer.translate(px, py);
+			renderer.scale(this._flip.x ? -1 : 1, this._flip.y ? -1 : 1);
+			renderer.translate(-px, -py);
+		}
+
+		// stencil mask — also applied in the post-zoom local frame so the
+		// mask shape's coordinates are interpreted relative to the layer's
+		// drawn area, matching `drawPattern` below.
+		if (this.mask) {
+			renderer.setMask(this.mask);
+		}
+
 		renderer.drawPattern(
 			this._pattern,
 			0,