melonjs 10.12.0 → 13.0.0

package/src/system/dom.js

@@ -0,0 +1,69 @@
+import * as event from "./event.js";
+
+// track if DOMContentLoaded was called already
+let readyBound = false;
+
+// is the DOM ready ?
+let isDOMReady = false;
+
+// check if the dom is ready
+function _domReady() {
+
+    // Make sure that the DOM is not already loaded
+    if (!isDOMReady) {
+        // be sure document.body is there
+        if (typeof globalThis.document !== "undefined" && !globalThis.document.body) {
+            return setTimeout(_domReady, 13);
+        }
+
+        // clean up loading event
+        if (typeof globalThis.document !== "undefined" && typeof globalThis.document.removeEventListener === "function") {
+            globalThis.document.removeEventListener(
+                "DOMContentLoaded",
+                _domReady,
+                false
+            );
+        }
+
+        if (typeof globalThis.removeEventListener === "function") {
+            // remove the event on globalThis.onload (always added in `onReady`)
+            globalThis.removeEventListener("load", _domReady, false);
+        }
+
+        // execute all callbacks
+        event.emit(event.DOM_READY);
+
+        // Remember that the DOM is ready
+        isDOMReady = true;
+    }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
+export function DOMContentLoaded(fn) {
+    // If the DOM is already ready
+    if (isDOMReady) {
+        // Execute the function immediately
+        fn.call(globalThis, []);
+    }
+    else {
+        // else add the function to the DOM_READY event
+        event.once(event.DOM_READY, fn, globalThis);
+        // bind dom load event if not done yet
+        if (!readyBound) {
+            // directly call domReady if document is already "ready"
+            if (((typeof process !== "undefined") && (process.release.name === "node")) || (typeof globalThis.document !== "undefined" && globalThis.document.readyState === "complete")) {
+                // defer the fn call to ensure our script is fully loaded
+                globalThis.setTimeout(_domReady, 0);
+            }
+            else {
+                if (typeof globalThis.document !== "undefined" && typeof globalThis.document.addEventListener === "function") {
+                    // Use the handy event callback
+                    globalThis.document.addEventListener("DOMContentLoaded", _domReady, false);
+                }
+                // A fallback to globalThis.onload, that will always work
+                globalThis.addEventListener("load", _domReady, false);
+            }
+            readyBound = true;
+        }
+    }
+}

package/src/system/event.js

@@ -8,6 +8,17 @@ import EventEmitter from "eventemitter3";
 // internal instance of the event emiter
 var eventEmitter = new EventEmitter();
 
+/**
+ * event when the DOM is Ready is booting
+ * @public
+ * @constant
+ * @type {string}
+ * @name DOM_READY
+ * @memberof event
+ * @see event.on
+ */
+export const DOM_READY = "dom_ready";
+
 /**
  * event when the system is booting
  * @public
@@ -388,7 +399,8 @@ export const CANVAS_ONRESIZE = "canvas.onresize";
  * Event for when the viewport is resized <br>
  * (this usually follows a WINDOW_ONRESIZE event, when using the `flex` scaling mode is used and after the viewport was updated).<br>
  * Data passed : {number} viewport width <br>
- * Data passed : {number} viewport height
+ * Data passed : {number} viewport height <br>
+ * Data passed : {Camera2d} a reference to the camera viewport being resized
  * @public
  * @constant
  * @type {string}

package/src/system/platform.js

@@ -0,0 +1,32 @@
+ /**
+  * The device platform type
+  * @namespace platform
+  * @memberof device
+  * @property {string} ua the user agent string for the current device
+  * @property {boolean} iOS `true` if the device is an iOS platform
+  * @property {boolean} android `true` if the device is an Android platform
+  * @property {boolean} android2 `true` if the device is an Android 2.x platform
+  * @property {boolean} linux `true` if the device is a Linux platform
+  * @property {boolean} chromeOS `true` if the device is running on ChromeOS.
+  * @property {boolean} wp `true` if the device is a Windows Phone platform
+  * @property {boolean} BlackBerry`true` if the device is a BlackBerry platform
+  * @property {boolean} Kindle`true` if the device is a Kindle platform
+  * @property {boolean} ejecta `true` if running under Ejecta
+  * @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
+  */
+
+export const ua = typeof globalThis.navigator !== "undefined" ? globalThis.navigator.userAgent : "";
+export const iOS = /iPhone|iPad|iPod/i.test(ua);
+export const android = /Android/i.test(ua);
+export const android2 = /Android 2/i.test(ua);
+export const linux = /Linux/i.test(ua);
+export const chromeOS = /CrOS/.test(ua);
+export const wp = /Windows Phone/i.test(ua);
+export const BlackBerry = /BlackBerry/i.test(ua);
+export const Kindle = /Kindle|Silk.*Mobile Safari/i.test(ua);
+export const ejecta = (typeof globalThis.ejecta !== "undefined");
+export const isWeixin = /MicroMessenger/i.test(ua);
+export const nodeJS = (typeof globalThis.process !== "undefined") && (typeof globalThis.process.release !== "undefined") && (globalThis.process.release.name === "node");
+export const isMobile = /Mobi/i.test(ua) || iOS || android || wp || BlackBerry || Kindle || false;

package/src/system/save.js

@@ -1,4 +1,3 @@
-import device from "./device.js";
 import * as event from "./event.js";
 
 /**
@@ -32,22 +31,32 @@ import * as event from "./event.js";
  * @namespace save
  */
 
- // Variable to hold the object data
- var data = {};
+// Variable to hold the object data
+var data = {};
 
- /**
-  * a function to check if the given key is a reserved word
-  * @ignore
-  */
- function isReserved(key) {
-     return (key === "add" || key === "remove");
- }
+let hasLocalStorage = false;
+
+try {
+    // true if localStorage is supported
+    hasLocalStorage = typeof globalThis !== "undefined" && typeof globalThis.localStorage !== "undefined";
+} catch (e) {
+    // the above generates an exception when cookies are blocked
+    hasLocalStorage = false;
+}
+
+/**
+ * a function to check if the given key is a reserved word
+ * @ignore
+ */
+function isReserved(key) {
+    return (key === "add" || key === "remove");
+}
 
 
 // Initialize me.save on Boot event
 event.on(event.BOOT, () => {
     // Load previous data if local Storage is supported
-    if (typeof globalThis.localStorage !== "undefined") {
+    if (hasLocalStorage === true) {
         var me_save_content = globalThis.localStorage.getItem("me.save");
 
         if (typeof me_save_content === "string" && me_save_content.length > 0) {
@@ -95,7 +104,7 @@ var save = {
                      */
                     set (value) {
                         data[prop] = value;
-                        if (device.localStorage === true) {
+                        if (hasLocalStorage === true) {
                             globalThis.localStorage.setItem("me.save." + prop, JSON.stringify(value));
                         }
                     }
@@ -109,7 +118,7 @@ var save = {
         });
 
         // Save keys
-        if (device.localStorage === true) {
+        if (hasLocalStorage === true) {
             globalThis.localStorage.setItem("me.save", JSON.stringify(Object.keys(data)));
         }
     },
@@ -127,7 +136,7 @@ var save = {
         if (!isReserved(key)) {
             if (typeof data[key] !== "undefined") {
                 delete data[key];
-                if (device.localStorage === true) {
+                if (hasLocalStorage === true) {
                     globalThis.localStorage.removeItem("me.save." + key);
                     globalThis.localStorage.setItem("me.save", JSON.stringify(Object.keys(data)));
                 }

package/src/system/timer.js

@@ -6,53 +6,46 @@ import { clamp } from "./../math/math.js";
 /**
  * @classdesc
  * a Timer class to manage timing related function (FPS, Game Tick, Time...)
-  * @see {@link timer} the default global timer instance
+ * @see {@link timer} the default global timer instance
  */
 class Timer {
 
     constructor() {
         /**
-         * Last game tick value.<br/>
-         * Use this value to scale velocities during frame drops due to slow
-         * hardware or when setting an FPS limit. (See {@link timer.maxfps})
-         * This feature is disabled by default. Enable me.timer.interpolation to
-         * use it.
+         * Last game tick value. <br>
+         * Use this value to scale velocities during frame drops due to slow hardware or when setting an FPS limit.
+         * This feature is disabled by default (Enable interpolation to use it).
          * @public
-         * @see timer.interpolation
+         * @see interpolation
+         * @See maxfps
          * @type {number}
          * @name tick
-         * @memberof timer
          */
         this.tick = 1.0;
 
         /**
-         * Last measured fps rate.<br/>
-         * This feature is disabled by default, unless the debugPanel is enabled/visible
+         * Last measured fps rate.<br>
+         * This feature is disabled by default, unless the debugPanel is enabled/visible.
          * @public
          * @type {number}
          * @name fps
-         * @memberof timer
          */
         this.fps = 0;
 
         /**
          * Set the maximum target display frame per second
          * @public
-         * @see timer.tick
+         * @see tick
          * @type {number}
-         * @name maxfps
          * @default 60
-         * @memberof timer
          */
         this.maxfps = 60;
 
         /**
          * Enable/disable frame interpolation
-         * @see timer.tick
+         * @see tick
          * @type {boolean}
          * @default false
-         * @name interpolation
-         * @memberof timer
          */
         this.interpolation = false;
 
@@ -96,8 +89,6 @@ class Timer {
 
     /**
      * reset time (e.g. usefull in case of pause)
-     * @name reset
-     * @memberof timer
      * @ignore
      */
     reset() {
@@ -114,8 +105,6 @@ class Timer {
 
     /**
      * Calls a function once after a specified delay. See me.timer.setInterval to repeativly call a function.
-     * @name setTimeout
-     * @memberof timer
      * @param {Function} fn the function you want to execute after delay milliseconds.
      * @param {number} delay the number of milliseconds (thousandths of a second) that the function call should be delayed by.
      * @param {boolean} [pauseable=true] respects the pause state of the engine.
@@ -142,8 +131,6 @@ class Timer {
 
     /**
      * Calls a function continously at the specified interval.  See setTimeout to call function a single time.
-     * @name setInterval
-     * @memberof timer
      * @param {Function} fn the function to execute
      * @param {number} delay the number of milliseconds (thousandths of a second) on how often to execute the function
      * @param {boolean} [pauseable=true] respects the pause state of the engine.
@@ -170,8 +157,6 @@ class Timer {
 
     /**
      * Clears the delay set by me.timer.setTimeout().
-     * @name clearTimeout
-     * @memberof timer
      * @param {number} timeoutID ID of the timeout to be cleared
      */
     clearTimeout(timeoutID) {
@@ -180,8 +165,6 @@ class Timer {
 
     /**
      * Clears the Interval set by me.timer.setInterval().
-     * @name clearInterval
-     * @memberof timer
      * @param {number} intervalID ID of the interval to be cleared
      */
     clearInterval(intervalID) {
@@ -191,8 +174,6 @@ class Timer {
     /**
      * Return the current timestamp in milliseconds <br>
      * since the game has started or since linux epoch (based on browser support for High Resolution Timer)
-     * @name getTime
-     * @memberof timer
      * @returns {number}
      */
     getTime() {
@@ -201,8 +182,6 @@ class Timer {
 
     /**
      * Return elapsed time in milliseconds since the last update
-     * @name getDelta
-     * @memberof timer
      * @returns {number}
      */
     getDelta() {
@@ -211,9 +190,7 @@ class Timer {
 
     /**
      * compute the actual frame time and fps rate
-     * @name computeFPS
      * @ignore
-     * @memberof timer
      */
     countFPS() {
         this.framecount++;
@@ -281,6 +258,8 @@ class Timer {
     }
 };
 
+const timer = new Timer();
+
 /**
  * the default global Timer instance
  * @namespace timer
@@ -295,6 +274,4 @@ class Timer {
  * // set a timer to call "myFunction" every 1000ms (respecting the pause state) and passing param1 and param2
  * timer.setInterval(myFunction, 1000, true, param1, param2);
  */
-const timer = new Timer();
-
 export default timer;

package/src/text/bitmaptext.js

@@ -1,5 +1,4 @@
 import Color from "./../math/color.js";
-import * as stringUtil from "./../utils/string.js";
 import pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
 import Renderable from "./../renderable/renderable.js";
@@ -254,7 +253,7 @@ class BitmapText extends Renderable {
 
         for (var i = 0; i < this._text.length; i++) {
             x = lX;
-            var string = stringUtil.trimRight(this._text[i]);
+            var string = this._text[i].trimRight();
             // adjust x pos based on alignment value
             var stringWidth = this.metrics.lineWidth(string);
             switch (this.textAlign) {

package/src/text/text.js

@@ -1,7 +1,6 @@
 import Color from "./../math/color.js";
 import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
 import { renderer as globalRenderer } from "./../video/video.js";
-import { trimRight } from "./../utils/string.js";
 import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import { nextPowerOfTwo } from "./../math/math.js";
@@ -205,18 +204,6 @@ class Text extends Renderable {
         this.setText(settings.text);
     }
 
-    /** @ignore */
-    onDeactivateEvent() {
-        // free the canvas and potential corresponding texture when deactivated
-        if (this.offScreenCanvas === true) {
-            globalRenderer.currentCompositor.deleteTexture2D(globalRenderer.currentCompositor.getTexture2D(this.glTextureUnit));
-            globalRenderer.cache.delete(this.canvasTexture.canvas);
-            pool.push(this.canvasTexture);
-            this.canvasTexture = undefined;
-            this.glTextureUnit = undefined;
-        }
-    }
-
     /**
      * make the font bold
      * @returns {Text} this object for chaining
@@ -423,7 +410,7 @@ class Text extends Renderable {
         setContextStyle(context, this, stroke);
 
         for (var i = 0; i < text.length; i++) {
-            var string = trimRight(text[i]);
+            var string = text[i].trimRight();
             // draw the string
             context[stroke ? "strokeText" : "fillText"](string, x, y);
             // add leading space
@@ -437,6 +424,15 @@ class Text extends Renderable {
      * @ignore
      */
     destroy() {
+        if (this.offScreenCanvas === true) {
+            if (globalRenderer instanceof WebGLRenderer) {
+                globalRenderer.currentCompositor.deleteTexture2D(globalRenderer.currentCompositor.getTexture2D(this.glTextureUnit));
+                this.glTextureUnit = undefined;
+            }
+            globalRenderer.cache.delete(this.canvasTexture.canvas);
+            pool.push(this.canvasTexture);
+            this.canvasTexture = undefined;
+        }
         pool.push(this.fillStyle);
         pool.push(this.strokeStyle);
         this.fillStyle = this.strokeStyle = undefined;

package/src/text/textmetrics.js

@@ -1,5 +1,4 @@
 import Bounds from "./../physics/bounds.js";
-import { trimRight } from "./../utils/string.js";
 import Text from "./text.js";
 import setContextStyle from "./textstyle.js";
 
@@ -92,7 +91,7 @@ class TextMetrics extends Bounds {
         this.width = this.height = 0;
 
         for (var i = 0; i < strings.length; i++) {
-            this.width = Math.max(this.lineWidth(trimRight(strings[i]), context), this.width);
+            this.width = Math.max(this.lineWidth(strings[i].trimRight(), context), this.width);
             this.height += this.lineHeight();
         }
         this.width = Math.ceil(this.width);

package/src/tweens/tween.js

@@ -1,6 +1,6 @@
 import timer from "./../system/timer.js";
 import * as event from "./../system/event.js";
-import { world, lastUpdate } from "./../game.js";
+import game from "./../game.js";
 import { Easing } from "./easing.js";
 import { Interpolation } from "./interpolation.js";
 
@@ -72,7 +72,7 @@ class Tween {
         this._onUpdateCallback = null;
         this._onCompleteCallback = null;
         // tweens are synchronized with the game update loop
-        this._tweenTimeTracker = lastUpdate;
+        this._tweenTimeTracker = game.lastUpdate;
 
         // reset flags to default value
         this.isPersistent = false;
@@ -170,7 +170,7 @@ class Tween {
         this._onStartCallbackFired = false;
 
         // add the tween to the object pool on start
-        world.addChild(this);
+        game.world.addChild(this);
 
         this._startTime =  time + this._delayTime;
 
@@ -212,7 +212,7 @@ class Tween {
      */
     stop() {
         // remove the tween from the world container
-        world.removeChildNow(this);
+        game.world.removeChildNow(this);
         return this;
     }
 
@@ -349,7 +349,7 @@ class Tween {
 
         // the original Tween implementation expect
         // a timestamp and not a time delta
-        this._tweenTimeTracker = (lastUpdate > this._tweenTimeTracker) ? lastUpdate : this._tweenTimeTracker + dt;
+        this._tweenTimeTracker = (game.lastUpdate > this._tweenTimeTracker) ? game.lastUpdate : this._tweenTimeTracker + dt;
         var time = this._tweenTimeTracker;
 
         var property;
@@ -442,7 +442,7 @@ class Tween {
 
             } else {
                 // remove the tween from the world container
-                world.removeChildNow(this);
+                game.world.removeChildNow(this);
 
                 if ( this._onCompleteCallback !== null ) {
 

package/src/utils/string.js

@@ -15,30 +15,6 @@ export function capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
 };
 
-/**
- * returns the string stripped of whitespace from the left.
- * @public
- * @memberof utils.string
- * @name trimLeft
- * @param {string} str the string to be trimmed
- * @returns {string} trimmed string
- */
-export function trimLeft(str) {
-    return str.replace(/^\s+/, "");
-};
-
-/**
- * returns the string stripped of whitespace from the right.
- * @public
- * @memberof utils.string
- * @name trimRight
- * @param {string} str the string to be trimmed
- * @returns {string} trimmed string
- */
-export function trimRight(str) {
-    return str.replace(/\s+$/, "");
-};
-
 /**
  * returns true if the given string contains a numeric integer or float value
  * @public
@@ -82,3 +58,16 @@ export function toHex(str) {
     }
     return res;
 };
+
+/**
+ * returns true if the given string is a data url in the `data:[<mediatype>][;base64],<data>` format.
+ * (this will not test the validity of the Data or Base64 encoding)
+ * @public
+ * @memberof utils.string
+ * @name isDataUrl
+ * @param {string} str the string (url) to be tested
+ * @returns {boolean} true if the string is a data url
+ */
+export function isDataUrl(str) {
+    return /^data:(.+);base64,(.+)$/.test(str);
+};

package/src/video/canvas/canvas_renderer.js

@@ -743,11 +743,11 @@ class CanvasRenderer extends Renderer {
         }
 
         // https://github.com/melonjs/melonJS/issues/648
-        else if (mask instanceof RoundRect) {
+        if (mask instanceof RoundRect) {
             context.roundRect(mask.top, mask.left, mask.width, mask.height, mask.radius);
         } else if (mask instanceof Rect || mask instanceof Bounds) {
             context.rect(mask.top, mask.left, mask.width, mask.height);
-        }  else if (mask instanceof Ellipse) {
+        } else if (mask instanceof Ellipse) {
             const _x = mask.pos.x, _y = mask.pos.y,
                 hw = mask.radiusV.x,
                 hh = mask.radiusV.y,
@@ -769,6 +769,7 @@ class CanvasRenderer extends Renderer {
             context.bezierCurveTo(xmin, by, lx, ymax, lx, _y);
             context.bezierCurveTo(lx, ymin, xmin, ty, _x, ty);
         } else {
+            // polygon
             const _x = mask.pos.x, _y = mask.pos.y;
             var point;
 

package/src/video/renderer.js

@@ -2,7 +2,7 @@ import Color from "./../math/color.js";
 import Matrix3d from "./../math/matrix3.js";
 import { createCanvas, renderer } from "./video.js";
 import * as event from "./../system/event.js";
-import device from "./../system/device.js";
+import * as device from "./../system/device.js";
 import { setPrefixed } from "./../utils/agent.js";
 import Rect from "./../geometries/rectangle.js";
 import RoundRect from "./../geometries/roundrect.js";
@@ -22,7 +22,7 @@ class Renderer {
      * @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.doubleBuffering=false] Whether to enable double buffering
+     * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering (not applicable when using the WebGL Renderer)
      * @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 (performance hit when enabled)

package/src/video/texture/canvas_texture.js

@@ -1,9 +1,11 @@
 import { createCanvas } from "./../video.js";
+import { setPrefixed } from "./../../utils/agent.js";
 
-// default video settings
+// default canvas settings
 var defaultAttributes = {
     offscreenCanvas : false,
-    willReadFrequently : false
+    willReadFrequently : false,
+    antiAlias : false
 };
 
 /**
@@ -16,6 +18,7 @@ class CanvasTexture {
      * @param {object} attributes The attributes to create both the canvas and 2d context
      * @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, height, attributes = defaultAttributes) {
 
@@ -33,6 +36,9 @@ class CanvasTexture {
          * @type {CanvasRenderingContext2D}
          */
         this.context = this.canvas.getContext("2d", { willReadFrequently: attributes.willReadFrequently });
+
+        // enable or disable antiAlias if specified
+        this.setAntiAlias(attributes.antiAlias);
     }
 
     /**
@@ -51,6 +57,34 @@ class CanvasTexture {
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
 
+    /**
+     * enable/disable image smoothing (scaling interpolation)
+     * @param {boolean} [enable=false]
+     */
+    setAntiAlias(enable = false) {
+        var canvas = this.canvas;
+
+        // enable/disable antialias on the given Context2d object
+        setPrefixed("imageSmoothingEnabled", enable, this.context);
+
+        // set antialias CSS property on the main canvas
+        if (typeof canvas.style !== "undefined") {
+            if (enable !== true) {
+                // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
+                canvas.style["image-rendering"] = "optimizeSpeed"; // legal fallback
+                canvas.style["image-rendering"] = "-moz-crisp-edges"; // Firefox
+                canvas.style["image-rendering"] = "-o-crisp-edges"; // Opera
+                canvas.style["image-rendering"] = "-webkit-optimize-contrast"; // Safari
+                canvas.style["image-rendering"] = "optimize-contrast"; // CSS 3
+                canvas.style["image-rendering"] = "crisp-edges"; // CSS 4
+                canvas.style["image-rendering"] = "pixelated"; // CSS 4
+                canvas.style.msInterpolationMode = "nearest-neighbor"; // IE8+
+            } else {
+                canvas.style["image-rendering"] = "auto";
+            }
+        }
+    }
+
     /**
      * Resizes the canvas texture to the given width and height.
      * @param {number} width the desired width