melonjs 14.1.2 → 14.3.0

package/src/renderable/container.js

@@ -1,10 +1,10 @@
-import utils from "./../utils/utils.js";
-import game from "./../game.js";
-import * as event from "./../system/event.js";
-import pool from "./../system/pooling.js";
-import state from "./../state/state.js";
-import Renderable from "./renderable.js";
-import Body from "./../physics/body.js";
+import Renderable from "./renderable";
+import utils from "../utils/utils.js";
+import { game } from "../index.js";
+import * as event from "../system/event.js";
+import pool from "../system/pooling.js";
+import state from "../state/state.js";
+import Body from "../physics/body.js";
 
 /**
  * Private function to re-use for object removal in a defer
@@ -45,11 +45,8 @@ let globalFloatingCounter = 0;
 
         /**
          * whether the container is the root of the scene
-         * @public
          * @type {boolean}
          * @default false
-         * @name root
-         * @memberof Container
          */
         this.root = root;
 
@@ -62,48 +59,34 @@ let globalFloatingCounter = 0;
         /**
          * The property of the child object that should be used to sort on <br>
          * value : "x", "y", "z"
-         * @public
          * @type {string}
          * @default me.game.sortOn
-         * @name sortOn
-         * @memberof Container
          */
         this.sortOn = game.sortOn;
 
         /**
          * Specify if the children list should be automatically sorted when adding a new child
-         * @public
          * @type {boolean}
          * @default true
-         * @name autoSort
-         * @memberof Container
          */
         this.autoSort = true;
 
         /**
          * Specify if the children z index should automatically be managed by the parent container
-         * @public
          * @type {boolean}
          * @default true
-         * @name autoDepth
-         * @memberof Container
          */
         this.autoDepth = true;
 
         /**
          * Specify if the container draw operation should clip his children to its own bounds
-         * @public
          * @type {boolean}
          * @default false
-         * @name clipping
-         * @memberof Container
          */
         this.clipping = false;
 
         /**
          * a callback to be extended, triggered after a child has been added or removed
-         * @name onChildChange
-         * @memberof Container#
          * @param {number} index - added or removed child index
          */
         this.onChildChange = function (index) {   // eslint-disable-line no-unused-vars
@@ -114,21 +97,15 @@ let globalFloatingCounter = 0;
          * Specify if the container bounds should automatically take in account
          * all child bounds when updated (this is expensive and disabled by default,
          * only enable if necessary)
-         * @public
          * @type {boolean}
          * @default false
-         * @name enableChildBoundsUpdate
-         * @memberof Container
          */
         this.enableChildBoundsUpdate = false;
 
         /**
          * define a background color for this container
-         * @public
          * @type {Color}
-         * @name backgroundColor
          * @default (0, 0, 0, 0.0)
-         * @memberof Container
          * @example
          * // add a red background color to this container
          * this.backgroundColor.setColor(255, 0, 0);
@@ -158,8 +135,6 @@ let globalFloatingCounter = 0;
 
     /**
      * reset the container, removing all childrens, and reseting transforms.
-     * @name reset
-     * @memberof Container
      */
     reset() {
         // cancel any sort operation
@@ -195,8 +170,6 @@ let globalFloatingCounter = 0;
      * will not be in any container. <br>
      * if the given child implements a onActivateEvent method, that method will be called
      * once the child is added to this container.
-     * @name addChild
-     * @memberof Container
      * @param {Renderable} child
      * @param {number} [z] - forces the z index of the child to the specified value
      * @returns {Renderable} the added child
@@ -258,8 +231,6 @@ let globalFloatingCounter = 0;
     /**
      * Add a child to the container at the specified index<br>
      * (the list won't be sorted after insertion)
-     * @name addChildAt
-     * @memberof Container
      * @param {Renderable} child
      * @param {number} index
      * @returns {Renderable} the added child
@@ -316,8 +287,6 @@ let globalFloatingCounter = 0;
      *    - The current element being processed in the array <br>
      *    - The index of element in the array. <br>
      *    - The array forEach() was called upon. <br>
-     * @name forEach
-     * @memberof Container
      * @param {Function} callback - fnction to execute on each element
      * @param {object} [thisArg] - value to use as this(i.e reference Object) when executing callback.
      * @example
@@ -352,8 +321,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Swaps the position (z-index) of 2 children
-     * @name swapChildren
-     * @memberof Container
      * @param {Renderable} child
      * @param {Renderable} child2
      */
@@ -379,8 +346,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Returns the Child at the specified index
-     * @name getChildAt
-     * @memberof Container
      * @param {number} index
      * @returns {Renderable} the child at the specified index
      */
@@ -395,8 +360,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Returns the index of the given Child
-     * @name getChildIndex
-     * @memberof Container
      * @param {Renderable} child
      * @returns {number} index
      */
@@ -406,8 +369,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Returns the next child within the container or undefined if none
-     * @name getNextChild
-     * @memberof Container
      * @param {Renderable} child
      * @returns {Renderable} child
      */
@@ -421,8 +382,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Returns true if contains the specified Child
-     * @name hasChild
-     * @memberof Container
      * @param {Renderable} child
      * @returns {boolean}
      */
@@ -434,9 +393,6 @@ let globalFloatingCounter = 0;
      * return the child corresponding to the given property and value.<br>
      * note : avoid calling this function every frame since
      * it parses the whole object tree each time
-     * @name getChildByProp
-     * @memberof Container
-     * @public
      * @param {string} prop - Property name
      * @param {string|RegExp|number|boolean} value - Value of the property
      * @returns {Renderable[]} Array of childs
@@ -485,9 +441,6 @@ let globalFloatingCounter = 0;
 
     /**
      * returns the list of childs with the specified class type
-     * @name getChildByType
-     * @memberof Container
-     * @public
      * @param {object} classType
      * @returns {Renderable[]} Array of children
      */
@@ -511,9 +464,6 @@ let globalFloatingCounter = 0;
      * as defined in Tiled (Name field of the Object Properties)<br>
      * note : avoid calling this function every frame since
      * it parses the whole object list each time
-     * @name getChildByName
-     * @memberof Container
-     * @public
      * @param {string|RegExp|number|boolean} name - child name
      * @returns {Renderable[]} Array of children
      */
@@ -525,9 +475,6 @@ let globalFloatingCounter = 0;
      * return the child corresponding to the specified GUID<br>
      * note : avoid calling this function every frame since
      * it parses the whole object list each time
-     * @name getChildByGUID
-     * @memberof Container
-     * @public
      * @param {string|RegExp|number|boolean} guid - child GUID
      * @returns {Renderable} corresponding child or null
      */
@@ -538,9 +485,6 @@ let globalFloatingCounter = 0;
 
     /**
      * return all child in this container
-     * @name getChildren
-     * @memberof Container
-     * @public
      * @returns {Renderable[]} an array of renderable object
      */
     getChildren() {
@@ -553,8 +497,6 @@ let globalFloatingCounter = 0;
     /**
      * update the bounding box for this shape.
      * @ignore
-     * @name updateBounds
-     * @memberof Renderable
      * @returns {Bounds} this shape bounding box Rectangle object
      */
     updateBounds(forceUpdateChildBounds = false) {
@@ -581,8 +523,6 @@ let globalFloatingCounter = 0;
     /**
      * Checks if this container is root or if it's attached to the root container.
      * @private
-     * @name isAttachedToRoot
-     * @memberof Container
      * @returns {boolean}
      */
     isAttachedToRoot() {
@@ -603,8 +543,6 @@ let globalFloatingCounter = 0;
     /**
      * update the cointainer's bounding rect (private)
      * @ignore
-     * @name updateBoundsPos
-     * @memberof Container
      */
     updateBoundsPos(newX, newY) {
         // call the parent method
@@ -638,9 +576,6 @@ let globalFloatingCounter = 0;
     /**
      * Invokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed. <br>
      * if the given child implements a onDeactivateEvent() method, that method will be called once the child is removed from this container.
-     * @name removeChild
-     * @memberof Container
-     * @public
      * @param {Renderable} child
      * @param {boolean} [keepalive=false] - true to prevent calling child.destroy()
      */
@@ -657,8 +592,6 @@ let globalFloatingCounter = 0;
      * Removes (and optionally destroys) a child from the container.<br>
      * (removal is immediate and unconditional)<br>
      * Never use keepalive=true with objects from {@link pool}. Doing so will create a memory leak.
-     * @name removeChildNow
-     * @memberof Container
      * @param {Renderable} child
      * @param {boolean} [keepalive=False] - True to prevent calling child.destroy()
      */
@@ -709,8 +642,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Automatically set the specified property of all childs to the given value
-     * @name setChildsProperty
-     * @memberof Container
      * @param {string} prop - property name
      * @param {object} value - property value
      * @param {boolean} [recursive=false] - recursively apply the value to child containers if true
@@ -726,8 +657,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Move the child in the group one step forward (z depth).
-     * @name moveUp
-     * @memberof Container
      * @param {Renderable} child
      */
     moveUp(child) {
@@ -742,8 +671,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Move the child in the group one step backward (z depth).
-     * @name moveDown
-     * @memberof Container
      * @param {Renderable} child
      */
     moveDown(child) {
@@ -758,8 +685,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Move the specified child to the top(z depth).
-     * @name moveToTop
-     * @memberof Container
      * @param {Renderable} child
      */
     moveToTop(child) {
@@ -777,8 +702,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Move the specified child the bottom (z depth).
-     * @name moveToBottom
-     * @memberof Container
      * @param {Renderable} child
      */
     moveToBottom(child) {
@@ -796,9 +719,6 @@ let globalFloatingCounter = 0;
 
     /**
      * Manually trigger the sort of all the childs in the container</p>
-     * @name sort
-     * @memberof Container
-     * @public
      * @param {boolean} [recursive=false] - recursively sort all containers if true
      */
     sort(recursive) {
@@ -890,8 +810,6 @@ let globalFloatingCounter = 0;
     /**
      * container update function. <br>
      * automatically called by the game manager {@link game}
-     * @name update
-     * @memberof Container
      * @protected
      * @param {number} dt - time since the last update in milliseconds.
      * @returns {boolean} true if the Container is dirty
@@ -941,8 +859,6 @@ let globalFloatingCounter = 0;
 
     /**
       * draw this renderable (automatically called by melonJS)
-     * @name draw
-     * @memberof Container
      * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
      * @param {Camera2d} [viewport] - the viewport to (re)draw

package/src/renderable/imagelayer.js

@@ -1,7 +1,7 @@
 import { renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
 import pool from "./../system/pooling.js";
-import game from "./../game.js";
+import { game } from "../index.js";
 import Sprite from "./sprite.js";
 import * as stringUtil from "./../utils/string.js";
 

package/src/renderable/trigger.js

@@ -2,7 +2,7 @@ import Renderable from "./renderable.js";
 import collision from "./../physics/collision.js";
 import Body from "./../physics/body.js";
 import level from "./../level/level.js";
-import game from "./../game.js";
+import { game } from "../index.js";
 import pool from "./../system/pooling.js";
 
 /**

package/src/renderable/ui/uibaseelement.js

@@ -1,4 +1,4 @@
-import Container from "./../container.js";
+import Container from "../container.js";
 import timer from "../../system/timer.js";
 import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js";
 

package/src/state/stage.js

@@ -1,5 +1,5 @@
 import { renderer } from "./../video/video.js";
-import game from "./../game.js";
+import { game } from "../index.js";
 import Camera2d from "./../camera/camera2d.js";
 import Color from "./../math/color.js";
 

package/src/state/state.js

@@ -1,7 +1,7 @@
 import { pauseTrack, resumeTrack } from "./../audio/audio.js";
 import * as fctUtil from "./../utils/function.js";
 import * as event from "./../system/event.js";
-import game from "./../game.js";
+import { game } from "../index.js";
 import * as device from "./../system/device.js";
 import Stage from "./../state/stage.js";
 import DefaultLoadingScreen from "./../loader/loadingscreen.js";

package/src/system/device.js

@@ -462,7 +462,7 @@ export function enableSwipe(enable) {
  */
 export function isFullscreen() {
     if (hasFullscreenSupport) {
-        return !!(prefixed("fullscreenElement", document) || document.mozFullScreenElement);
+        return !!(prefixed("fullscreenElement", globalThis.document) || globalThis.document.mozFullScreenElement);
     } else {
         return false;
     }
@@ -473,7 +473,7 @@ export function isFullscreen() {
  * @function requestFullscreen
  * @memberof device
  * @public
- * @param {object} [element=default canvas object] - the element to be set in full-screen mode.
+ * @param {Element} [element] - the element to be set in full-screen mode.
  * @example
  * // add a keyboard shortcut to toggle Fullscreen mode on/off
  * me.input.bindKey(me.input.KEY.F, "toggleFullscreen");
@@ -502,7 +502,7 @@ export function requestFullscreen(element) {
  */
 export function exitFullscreen() {
     if (hasFullscreenSupport && isFullscreen()) {
-        document.exitFullscreen();
+        globalThis.document.exitFullscreen();
     }
 }
 
@@ -655,7 +655,7 @@ export function getElement(element) {
 
     if (element !== "undefined") {
         if (typeof element === "string") {
-            target = document.getElementById(element);
+            target = globalThis.document.getElementById(element);
         } else if (typeof element === "object" && element.nodeType === Node.ELEMENT_NODE) {
             target = element;
         }
@@ -664,7 +664,7 @@ export function getElement(element) {
     // fallback, if invalid target or non HTMLElement object
     if (!target)  {
         //default to document.body
-        target = document.body;
+        target = globalThis.document.body;
     }
 
     return target;
@@ -681,7 +681,7 @@ export function getElement(element) {
  * @returns {DOMRect} the size and position of the element relatively to the viewport
  */
 export function getElementBounds(element) {
-    if (typeof element === "object" && element !== document.body && typeof element.getBoundingClientRect !== "undefined") {
+    if (typeof element === "object" && element !== globalThis.document.body && typeof element.getBoundingClientRect !== "undefined") {
         return element.getBoundingClientRect();
     } else {
         domRect.width = domRect.right = globalThis.innerWidth;
@@ -716,7 +716,7 @@ export function getParentBounds(element) {
 export function isWebGLSupported(options) {
     let _supported = false;
     try {
-        let canvas = document.createElement("canvas");
+        let canvas = globalThis.document.createElement("canvas");
         let ctxOptions = {
             stencil: true,
             failIfMajorPerformanceCaveat: options.failIfMajorPerformanceCaveat
@@ -729,26 +729,6 @@ export function isWebGLSupported(options) {
     return _supported;
 }
 
-/**
- * return the highest precision format supported by this device for GL Shaders
- * @function getMaxShaderPrecision
- * @memberof device
- * @public
- * @param {WebGLRenderingContext} gl
- * @returns {boolean} "lowp", "mediump", or "highp"
- */
-export function getMaxShaderPrecision(gl) {
-    if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT ).precision > 0 &&
-        gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT ).precision > 0) {
-            return "highp";
-    }
-    if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT ).precision > 0 &&
-        gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT ).precision > 0) {
-            return "mediump";
-    }
-    return "lowp";
-}
-
 /**
  * Makes a request to bring this device window to the front.
  * @function focus

package/src/system/dom.js

@@ -1,4 +1,5 @@
 import * as event from "./event.js";
+import { nodeJS } from "./platform.js";
 
 // track if DOMContentLoaded was called already
 let readyBound = false;
@@ -51,7 +52,7 @@ export function DOMContentLoaded(fn) {
         // 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")) {
+            if (nodeJS === true || (typeof globalThis.document !== "undefined" && globalThis.document.readyState === "complete")) {
                 // defer the fn call to ensure our script is fully loaded
                 globalThis.setTimeout(_domReady, 0);
             }

package/src/tweens/tween.js

@@ -1,6 +1,6 @@
 import timer from "./../system/timer.js";
 import * as event from "./../system/event.js";
-import game from "./../game.js";
+import { game } from "../index.js";
 import { Easing } from "./easing.js";
 import { Interpolation } from "./interpolation.js";
 

package/src/utils/utils.js

@@ -3,9 +3,6 @@ import * as arrayUtils from "./array.js";
 import * as fileUtils from "./file.js";
 import * as stringUtils from "./string.js";
 import * as fnUtils from "./function.js";
-import { createCanvas } from "./../video/video.js";
-import CanvasRenderer from "./../video/canvas/canvas_renderer.js";
-import { version } from "./../index.js";
 
 /**
  * a collection of utility functions
@@ -24,35 +21,13 @@ var utils = {
     string : stringUtils,
     function : fnUtils,
 
-    /**
-     * Get image pixels
-     * @public
-     * @memberof utils
-     * @name getPixels
-     * @param {HTMLImageElement|HTMLCanvasElement} image - Image to read
-     * @returns {ImageData} ImageData object
-     */
-    getPixels : function (image) {
-        if (image instanceof HTMLImageElement) {
-            var _context = CanvasRenderer.getContext2d(
-                createCanvas(image.width, image.height)
-            );
-            _context.drawImage(image, 0, 0);
-            return _context.getImageData(0, 0, image.width, image.height);
-        }
-        else {
-            // canvas !
-            return image.getContext("2d").getImageData(0, 0, image.width, image.height);
-        }
-    },
-
     /**
      * Compare two version strings
      * @public
      * @memberof utils
      * @name checkVersion
-     * @param {string} first - First version string to compare
-     * @param {string} [second=version] - Second version string to compare
+     * @param {string} first - Ffrst version string to compare
+     * @param {string} second - second version string to compare
      * @returns {number} comparison result <br>&lt; 0 : first &lt; second<br>
      * 0 : first == second<br>
      * &gt; 0 : first &gt; second
@@ -63,7 +38,7 @@ var utils = {
      *     );
      * }
      */
-    checkVersion : function (first, second = version) {
+    checkVersion : function (first, second) {
         var a = first.split(".");
         var b = second.split(".");
         var len = Math.min(a.length, b.length);

package/src/video/canvas/canvas_renderer.js

@@ -45,6 +45,9 @@ import * as event from "./../../system/event.js";
             this.uvOffset = 1;
         }
 
+        // set the renderer type
+        this.type = "CANVAS";
+
         // context lost & restore event for canvas
         this.getCanvas().addEventListener("contextlost", (e) => {
             e.preventDefault();

package/src/video/renderer.js

@@ -1,8 +1,8 @@
 import Color from "./../math/color.js";
 import Matrix3d from "./../math/matrix3.js";
-import { createCanvas, renderer } from "./video.js";
+import { createCanvas } from "./video.js";
 import * as event from "./../system/event.js";
-import * as device from "./../system/device.js";
+import { platform } from "../system/device.js";
 import { setPrefixed } from "./../utils/agent.js";
 import Rect from "./../geometries/rectangle.js";
 import RoundRect from "./../geometries/roundrect.js";
@@ -11,6 +11,7 @@ import Polygon from "./../geometries/poly.js";
 import Line from "./../geometries/line.js";
 import Bounds from "./../physics/bounds.js";
 import Path2D from "./../geometries/path2d.js";
+import Vector2d from "../math/vector2.js";
 import Point from "../geometries/point.js";
 
 /**
@@ -41,6 +42,20 @@ import Point from "../geometries/point.js";
          */
         this.settings = options;
 
+        /**
+         * the requested video size ratio
+         * @public
+         * @type {Number}
+         */
+        this.designRatio = this.settings.width / this.settings.height;
+
+        /**
+         * the scaling ratio to be applied to the main canvas
+         * @type {Vector2d}
+         * @default <1,1>
+         */
+        this.scaleRatio = new Vector2d(this.settings.scale, this.settings.scale);
+
         /**
          * true if the current rendering context is valid
          * @default true
@@ -54,6 +69,13 @@ import Point from "../geometries/point.js";
          */
         this.path2D = new Path2D();
 
+        /**
+         * The renderer type : Canvas, WebGL, etc...
+         * (override this property with a specific value when implementing a custom renderer)
+         * @type {string}
+         */
+        this.type = "Generic";
+
         /**
          * @ignore
          */
@@ -70,7 +92,7 @@ import Point from "../geometries/point.js";
         this.currentBlendMode = "none";
 
         // create the main screen canvas
-        if (device.platform.ejecta === true) {
+        if (platform.ejecta === true) {
             // a main canvas is already automatically created by Ejecta
             this.canvas = document.getElementById("canvas");
         } else if (typeof globalThis.canvas !== "undefined") {
@@ -94,9 +116,9 @@ import Point from "../geometries/point.js";
         // default uvOffset
         this.uvOffset = 0;
 
-        // reset the instantiated renderer on game reset
+        // reset the renderer on game reset
         event.on(event.GAME_RESET, () => {
-            renderer.reset();
+            this.reset();
         });
     }
 
@@ -323,8 +345,6 @@ import Point from "../geometries/point.js";
 
     /**
      * fill the given shape
-     * @name fill
-     * @memberof Renderer
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} shape - a shape object to fill
      */
     fill(shape) {

package/src/video/texture/canvas_texture.js

@@ -1,5 +1,6 @@
 import { createCanvas } from "./../video.js";
 import { setPrefixed } from "./../../utils/agent.js";
+import { clamp } from "../../math/math.js";
 
 // default canvas settings
 var defaultAttributes = {
@@ -97,6 +98,25 @@ class CanvasTexture {
         this.canvas.height = Math.round(height);
     }
 
+    /**
+     * Returns an ImageData object representing the underlying pixel data for a specified portion of this canvas texture.
+     * (Note: when using getImageData(), it is highly recommended to use the `willReadFrequently` attribute when creatimg the corresponding canvas texture)
+     * @param {number} x - The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted
+     * @param {number} y - The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted
+     * @param {number} width - The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left
+     * @param {number} height - The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up
+     * @return {ImageData} The ImageData extracted from this CanvasTexture.
+     */
+    getImageData(x, y, width, height) {
+        // clamp values
+        x = clamp(Math.floor(x), 0, this.canvas.width - 1);
+        y = clamp(Math.floor(y), 0, this.canvas.height - 1);
+        width = clamp(width, 1, this.canvas.width - x);
+        height = clamp(height, 1, this.canvas.height - y);
+        // return imageData
+        return this.context.getImageData(x, y, width, height);
+    }
+
     /**
      * @ignore
      */