melonjs 17.1.0 → 17.3.0

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

@@ -7,10 +7,10 @@ export default class Application {
     /**
      * @param {number} width - The width of the canvas viewport
      * @param {number} height - The height of the canvas viewport
-     * @param {Application.Settings} [options] - The optional parameters for the application and default renderer
+     * @param {ApplicationSettings} [options] - The optional parameters for the application and default renderer
      * @throws Will throw an exception if it fails to instantiate a renderer
      */
-    constructor(width: number, height: number, options?: any);
+    constructor(width: number, height: number, options?: ApplicationSettings | undefined);
     /**
      * the parent HTML element holding the main canvas of this application
      * @type {HTMLElement}
@@ -55,9 +55,9 @@ export default class Application {
     isInitialized: boolean;
     /**
      * the given settings used when creating this application
-     * @type {Application.settings}
+     * @type {ApplicationSettings}
      */
-    settings: Application.settings;
+    settings: ApplicationSettings;
     /**
      * Specify whether to pause this app when losing focus
      * @type {boolean}
@@ -94,9 +94,9 @@ export default class Application {
      * init the game instance (create a physic world, update starting time, etc..)
      * @param {number} width - The width of the canvas viewport
      * @param {number} height - The height of the canvas viewport
-     * @param {Application.Settings} [options] - The optional parameters for the application and default renderer
+     * @param {ApplicationSettings} [options] - The optional parameters for the application and default renderer
      */
-    init(width: number, height: number, options?: any): void;
+    init(width: number, height: number, options?: ApplicationSettings | undefined): void;
     /**
      * reset the game Object manager
      * destroy all current objects
@@ -145,3 +145,4 @@ export default class Application {
 }
 import CanvasRenderer from "./../video/canvas/canvas_renderer.js";
 import World from "./../physics/world.js";
+import { ApplicationSettings } from "./settings.js";

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

@@ -1,28 +1,7 @@
-export namespace defaultSettings {
-    let parent: undefined;
-    let renderer: number;
-    let autoScale: boolean;
-    let scale: number;
-    let scaleMethod: string;
-    let scaleTarget: undefined;
-    let transparent: boolean;
-    let premultipliedAlpha: boolean;
-    let blendMode: string;
-    let physic: string;
-    let antiAlias: boolean;
-    let failIfMajorPerformanceCaveat: boolean;
-    let subPixel: boolean;
-    let preferWebGL1: boolean;
-    let powerPreference: string;
-    let verbose: boolean;
-    let consoleHeader: boolean;
-    let legacy: boolean;
-    let canvas: undefined;
-}
 /**
  * Application & Renderer Settings definition.
  */
-export type Settings = {
+export type ApplicationSettings = {
     /**
      * - the DOM parent element to hold the canvas in the HTML file
      */
@@ -56,7 +35,7 @@ export type Settings = {
      * - <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?: "flex" | "fill-min" | "fill-max" | "flex-width" | "flex-height" | "stretch" | "fit" | undefined;
+    scaleMethod?: "flex" | "fit" | "fill-min" | "fill-max" | "flex-width" | "flex-height" | "stretch" | 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)
      */
@@ -85,4 +64,42 @@ export type Settings = {
      * - whether to display melonJS version and basic device information in the console
      */
     consoleHeader?: boolean | undefined;
+    /**
+     * - The actual width of the canvas with scaling applied
+     */
+    zoomX?: number | undefined;
+    /**
+     * - The actual height of the canvas with scaling applied
+     */
+    zoomY?: number | undefined;
+    /**
+     * - a custom compositor class (WebGL only)
+     */
+    compositor?: any;
+    /**
+     * - the physic system to use (default: "builtin", or "none" to disable builtin physic)
+     */
+    physic?: string | undefined;
 };
+export namespace ApplicationSettings {
+    let parent: undefined;
+    let canvas: undefined;
+    let renderer: number;
+    let autoScale: boolean;
+    let scale: number;
+    let scaleMethod: string;
+    let scaleTarget: undefined;
+    let preferWebGL1: boolean;
+    let depthTest: string;
+    let powerPreference: string;
+    let transparent: boolean;
+    let antiAlias: boolean;
+    let consoleHeader: boolean;
+    let premultipliedAlpha: boolean;
+    let blendMode: string;
+    let physic: string;
+    let failIfMajorPerformanceCaveat: boolean;
+    let subPixel: boolean;
+    let verbose: boolean;
+    let legacy: boolean;
+}

package/dist/types/audio/audio.d.ts

@@ -113,11 +113,12 @@ export function rate(sound_name: string, ...args: any[]): number;
  * @memberof audio
  * @param {string} sound_name - audio clip name - case sensitive
  * @param {number} [pan] - the panning value - A value of -1.0 is all the way left and 1.0 is all the way right.
+ * @param {number} [id] - the sound instance ID. If none is passed, all sounds in group will be changed.
  * @return {number} the current panning value
  * @example
  * me.audio.stereo("cling", -1);
  */
-export function stereo(sound_name: string, pan?: number | undefined): number;
+export function stereo(sound_name: string, pan?: number | undefined, id?: number | undefined): number;
 /**
  * get or set the 3D spatial position for the specified sound.
  * @memberof audio
@@ -125,9 +126,10 @@ export function stereo(sound_name: string, pan?: number | undefined): number;
  * @param  {Number} x - the x-position of the audio source.
  * @param  {Number} y - the y-position of the audio source.
  * @param  {Number} z - the z-position of the audio source.
+ * @param {number} [id] - the sound instance ID. If none is passed, all sounds in group will be changed.
  * @return {Array} the current 3D spatial position: [x, y, z]
  */
-export function position(sound_name: string, x: number, y: number, z: number): any[];
+export function position(sound_name: string, x: number, y: number, z: number, id?: number | undefined): any[];
 /**
  * Get/set the direction the audio source is pointing in the 3D cartesian coordinate space.
  * Depending on how direction the sound is, based on the `cone` attributes, a sound pointing away from the listener can be quiet or silent.
@@ -136,9 +138,10 @@ export function position(sound_name: string, x: number, y: number, z: number): a
  * @param  {Number} x - the x-orientation of the audio source.
  * @param  {Number} y - the y-orientation of the audio source.
  * @param  {Number} z - the z-orientation of the audio source.
+ * @param {number} [id] - the sound instance ID. If none is passed, all sounds in group will be changed.
  * @return {Array} the current 3D spatial orientation: [x, y, z]
  */
-export function orientation(sound_name: string, x: number, y: number, z: number): any[];
+export function orientation(sound_name: string, x: number, y: number, z: number, id?: number | undefined): any[];
 /**
  * get or set the panner node's attributes for a sound or group of sounds.
  * See {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics#creating_a_panner_node}
@@ -153,6 +156,7 @@ export function orientation(sound_name: string, x: number, y: number, z: number)
  * @param {string} [settings.refDistance=1] - A reference distance for reducing volume as source moves further from the listener. This is simply a variable of the distance model and has a different effect depending on which model is used and the scale of your coordinates. Generally, volume will be equal to 1 at this distance.
  * @param {string} [settings.rolloffFactor=1] - How quickly the volume reduces as source moves from listener. This is simply a variable of the distance model and can be in the range of `[0, 1]` with `linear` and `[0, ∞]` with `inverse` and `exponential`.
  * @param {string} [settings.panningModel="HRTF"] - Determines which spatialization algorithm is used to position audio. Can be `HRTF` or `equalpower`.
+ * @param {number} [id] - the sound instance ID. If none is passed, all sounds in group will be changed.
  * @return {Object} current panner attributes.
  * @example
  * me.audio.panner("cling", {
@@ -162,7 +166,7 @@ export function orientation(sound_name: string, x: number, y: number, z: number)
  *    distanceModel: 'exponential'
  * });
  */
-export function panner(sound_name: string, attributes: any): Object;
+export function panner(sound_name: string, attributes: any, id?: number | undefined): Object;
 /**
  * stop the specified sound on all channels
  * @memberof audio

package/dist/types/loader/cache.d.ts

@@ -6,3 +6,4 @@ export let tmxList: {};
 export let binList: {};
 export let jsonList: {};
 export let videoList: {};
+export let fontList: {};

package/dist/types/loader/loader.d.ts

@@ -242,6 +242,13 @@ export function getJSON(elt: string): JSON;
  * @returns {HTMLVideoElement}
  */
 export function getVideo(elt: string): HTMLVideoElement;
+/**
+ * return the specified FontFace Object
+ * @memberof loader
+ * @param {string} elt - name of the font file
+ * @returns {FontFace}
+ */
+export function getFont(elt: string): FontFace;
 /**
  * a small class to manage loading of stuff and manage resources
  * @namespace loader

package/dist/types/physics/world.d.ts

@@ -18,7 +18,7 @@ export default class World extends Container {
     app: Application;
     /**
      * the physic engine used by melonJS
-     * @see Application.Settings.physic
+     * @see ApplicationSettings.physic
      * @type {string}
      * @default "builtin"
      * @example

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

@@ -15,6 +15,7 @@
 * @property {boolean} isWeixin `true` if running under Wechat
 * @property {boolean} nodeJS `true` if running under node.js
 * @property {boolean} isMobile `true` if a mobile device
+* @property {boolean} webApp `true` if running as a standalone web app
 */
 export const ua: string;
 export const iOS: boolean;
@@ -29,3 +30,4 @@ export const ejecta: boolean;
 export const isWeixin: boolean;
 export const nodeJS: boolean;
 export const isMobile: boolean;
+export const webApp: boolean;

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

@@ -320,10 +320,13 @@ export default class CanvasRenderer extends Renderer {
      */
     getGlobalAlpha(): number;
     /**
-     * Set the line width on the context
-     * @param {number} width - Line width
+     * @ignore
      */
-    setLineWidth(width: number): void;
+    set lineWidth(value: number | ((width: number) => void));
+    /**
+     * sets or returns the thickness of lines for shape drawing
+     */
+    get lineWidth(): number | ((width: number) => void);
     /**
      * Reset (overrides) the renderer transformation matrix to the
      * identity one, and then apply the given transformation matrix.

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

@@ -4,7 +4,7 @@
  */
 export default class Renderer {
     /**
-     * @param {Application.Settings} [options] - optional parameters for the renderer
+     * @param {ApplicationSettings} [options] - optional parameters for the renderer
      */
     constructor(options?: any);
     /**
@@ -66,7 +66,6 @@ export default class Renderer {
      * @ignore
      */
     currentBlendMode: string;
-    canvas: any;
     currentColor: Color;
     currentTint: Color;
     projectionMatrix: Matrix3d;
@@ -96,12 +95,12 @@ export default class Renderer {
      */
     reset(): void;
     /**
-     * return a reference to the canvas which this renderer draws to
+     * return a reference to the current render target corresponding canvas which this renderer draws to
      * @returns {HTMLCanvasElement}
      */
     getCanvas(): HTMLCanvasElement;
     /**
-     * return a reference to this renderer canvas corresponding Context
+     * return a reference to the current render target corresponding Context
      * @returns {CanvasRenderingContext2D|WebGLRenderingContext}
      */
     getContext(): CanvasRenderingContext2D | WebGLRenderingContext;
@@ -110,14 +109,6 @@ export default class Renderer {
      * @returns {string} blend mode
      */
     getBlendMode(): string;
-    /**
-     * Returns the 2D Context object of the given Canvas<br>
-     * Also configures anti-aliasing and blend modes based on constructor options.
-     * @param {HTMLCanvasElement} canvas
-     * @param {boolean} [transparent=true] - use false to disable transparency
-     * @returns {CanvasRenderingContext2D}
-     */
-    getContext2d(canvas: HTMLCanvasElement, transparent?: boolean | undefined): CanvasRenderingContext2D;
     /**
      * get the current fill & stroke style color.
      * @returns {Color} current global color
@@ -141,11 +132,10 @@ export default class Renderer {
      */
     resize(width: number, height: number): void;
     /**
-     * enable/disable image smoothing (scaling interpolation) for the given context
-     * @param {CanvasRenderingContext2D} context
+     * enable/disable image smoothing (scaling interpolation) for the current render target
      * @param {boolean} [enable=false]
      */
-    setAntiAlias(context: CanvasRenderingContext2D, enable?: boolean | undefined): void;
+    setAntiAlias(enable?: boolean | undefined): void;
     /**
      * set/change the current projection matrix (WebGL only)
      * @param {Matrix3d} matrix
@@ -167,7 +157,7 @@ export default class Renderer {
      * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src - the source image to be tinted
      * @param {Color|string} color - the color that will be used to tint the image
      * @param {string} [mode="multiply"] - the composition mode used to tint the image
-     * @returns {HTMLCanvasElement|OffscreenCanvas} a new canvas element representing the tinted image
+     * @returns {HTMLCanvasElement|OffscreenCanvas} a new canvas or offscreencanvas (if supported) element representing the tinted image
      */
     tint(src: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas, color: Color | string, mode?: string | undefined): HTMLCanvasElement | OffscreenCanvas;
     /**

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

@@ -6,18 +6,15 @@ declare class CanvasRenderTarget {
     /**
      * @param {number} width - the desired width of the canvas
      * @param {number} height - the desired height of the canvas
-     * @param {object} attributes - The attributes to create both the canvas and context
-     * @param {boolean} [attributes.context="2d"] - the context type to be created ("2d", "webgl", "webgl2")
+     * @param {Settings} attributes - The attributes to create both the canvas and context
+     * @param {boolean} [attributes.context="2d"] - the context type to be created ("2d", "webgl")
+     * @param {boolean} [attributes.preferWebGL1=false] - set to true for force using WebGL1 instead of WebGL2 (if supported)
+     * @param {boolean} [attributes.transparent=false] - specify if the canvas contains an alpha channel
      * @param {boolean} [attributes.offscreenCanvas=false] - will create an offscreenCanvas if true instead of a standard canvas
      * @param {boolean} [attributes.willReadFrequently=false] - Indicates whether or not a lot of read-back operations are planned
      * @param {boolean} [attributes.antiAlias=false] - Whether to enable anti-aliasing, use false (default) for a pixelated effect.
      */
-    constructor(width: number, height: number, attributes?: {
-        context?: boolean | undefined;
-        offscreenCanvas?: boolean | undefined;
-        willReadFrequently?: boolean | undefined;
-        antiAlias?: boolean | undefined;
-    });
+    constructor(width: number, height: number, attributes?: Settings);
     /**
      * the canvas created for this CanvasRenderTarget
      * @type {HTMLCanvasElement|OffscreenCanvas}
@@ -28,7 +25,7 @@ declare class CanvasRenderTarget {
      * @type {CanvasRenderingContext2D|WebGLRenderingContext}
      */
     context: CanvasRenderingContext2D | WebGLRenderingContext;
-    attributes: never;
+    attributes: any;
     WebGLVersion: any;
     /**
      * @ignore

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

@@ -83,6 +83,12 @@ export class TextureAtlas {
      * @ignore
      */
     atlases: Map<any, any>;
+    /**
+     * the default "active" atlas (used for multiAtlas)
+     * @type {Map}
+     * @ignore
+     */
+    activeAtlas: Map<any, any>;
     repeat: any;
     /**
      * return the default or specified atlas dictionnary

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

@@ -28,22 +28,24 @@ declare class TextureCache {
     /**
      * @ignore
      */
-    get(image: any, atlas: any): any;
+    getUnit(texture: any): any;
     /**
      * @ignore
+     * cache the textureAltas for the given image
      */
-    delete(image: any): void;
+    set(image: any, textureAtlas: any): boolean;
     /**
      * @ignore
+     * return the textureAltas for the given image
      */
-    tint(src: any, color: any): any;
+    get(image: any, atlas: any): any;
     /**
      * @ignore
      */
-    set(image: any, texture: any): boolean;
+    delete(image: any): void;
     /**
      * @ignore
      */
-    getUnit(texture: any): any;
+    tint(src: any, color: any): any;
 }
 import { ArrayMultimap } from "@teppeis/multimaps";

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

@@ -3,7 +3,7 @@
  * @memberof video
  * @param {number} width - The width of the canvas viewport
  * @param {number} height - The height of the canvas viewport
- * @param {Application.Settings} [options] - optional parameters for the renderer
+ * @param {ApplicationSettings} [options] - optional parameters for the renderer
  * @returns {boolean} false if initialization failed (canvas not supported)
  * @example
  * // init the video with a 640x480 canvas
@@ -14,7 +14,7 @@
  *     scaleMethod : "fit"
  * });
  */
-export function init(width: number, height: number, options?: any): boolean;
+export function init(width: number, height: number, options?: ApplicationSettings | undefined): boolean;
 /**
  * Create and return a new Canvas element
  * @memberof video
@@ -36,3 +36,4 @@ export function getParent(): HTMLElement;
  * @type {CanvasRenderer|WebGLRenderer}
  */
 export let renderer: CanvasRenderer | WebGLRenderer;
+import { ApplicationSettings } from "../application/settings.js";

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

@@ -1,6 +1,6 @@
 /**
  * @classdesc
- * a WebGL renderer object
+ * a WebGL renderer draw
  * @augments Renderer
  */
 export default class WebGLRenderer extends Renderer {
@@ -24,6 +24,13 @@ export default class WebGLRenderer extends Renderer {
      * @type {WebGLRenderingContext}
      */
     gl: WebGLRenderingContext;
+    /**
+     * sets or returns the thickness of lines for shape drawing (limited to strokeLine)
+     * @type {number}
+     * @default 1
+     * @see WebGLRenderer#strokeLine
+     */
+    lineWidth: number;
     /**
      * the vertex buffer used by this WebGL Renderer
      * @type {WebGLBuffer}
@@ -329,11 +336,6 @@ export default class WebGLRenderer extends Renderer {
      * @param {Color|string} color - css color string.
      */
     setColor(color: Color | string): void;
-    /**
-     * Set the line width
-     * @param {number} width - Line width
-     */
-    setLineWidth(width: number): void;
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @param {number} x - arc center point x-axis

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "17.1.0",
+  "version": "17.3.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "type": "module",
@@ -53,45 +53,45 @@
   ],
   "dependencies": {
     "@teppeis/multimaps": "^3.0.0",
-    "core-js": "^3.36.1",
+    "core-js": "^3.37.1",
     "earcut": "2.2.4",
     "eventemitter3": "^5.0.1",
     "howler": "2.2.4",
-    "semver": "^7.6.0",
+    "save-dev": "^0.0.1-security",
+    "semver": "^7.6.2",
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/plugin-syntax-import-assertions": "^7.24.1",
-    "@fastify/static": "^7.0.1",
+    "@fastify/static": "^7.0.4",
     "@melonjs/webdoc-theme": "^1.1.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@webdoc/cli": "^2.2.0",
-    "chromedriver": "^123.0.1",
+    "chromedriver": "^125.0.3",
     "cross-env": "^7.0.3",
     "del-cli": "^5.1.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-jsdoc": "^48.2.2",
+    "eslint": "^9.4.0",
+    "eslint-plugin-jsdoc": "^48.2.7",
     "expect": "^29.7.0",
     "expect-mocha-image-snapshot": "^3.0.16",
-    "fastify": "^4.26.2",
+    "fastify": "^4.27.0",
     "mocha": "^10.4.0",
     "npm-self-link": "^1.1.7",
-    "puppeteer": "^22.6.1",
-    "rollup": "^4.13.2",
+    "puppeteer": "^22.10.0",
+    "rollup": "^4.18.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
-    "terser": "^5.30.0",
-    "typescript": "^5.4.3"
+    "terser": "^5.31.0",
+    "typescript": "^5.4.5"
   },
   "scripts": {
     "build": "npm run lint && rollup -c --silent",
     "build:cd": "npm run lint && rollup -c --failAfterWarnings",
     "dist": " npm run clean && npm run build && mkdirp dist && cp -fR build/*.* dist/ && npm run types && npm run doc",
-    "lint": "eslint src/** rollup.config.mjs",
+    "lint": "eslint",
     "pretest": "mkdirp tests/browser/public/lib && cp -f build/melonjs.module.js tests/browser/public/lib",
     "test": "npm run test-node && mocha ./tests/browser/spec/*.js --reporter spec --bail --timeout 10000",
     "test-node": "node build/melonjs.module.js",

package/src/application/application.js

@@ -7,7 +7,7 @@ import timer from "./../system/timer.js";
 import state from "./../state/state.js";
 import World from "./../physics/world.js";
 import { onresize } from "./resize.js";
-import { defaultSettings } from "./settings.js";
+import { ApplicationSettings } from "./settings.js";
 import { consoleHeader } from "./header.js";
 import { CANVAS, WEBGL, AUTO } from "../const.js";
 
@@ -20,7 +20,7 @@ export default class Application {
     /**
      * @param {number} width - The width of the canvas viewport
      * @param {number} height - The height of the canvas viewport
-     * @param {Application.Settings} [options] - The optional parameters for the application and default renderer
+     * @param {ApplicationSettings} [options] - The optional parameters for the application and default renderer
      * @throws Will throw an exception if it fails to instantiate a renderer
      */
     constructor(width, height, options) {
@@ -76,7 +76,7 @@ export default class Application {
 
         /**
          * the given settings used when creating this application
-         * @type {Application.settings}
+         * @type {ApplicationSettings}
          */
         this.settings = undefined;
 
@@ -137,11 +137,11 @@ export default class Application {
      * init the game instance (create a physic world, update starting time, etc..)
      * @param {number} width - The width of the canvas viewport
      * @param {number} height - The height of the canvas viewport
-     * @param {Application.Settings} [options] - The optional parameters for the application and default renderer
+     * @param {ApplicationSettings} [options] - The optional parameters for the application and default renderer
      */
     init(width, height, options) {
 
-        this.settings = Object.assign(defaultSettings, options || {});
+        this.settings = Object.assign(ApplicationSettings, options || {});
 
         // sanitize potential given parameters
         this.settings.width = width;
@@ -180,7 +180,7 @@ export default class Application {
 
         // identify parent element and/or the html target for resizing
         this.parentElement = device.getElement(this.settings.parent);
-        if (typeof this.settings.scaleTarget !== "undefined" ) {
+        if (typeof this.settings.scaleTarget !== "undefined") {
             this.settings.scaleTarget = device.getElement(this.settings.scaleTarget);
         }
 

package/src/application/header.js

@@ -20,7 +20,7 @@ export function consoleHeader(app) {
         device.language
     );
 
-    console.log( "resolution: " + "requested " + app.settings.width + "x" + app.settings.height +
+    console.log("resolution: " + "requested " + app.settings.width + "x" + app.settings.height +
         ", got " + app.renderer.width + "x" + app.renderer.height
     );
 }

package/src/application/settings.js

@@ -1,29 +1,6 @@
-// default settings
-export const defaultSettings = {
-    parent : undefined,
-    renderer : 2, // AUTO
-    autoScale : false,
-    scale : 1.0,
-    scaleMethod : "manual",
-    scaleTarget : undefined,
-    transparent : false,
-    premultipliedAlpha: true,
-    blendMode : "normal",
-    physic : "builtin",
-    antiAlias : false,
-    failIfMajorPerformanceCaveat : true,
-    subPixel : false,
-    preferWebGL1 : false,
-    powerPreference : "default",
-    verbose : false,
-    consoleHeader : true,
-    legacy : false,
-    canvas : undefined
-};
-
 /**
  * Application & Renderer Settings definition.
- * @typedef {object} Settings
+ * @typedef {Object} ApplicationSettings
  * @property {string|HTMLElement} [parent=document.body] - the DOM parent element to hold the canvas in the HTML file
  * @property {HTMLCanvasElement} [canvas] - an existing canvas element to use as the renderer target (by default melonJS will create its own canvas based on given parameters)
  * @property {number|Renderer} [renderer=AUTO] - renderer to use (CANVAS, WEBGL, AUTO), or a custom renderer class
@@ -50,10 +27,30 @@ export const defaultSettings = {
  * @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)
- * @param {string} [option.physic="builtin"] - the physic system to use (default: "builtin", or "none" to disable builtin physic)
- * @see Application
- * @memberof Application
+ * @property {number} [zoomX=width] - The actual width of the canvas with scaling applied
+ * @property {number} [zoomY=height] - The actual height of the canvas with scaling applied
+ * @property {Compositor} [compositor] - a custom compositor class (WebGL only)
+ * @property {string} [physic="builtin"] - the physic system to use (default: "builtin", or "none" to disable builtin physic)
  */
+export const ApplicationSettings = {
+    parent : undefined,
+    canvas : undefined,
+    renderer : 2, // AUTO
+    autoScale : false,
+    scale : 1.0,
+    scaleMethod : "manual",
+    scaleTarget : undefined,
+    preferWebGL1 : false,
+    depthTest: "sorting",
+    powerPreference : "default",
+    transparent : false,
+    antiAlias : false,
+    consoleHeader : true,
+    premultipliedAlpha: true,
+    blendMode : "normal",
+    physic : "builtin",
+    failIfMajorPerformanceCaveat : true,
+    subPixel : false,
+    verbose : false,
+    legacy : false
+};