melonjs 15.3.0 → 15.4.1

package/src/renderable/imagelayer.js

@@ -11,7 +11,7 @@ import * as stringUtil from "./../utils/string.js";
  * a generic Image Layer Object
  * @augments Renderable
  */
- export default class ImageLayer extends Sprite {
+export default class ImageLayer extends Sprite {
     /**
      * @param {number} x - x coordinate
      * @param {number} y - y coordinate
@@ -20,7 +20,7 @@ import * as stringUtil from "./../utils/string.js";
      * @param {string} [settings.name="me.ImageLayer"] - layer name
      * @param {number} [settings.z=0] - z-index position
      * @param {number|Vector2d} [settings.ratio=1.0] - Scrolling ratio to be applied. See {@link ImageLayer#ratio}
-     * @param {string} [settings.repeat='repeat'] - define if and how an Image Layer should be repeated (accepted values are 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'). See {@link ImageLayer#repeat}
+     * @param {"repeat"|"repeat-x"|"repeat-y"|"no-repeat"} [settings.repeat="repeat"] - define if and how an Image Layer should be repeated. See {@link ImageLayer#repeat}
      * @param {number|Vector2d} [settings.anchorPoint=0.0] - Image origin. See {@link ImageLayer#anchorPoint}
      * @example
      * // create a repetitive background pattern on the X axis using the citycloud image asset
@@ -227,7 +227,7 @@ import * as stringUtil from "./../utils/string.js";
         this.isDirty = true;
     }
 
-   /**
+    /**
     * override the default predraw function
     * as repeat and anchor are managed directly in the draw method
     * @ignore

package/src/renderable/light2d.js

@@ -49,8 +49,8 @@ function createGradient(light) {
  * (multiple lights are not supported, alpha component of the ambient light is ignored)
  * @see stage.lights
  */
- export default class Light2d extends Renderable {
-   /**
+export default class Light2d extends Renderable {
+    /**
     * @param {number} x - The horizontal position of the light.
     * @param {number} y - The vertical position of the light.
     * @param {number} radiusX - The horizontal radius of the light.

package/src/renderable/nineslicesprite.js

@@ -8,7 +8,7 @@ import Sprite from "./sprite.js";
  * @see https://en.wikipedia.org/wiki/9-slice_scaling
  * @augments Sprite
  */
- export default class NineSliceSprite extends Sprite {
+export default class NineSliceSprite extends Sprite {
     /**
      * @param {number} x - the x coordinates of the sprite object
      * @param {number} y - the y coordinates of the sprite object

package/src/renderable/renderable.js

@@ -10,7 +10,7 @@ import { clamp } from "./../math/math.js";
  * A base class for renderable objects.
  * @augments Rect
  */
- export default class Renderable extends Rect {
+export default class Renderable extends Rect {
     /**
      * @param {number} x - position of the renderable object (accessible through inherited pos.x property)
      * @param {number} y - position of the renderable object (accessible through inherited pos.y property)
@@ -96,7 +96,7 @@ import { clamp } from "./../math/math.js";
          */
         this.body = undefined;
 
-       /**
+        /**
         * (G)ame (U)nique (Id)entifier" <br>
         * a GUID will be allocated for any renderable object added <br>
         * to an object container (including the `me.game.world` container)
@@ -569,7 +569,7 @@ import { clamp } from "./../math/math.js";
             }
 
             if (absolute === true) {
-                var absPos = this.getAbsolutePosition();
+                let absPos = this.getAbsolutePosition();
                 bounds.centerOn(absPos.x + bounds.x + bounds.width / 2,  absPos.y + bounds.y + bounds.height / 2);
             }
             return bounds;
@@ -585,25 +585,25 @@ import { clamp } from "./../math/math.js";
      * update the renderable's bounding rect (private)
      * @ignore
      */
-     updateBoundsPos(newX = this.pos.x, newY = this.pos.y) {
+    updateBoundsPos(newX = this.pos.x, newY = this.pos.y) {
         this.getBounds().translate(newX - this.pos.x, newY - this.pos.y);
-     }
+    }
 
-     /**
+    /**
       * return the renderable absolute position in the game world
       * @returns {Vector2d}
       */
-      getAbsolutePosition() {
-          if (typeof this._absPos === "undefined") {
-              this._absPos = pool.pull("Vector2d");
-          }
-          // XXX Cache me or something
-          this._absPos.set(this.pos.x, this.pos.y);
-          if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getAbsolutePosition === "function" && this.floating !== true) {
-              this._absPos.add(this.ancestor.getAbsolutePosition());
-          }
-          return this._absPos;
-      }
+    getAbsolutePosition() {
+        if (typeof this._absPos === "undefined") {
+            this._absPos = pool.pull("Vector2d");
+        }
+        // XXX Cache me or something
+        this._absPos.set(this.pos.x, this.pos.y);
+        if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getAbsolutePosition === "function" && this.floating !== true) {
+            this._absPos.add(this.ancestor.getAbsolutePosition());
+        }
+        return this._absPos;
+    }
 
     /**
      * called when the anchor point value is changed
@@ -611,14 +611,14 @@ import { clamp } from "./../math/math.js";
      * @param {number} x - the new X value to be set for the anchor
      * @param {number} y - the new Y value to be set for the anchor
      */
-     onAnchorUpdate(x, y) {
-         // since the callback is called before setting the new value
-         // manually update the anchor point (required for updateBoundsPos)
-         this.anchorPoint.setMuted(x, y);
-         // then call updateBounds
-         this.updateBounds();
-         this.isDirty = true;
-     }
+    onAnchorUpdate(x, y) {
+        // since the callback is called before setting the new value
+        // manually update the anchor point (required for updateBoundsPos)
+        this.anchorPoint.setMuted(x, y);
+        // then call updateBounds
+        this.updateBounds();
+        this.isDirty = true;
+    }
 
     /**
      * Prepare the rendering context before drawing (automatically called by melonJS).

package/src/renderable/sprite.js

@@ -10,7 +10,7 @@ import Color from "../math/color.js";
  * An object to display a fixed or animated sprite on screen.
  * @augments Renderable
  */
- export default class Sprite extends Renderable {
+export default class Sprite extends Renderable {
     /**
      * @param {number} x - the x coordinates of the sprite object
      * @param {number} y - the y coordinates of the sprite object
@@ -307,7 +307,7 @@ import Color from "../math/color.js";
                 };
             }
             else {
-              frameObject = frame;
+                frameObject = frame;
             }
             let frameObjectName = frameObject.name;
             if (typeof(frameObjectName) === "number") {

package/src/{text → renderable/text}/bitmaptext.js

@@ -1,7 +1,7 @@
-import Color from "./../math/color.js";
-import pool from "./../system/pooling.js";
-import { getImage, getBinary } from "./../loader/loader.js";
-import Renderable from "./../renderable/renderable.js";
+import Color from "../../math/color.js";
+import pool from "../../system/pooling.js";
+import { getImage, getBinary } from "../../loader/loader.js";
+import Renderable from "../renderable.js";
 import TextMetrics from "./textmetrics.js";
 
 /**
@@ -9,7 +9,7 @@ import TextMetrics from "./textmetrics.js";
  * a bitmap font object
  * @augments Renderable
  */
- export default class BitmapText extends Renderable {
+export default class BitmapText extends Renderable {
     /**
      * @param {number} x - position of the text object
      * @param {number} y - position of the text object
@@ -210,8 +210,8 @@ import TextMetrics from "./textmetrics.js";
                     break;
             }
 
-             // adjust y pos based on alignment value
-             switch (this.textBaseline) {
+            // adjust y pos based on alignment value
+            switch (this.textBaseline) {
                 case "middle":
                     ay = this.metrics.height * 0.5;
                     break;
@@ -233,7 +233,7 @@ import TextMetrics from "./textmetrics.js";
 
         if (absolute === true) {
             if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getAbsolutePosition === "function" && this.floating !== true) {
-                 bounds.translate(this.ancestor.getAbsolutePosition());
+                bounds.translate(this.ancestor.getAbsolutePosition());
             }
         }
 

package/src/{text → renderable/text}/bitmaptextdata.js

@@ -56,9 +56,9 @@ function createSpaceGlyph(glyphs) {
  * Class for storing relevant data from the font file.
  * @ignore
  */
- export default class BitmapTextData {
+export default class BitmapTextData {
 
-   /**
+    /**
     * @param {string} data - The bitmap font data pulled from the resource loader using me.loader.getBinary()
     */
     constructor(data) {
@@ -116,14 +116,11 @@ function createSpaceGlyph(glyphs) {
         this.lineHeight = parseFloat(getValueFromPair(lines[1], /lineHeight\=\d+/g));
 
         let baseLine = parseFloat(getValueFromPair(lines[1], /base\=\d+/g));
-
         let padY = this.padTop + this.padBottom;
-
         let glyph = null;
 
-        let i;
 
-        for (i = 4; i < lines.length; i++) {
+        for (let i = 4; i < lines.length; i++) {
             let line = lines[i];
             let characterValues = line.split(/=|\s+/);
             if (!line || /^kernings/.test(line)) {
@@ -164,7 +161,7 @@ function createSpaceGlyph(glyphs) {
         createSpaceGlyph(this.glyphs);
 
         let capGlyph = null;
-        for (i = 0; i < capChars.length; i++) {
+        for (let i = 0; i < capChars.length; i++) {
             let capChar = capChars[i];
             capGlyph = this.glyphs[capChar.charCodeAt(0)];
             if (capGlyph) {

package/src/{text → renderable/text}/glyph.js

@@ -7,7 +7,7 @@ const PAGE_SIZE = 1 << LOG2_PAGE_SIZE;
  * a glyph representing a single character in a font
  * @ignore
  */
- export default class Glyph {
+export default class Glyph {
     /**
      * @ignore
      */

package/src/{text → renderable/text}/text.js

@@ -1,8 +1,8 @@
-import Color from "./../math/color.js";
-import { renderer as globalRenderer } from "./../video/video.js";
-import pool from "./../system/pooling.js";
-import Renderable from "./../renderable/renderable.js";
-import { nextPowerOfTwo } from "./../math/math.js";
+import Color from "../../math/color.js";
+import { renderer as globalRenderer } from "../../video/video.js";
+import pool from "../../system/pooling.js";
+import Renderable from "../renderable.js";
+import { nextPowerOfTwo } from "../../math/math.js";
 import setContextStyle from "./textstyle.js";
 import TextMetrics from "./textmetrics.js";
 
@@ -14,7 +14,6 @@ import TextMetrics from "./textmetrics.js";
 * -> first char " " 32d (0x20);
 */
 
-
 const runits = ["ex", "em", "pt", "px"];
 const toPX = [12, 24, 0.75, 1];
 
@@ -23,7 +22,7 @@ const toPX = [12, 24, 0.75, 1];
  * a generic system font object.
  * @augments Renderable
  */
- export default class Text extends Renderable {
+export default class Text extends Renderable {
     /**
      * @param {number} x - position of the text object
      * @param {number} y - position of the text object
@@ -76,16 +75,16 @@ const toPX = [12, 24, 0.75, 1];
          * @name strokeStyle
          * @default black
          */
-         if (typeof settings.strokeStyle !== "undefined") {
-             if (settings.strokeStyle instanceof Color) {
-                 this.strokeStyle = settings.strokeStyle;
-             } else {
-                 // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
-                 this.strokeStyle = pool.pull("Color").parseCSS(settings.strokeStyle);
-             }
-         } else {
-             this.strokeStyle = pool.pull("Color", 0, 0, 0);
-         }
+        if (typeof settings.strokeStyle !== "undefined") {
+            if (settings.strokeStyle instanceof Color) {
+                this.strokeStyle = settings.strokeStyle;
+            } else {
+                // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+                this.strokeStyle = pool.pull("Color").parseCSS(settings.strokeStyle);
+            }
+        } else {
+            this.strokeStyle = pool.pull("Color", 0, 0, 0);
+        }
 
         /**
          * sets the current line width, in pixels, when drawing stroke

package/src/{text → renderable/text}/textmetrics.js

@@ -1,4 +1,4 @@
-import Bounds from "./../physics/bounds.js";
+import Bounds from "../../physics/bounds.js";
 import Text from "./text.js";
 import setContextStyle from "./textstyle.js";
 
@@ -7,7 +7,7 @@ import setContextStyle from "./textstyle.js";
  * a Text Metrics object that contains helper for text manipulation
  * @augments Bounds
  */
- export default class TextMetrics extends Bounds {
+export default class TextMetrics extends Bounds {
 
     /**
      * @param {Text|BitmapText} ancestor - the parent object that contains this TextMetrics object

package/src/renderable/trigger.js

@@ -9,7 +9,7 @@ import pool from "./../system/pooling.js";
  * trigger an event when colliding with another object
  * @augments Renderable
  */
- export default class Trigger extends Renderable {
+export default class Trigger extends Renderable {
     /**
      * @param {number} x - the x coordinates of the trigger area
      * @param {number} y - the y coordinates of the trigger area
@@ -85,14 +85,14 @@ import pool from "./../system/pooling.js";
     /**
      * @ignore
      */
-     getTriggerSettings() {
+    getTriggerSettings() {
         let world = this.ancestor.getRootAncestor();
-         // Lookup for the container instance
-         if (typeof(this.triggerSettings.container) === "string") {
-             this.triggerSettings.container = world.getChildByName(this.triggerSettings.container)[0];
-         }
-         return this.triggerSettings;
-     }
+        // Lookup for the container instance
+        if (typeof(this.triggerSettings.container) === "string") {
+            this.triggerSettings.container = world.getChildByName(this.triggerSettings.container)[0];
+        }
+        return this.triggerSettings;
+    }
 
     /**
      * @ignore
@@ -121,7 +121,7 @@ import pool from "./../system/pooling.js";
                 if (!this.fading) {
                     this.fading = true;
                     world.app.viewport.fadeIn(this.fade, this.duration,
-                            () => this.onFadeComplete());
+                        () => this.onFadeComplete());
                 }
             } else {
                 level.load(this.gotolevel, triggerSettings);

package/src/renderable/ui/uibaseelement.js

@@ -10,7 +10,7 @@ import pool from "../../system/pooling.js";
  * Use this for example if you want to display a panel that contains text, images or other UI elements.
  * @augments Container
  */
- export default class UIBaseElement extends Container {
+export default class UIBaseElement extends Container {
     /**
      *
      * @param {number} x - The x position of the container
@@ -88,7 +88,7 @@ import pool from "../../system/pooling.js";
     clicked(event) {
         // Check if left mouse button is pressed
         if (event.button === 0 && this.isClickable) {
-            this.dirty = true;
+            this.isDirty = true;
             this.released = false;
             if (this.isHoldable) {
                 timer.clearTimeout(this.holdTimeout);
@@ -122,7 +122,7 @@ import pool from "../../system/pooling.js";
      */
     enter(event) {
         this.hover = true;
-        this.dirty = true;
+        this.isDirty = true;
         if (this.isDraggable === true) {
             on(POINTERMOVE, this.pointerMove, this);
             // to memorize where we grab the object
@@ -168,7 +168,7 @@ import pool from "../../system/pooling.js";
      */
     leave(event) {
         this.hover = false;
-        this.dirty = true;
+        this.isDirty = true;
         if (this.isDraggable === true) {
             // unregister on the global pointermove event
             off(POINTERMOVE, this.pointerMove);
@@ -194,7 +194,7 @@ import pool from "../../system/pooling.js";
     release(event) {
         if (this.released === false) {
             this.released = true;
-            this.dirty = true;
+            this.isDirty = true;
             timer.clearTimeout(this.holdTimeout);
             this.holdTimeout = -1;
             return this.onRelease(event);
@@ -216,7 +216,7 @@ import pool from "../../system/pooling.js";
     hold() {
         timer.clearTimeout(this.holdTimeout);
         this.holdTimeout = -1;
-        this.dirty = true;
+        this.isDirty = true;
         if (!this.released) {
             this.onHold();
         }

package/src/renderable/ui/uispriteelement.js

@@ -7,7 +7,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
  * This is a basic sprite based button which you can use in your Game UI.
  * @augments Sprite
  */
- export default class UISpriteElement extends Sprite {
+export default class UISpriteElement extends Sprite {
     /**
      * @param {number} x - the x coordinate of the UISpriteElement Object
      * @param {number} y - the y coordinate of the UISpriteElement Object
@@ -93,7 +93,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
     clicked(event) {
         // Check if left mouse button is pressed
         if (event.button === 0 && this.isClickable) {
-            this.dirty = true;
+            this.isDirty = true;
             this.released = false;
             if (this.isHoldable) {
                 timer.clearTimeout(this.holdTimeout);
@@ -119,7 +119,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     enter(event) {
         this.hover = true;
-        this.dirty = true;
+        this.isDirty = true;
         return this.onOver(event);
     }
 
@@ -137,7 +137,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     leave(event) {
         this.hover = false;
-        this.dirty = true;
+        this.isDirty = true;
         this.release(event);
         return this.onOut(event);
     }
@@ -157,7 +157,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
     release(event) {
         if (this.released === false) {
             this.released = true;
-            this.dirty = true;
+            this.isDirty = true;
             timer.clearTimeout(this.holdTimeout);
             this.holdTimeout = -1;
             return this.onRelease(event);
@@ -179,7 +179,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
     hold() {
         timer.clearTimeout(this.holdTimeout);
         this.holdTimeout = -1;
-        this.dirty = true;
+        this.isDirty = true;
         if (!this.released) {
             this.onHold();
         }

package/src/renderable/ui/uitextbutton.js

@@ -1,4 +1,4 @@
-import BitmapText from "../../text/bitmaptext.js";
+import BitmapText from "../text/bitmaptext.js";
 import RoundRect from "../../geometries/roundrect.js";
 import UIBaseElement from "./uibaseelement.js";
 
@@ -8,7 +8,7 @@ import UIBaseElement from "./uibaseelement.js";
  * This is a basic base text button which you can use in your Game UI.
  * @augments UIBaseElement
  */
- export default class UITextButton extends UIBaseElement {
+export default class UITextButton extends UIBaseElement {
     /**
      * A Bitmap Text Button with an outlined background border, filled with background color.
      * It uses a RoundRect as background and changes the background color on hovering over.

package/src/state/stage.js

@@ -18,7 +18,7 @@ let default_settings = {
  * through the state manager must inherit from this base class.
  * @see state
  */
- export default class Stage {
+export default class Stage {
 
     /**
      * @param {object} [settings] - The stage` parameters

package/src/state/state.js

@@ -2,7 +2,6 @@ import { pauseTrack, resumeTrack } from "./../audio/audio.js";
 import * as fctUtil from "./../utils/function.js";
 import * as event from "./../system/event.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";
 
@@ -134,54 +133,6 @@ event.on(event.BOOT, () => {
     event.on(event.VIDEO_INIT, () => {
         state.change(state.DEFAULT, true);
     });
-
-    if (typeof globalThis.addEventListener === "function") {
-        // set pause/stop action on losing focus
-        globalThis.addEventListener("blur", () => {
-            if (device.stopOnBlur) {
-                state.stop(true);
-            }
-            if (device.pauseOnBlur) {
-                state.pause(true);
-            }
-        }, false);
-        // set restart/resume action on gaining focus
-        globalThis.addEventListener("focus", () => {
-            if (device.stopOnBlur) {
-                state.restart(true);
-            }
-            if (device.resumeOnFocus) {
-                state.resume(true);
-            }
-            // force focus if autofocus is on
-            if (device.autoFocus) {
-                device.focus();
-            }
-        }, false);
-    }
-
-    if (typeof globalThis.document !== "undefined") {
-        if (typeof globalThis.document.addEventListener === "function") {
-            // register on the visibilitychange event if supported
-            globalThis.document.addEventListener("visibilitychange", () => {
-                if (globalThis.document.visibilityState === "visible") {
-                    if (device.stopOnBlur) {
-                        state.restart(true);
-                    }
-                    if (device.resumeOnFocus) {
-                        state.resume(true);
-                    }
-                } else {
-                    if (device.stopOnBlur) {
-                        state.stop(true);
-                    }
-                    if (device.pauseOnBlur) {
-                        state.pause(true);
-                    }
-                }
-            }, false );
-        }
-    }
 });
 
 /**

package/src/system/device.js

@@ -1,5 +1,6 @@
 import { getParent } from "./../video/video.js";
 import save from "./save.js";
+import * as event from "./../system/event.js";
 import { prefixed } from "./../utils/agent.js";
 import { DOMContentLoaded } from "./dom.js";
 import * as device_platform from "./platform.js"; // export * as name1 from …; // ECMAScript® 2020
@@ -349,6 +350,8 @@ export let alpha = 0;
  * Specify whether to pause the game when losing focus
  * @name pauseOnBlur
  * @memberof device
+ * @deprecated since 15.4.0
+ * @see Application.pauseOnBlur
  * @type {boolean}
  * @public
  * @default true
@@ -359,6 +362,8 @@ export let pauseOnBlur = true;
  * Specify whether to unpause the game when gaining focus
  * @name resumeOnFocus
  * @memberof device
+ * @deprecated since 15.4.0
+ * @see Application.resumeOnFocus
  * @type {boolean}
  * @public
  * @default true
@@ -366,25 +371,27 @@ export let pauseOnBlur = true;
 export let resumeOnFocus = true;
 
 /**
- * Specify whether to automatically bring the window to the front
- * @name autoFocus
+ * Specify whether to stop the game when losing focus or not.
+ * The engine restarts on focus if this is enabled.
+ * @name stopOnBlur
  * @memberof device
+ * @deprecated since 15.4.0
+ * @see Application.stopOnBlur
  * @type {boolean}
  * @public
- * @default true
+ * @default false
  */
-export let autoFocus = true;
+export let stopOnBlur = false;
 
 /**
- * Specify whether to stop the game when losing focus or not.
- * The engine restarts on focus if this is enabled.
- * @name stopOnBlur
+ * Specify whether to automatically bring the window to the front
+ * @name autoFocus
  * @memberof device
  * @type {boolean}
  * @public
- * @default false
+ * @default true
  */
-export let stopOnBlur = false;
+export let autoFocus = true;
 
 /**
 * specify a function to execute when the Device is fully loaded and ready
@@ -432,6 +439,38 @@ export let stopOnBlur = false;
 * });
 */
 export function onReady(fn) {
+    // register on blur/focus and visibility event handlers
+    if (typeof globalThis.addEventListener === "function") {
+        // set pause/stop action on losing focus
+        globalThis.addEventListener("blur", () => {
+            event.emit(event.BLUR);
+        }, false);
+        // set restart/resume action on gaining focus
+        globalThis.addEventListener("focus", () => {
+            event.emit(event.FOCUS);
+            // force focus if autofocus is on
+            if (autoFocus === true) {
+                focus();
+            }
+        }, false);
+    }
+    if (typeof globalThis.document !== "undefined") {
+        if (typeof globalThis.document.addEventListener === "function") {
+            // register on the visibilitychange event if supported
+            globalThis.document.addEventListener("visibilitychange", () => {
+                if (globalThis.document.visibilityState === "visible") {
+                    event.emit(event.FOCUS);
+                    // force focus if autofocus is on
+                    if (autoFocus === true) {
+                        focus();
+                    }
+                } else {
+                    event.emit(event.BLUR);
+                }
+            }, false );
+        }
+    }
+    // call the supplied function
     DOMContentLoaded(fn);
 }