melonjs 15.2.0 → 15.3.0

package/dist/types/application/application.d.ts

@@ -8,35 +8,14 @@ export default class Application {
     /**
      * @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}) {
      *     ....
      * }
      */
-    constructor(width: number, height: number, options?: {
-        parent?: string | HTMLElement | undefined;
-        renderer?: number | Renderer;
-        scale?: string | number | undefined;
-        scaleMethod?: string | undefined;
-        preferWebGL1?: boolean | undefined;
-        depthTest?: boolean | undefined;
-        powerPreference?: string | undefined;
-        transparent?: boolean | undefined;
-        antiAlias?: boolean | undefined;
-        consoleHeader?: boolean | undefined;
-    } | undefined);
+    constructor(width: number, height: number, options?: any);
     /**
      * the parent HTML element holding the main canvas of this application
      * @type {HTMLElement}
@@ -138,14 +117,12 @@ export default class Application {
     /**
      * 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: number, stage: Stage): void;
+    update(time: number): void;
     /**
      * draw the active scene/stage associated to this game
-     * @param {Stage} stage - the current stage
      */
-    draw(stage: Stage): void;
+    draw(): void;
 }
 import CanvasRenderer from "./../video/canvas/canvas_renderer.js";
 import World from "./../physics/world.js";

package/dist/types/application/settings.d.ts

@@ -4,6 +4,7 @@ export namespace defaultSettings {
     const autoScale: boolean;
     const scale: number;
     const scaleMethod: string;
+    const scaleTarget: undefined;
     const transparent: boolean;
     const premultipliedAlpha: boolean;
     const blendMode: string;
@@ -16,3 +17,66 @@ export namespace defaultSettings {
     const consoleHeader: boolean;
     const legacy: boolean;
 }
+/**
+ * Application & Renderer Settings definition.
+ */
+export type Settings = {
+    /**
+     * - the DOM parent element to hold the canvas in the HTML file
+     */
+    parent?: string | HTMLElement | undefined;
+    /**
+     * - renderer to use (CANVAS, WEBGL, AUTO), or a custom renderer class
+     */
+    renderer?: number | Renderer;
+    /**
+     * - enable scaling of the canvas ('auto' for automatic scaling)
+     */
+    scale?: string | number | undefined;
+    /**
+     * - 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>
+     */
+    scaleMethod?: string | undefined;
+    /**
+     * - 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)
+     */
+    scaleTarget?: string | HTMLElement | undefined;
+    /**
+     * - if true the renderer will only use WebGL 1
+     */
+    preferWebGL1?: boolean | undefined;
+    /**
+     * - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
+     */
+    depthTest?: boolean | undefined;
+    /**
+     * - 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.
+     */
+    powerPreference?: string | undefined;
+    /**
+     * - whether to allow transparent pixels in the front buffer (screen).
+     */
+    transparent?: boolean | undefined;
+    /**
+     * - whether to enable or not video scaling interpolation
+     */
+    antiAlias?: boolean | undefined;
+    /**
+     * - whether to display melonJS version and basic device information in the console
+     */
+    consoleHeader?: boolean | undefined;
+};

package/dist/types/index.d.ts

@@ -100,6 +100,7 @@ import TMXTileset from "./level/tiled/TMXTileset.js";
 import TMXTilesetGroup from "./level/tiled/TMXTilesetGroup.js";
 import TMXTileMap from "./level/tiled/TMXTileMap.js";
 import TMXLayer from "./level/tiled/TMXLayer.js";
+import * as TMXUtils from "./level/tiled/TMXUtils.js";
 import Pointer from "./input/pointer.js";
 import Stage from "./state/stage.js";
 import Camera2d from "./camera/camera2d.js";
@@ -110,4 +111,4 @@ import ParticleEmitterSettings from "./particles/settings.js";
 import Particle from "./particles/particle.js";
 import Entity from "./entity/entity.js";
 import Application from "./application/application.js";
-export { audio, collision, device, event, loader, level, input, Math, plugin, plugins, utils, save, timer, pool, state, video, Color, Vector2d, Vector3d, ObservableVector2d, ObservableVector3d, Matrix2d, Matrix3d, Polygon, Line, Ellipse, Point, Rect, RoundRect, Tween, QuadTree, GLShader, Compositor, PrimitiveCompositor, QuadCompositor, Renderer, WebGLRenderer, CanvasRenderer, CanvasTexture, TextureAtlas, Renderable, Body, Bounds, Text, BitmapText, BitmapTextData, ColorLayer, ImageLayer, Sprite, NineSliceSprite, UIBaseElement, UITextButton, UISpriteElement, Collectable, Trigger, Light2d, Draggable, DropTarget, TMXRenderer, TMXOrthogonalRenderer, TMXIsometricRenderer, TMXHexagonalRenderer, TMXStaggeredRenderer, Tile, TMXTileset, TMXTilesetGroup, TMXTileMap, TMXLayer, Pointer, Stage, Camera2d, Container, World, ParticleEmitter, ParticleEmitterSettings, Particle, Entity, Application };
+export { audio, collision, device, event, loader, level, input, Math, plugin, plugins, utils, save, timer, pool, state, video, Color, Vector2d, Vector3d, ObservableVector2d, ObservableVector3d, Matrix2d, Matrix3d, Polygon, Line, Ellipse, Point, Rect, RoundRect, Tween, QuadTree, GLShader, Compositor, PrimitiveCompositor, QuadCompositor, Renderer, WebGLRenderer, CanvasRenderer, CanvasTexture, TextureAtlas, Renderable, Body, Bounds, Text, BitmapText, BitmapTextData, ColorLayer, ImageLayer, Sprite, NineSliceSprite, UIBaseElement, UITextButton, UISpriteElement, Collectable, Trigger, Light2d, Draggable, DropTarget, TMXRenderer, TMXOrthogonalRenderer, TMXIsometricRenderer, TMXHexagonalRenderer, TMXStaggeredRenderer, Tile, TMXTileset, TMXTilesetGroup, TMXTileMap, TMXLayer, TMXUtils, Pointer, Stage, Camera2d, Container, World, ParticleEmitter, ParticleEmitterSettings, Particle, Entity, Application };

package/dist/types/level/tiled/TMXUtils.d.ts

@@ -1,48 +1,29 @@
 /**
- * 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
+ * set the function used to inflate gzip/zlib data
+ * @memberof TMXUtils
+ * @param {Func} fn - inflate function
  */
-export function decompress(data: any, format: string): Uint32Array;
+export function setInflateFunction(fn: Func): void;
 /**
- * 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)
+ * 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
  */
-export function decodeCSV(input: any): number[];
-/**
- * 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
- */
-export function decodeBase64AsArray(input: string, bytes?: number | undefined): Uint32Array;
-/**
- * Decode the given data
- * @ignore
- */
-export function decode(data: any, encoding: any, compression: any): any;
-/**
- * Normalize TMX format to Tiled JSON format
- * @ignore
- */
-export function normalize(obj: any, item: any): void;
+export function decode(data: string, encoding?: string | undefined, compression: any): number[];
 /**
  * Parse a XML TMX object and returns the corresponding javascript object
- * @ignore
+ * @memberof TMXUtils
+ * @param {Document} xml - XML TMX object
+ * @returns {object} Javascript object
  */
-export function parse(xml: any): {
-    text: string;
-};
+export function parse(xml: Document): object;
 /**
  * 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
  */
-export function applyTMXProperties(obj: any, data: any): void;
+export function applyTMXProperties(obj: object, data: object): object;

package/dist/types/renderable/renderable.d.ts

@@ -204,6 +204,7 @@ export default class Renderable extends Rect {
         y: boolean;
     };
     _inViewport: boolean;
+    _tint: object;
     /**
      * Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container
      * @see Renderable#floating
@@ -222,7 +223,6 @@ export default class Renderable extends Rect {
      * this.tint.setColor(255, 255, 255);
      */
     get tint(): Color;
-    _tint: object | undefined;
     set inViewport(arg: boolean);
     /**
      * Whether the renderable object is visible and within the viewport
@@ -411,4 +411,3 @@ export default class Renderable extends Rect {
 import Rect from "./../geometries/rectangle.js";
 import ObservableVector3d from "./../math/observable_vector3.js";
 import ObservableVector2d from "./../math/observable_vector2.js";
-import Color from "./../math/color.js";

package/dist/types/state/stage.d.ts

@@ -86,9 +86,10 @@ export default class Stage {
      * @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: CanvasRenderer | WebGLRenderer): void;
+    draw(renderer: Renderer, world: World): void;
     /**
      * destroy function
      * @ignore

package/dist/types/system/device.d.ts

@@ -1,5 +1,6 @@
 /**
  * used by [un]watchDeviceOrientation()
+ * @ignore
  */
 export function onDeviceRotate(e: any): void;
 /**

package/dist/types/system/event.d.ts

@@ -63,6 +63,16 @@ export const DOM_READY: string;
  * @see event.on
  */
 export const BOOT: string;
+/**
+ * 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
+ */
+export const TICK: string;
 /**
  * event when the game is paused <br>
  * Data passed : none <br>
@@ -117,6 +127,16 @@ export const STATE_RESTART: string;
  * @see event.on
  */
 export const STATE_CHANGE: string;
+/**
+ * event for when a stage is resetted
+ * @public
+ * @constant
+ * @type {string}
+ * @name STAGE_RESET
+ * @memberof event
+ * @see event.on
+*/
+export const STAGE_RESET: string;
 /**
  * event for when the video is initialized<br>
  * Data passed : none <br>

package/dist/types/video/canvas/canvas_renderer.d.ts

@@ -4,29 +4,6 @@
  * @augments Renderer
  */
 export default 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
-     */
-    constructor(options: {
-        width: number;
-        height: number;
-        canvas?: HTMLCanvasElement | undefined;
-        antiAlias?: boolean | undefined;
-        transparent?: boolean | undefined;
-        subPixel?: boolean | undefined;
-        textureSeamFix?: boolean | undefined;
-        zoomX?: number | undefined;
-        zoomY?: number | undefined;
-    });
     context: CanvasRenderingContext2D;
     cache: TextureCache;
     /**

package/dist/types/video/renderer.d.ts

@@ -4,36 +4,9 @@
  */
 export default 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
-     */
-    constructor(options: {
-        width: number;
-        height: number;
-        canvas?: HTMLCanvasElement | undefined;
-        antiAlias?: boolean | undefined;
-        failIfMajorPerformanceCaveat?: boolean | undefined;
-        transparent?: boolean | undefined;
-        premultipliedAlpha?: boolean | undefined;
-        blendMode?: boolean | undefined;
-        depthBuffer?: boolean | undefined;
-        subPixel?: boolean | undefined;
-        verbose?: boolean | undefined;
-        zoomX?: number | undefined;
-        zoomY?: number | undefined;
-    });
+     * @param {Application.Settings} [options] - optional parameters for the renderer
+     */
+    constructor(options?: any);
     /**
      * The given constructor options
      * @public

package/dist/types/video/video.d.ts

@@ -1,33 +1,9 @@
 /**
  * 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
@@ -38,17 +14,7 @@
  *     scaleMethod : "fit"
  * });
  */
-export function init(width: number, height: number, options?: {
-    parent?: string | HTMLElement | undefined;
-    renderer?: number | Renderer;
-    scale?: string | number | undefined;
-    scaleMethod?: string | undefined;
-    preferWebGL1?: boolean | undefined;
-    powerPreference?: string | undefined;
-    transparent?: boolean | undefined;
-    antiAlias?: boolean | undefined;
-    consoleHeader?: boolean | undefined;
-} | undefined): boolean;
+export function init(width: number, height: number, options?: any): boolean;
 /**
  * Create and return a new Canvas element
  * @memberof video
@@ -64,30 +30,10 @@ export function createCanvas(width: number, height: number, returnOffscreenCanva
  * @returns {HTMLElement}
  */
 export function getParent(): HTMLElement;
-/**
- * @namespace video
- */
-/**
- * Select the HTML5 Canvas renderer
- * @memberof video
- * @static
- */
-export const CANVAS: number;
-/**
- * Select the WebGL renderer
- * @memberof video
- * @static
- */
-export const WEBGL: number;
-/**
- * Auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
- * @memberof video
- * @static
- */
-export const AUTO: number;
 /**
  * A reference to the active Canvas or WebGL active renderer renderer
  * @memberof video
  * @type {CanvasRenderer|WebGLRenderer}
  */
 export let renderer: CanvasRenderer | WebGLRenderer;
+export { CANVAS, WEBGL, AUTO } from "../const";

package/dist/types/video/webgl/webgl_renderer.d.ts

@@ -4,39 +4,6 @@
  * @augments Renderer
  */
 export default 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
-     */
-    constructor(options: {
-        width: number;
-        height: number;
-        canvas?: HTMLCanvasElement | undefined;
-        antiAlias?: boolean | undefined;
-        failIfMajorPerformanceCaveat?: boolean | undefined;
-        transparent?: boolean | undefined;
-        premultipliedAlpha?: boolean | undefined;
-        subPixel?: boolean | undefined;
-        preferWebGL1?: boolean | undefined;
-        depthTest?: boolean | undefined;
-        powerPreference?: string | undefined;
-        zoomX?: number | undefined;
-        zoomY?: number | undefined;
-        compositor?: any;
-    });
     /**
      * The WebGL version used by this renderer (1 or 2)
      * @type {number}
@@ -112,7 +79,7 @@ export default class WebGLRenderer extends Renderer {
      * @type {Map<WebGLCompositor>}
      */
     compositors: Map<WebGLCompositor, any>;
-    depthTest: boolean | undefined;
+    depthTest: any;
     customShader: any;
     cache: TextureCache;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "15.2.0",
+  "version": "15.3.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "type": "module",
@@ -63,7 +63,7 @@
     "@babel/plugin-syntax-import-assertions": "^7.20.0",
     "@fastify/static": "^6.10.1",
     "@melonjs/webdoc-theme": "^1.1.1",
-    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -71,18 +71,18 @@
     "chromedriver": "^113.0.0",
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
-    "eslint": "^8.40.0",
-    "eslint-plugin-jsdoc": "^44.2.3",
+    "eslint": "^8.41.0",
+    "eslint-plugin-jsdoc": "^44.2.4",
     "expect": "^29.5.0",
     "expect-mocha-image-snapshot": "^3.0.13",
     "fastify": "^4.17.0",
     "mocha": "^10.2.0",
     "npm-self-link": "^1.1.7",
-    "puppeteer": "^20.2.0",
-    "rollup": "^3.21.6",
+    "puppeteer": "^20.3.0",
+    "rollup": "^3.23.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
-    "terser": "^5.17.3",
+    "terser": "^5.17.5",
     "typescript": "^5.0.4"
   },
   "scripts": {

package/src/application/application.js

@@ -21,17 +21,7 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
     /**
      * @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}) {
@@ -166,6 +156,12 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
         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 = device.getElement(this.settings.parent);
+        if (typeof this.settings.scaleTarget !== "undefined" ) {
+            this.settings.scaleTarget = device.getElement(this.settings.scaleTarget);
+        }
+
         if (typeof this.settings.renderer === "number") {
             switch (this.settings.renderer) {
                 case AUTO:
@@ -187,7 +183,6 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
         event.on(event.WINDOW_ONORIENTATION_CHANGE, () => onresize(this), this);
 
         // add our canvas (default to document.body if settings.parent is undefined)
-        this.parentElement = device.getElement(this.settings.parent);
         this.parentElement.appendChild(this.renderer.getCanvas());
 
         // Mobile browser hacks
@@ -226,6 +221,16 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
         this.isInitialized = true;
 
         event.emit(event.GAME_INIT, this);
+        event.on(event.STATE_CHANGE, this.repaint, this);
+        event.on(event.STATE_RESTART, this.repaint, this);
+        event.on(event.STATE_RESUME, this.repaint, this);
+        event.on(event.STAGE_RESET, this.reset, this);
+        event.on(event.TICK, (time) => {
+            // update all game objects
+            this.update(time);
+            // render all game objects
+            this.draw();
+        }, this);
     }
 
     /**
@@ -306,9 +311,8 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
     /**
      * 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
@@ -332,7 +336,8 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
                 }
 
                 // 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.current().update(this.updateDelta) || this.isDirty;
 
                 this.lastUpdate = globalThis.performance.now();
                 this.updateAverageDelta = this.lastUpdate - this.lastUpdateStart;
@@ -351,9 +356,8 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
 
     /**
      * 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
             event.emit(event.GAME_BEFORE_DRAW, globalThis.performance.now());
@@ -362,7 +366,7 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
             this.renderer.clear();
 
             // render the stage
-            stage.draw(this.renderer);
+            state.current().draw(this.renderer, this.world);
 
             // set back to flag
             this.isDirty = false;