melonjs 15.2.0 → 15.3.0

package/dist/melonjs.module.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v15.2.0
+ * melonJS Game Engine - v15.3.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -2409,12 +2409,12 @@ let cssToRGB = new Map();
      * @returns {Color} Reference to this object for method chaining
      */
     copy(color) {
-        if (color instanceof Color) {
+        if (typeof color === "string") {
+            return this.parseCSS(color);
+        } else {
             this.glArray.set(color.glArray);
             return this;
         }
-
-        return this.parseCSS(color);
     }
 
     /**
@@ -9446,6 +9446,17 @@ const DOM_READY = "dom_ready";
  */
 const BOOT = "me.boot";
 
+/**
+ * event generated when the system update the engine and the renderer by one step
+ * @public
+ * @constant
+ * @type {string}
+ * @name TICK
+ * @memberof event
+ * @see event.on
+ */
+const TICK = "me.tick";
+
 /**
  * event when the game is paused <br>
  * Data passed : none <br>
@@ -9505,6 +9516,17 @@ const STATE_RESTART = "me.state.onRestart";
  */
 const STATE_CHANGE = "me.state.onChange";
 
+/**
+ * event for when a stage is resetted
+ * @public
+ * @constant
+ * @type {string}
+ * @name STAGE_RESET
+ * @memberof event
+ * @see event.on
+*/
+const STAGE_RESET = "me.stage.onReset";
+
 /**
  * event for when the video is initialized<br>
  * Data passed : none <br>
@@ -9969,11 +9991,13 @@ var event = {
 	ONCONTEXT_RESTORED: ONCONTEXT_RESTORED,
 	POINTERLOCKCHANGE: POINTERLOCKCHANGE,
 	POINTERMOVE: POINTERMOVE,
+	STAGE_RESET: STAGE_RESET,
 	STATE_CHANGE: STATE_CHANGE,
 	STATE_PAUSE: STATE_PAUSE,
 	STATE_RESTART: STATE_RESTART,
 	STATE_RESUME: STATE_RESUME,
 	STATE_STOP: STATE_STOP,
+	TICK: TICK,
 	VIDEO_INIT: VIDEO_INIT,
 	VIEWPORT_ONCHANGE: VIEWPORT_ONCHANGE,
 	VIEWPORT_ONRESIZE: VIEWPORT_ONRESIZE,
@@ -13969,7 +13993,7 @@ var audio = {
  * @static
  * @see Application
  */
-const CANVAS$1 = 0;
+const CANVAS = 0;
 
 /**
  * constant to select select the WebGL renderer
@@ -13977,7 +14001,7 @@ const CANVAS$1 = 0;
  * @static
  * @see Application
  */
-const WEBGL$1 = 1;
+const WEBGL = 1;
 
 /**
  * constant to auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
@@ -13985,33 +14009,7 @@ const WEBGL$1 = 1;
  * @type {number}
  * @see Application
  */
-const AUTO$1 = 2;
-
-/**
- * @namespace video
- */
-
-
-/**
- * Select the HTML5 Canvas renderer
- * @memberof video
- * @static
- */
-const CANVAS = CANVAS$1;
-
-/**
- * Select the WebGL renderer
- * @memberof video
- * @static
- */
-const WEBGL = WEBGL$1;
-
-/**
- * Auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
- * @memberof video
- * @static
- */
-const AUTO = AUTO$1;
+const AUTO = 2;
 
 /**
  * A reference to the active Canvas or WebGL active renderer renderer
@@ -14022,34 +14020,10 @@ let renderer = null;
 
 /**
  * Initialize the "video" system (create a canvas based on the given arguments, and the related renderer). <br>
- * melonJS support various scaling mode, that can be enabled <u>once the scale option is set to <b>`auto`</b></u> : <br>
- *  - <i><b>`fit`</b></i> : Letterboxed; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-fit.png"/></center><br>
- *  - <i><b>`fill-min`</b></i> : Canvas is resized to fit minimum design resolution; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-fill-min.png"/></center><br>
- *  - <i><b>`fill-max`</b></i> : Canvas is resized to fit maximum design resolution; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-fill-max.png"/></center><br>
- *  - <i><b>`flex`</b><</i> : Canvas width & height is resized to fit; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-flex.png"/></center><br>
- *  - <i><b>`flex-width`</b></i> : Canvas width is resized to fit; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-flex-width.png"/></center><br>
- *  - <i><b>`flex-height`</b></i> : Canvas height is resized to fit; content is scaled to design aspect ratio <br>
- * <center><img src="images/scale-flex-height.png"/></center><br>
- *  - <i><b>`stretch`</b></i> : Canvas is resized to fit; content is scaled to screen aspect ratio
- * <center><img src="images/scale-stretch.png"/></center><br>
  * @memberof video
  * @param {number} width - The width of the canvas viewport
  * @param {number} height - The height of the canvas viewport
- * @param {object} [options] - The optional video/renderer parameters.<br> (see Renderer(s) documentation for further specific options)
- * @param {string|HTMLElement} [options.parent=document.body] - the DOM parent element to hold the canvas in the HTML file
- * @param {number|Renderer} [options.renderer=video.AUTO] - renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO), or a custom renderer class
- * @param {number|string} [options.scale=1.0] - enable scaling of the canvas ('auto' for automatic scaling)
- * @param {string} [options.scaleMethod="fit"] - screen scaling modes ('fit','fill-min','fill-max','flex','flex-width','flex-height','stretch')
- * @param {boolean} [options.preferWebGL1=false] - if true the renderer will only use WebGL 1
- * @param {string} [options.powerPreference="default"] - a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
- * @param {boolean} [options.transparent=false] - whether to allow transparent pixels in the front buffer (screen).
- * @param {boolean} [options.antiAlias=false] - whether to enable or not video scaling interpolation
- * @param {boolean} [options.consoleHeader=true] - whether to display melonJS version and basic device information in the console
+ * @param {Application.Settings} [options] - optional parameters for the renderer
  * @returns {boolean} false if initialization failed (canvas not supported)
  * @example
  * // init the video with a 640x480 canvas
@@ -14551,6 +14525,7 @@ function hasOffscreenCanvas() {
 
 /**
  * used by [un]watchAccelerometer()
+ * @ignore
  */
 function onDeviceMotion(e) {
     // Accelerometer information
@@ -14561,6 +14536,7 @@ function onDeviceMotion(e) {
 
 /**
  * used by [un]watchDeviceOrientation()
+ * @ignore
  */
 function onDeviceRotate(e) {
     gamma = e.gamma;
@@ -17843,6 +17819,9 @@ var input = {
         // viewport flag
         this._inViewport = false;
 
+        // renderable cache tint value used by the getter/setter
+        this._tint = pool.pull("Color", 255, 255, 255, 1.0);
+
         // ensure it's fully opaque by default
         this.setOpacity(1.0);
     }
@@ -17867,21 +17846,11 @@ var input = {
      * this.tint.setColor(255, 255, 255);
      */
     get tint() {
-        if (typeof this._tint === "undefined") {
-            this._tint = pool.pull("Color", 255, 255, 255, 1.0);
-        }
         return this._tint;
     }
     set tint(value) {
-        if (typeof this._tint === "undefined") {
-            this._tint = pool.pull("Color", 255, 255, 255, 1.0);
-        }
-        if (value instanceof Color) {
-            this._tint.copy(value);
-        } else {
-            // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
-            this._tint.parseCSS(value);
-        }
+        this._tint.copy(value);
+        this.isDirty = true;
     }
 
     /**
@@ -19192,7 +19161,6 @@ let default_settings = {
      * @ignore
      */
     reset() {
-
         // add all defined cameras
         this.settings.cameras.forEach((camera) => {
             this.cameras.set(camera.name, camera);
@@ -19210,7 +19178,7 @@ let default_settings = {
         }
 
         // reset the game
-        game.reset();
+        emit(STAGE_RESET, this);
 
         // call the onReset Function
         this.onResetEvent.apply(this, arguments);
@@ -19225,8 +19193,7 @@ let default_settings = {
      * @returns {boolean}
      */
     update(dt) {
-        // update all objects (and pass the elapsed time since last frame)
-        let isDirty = game.world.update(dt);
+        let isDirty = false;
 
         // update the camera/viewport
         // iterate through all cameras
@@ -19251,13 +19218,15 @@ let default_settings = {
      * @name draw
      * @memberof Stage
      * @ignore
-     * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer object
+     * @param {Renderer} renderer - the renderer object to draw with
+     * @param {World} world - the world object to draw
      */
-    draw(renderer) {
+    draw(renderer, world) {
+
         // iterate through all cameras
         this.cameras.forEach((camera) => {
             // render the root container
-            camera.draw(renderer, game.world);
+            camera.draw(renderer, world);
 
             // render the ambient light
             if (this.ambientLight.alpha !== 0) {
@@ -19277,9 +19246,9 @@ let default_settings = {
 
             // render all lights
             this.lights.forEach((light) => {
-                light.preDraw(renderer, game.world);
-                light.draw(renderer, game.world);
-                light.postDraw(renderer, game.world);
+                light.preDraw(renderer, world);
+                light.draw(renderer, world);
+                light.postDraw(renderer, world);
             });
         });
     }
@@ -19314,7 +19283,6 @@ let default_settings = {
         if (typeof this.settings.onResetEvent === "function") {
             this.settings.onResetEvent.apply(this, arguments);
         }
-
     }
 
     /**
@@ -19874,6 +19842,12 @@ const COLLISION_GROUP     = "collision";
     }
 }
 
+/**
+ * the function used to decompress zlib/gzip data
+ * @ignore
+ */
+let inflateFunction;
+
 /**
  * set and interpret a TMX property value
  * @ignore
@@ -19969,94 +19943,6 @@ function parseAttributes(obj, elt) {
     }
 }
 
-/**
- * decompress and decode zlib/gzip data
- * @ignore
- * @name decompress
- * @param {string} input - Base64 encoded and compressed data
- * @param {string} format - compressed data format ("gzip","zlib", "zstd")
- * @returns {Uint32Array} Decoded and decompress data
- */
-function decompress(data, format) {
-    if (typeof undefined === "function") {
-        return undefined(data, format);
-    } else {
-        throw new Error("GZIP/ZLIB compressed TMX Tile Map not supported!");
-    }
-}
-
-/**
- * Decode a CSV encoded array into a binary array
- * @ignore
- * @name decodeCSV
- * @param  {string} input- -  CSV formatted data (only numbers, everything else will be converted to NaN)
- * @returns {number[]} Decoded data
- */
-function decodeCSV(input) {
-    let entries = input.replace("\n", "").trim().split(",");
-
-    let result = [];
-    for (let i = 0; i < entries.length; i++) {
-        result.push(+entries[i]);
-    }
-    return result;
-}
-
-/**
- * Decode a base64 encoded string into a byte array
- * @ignore
- * @name decodeBase64AsArray
- * @param {string} input - Base64 encoded data
- * @param {number} [bytes] - number of bytes per array entry
- * @returns {Uint32Array} Decoded data
- */
-function decodeBase64AsArray(input, bytes) {
-    bytes = bytes || 1;
-
-    let i, j, len;
-    let dec = globalThis.atob(input.replace(/[^A-Za-z0-9\+\/\=]/g, ""));
-    let ar = new Uint32Array(dec.length / bytes);
-
-    for (i = 0, len = dec.length / bytes; i < len; i++) {
-        ar[i] = 0;
-        for (j = bytes - 1; j >= 0; --j) {
-            ar[i] += dec.charCodeAt((i * bytes) + j) << (j << 3);
-        }
-    }
-    return ar;
-}
-
-/**
- * Decode the given data
- * @ignore
- */
-function decode(data, encoding, compression) {
-    compression = compression || "none";
-    encoding = encoding || "none";
-
-    switch (encoding) {
-        case "csv":
-            return decodeCSV(data);
-
-        case "base64":
-            if (compression !== "none") {
-                data = decompress(data, compression);
-            } else {
-                data = decodeBase64AsArray(data, 4);
-            }
-            return data;
-
-        case "none":
-            return data;
-
-        case "xml":
-            throw new Error("XML encoding is deprecated, use base64 instead");
-
-        default:
-            throw new Error("Unknown layer encoding: " + encoding);
-    }
-}
-
 /**
  * Normalize TMX format to Tiled JSON format
  * @ignore
@@ -20189,9 +20075,113 @@ function normalize(obj, item) {
     }
 }
 
+/**
+ * a collection of utility functions for parsing TMX maps
+ * @namespace TMXUtils
+ */
+
+/**
+ * decompress and decode zlib/gzip data
+ * @memberof TMXUtils
+ * @param {string} input - Base64 encoded and compressed data
+ * @param {string} format - compressed data format ("gzip","zlib", "zstd")
+ * @returns {Uint32Array} Decoded and decompress data
+ */
+function decompress(data, format) {
+    if (typeof inflateFunction === "function") {
+        return inflateFunction(data, format);
+    } else {
+        throw new Error("GZIP/ZLIB compressed TMX Tile Map not supported!");
+    }
+}
+
+/**
+ * Decode a CSV encoded array into a binary array
+ * @memberof TMXUtils
+ * @param  {string} input- -  CSV formatted data (only numbers, everything else will be converted to NaN)
+ * @returns {number[]} Decoded data
+ */
+function decodeCSV(input) {
+    let entries = input.replace("\n", "").trim().split(",");
+
+    let result = [];
+    for (let i = 0; i < entries.length; i++) {
+        result.push(+entries[i]);
+    }
+    return result;
+}
+
+/**
+ * Decode a base64 encoded string into a byte array
+ * @memberof TMXUtils
+ * @param {string} input - Base64 encoded data
+ * @param {number} [bytes] - number of bytes per array entry
+ * @returns {Uint32Array} Decoded data
+ */
+function decodeBase64AsArray(input, bytes) {
+    bytes = bytes || 1;
+
+    let i, j, len;
+    let dec = globalThis.atob(input.replace(/[^A-Za-z0-9\+\/\=]/g, ""));
+    let ar = new Uint32Array(dec.length / bytes);
+
+    for (i = 0, len = dec.length / bytes; i < len; i++) {
+        ar[i] = 0;
+        for (j = bytes - 1; j >= 0; --j) {
+            ar[i] += dec.charCodeAt((i * bytes) + j) << (j << 3);
+        }
+    }
+    return ar;
+}
+
+/**
+ * set the function used to inflate gzip/zlib data
+ * @memberof TMXUtils
+ * @param {Func} fn - inflate function
+ */
+function setInflateFunction(fn) {
+    inflateFunction = fn;
+}
+
+/**
+ * Decode a encoded array into a binary array
+ * @memberof TMXUtils
+ * @param {string} data - data to be decoded
+ * @param {string} [encoding="none"] - data encoding ("csv", "base64", "xml")
+ * @returns {number[]} Decoded data
+ */
+function decode(data, encoding, compression) {
+    compression = compression || "none";
+    encoding = encoding || "none";
+
+    switch (encoding) {
+        case "csv":
+            return decodeCSV(data);
+
+        case "base64":
+            if (compression !== "none") {
+                data = decompress(data, compression);
+            } else {
+                data = decodeBase64AsArray(data, 4);
+            }
+            return data;
+
+        case "none":
+            return data;
+
+        case "xml":
+            throw new Error("XML encoding is deprecated, use base64 instead");
+
+        default:
+            throw new Error("Unknown layer encoding: " + encoding);
+    }
+}
+
 /**
  * Parse a XML TMX object and returns the corresponding javascript object
- * @ignore
+ * @memberof TMXUtils
+ * @param {Document} xml - XML TMX object
+ * @returns {object} Javascript object
  */
 function parse(xml) {
     // Create the return object
@@ -20229,7 +20219,10 @@ function parse(xml) {
 
 /**
  * Apply TMX Properties to the given object
- * @ignore
+ * @memberof TMXUtils
+ * @param {object} obj - object to apply the properties to
+ * @param {object} data - TMX data object
+ * @returns {object} obj
  */
 function applyTMXProperties(obj, data) {
     let properties = data.properties;
@@ -20259,6 +20252,14 @@ function applyTMXProperties(obj, data) {
     }
 }
 
+var TMXUtils = {
+	__proto__: null,
+	applyTMXProperties: applyTMXProperties,
+	decode: decode,
+	parse: parse,
+	setInflateFunction: setInflateFunction
+};
+
 /**
  * @classdesc
  * a basic tile object
@@ -20990,20 +20991,7 @@ class TMXObject {
  */
  class Renderer {
     /**
-     * @param {object} options - The renderer parameters
-     * @param {number} options.width - The width of the canvas without scaling
-     * @param {number} options.height - The height of the canvas without scaling
-     * @param {HTMLCanvasElement} [options.canvas] - The html canvas to draw to on screen
-     * @param {boolean} [options.antiAlias=false] - Whether to enable anti-aliasing, use false (default) for a pixelated effect.
-     * @param {boolean} [options.failIfMajorPerformanceCaveat=true] - If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
-     * @param {boolean} [options.transparent=false] - Whether to enable transparency on the canvas
-     * @param {boolean} [options.premultipliedAlpha=true] - in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
-     * @param {boolean} [options.blendMode="normal"] - the default blend mode to use ("normal", "multiply")
-     * @param {boolean} [options.depthBuffer="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
-     * @param {boolean} [options.subPixel=false] - Whether to enable subpixel rendering (performance hit when enabled)
-     * @param {boolean} [options.verbose=false] - Enable the verbose mode that provides additional details as to what the renderer is doing
-     * @param {number} [options.zoomX=width] - The actual width of the canvas with scaling applied
-     * @param {number} [options.zoomY=height] - The actual height of the canvas with scaling applied
+     * @param {Application.Settings} [options] - optional parameters for the renderer
      */
     constructor(options) {
         /**
@@ -22267,16 +22255,7 @@ class TextureCache {
  */
  class CanvasRenderer extends Renderer {
     /**
-     * @param {object} options - The renderer parameters
-     * @param {number} options.width - The width of the canvas without scaling
-     * @param {number} options.height - The height of the canvas without scaling
-     * @param {HTMLCanvasElement} [options.canvas] - The html canvas to draw to on screen
-     * @param {boolean} [options.antiAlias=false] - Whether to enable anti-aliasing
-     * @param {boolean} [options.transparent=false] - Whether to enable transparency on the canvas (performance hit when enabled)
-     * @param {boolean} [options.subPixel=false] - Whether to enable subpixel renderering (performance hit when enabled)
-     * @param {boolean} [options.textureSeamFix=true] - enable the texture seam fix when rendering Tile when antiAlias is off for the canvasRenderer
-     * @param {number} [options.zoomX=width] - The actual width of the canvas with scaling applied
-     * @param {number} [options.zoomY=height] - The actual height of the canvas with scaling applied
+     * @param {Application.Settings} [options] - optional parameters for the renderer
      */
     constructor(options) {
         // parent constructor
@@ -27882,11 +27861,7 @@ function _pauseRunLoop() {
  * @ignore
  */
 function _renderFrame(time) {
-    let stage = _stages[_state].stage;
-    // update all game objects
-    game.update(time, stage);
-    // render all game objects
-    game.draw(stage);
+    emit(TICK, time);
     // schedule the next frame update
     if (_animFrameId !== -1) {
         _animFrameId = globalThis.requestAnimationFrame(_renderFrame);
@@ -27935,9 +27910,6 @@ function _switchState(state) {
         if (_onSwitchComplete) {
             _onSwitchComplete();
         }
-
-        // force repaint
-        game.repaint();
     }
 }
 
@@ -28083,7 +28055,7 @@ let state = {
      * default state ID for the default Stage
      * (the default stage is the one running as soon as melonJS is started)
      * @constant
-     * @name SETTINGS
+     * @name DEFAULT
      * @memberof state
      */
     DEFAULT : 9,
@@ -28171,9 +28143,6 @@ let state = {
             // calculate the elpased time
             _pauseTime = globalThis.performance.now() - _pauseTime;
 
-            // force repaint
-            game.repaint();
-
             // publish the restart notification
             emit(STATE_RESTART, _pauseTime);
         }
@@ -31308,21 +31277,7 @@ let V_ARRAY = [
  */
  class WebGLRenderer extends Renderer {
     /**
-     * @param {object} options - The renderer parameters
-     * @param {number} options.width - The width of the canvas without scaling
-     * @param {number} options.height - The height of the canvas without scaling
-     * @param {HTMLCanvasElement} [options.canvas] - The html canvas to draw to on screen
-     * @param {boolean} [options.antiAlias=false] - Whether to enable anti-aliasing
-     * @param {boolean} [options.failIfMajorPerformanceCaveat=true] - If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
-     * @param {boolean} [options.transparent=false] - Whether to enable transparency on the canvas
-     * @param {boolean} [options.premultipliedAlpha=true] - in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
-     * @param {boolean} [options.subPixel=false] - Whether to enable subpixel renderering (performance hit when enabled)
-     * @param {boolean} [options.preferWebGL1=false] - if true the renderer will only use WebGL 1
-     * @param {boolean} [options.depthTest="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
-     * @param {string} [options.powerPreference="default"] - a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
-     * @param {number} [options.zoomX=width] - The actual width of the canvas with scaling applied
-     * @param {number} [options.zoomY=height] - The actual height of the canvas with scaling applied
-     * @param {Compositor} [options.compositor] - A class that implements the compositor API for sprite rendering
+     * @param {Application.Settings} [options] - optional parameters for the renderer
      */
     constructor(options) {
         // parent contructor
@@ -31493,6 +31448,17 @@ let V_ARRAY = [
     reset() {
         super.reset();
 
+        // clear all stacks
+        this._colorStack.forEach((color) => {
+            pool.push(color);
+        });
+        this._matrixStack.forEach((matrix) => {
+            pool.push(matrix);
+        });
+        this._colorStack.length = 0;
+        this._matrixStack.length = 0;
+        this._blendStack.length = 0;
+
         // clear gl context
         this.clear();
 
@@ -37520,6 +37486,7 @@ function onresize(game) {
     let renderer = game.renderer;
     let settings = renderer.settings;
     let scaleX = 1, scaleY = 1;
+    let nodeBounds;
 
     if (settings.autoScale) {
 
@@ -37533,8 +37500,13 @@ function onresize(game) {
             canvasMaxHeight = parseInt(style.maxHeight, 10) || Infinity;
         }
 
-        // get the maximum canvas size within the parent div containing the canvas container
-        let nodeBounds = getParentBounds(game.getParentElement());
+        if (typeof game.settings.scaleTarget !== "undefined") {
+            // get the bounds of the given scale target
+            nodeBounds = getElementBounds(game.settings.scaleTarget);
+        } else {
+            // get the maximum canvas size within the parent div containing the canvas container
+            nodeBounds = getParentBounds(game.getParentElement());
+        }
 
         let _max_width = Math.min(canvasMaxWidth, nodeBounds.width);
         let _max_height = Math.min(canvasMaxHeight, nodeBounds.height);
@@ -37595,6 +37567,7 @@ const defaultSettings = {
     autoScale : false,
     scale : 1.0,
     scaleMethod : "manual",
+    scaleTarget : undefined,
     transparent : false,
     premultipliedAlpha: true,
     blendMode : "normal",
@@ -37608,6 +37581,41 @@ const defaultSettings = {
     legacy : false
 };
 
+/**
+ * Application & Renderer Settings definition.
+ * @typedef {Object} Settings
+ * @property {string|HTMLElement} [parent=document.body] - the DOM parent element to hold the canvas in the HTML file
+ * @property {number|Renderer} [renderer=AUTO] - renderer to use (CANVAS, WEBGL, AUTO), or a custom renderer class
+ * @property {number|string} [scale=1.0] - enable scaling of the canvas ('auto' for automatic scaling)
+ * @property {string} [scaleMethod="fit"] - screen scaling modes ('fit','fill-min','fill-max','flex','flex-width','flex-height','stretch') : <br>
+ *  - <i><b>`fit`</b></i> : Letterboxed; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fit.png"/></center><br>
+ *  - <i><b>`fill-min`</b></i> : Canvas is resized to fit minimum design resolution; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fill-min.png"/></center><br>
+ *  - <i><b>`fill-max`</b></i> : Canvas is resized to fit maximum design resolution; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fill-max.png"/></center><br>
+ *  - <i><b>`flex`</b><</i> : Canvas width & height is resized to fit; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-flex.png"/></center><br>
+ *  - <i><b>`flex-width`</b></i> : Canvas width is resized to fit; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-flex-width.png"/></center><br>
+ *  - <i><b>`flex-height`</b></i> : Canvas height is resized to fit; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-flex-height.png"/></center><br>
+ *  - <i><b>`stretch`</b></i> : Canvas is resized to fit; content is scaled to screen aspect ratio <br>
+ * <center><img src="images/scale-stretch.png"/></center>
+ * @property {string|HTMLElement} [scaleTarget] - the HTML Element to be used as the reference target when using automatic scaling (by default melonJS will use the parent container of the div element containing the canvas)
+ * @property {boolean} [preferWebGL1=false] - if true the renderer will only use WebGL 1
+ * @property {boolean} [depthTest="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
+ * @property {string} [powerPreference="default"] - a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
+ * @property {boolean} [transparent=false] - whether to allow transparent pixels in the front buffer (screen).
+ * @property {boolean} [antiAlias=false] - whether to enable or not video scaling interpolation
+ * @property {boolean} [consoleHeader=true] - whether to display melonJS version and basic device information in the console
+ * @param {number} [options.zoomX=width] - The actual width of the canvas with scaling applied
+ * @param {number} [options.zoomY=height] - The actual height of the canvas with scaling applied
+ * @param {Compositor} [options.compositor] - a custom compositor class (WebGL only)
+ * @see Application
+ * @memberof Application
+ */
+
 /**
  * display information
  * @param {Application} game - the game application instance calling this function
@@ -37643,17 +37651,7 @@ function consoleHeader(app) {
     /**
      * @param {number} width - The width of the canvas viewport
      * @param {number} height - The height of the canvas viewport
-     * @param {object} [options] - The optional video/renderer parameters.<br> (see Renderer(s) documentation for further specific options)
-     * @param {string|HTMLElement} [options.parent=document.body] - the DOM parent element to hold the canvas in the HTML file
-     * @param {number|Renderer} [options.renderer=AUTO] - renderer to use (CANVAS, WEBGL, AUTO), or a custom renderer class
-     * @param {number|string} [options.scale=1.0] - enable scaling of the canvas ('auto' for automatic scaling)
-     * @param {string} [options.scaleMethod="fit"] - screen scaling modes ('fit','fill-min','fill-max','flex','flex-width','flex-height','stretch')
-     * @param {boolean} [options.preferWebGL1=false] - if true the renderer will only use WebGL 1
-     * @param {boolean} [options.depthTest="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
-     * @param {string} [options.powerPreference="default"] - a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
-     * @param {boolean} [options.transparent=false] - whether to allow transparent pixels in the front buffer (screen).
-     * @param {boolean} [options.antiAlias=false] - whether to enable or not video scaling interpolation
-     * @param {boolean} [options.consoleHeader=true] - whether to display melonJS version and basic device information in the console
+     * @param {Application.Settings} [options] - The optional parameters for the application and default renderer
      * @throws Will throw an exception if it fails to instantiate a renderer
      * @example
      * let my game = new Application(640, 480, {renderer: me.video.AUTO}) {
@@ -37773,12 +37771,12 @@ function consoleHeader(app) {
         // override renderer settings if &webgl or &canvas is defined in the URL
         let uriFragment = getUriFragment();
         if (uriFragment.webgl === true || uriFragment.webgl1 === true || uriFragment.webgl2 === true) {
-            this.settings.renderer = WEBGL$1;
+            this.settings.renderer = WEBGL;
             if (uriFragment.webgl1 === true) {
                 this.settings.preferWebGL1 = true;
             }
         } else if (uriFragment.canvas === true) {
-            this.settings.renderer = CANVAS$1;
+            this.settings.renderer = CANVAS;
         }
 
         // normalize scale
@@ -37788,10 +37786,16 @@ function consoleHeader(app) {
         this.settings.zoomX = width * this.settings.scale;
         this.settings.zoomY = height * this.settings.scale;
 
+        // identify parent element and/or the html target for resizing
+        this.parentElement = getElement(this.settings.parent);
+        if (typeof this.settings.scaleTarget !== "undefined" ) {
+            this.settings.scaleTarget = getElement(this.settings.scaleTarget);
+        }
+
         if (typeof this.settings.renderer === "number") {
             switch (this.settings.renderer) {
-                case AUTO$1:
-                case WEBGL$1:
+                case AUTO:
+                case WEBGL:
                     this.renderer = autoDetectRenderer(this.settings);
                     break;
                 default:
@@ -37809,7 +37813,6 @@ function consoleHeader(app) {
         on(WINDOW_ONORIENTATION_CHANGE, () => onresize(this), this);
 
         // add our canvas (default to document.body if settings.parent is undefined)
-        this.parentElement = getElement(this.settings.parent);
         this.parentElement.appendChild(this.renderer.getCanvas());
 
         // Mobile browser hacks
@@ -37848,6 +37851,16 @@ function consoleHeader(app) {
         this.isInitialized = true;
 
         emit(GAME_INIT, this);
+        on(STATE_CHANGE, this.repaint, this);
+        on(STATE_RESTART, this.repaint, this);
+        on(STATE_RESUME, this.repaint, this);
+        on(STAGE_RESET, this.reset, this);
+        on(TICK, (time) => {
+            // update all game objects
+            this.update(time);
+            // render all game objects
+            this.draw();
+        }, this);
     }
 
     /**
@@ -37928,9 +37941,8 @@ function consoleHeader(app) {
     /**
      * update all objects related to this game active scene/stage
      * @param {number} time - current timestamp as provided by the RAF callback
-     * @param {Stage} stage - the current stage
      */
-    update(time, stage) {
+    update(time) {
         // handle frame skipping if required
         if ((++this.frameCounter % this.frameRate) === 0) {
             // reset the frame counter
@@ -37954,7 +37966,8 @@ function consoleHeader(app) {
                 }
 
                 // update all objects (and pass the elapsed time since last frame)
-                this.isDirty = stage.update(this.updateDelta) || this.isDirty;
+                this.isDirty = this.world.update(this.updateDelta);
+                this.isDirty = state$1.current().update(this.updateDelta) || this.isDirty;
 
                 this.lastUpdate = globalThis.performance.now();
                 this.updateAverageDelta = this.lastUpdate - this.lastUpdateStart;
@@ -37973,9 +37986,8 @@ function consoleHeader(app) {
 
     /**
      * draw the active scene/stage associated to this game
-     * @param {Stage} stage - the current stage
      */
-    draw(stage) {
+    draw() {
         if (this.renderer.isContextValid === true && (this.isDirty || this.isAlwaysDirty)) {
             // publish notification
             emit(GAME_BEFORE_DRAW, globalThis.performance.now());
@@ -37984,7 +37996,7 @@ function consoleHeader(app) {
             this.renderer.clear();
 
             // render the stage
-            stage.draw(this.renderer);
+            state$1.current().draw(this.renderer, this.world);
 
             // set back to flag
             this.isDirty = false;
@@ -38023,9 +38035,9 @@ class BasePlugin {
          * define the minimum required version of melonJS<br>
          * this can be overridden by the plugin
          * @type {string}
-         * @default "15.2.0"
+         * @default "15.3.0"
          */
-        this.version = "15.2.0";
+        this.version = "15.3.0";
     }
 }
 
@@ -38252,7 +38264,7 @@ Renderer.prototype.getScreenContext = function()  {
  * @name version
  * @type {string}
  */
-const version = "15.2.0";
+const version = "15.3.0";
 
 /**
  * a flag indicating that melonJS is fully initialized
@@ -38381,4 +38393,4 @@ onReady(() => {
     }
 });
 
-export { AUTO$1 as AUTO, Application, BitmapText, BitmapTextData, Body, Bounds, CANVAS$1 as CANVAS, Camera2d, CanvasRenderer, CanvasTexture, Collectable, Color, ColorLayer, Compositor, Container, Draggable, DraggableEntity, DropTarget, DroptargetEntity, Ellipse, Entity, GLShader, GUI_Object, ImageLayer, Light2d, Line, math as Math, Matrix2d, Matrix3d, NineSliceSprite, ObservableVector2d, ObservableVector3d, Particle, ParticleEmitter, ParticleEmitterSettings, Point, Pointer, Polygon, PrimitiveCompositor, QuadCompositor, QuadTree, Rect, Renderable, Renderer, RoundRect, Sprite, Stage, TMXHexagonalRenderer, TMXIsometricRenderer, TMXLayer, TMXOrthogonalRenderer, TMXRenderer, TMXStaggeredRenderer, TMXTileMap, TMXTileset, TMXTilesetGroup, Text, TextureAtlas, Tile, Trigger, Tween, UIBaseElement, UISpriteElement, UITextButton, Vector2d, Vector3d, WEBGL$1 as WEBGL, WebGLRenderer, World, audio, boot, collision, device, event, game, initialized, input, level, loader, plugin, cache as plugins, pool, save, skipAutoInit, state$1 as state, timer$1 as timer, utils, version, video };
+export { AUTO, Application, BitmapText, BitmapTextData, Body, Bounds, CANVAS, Camera2d, CanvasRenderer, CanvasTexture, Collectable, Color, ColorLayer, Compositor, Container, Draggable, DraggableEntity, DropTarget, DroptargetEntity, Ellipse, Entity, GLShader, GUI_Object, ImageLayer, Light2d, Line, math as Math, Matrix2d, Matrix3d, NineSliceSprite, ObservableVector2d, ObservableVector3d, Particle, ParticleEmitter, ParticleEmitterSettings, Point, Pointer, Polygon, PrimitiveCompositor, QuadCompositor, QuadTree, Rect, Renderable, Renderer, RoundRect, Sprite, Stage, TMXHexagonalRenderer, TMXIsometricRenderer, TMXLayer, TMXOrthogonalRenderer, TMXRenderer, TMXStaggeredRenderer, TMXTileMap, TMXTileset, TMXTilesetGroup, TMXUtils, Text, TextureAtlas, Tile, Trigger, Tween, UIBaseElement, UISpriteElement, UITextButton, Vector2d, Vector3d, WEBGL, WebGLRenderer, World, audio, boot, collision, device, event, game, initialized, input, level, loader, plugin, cache as plugins, pool, save, skipAutoInit, state$1 as state, timer$1 as timer, utils, version, video };