From 9fa2084de3a565faafb9db75d6f6f4293faf04a3 Mon Sep 17 00:00:00 2001
From: Olivier Biot <olivier.biot@me.com>
Date: Mon, 20 Nov 2023 08:42:23 +0800
Subject: [PATCH] fix a regression when loading a level within a sub container

---
 CHANGELOG.md                 |  2 ++
 src/renderable/imagelayer.js | 19 ++++++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57f6b8e429..6800ec0e33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,8 @@
 ### Added
 - Renderable : new `parentApp` getter that returns the parent application/game instance to which a renderable belongs to.
 
+### Fixed
+- ImageLayer: fix a regression when loading a level within a sub container (thanks @rcl)
 
 ## [15.14.0] (melonJS 2) - _2023-10-17_
 
diff --git a/src/renderable/imagelayer.js b/src/renderable/imagelayer.js
index 1dcc72a750..149c816d37 100755
--- a/src/renderable/imagelayer.js
+++ b/src/renderable/imagelayer.js
@@ -124,14 +124,12 @@ export default class ImageLayer extends Sprite {
         event.on(event.VIEWPORT_ONCHANGE, this.updateLayer, this);
         event.on(event.VIEWPORT_ONRESIZE, this.resize, this);
         // force a first refresh when the level is loaded
-        event.once(event.LEVEL_LOADED, () => {
-            this.updateLayer(game.viewport.pos);
-        });
+        event.on(event.LEVEL_LOADED, this.updateLayer, this);
         // in case the level is not added to the root container,
         // the onActivateEvent call happens after the LEVEL_LOADED event
         // so we need to force a first update
         if (this.ancestor.root !== true) {
-            this.updateLayer(game.viewport.pos);
+            this.updateLayer();
         }
     }
 
@@ -159,10 +157,12 @@ export default class ImageLayer extends Sprite {
      * updateLayer function
      * @ignore
      */
-    updateLayer(vpos) {
+    updateLayer() {
         const rx = this.ratio.x,
             ry = this.ratio.y;
 
+        const viewport = game.viewport;
+
         if (rx === 0 && ry === 0) {
             // static image
             return;
@@ -170,8 +170,8 @@ export default class ImageLayer extends Sprite {
 
         const width = this.width,
             height = this.height,
-            bw = game.viewport.bounds.width,
-            bh = game.viewport.bounds.height,
+            bw = viewport.bounds.width,
+            bh = viewport.bounds.height,
             ax = this.anchorPoint.x,
             ay = this.anchorPoint.y,
 
@@ -181,8 +181,8 @@ export default class ImageLayer extends Sprite {
              * See https://github.com/melonjs/melonJS/issues/741#issuecomment-138431532
              * for a thorough description of how this works.
              */
-            x = ax * (rx - 1) * (bw - game.viewport.width) + this.offset.x - rx * vpos.x,
-            y = ay * (ry - 1) * (bh - game.viewport.height) + this.offset.y - ry * vpos.y;
+            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;
 
 
         // Repeat horizontally; start drawing from left boundary
@@ -263,6 +263,7 @@ export default class ImageLayer extends Sprite {
         // cancel all event subscriptions
         event.off(event.VIEWPORT_ONCHANGE, this.updateLayer);
         event.off(event.VIEWPORT_ONRESIZE, this.resize);
+        event.off(event.LEVEL_LOADED, this.updateLayer);
     }
 
     /**