melonjs 14.5.0 → 15.1.0

package/src/application/application.js

@@ -27,13 +27,14 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
      * @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
      * @throws Will throw an exception if it fails to instantiate a renderer
      * @example
-     * var my game = new Application(640, 480, {renderer: me.video.AUTO}) {
+     * let my game = new Application(640, 480, {renderer: me.video.AUTO}) {
      *     ....
      * }
      */
@@ -72,14 +73,6 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
          */
         this.mergeGroup = true;
 
-        /**
-         * Specify the property to be used when sorting renderables.
-         * Accepted values : "x", "y", "z"
-         * @type {string}
-         * @default "z"
-         */
-        this.sortOn = "z";
-
         /**
          * Last time the game update loop was executed. <br>
          * Use this value to implement frame prediction in drawing events,
@@ -144,6 +137,7 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
         this.settings.transparent = !!(this.settings.transparent);
         this.settings.antiAlias = !!(this.settings.antiAlias);
         this.settings.failIfMajorPerformanceCaveat = !!(this.settings.failIfMajorPerformanceCaveat);
+        this.settings.depthTest = this.settings.depthTest === "z-buffer" ? "z-buffer" : "sorting";
         this.settings.subPixel = !!(this.settings.subPixel);
         this.settings.verbose = !!(this.settings.verbose);
         if (this.settings.scaleMethod.search(/^(fill-(min|max)|fit|flex(-(width|height))?|stretch)$/) !== -1) {
@@ -155,7 +149,7 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
         }
 
         // override renderer settings if &webgl or &canvas is defined in the URL
-        var uriFragment = utils.getUriFragment();
+        let uriFragment = utils.getUriFragment();
         if (uriFragment.webgl === true || uriFragment.webgl1 === true || uriFragment.webgl2 === true) {
             this.settings.renderer = WEBGL;
             if (uriFragment.webgl1 === true) {
@@ -183,14 +177,14 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
                     break;
             }
         } else {
-            var CustomRenderer = this.settings.renderer;
+            let CustomRenderer = this.settings.renderer;
             // a renderer class
             this.renderer = new CustomRenderer(this.settings);
         }
 
         // register to the channel
-        event.on(event.WINDOW_ONRESIZE, () => { onresize(this); }, this);
-        event.on(event.WINDOW_ONORIENTATION_CHANGE, () => { onresize(this); }, this);
+        event.on(event.WINDOW_ONRESIZE, () => onresize(this), this);
+        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);
@@ -208,7 +202,7 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
         // add an observer to detect when the dom tree is modified
         if ("MutationObserver" in globalThis) {
             // Create an observer instance linked to the callback function
-            var observer = new MutationObserver(onresize.bind(this, this));
+            let observer = new MutationObserver(() => onresize(this));
 
             // Start observing the target node for configured mutations
             observer.observe(this.parentElement, {
@@ -221,10 +215,13 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
         }
 
         // create a new physic world
-        this.world = new World();
+        this.world = new World(0, 0, this.settings.width, this.settings.height);
         // set the reference to this application instance
         this.world.app = this;
+        // app starting time
         this.lastUpdate = globalThis.performance.now();
+        // manually sort child if depthTest setting is "sorting"
+        this.world.autoSort = !(this.renderer.type === "WEBGL" && this.settings.depthTest === "z-buffer");
 
         this.isInitialized = true;
 
@@ -237,7 +234,7 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
      */
     reset() {
         // point to the current active stage "default" camera
-        var current = state.get();
+        let current = state.get();
         if (typeof current !== "undefined") {
             this.viewport = current.cameras.get("default");
         }
@@ -249,6 +246,19 @@ import { CANVAS, WEBGL, AUTO } from "../const.js";
         this.updateFrameRate();
     }
 
+    /**
+     * Specify the property to be used when sorting renderables for this application game world.
+     * Accepted values : "x", "y", "z", "depth"
+     * @type {string}
+     * @see World.sortOn
+     */
+    get sortOn() {
+        return this.world.sortOn;
+    }
+    set sortOn(value) {
+        this.world.sortOn = value;
+    }
+
     /**
      * Fired when a level is fully loaded and all renderable instantiated. <br>
      * Additionnaly the level id will also be passed to the called function.

package/src/application/header.js

@@ -5,13 +5,14 @@ import * as device from "../system/device";
  * @param {Application} game - the game application instance calling this function
  */
 export function consoleHeader(app) {
-    var renderType = app.renderer.type;
-    var gpu_renderer = (typeof app.renderer.GPURenderer === "string") ? " (" + app.renderer.GPURenderer + ")" : "";
-    var audioType = device.hasWebAudio ? "Web Audio" : "HTML5 Audio";
+    let renderType = app.renderer.type;
+    let gpu_renderer = (typeof app.renderer.GPURenderer === "string") ? " (" + app.renderer.GPURenderer + ")" : "";
+    let depthTesting = renderType.includes("WebGL") && app.renderer.depthTest === "z-buffer" ? "Depth Test | " : "";
+    let audioType = device.hasWebAudio ? "Web Audio" : "HTML5 Audio";
 
     // output video information in the console
     console.log(
-        renderType + " renderer" + gpu_renderer + " | " +
+        renderType + " renderer" + gpu_renderer + " | " + depthTesting +
         audioType + " | " +
         "pixel ratio " + device.devicePixelRatio + " | " +
         (device.platform.nodeJS ? "node.js" : device.platform.isMobile ? "mobile" : "desktop") + " | " +

package/src/application/resize.js

@@ -10,14 +10,14 @@ import * as device from "./../system/device";
  * @param {number} y - y scaling multiplier
  */
 function scale(game, x, y) {
-    var renderer = game.renderer;
-    var canvas = renderer.getCanvas();
-    var context = renderer.getContext();
-    var settings = renderer.settings;
-    var pixelRatio = device.devicePixelRatio;
+    let renderer = game.renderer;
+    let canvas = renderer.getCanvas();
+    let context = renderer.getContext();
+    let settings = renderer.settings;
+    let pixelRatio = device.devicePixelRatio;
 
-    var w = settings.zoomX = canvas.width * x * pixelRatio;
-    var h = settings.zoomY = canvas.height * y * pixelRatio;
+    let w = settings.zoomX = canvas.width * x * pixelRatio;
+    let h = settings.zoomY = canvas.height * y * pixelRatio;
 
     // update the global scale variable
     renderer.scaleRatio.set(x * pixelRatio, y * pixelRatio);
@@ -40,37 +40,37 @@ function scale(game, x, y) {
  * @param {Application} game - the game application instance triggering the resize
  */
 export function onresize(game) {
-    var renderer = game.renderer;
-    var settings = renderer.settings;
-    var scaleX = 1, scaleY = 1;
+    let renderer = game.renderer;
+    let settings = renderer.settings;
+    let scaleX = 1, scaleY = 1;
 
     if (settings.autoScale) {
 
         // set max the canvas max size if CSS values are defined
-        var canvasMaxWidth = Infinity;
-        var canvasMaxHeight = Infinity;
+        let canvasMaxWidth = Infinity;
+        let canvasMaxHeight = Infinity;
 
         if (globalThis.getComputedStyle) {
-            var style = globalThis.getComputedStyle(renderer.getCanvas(), null);
+            let style = globalThis.getComputedStyle(renderer.getCanvas(), null);
             canvasMaxWidth = parseInt(style.maxWidth, 10) || Infinity;
             canvasMaxHeight = parseInt(style.maxHeight, 10) || Infinity;
         }
 
         // get the maximum canvas size within the parent div containing the canvas container
-        var nodeBounds = device.getParentBounds(game.getParentElement());
+        let nodeBounds = device.getParentBounds(game.getParentElement());
 
-        var _max_width = Math.min(canvasMaxWidth, nodeBounds.width);
-        var _max_height = Math.min(canvasMaxHeight, nodeBounds.height);
+        let _max_width = Math.min(canvasMaxWidth, nodeBounds.width);
+        let _max_height = Math.min(canvasMaxHeight, nodeBounds.height);
 
         // calculate final canvas width & height
-        var screenRatio = _max_width / _max_height;
+        let screenRatio = _max_width / _max_height;
 
         if ((settings.scaleMethod === "fill-min" && screenRatio > renderer.designRatio) ||
             (settings.scaleMethod === "fill-max" && screenRatio < renderer.designRatio) ||
             (settings.scaleMethod === "flex-width")
         ) {
             // resize the display canvas to fill the parent container
-            var sWidth = Math.min(canvasMaxWidth, settings.height * screenRatio);
+            let sWidth = Math.min(canvasMaxWidth, settings.height * screenRatio);
             scaleX = scaleY = _max_width / sWidth;
             renderer.resize(Math.floor(sWidth), settings.height);
         }
@@ -79,7 +79,7 @@ export function onresize(game) {
                  (settings.scaleMethod === "flex-height")
         ) {
             // resize the display canvas to fill the parent container
-            var sHeight = Math.min(canvasMaxHeight, settings.width * (_max_height / _max_width));
+            let sHeight = Math.min(canvasMaxHeight, settings.width * (_max_height / _max_width));
             scaleX = scaleY = _max_height / sHeight;
             renderer.resize(settings.width, Math.floor(sHeight));
         }

package/src/audio/audio.js

@@ -40,7 +40,7 @@ let soundLoadError = function (sound_name, onerror_cb) {
     // check the retry counter
     if (retry_counter++ > 3) {
         // something went wrong
-        var errmsg = "melonJS: failed loading " + sound_name;
+        let errmsg = "melonJS: failed loading " + sound_name;
         if (stopOnAudioError === false) {
             // disable audio
             disable();
@@ -146,14 +146,14 @@ export function disable() {
  * @ignore
  */
 export function load(sound, html5, onload_cb, onerror_cb) {
-    var urls = [];
+    let urls = [];
     if (audioExts.length === 0) {
         throw new Error("target audio extension(s) should be set through me.audio.init() before calling the preloader.");
     }
     if (isDataUrl(sound.src) === true) {
         urls.push(sound.src);
     } else {
-        for (var i = 0; i < audioExts.length; i++) {
+        for (let i = 0; i < audioExts.length; i++) {
             urls.push(sound.src + sound.name + "." + audioExts[i] + nocache);
         }
     }
@@ -202,9 +202,9 @@ export function load(sound, html5, onload_cb, onerror_cb) {
  * me.audio.play("gameover_sfx", false, null, 0.5);
  */
 export function play(sound_name, loop = false, onend, volume) {
-    var sound = audioTracks[sound_name];
+    let sound = audioTracks[sound_name];
     if (sound && typeof sound !== "undefined") {
-        var id = sound.play();
+        let id = sound.play();
         if (typeof loop === "boolean") {
             // arg[0] can take different types in howler 2.0
             sound.loop(loop, id);
@@ -234,7 +234,7 @@ export function play(sound_name, loop = false, onend, volume) {
  * @param {number} [id] - the sound instance ID. If none is passed, all sounds in group will fade.
  */
 export function fade(sound_name, from, to, duration, id) {
-    var sound = audioTracks[sound_name];
+    let sound = audioTracks[sound_name];
     if (sound && typeof sound !== "undefined") {
         sound.fade(from, to, duration, id);
     } else {
@@ -251,12 +251,12 @@ export function fade(sound_name, from, to, duration, id) {
  * @returns {number} return the current seek position (if no extra parameters were given)
  * @example
  * // return the current position of the background music
- * var current_pos = me.audio.seek("dst-gameforest");
+ * let current_pos = me.audio.seek("dst-gameforest");
  * // set back the position of the background music to the beginning
  * me.audio.seek("dst-gameforest", 0);
  */
 export function seek(sound_name, ...args) {
-    var sound = audioTracks[sound_name];
+    let sound = audioTracks[sound_name];
     if (sound && typeof sound !== "undefined") {
         return sound.seek(...args);
     } else {
@@ -273,12 +273,12 @@ export function seek(sound_name, ...args) {
  * @returns {number} return the current playback rate (if no extra parameters were given)
  * @example
  * // get the playback rate of the background music
- * var rate = me.audio.rate("dst-gameforest");
+ * let rate = me.audio.rate("dst-gameforest");
  * // speed up the playback of the background music
  * me.audio.rate("dst-gameforest", 2.0);
  */
 export function rate(sound_name, ...args) {
-    var sound = audioTracks[sound_name];
+    let sound = audioTracks[sound_name];
     if (sound && typeof sound !== "undefined") {
         return sound.rate(...args);
     } else {
@@ -296,7 +296,7 @@ export function rate(sound_name, ...args) {
  */
 export function stop(sound_name, id) {
     if (typeof sound_name !== "undefined") {
-        var sound = audioTracks[sound_name];
+        let sound = audioTracks[sound_name];
         if (sound && typeof sound !== "undefined") {
             sound.stop(id);
             // remove the defined onend callback (if any defined)
@@ -319,7 +319,7 @@ export function stop(sound_name, id) {
  * me.audio.pause("cling");
  */
 export function pause(sound_name, id) {
-    var sound = audioTracks[sound_name];
+    let sound = audioTracks[sound_name];
     if (sound && typeof sound !== "undefined") {
         sound.pause(id);
     } else {
@@ -334,7 +334,7 @@ export function pause(sound_name, id) {
  * @param {number} [id] - the sound instance ID. If none is passed, all sounds in group will resume.
  * @example
  * // play a audio clip
- * var id = me.audio.play("myClip");
+ * let id = me.audio.play("myClip");
  * ...
  * // pause it
  * me.audio.pause("myClip", id);
@@ -343,7 +343,7 @@ export function pause(sound_name, id) {
  * me.audio.resume("myClip", id);
  */
 export function resume(sound_name, id) {
-    var sound = audioTracks[sound_name];
+    let sound = audioTracks[sound_name];
     if (sound && typeof sound !== "undefined") {
         sound.play(id);
     } else {
@@ -455,10 +455,8 @@ export function getVolume() {
  * // mute the background music
  * me.audio.mute("awesome_music");
  */
-export function mute(sound_name, id, mute) {
-    // if not defined : true
-    mute = (typeof(mute) === "undefined" ? true : !!mute);
-    var sound = audioTracks[sound_name];
+export function mute(sound_name, id, mute = true) {
+    let sound = audioTracks[sound_name];
     if (sound && typeof(sound) !== "undefined") {
         sound.mute(mute, id);
     } else {
@@ -527,7 +525,7 @@ export function unload(sound_name) {
  * me.audio.unloadAll();
  */
 export function unloadAll() {
-    for (var sound_name in audioTracks) {
+    for (let sound_name in audioTracks) {
         if (audioTracks.hasOwnProperty(sound_name)) {
             unload(sound_name);
         }

package/src/camera/camera2d.js

@@ -16,7 +16,7 @@ import { game } from "../index.js";
 // some ref shortcut
 const MIN = Math.min, MAX = Math.max;
 
-var targetV = new Vector2d();
+let targetV = new Vector2d();
 
 /**
  * @classdesc
@@ -178,7 +178,7 @@ var targetV = new Vector2d();
 
     /** @ignore */
     _followH(target) {
-        var targetX = this.pos.x;
+        let targetX = this.pos.x;
         if ((target.x - this.pos.x) > (this.deadzone.right)) {
             targetX = MIN((target.x) - (this.deadzone.right), this.bounds.width - this.width);
         }
@@ -191,7 +191,7 @@ var targetV = new Vector2d();
 
     /** @ignore */
     _followV(target) {
-        var targetY = this.pos.y;
+        let targetY = this.pos.y;
         if ((target.y - this.pos.y) > (this.deadzone.bottom)) {
             targetY = MIN((target.y) - (this.deadzone.bottom), this.bounds.height - this.height);
         }
@@ -384,8 +384,8 @@ var targetV = new Vector2d();
      * @param {number} y
      */
     moveTo(x, y) {
-        var _x = this.pos.x;
-        var _y = this.pos.y;
+        let _x = this.pos.x;
+        let _y = this.pos.y;
 
         this.pos.x = clamp(
             x,
@@ -561,7 +561,7 @@ var targetV = new Vector2d();
      */
     fadeIn(color, duration = 1000, onComplete) {
         this._fadeIn.color = pool.pull("Color").copy(color);
-        var _alpha = this._fadeIn.color.alpha;
+        let _alpha = this._fadeIn.color.alpha;
         this._fadeIn.color.alpha = 0.0;
         this._fadeIn.tween = pool.pull("Tween", this._fadeIn.color)
             .to({ alpha: _alpha }, duration)
@@ -577,7 +577,7 @@ var targetV = new Vector2d();
      * @param {Renderable} target - the renderable to focus the camera on
      */
     focusOn(target) {
-        var bounds = target.getBounds();
+        let bounds = target.getBounds();
         this.moveTo(
             target.pos.x + bounds.left + (bounds.width / 2),
             target.pos.y + bounds.top + (bounds.height / 2)
@@ -687,8 +687,8 @@ var targetV = new Vector2d();
      * @ignore
      */
     draw(renderer, container) {
-        var translateX = this.pos.x + this.offset.x;
-        var translateY = this.pos.y + this.offset.y;
+        let translateX = this.pos.x + this.offset.x;
+        let translateY = this.pos.y + this.offset.y;
 
         // translate the world coordinates by default to screen coordinates
         container.currentTransform.translate(-translateX, -translateY);

package/src/entity/entity.js

@@ -108,7 +108,7 @@ import Body from "./../physics/body.js";
                 pool.pull("Vector2d", 0,          this.height)
             ]);
         }
-        this.body = new Body(this, settings.shapes, this.onBodyUpdate.bind(this));
+        this.body = new Body(this, settings.shapes, () => this.onBodyUpdate());
 
         // resize the entity if required
         if (this.width === 0 && this.height === 0) {
@@ -160,7 +160,7 @@ import Body from "./../physics/body.js";
      * @returns {Bounds} this entity bounding box Rectangle object
      */
     updateBounds(absolute = true) {
-        var bounds = this.getBounds();
+        let bounds = this.getBounds();
 
         bounds.clear();
         bounds.addFrame(
@@ -230,7 +230,7 @@ import Body from "./../physics/body.js";
      * @param {Camera2d} [viewport] - the viewport to (re)draw
      */
     draw(renderer, viewport) {
-        var renderable = this.renderable;
+        let renderable = this.renderable;
         if (renderable instanceof Renderable) {
             // predraw (apply transforms)
             renderable.preDraw(renderer);

package/src/geometries/ellipse.js

@@ -84,14 +84,14 @@ import pool from "./../system/pooling.js";
      * @returns {Ellipse} this instance for objecf chaining
      */
     setShape(x, y, w, h) {
-        var hW = w / 2;
-        var hH = h / 2;
+        const hW = w / 2;
+        const hH = h / 2;
 
         this.pos.set(x, y);
         this.radius = Math.max(hW, hH);
         this.ratio.set(hW / this.radius, hH / this.radius);
         this.radiusV.set(this.radius, this.radius).scaleV(this.ratio);
-        var r = this.radius * this.radius;
+        const r = this.radius * this.radius;
         this.radiusSq.set(r, r).scaleV(this.ratio);
 
         // update the corresponding bounds
@@ -175,7 +175,7 @@ import pool from "./../system/pooling.js";
      * @returns {Ellipse} this ellipse
      */
     translate() {
-        var _x, _y;
+        let _x, _y;
 
         if (arguments.length === 2) {
             // x, y
@@ -212,7 +212,7 @@ import pool from "./../system/pooling.js";
      * @returns {boolean} true if contains
      */
     contains() {
-        var _x, _y;
+        let _x, _y;
 
         if (arguments.length === 2) {
           // x, y

package/src/geometries/line.js

@@ -30,7 +30,7 @@ import Polygon from "./poly.js";
      * @returns {boolean} true if contains
      */
     contains() {
-        var _x, _y;
+        let _x, _y;
 
         if (arguments.length === 2) {
           // x, y
@@ -46,8 +46,8 @@ import Polygon from "./poly.js";
         // rather than creating temp translated vectors
         _x -= this.pos.x; // Cx
         _y -= this.pos.y; // Cy
-        var start = this.points[0]; // Ax/Ay
-        var end = this.points[1]; // Bx/By
+        let start = this.points[0]; // Ax/Ay
+        let end = this.points[1]; // Bx/By
 
         //(Cy - Ay) * (Bx - Ax) = (By - Ay) * (Cx - Ax)
         return (_y - start.y) * (end.x - start.x) === (end.y - start.y) * (_x - start.x);
@@ -61,12 +61,12 @@ import Polygon from "./poly.js";
      * @returns {Line} this instance for objecf chaining
      */
     recalc() {
-        var edges = this.edges;
-        var normals = this.normals;
-        var indices = this.indices;
+        let edges = this.edges;
+        let normals = this.normals;
+        let indices = this.indices;
 
         // Copy the original points array and apply the offset/angle
-        var points = this.points;
+        let points = this.points;
 
         if (points.length !== 2) {
             throw new Error("Requires exactly 2 points");
@@ -96,7 +96,7 @@ import Polygon from "./poly.js";
      * @returns {Line} new Line
      */
     clone() {
-        var copy = [];
+        let copy = [];
         this.points.forEach((point) => {
             copy.push(point.clone());
         });