melonjs 15.0.0 → 15.1.0

package/src/renderable/ui/uitextbutton.js

@@ -1,4 +1,3 @@
-import Vector2d from "../../math/vector2.js";
 import BitmapText from "../../text/bitmaptext.js";
 import RoundRect from "../../geometries/roundrect.js";
 import UIBaseElement from "./uibaseelement.js";
@@ -11,25 +10,27 @@ import UIBaseElement from "./uibaseelement.js";
  */
  export default class UITextButton extends UIBaseElement {
     /**
-     * A Text Button with an outlined background border, filled with background color.
+     * 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.
      * The background will be drawn with 0.5 opacity, so that the background of the button is
      * slightly shining through.
      * @param {number} x - x pos of the button
      * @param {number} y - y pos of the button
      * @param {string} [settings.font] - The name of the BitmapText font to use
-     * @param {number} [settings.size] - The scale factor of the font (default: 1)
-     * @param {string} [settings.text] - The text to display (default: 'click me')
+     * @param {number} [settings.size=1] - The scale factor of the BitmapText
+     * @param {string} [settings.text] - The text to display
      * @param {string} [settings.bindKey] - The key to bind the action to (default: none)
-     * @param {string} [settings.backgroundColor] - The css value of a background color
-     * @param {string} [settings.hoverColor] - The css value of a color to be used if the pointer hovers over the button
-     * @param {string} [settings.borderStrokeColor] - The css value of a color to be used to draw the border
-     * @param {string} [settings.fillStyle] - The css value of a tint color to be used to tint the text
+     * @param {string} [settings.backgroundColor="#00aa0080"] - The css value of a background color
+     * @param {string} [settings.hoverColor="#00ff00ff"] - The css value of a color to be used if the pointer hovers over the button
+     * @param {string} [settings.borderStrokeColor="#000000"] - The css value of a color to be used to draw the border
+     * @param {string} [settings.fillStyle] - The css value of a tint color to be used to tint the BitmapText
+     * @param {string} [settings.textAlign="center"] - horizontal text alignment
+     * @param {string} [settings.textBaseline="middle"] - the text baseline
      * @param {number} [settings.borderWidth] - Width of the button
      * @param {number} [settings.borderHeight] - Height of the button
      * @example
      * // Create a new Button
-     * class PlayButton extends BaseTextButton {
+     * class PlayButton extends UITextButton {
      *      constructor(x,y) {
      *          super(x,y, {
      *              font: 'my-font',
@@ -45,74 +46,93 @@ import UIBaseElement from "./uibaseelement.js";
      *      }
      * }
      *
-     * game.world.addChild(new PlayButton(15,200));
+     * world.addChild(new PlayButton(15,200));
      */
     constructor(x, y, settings) {
         super(x, y);
-        settings.font = settings.font || "24Outline";
-        settings.size = settings.size || 1;
-        settings.text = settings.text || "<Click Me>";
-        settings.bindKey = settings.bindKey || -1;
-        settings.backgroundColor = settings.backgroundColor || "#00aa00";
-        settings.hoverColor = settings.hoverColor || "#00ff00";
-        settings.borderStrokeColor = settings.borderStrokeColor || "#000000";
-        settings.fillStyle = settings.fillStyle || "#ffffff";
-        settings.lineWidth = settings.lineWidth || 1;
-        settings.anchorPoint = settings.anchorPoint || new Vector2d(0, 0);
-
-        let font = new BitmapText(x, y, settings);
-        let dimensions = font.measureText();
-        settings.borderWidth = settings.borderWidth || dimensions.width + 16;
-        settings.borderHeight = settings.borderHeight || dimensions.height + 16;
-
-        let border = new RoundRect(
-            x,
-            y,
-            settings.borderWidth,
-            settings.borderHeight
-        );
-        super.setShape(
-            x,
-            y,
-            border.getBounds().width,
-            border.getBounds().height
-        );
 
-        // build up
-        this.font = font;
-        this.dimensions = dimensions;
-        this.border = border;
-        this.settings = settings;
-
-        // adjust text position
-        this.font.pos.set(
-            Math.round((border.width - dimensions.width) / 2) + this.font.pos.x,
-            Math.round((border.height - dimensions.height) / 2) +
-                this.font.pos.y
+        /**
+         * The key to bind the action to
+         * @type {string}
+         */
+        this.bindKey = settings.bindKey || -1;
+
+        /**
+         * The css value of a background color
+         * @type {string}
+         */
+        this.backgroundColor = settings.backgroundColor || "#00aa0080";
+
+        /**
+         * The css value of a color to be used if the pointer hovers over the button
+         * @type {string}
+         */
+        this.hoverColor = settings.hoverColor || "#00ff00ff";
+
+        /**
+         * The css value of a color to be used to draw the border
+         * @type {string}
+         */
+        this.borderStrokeColor = settings.borderStrokeColor || "#000000";
+
+        /**
+         * Set the default text alignment (or justification),<br>
+         * possible values are "left", "right", and "center".
+         * @public
+         * @type {string}
+         * @default "center"
+         */
+        this.textAlign = settings.textAlign = settings.textAlign || "center";
+
+        /**
+         * Set the text baseline (e.g. the Y-coordinate for the draw operation), <br>
+         * possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"<br>
+         * @public
+         * @type {string}
+         * @default "middle"
+         */
+        this.textBaseline = settings.textBaseline = settings.textBaseline || "middle";
+
+        /**
+         * the bitmapText used by the UITextButton class
+         * @type {BitmapText}
+         */
+        this.bitmapText = new BitmapText(0, 0, settings);
+
+        // "detect" the button size
+        this.dimensions = this.bitmapText.measureText();
+        settings.borderWidth = settings.borderWidth || this.dimensions.width + 16;
+        settings.borderHeight = settings.borderHeight || this.dimensions.height + 16;
+
+        // create the round rect button
+        this.border = new RoundRect(x, y, settings.borderWidth, settings.borderHeight);
+
+        // resize the container accordingly
+        this.resize(
+            this.border.getBounds().width,
+            this.border.getBounds().height
         );
+
+        // adjust size position
+        this.bitmapText.pos.set(this.width / 2, this.height / 2);
+
+        // add bitmapText to the UI container
+        this.addChild(this.bitmapText);
     }
 
     draw(renderer) {
-        renderer.setGlobalAlpha(0.5);
-        if (!this.hover) {
-            renderer.setColor(this.settings.backgroundColor);
+        if (this.hover === true) {
+            renderer.setColor(this.hoverColor);
         } else {
-            renderer.setColor(this.settings.hoverColor);
+            renderer.setColor(this.backgroundColor);
         }
-
         renderer.fill(this.border);
-        renderer.setGlobalAlpha(1);
-        renderer.setColor(this.settings.borderStrokeColor);
+        renderer.setColor(this.borderStrokeColor);
         renderer.stroke(this.border);
-
-        // fix: supporting tint
-        renderer.setTint(this.font.tint, this.font.getOpacity());
-        this.font.draw(
-            renderer,
-            this.settings.text,
-            this.font.pos.x,
-            this.font.pos.y
-        );
+        this.bitmapText.preDraw(renderer);
+        this.bitmapText.draw(renderer);
+        this.bitmapText.postDraw(renderer);
+        super.draw(renderer);
     }
 }
 

package/src/state/stage.js

@@ -4,10 +4,10 @@ import Camera2d from "./../camera/camera2d.js";
 import Color from "./../math/color.js";
 
 // a default camera instance to use across all stages
-var default_camera;
+let default_camera;
 
 // default stage settings
-var default_settings = {
+let default_settings = {
     cameras : []
 };
 
@@ -49,7 +49,7 @@ var default_settings = {
          * @see Stage.ambientLight
          * @example
          * // create a white spot light
-         * var whiteLight = new me.Light2d(0, 0, 140, "#fff", 0.7);
+         * let whiteLight = new me.Light2d(0, 0, 140, "#fff", 0.7);
          * // and add the light to this current stage
          * this.lights.set("whiteLight", whiteLight);
          * // set a dark ambient light
@@ -96,8 +96,8 @@ var default_settings = {
         // empty or no default camera
         if (this.cameras.has("default") === false) {
             if (typeof default_camera === "undefined") {
-                var width = renderer.getWidth();
-                var height = renderer.getHeight();
+                let width = renderer.getWidth();
+                let height = renderer.getHeight();
                 // new default camera instance
                 default_camera = new Camera2d(0, 0, width, height);
             }
@@ -121,7 +121,7 @@ var default_settings = {
      */
     update(dt) {
         // update all objects (and pass the elapsed time since last frame)
-        var isDirty = game.world.update(dt);
+        let isDirty = game.world.update(dt);
 
         // update the camera/viewport
         // iterate through all cameras

package/src/state/state.js

@@ -8,32 +8,32 @@ import DefaultLoadingScreen from "./../loader/loadingscreen.js";
 
 
 // current state
-var _state = -1;
+let _state = -1;
 
 // requestAnimeFrame Id
-var _animFrameId = -1;
+let _animFrameId = -1;
 
 // whether the game state is "paused"
-var _isPaused = false;
+let _isPaused = false;
 
 // list of stages
-var _stages = {};
+let _stages = {};
 
 // fading transition parameters between screen
-var _fade = {
+let _fade = {
     color : "",
     duration : 0
 };
 
 // callback when state switch is done
 /** @ignore */
-var _onSwitchComplete = null;
+let _onSwitchComplete = null;
 
 // just to keep track of possible extra arguments
-var _extraArgs = null;
+let _extraArgs = null;
 
 // store the elapsed time during pause/stop period
-var _pauseTime = 0;
+let _pauseTime = 0;
 
 /**
  * @ignore
@@ -72,7 +72,7 @@ function _pauseRunLoop() {
  * @ignore
  */
 function _renderFrame(time) {
-    var stage = _stages[_state].stage;
+    let stage = _stages[_state].stage;
     // update all game objects
     game.update(time, stage);
     // render all game objects
@@ -195,7 +195,7 @@ event.on(event.BOOT, () => {
  * a State Manager (state machine)
  * @namespace state
  */
-var state = {
+let state = {
 
     /**
      * default state ID for Loading Stage
@@ -284,10 +284,10 @@ var state = {
      * @name USER
      * @memberof state
      * @example
-     * var STATE_INFO = me.state.USER + 0;
-     * var STATE_WARN = me.state.USER + 1;
-     * var STATE_ERROR = me.state.USER + 2;
-     * var STATE_CUTSCENE = me.state.USER + 3;
+     * let STATE_INFO = me.state.USER + 0;
+     * let STATE_WARN = me.state.USER + 1;
+     * let STATE_ERROR = me.state.USER + 2;
+     * let STATE_CUTSCENE = me.state.USER + 3;
      */
     USER : 100,
 

package/src/system/device.js

@@ -392,7 +392,7 @@ export let stopOnBlur = false;
 * @param {Function} fn - the function to be executed
 * @example
 * // small game skeleton
-* var game = {
+* let game = {
 *    // called by the me.device.onReady function
 *    onload = function () {
 *       // init video

package/src/system/event.js

@@ -6,7 +6,7 @@ import EventEmitter from "eventemitter3";
  */
 
 // internal instance of the event emiter
-var eventEmitter = new EventEmitter();
+let eventEmitter = new EventEmitter();
 
 /**
  * event when the DOM is Ready is booting

package/src/system/pooling.js

@@ -58,11 +58,11 @@ class ObjectPool {
      * me.pool.register("enemy", EnemyEntity, true);
      * // ...
      * // when we need to manually create a new bullet:
-     * var bullet = me.pool.pull("bullet", x, y, direction);
+     * let bullet = me.pool.pull("bullet", x, y, direction);
      * // ...
      * // params aren't a fixed number
      * // when we need new enemy we can add more params, that the object construct requires:
-     * var enemy = me.pool.pull("enemy", x, y, direction, speed, power, life);
+     * let enemy = me.pool.pull("enemy", x, y, direction, speed, power, life);
      * // ...
      * // when we want to destroy existing object, the remove
      * // function will ensure the object can then be reallocated later
@@ -70,9 +70,9 @@ class ObjectPool {
      * me.game.world.removeChild(bullet);
      */
     pull(name, ...args) {
-        var className = this.objectClass[name];
+        let className = this.objectClass[name];
         if (className) {
-            var proto = className["class"],
+            let proto = className["class"],
                 poolArray = className.pool,
                 obj;
 
@@ -98,7 +98,7 @@ class ObjectPool {
      * note: this will trigger the garbage collector
      */
     purge() {
-        for (var className in this.objectClass) {
+        for (let className in this.objectClass) {
             if (this.objectClass[className]) {
                 this.objectClass[className].pool = [];
             }
@@ -153,7 +153,7 @@ class ObjectPool {
      * }
      */
     poolable(obj) {
-        var className = obj.className;
+        let className = obj.className;
         return (typeof className !== "undefined") &&
                 (typeof obj.onResetEvent === "function") &&
                 (className in this.objectClass) &&
@@ -170,7 +170,7 @@ class ObjectPool {
     }
 }
 
-var pool = new ObjectPool();
+let pool = new ObjectPool();
 
 /**
  * a default global ObjectPool instance
@@ -181,7 +181,7 @@ var pool = new ObjectPool();
  * pool.register("bullet", BulletEntity, true);
  * // ...
  * // when we need to manually create a new bullet:
- * var bullet = pool.pull("bullet", x, y, direction, velocity);
+ * let bullet = pool.pull("bullet", x, y, direction, velocity);
  * // ...
  * // when we want to destroy existing object, the remove
  * // function will ensure the object can then be reallocated later

package/src/system/save.js

@@ -32,7 +32,7 @@ import * as event from "./event.js";
  */
 
 // Variable to hold the object data
-var data = {};
+let data = {};
 
 let hasLocalStorage = false;
 
@@ -57,10 +57,10 @@ function isReserved(key) {
 event.on(event.BOOT, () => {
     // Load previous data if local Storage is supported
     if (hasLocalStorage === true) {
-        var me_save_content = globalThis.localStorage.getItem("me.save");
+        let me_save_content = globalThis.localStorage.getItem("me.save");
 
         if (typeof me_save_content === "string" && me_save_content.length > 0) {
-            var keys = JSON.parse(me_save_content) || [];
+            let keys = JSON.parse(me_save_content) || [];
             keys.forEach((key) => {
                 data[key] = JSON.parse(globalThis.localStorage.getItem("me.save." + key));
             });
@@ -68,7 +68,7 @@ event.on(event.BOOT, () => {
     }
 });
 
-var save = {
+let save = {
 
     /**
      * Add new keys to localStorage and set them to the given default values if they do not exist
@@ -82,7 +82,7 @@ var save = {
      * me.save.score = 1000;
      */
     add(props) {
-        var obj = save;
+        let obj = save;
 
         Object.keys(props).forEach((key) => {
             if (isReserved(key)) {

package/src/system/timer.js

@@ -71,7 +71,7 @@ class Timer {
             this.reset();
             this.now = this.last = 0;
             // register to the game before update event
-            event.on(event.GAME_BEFORE_UPDATE, this.update.bind(this));
+            event.on(event.GAME_BEFORE_UPDATE, (time) => this.update(time));
         });
 
         // reset timer
@@ -109,7 +109,7 @@ class Timer {
      * @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.
      * @param {...*} args - optional parameters which are passed through to the function specified by fn once the timer expires.
-     * @returns {number} The numerical ID of the timer, which can be used later with me.timer.clearTimeout().
+     * @returns {number} a positive integer value which identifies the timer created by the call to setTimeout(), which can be used later with me.timer.clearTimeout().
      * @example
      * // set a timer to call "myFunction" after 1000ms
      * me.timer.setTimeout(myFunction, 1000);
@@ -135,7 +135,7 @@ class Timer {
      * @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.
      * @param {...*} args - optional parameters which are passed through to the function specified by fn once the timer expires.
-     * @returns {number} The numerical ID of the timer, which can be used later with me.timer.clearInterval().
+     * @returns {number} a numeric, non-zero value which identifies the timer created by the call to setInterval(), which can be used later with me.timer.clearInterval().
      * @example
      * // set a timer to call "myFunction" every 1000ms
      * me.timer.setInterval(myFunction, 1000);
@@ -156,19 +156,23 @@ class Timer {
     }
 
     /**
-     * Clears the delay set by me.timer.setTimeout().
-     * @param {number} timeoutID - ID of the timeout to be cleared
+     * Cancels a timeout previously established by calling setTimeout().
+     * @param {number} timeoutID - ID of the timeout to be cancelled
      */
     clearTimeout(timeoutID) {
-        utils.function.defer(this.clearTimer.bind(this), this, timeoutID);
+        if (timeoutID > 0) {
+            utils.function.defer(this.clearTimer.bind(this), this, timeoutID);
+        }
     }
 
     /**
-     * Clears the Interval set by me.timer.setInterval().
+     * cancels the timed, repeating action which was previously established by a call to setInterval().
      * @param {number} intervalID - ID of the interval to be cleared
      */
     clearInterval(intervalID) {
-        utils.function.defer(this.clearTimer.bind(this), this, intervalID);
+        if (intervalID > 0) {
+            utils.function.defer(this.clearTimer.bind(this), this, intervalID);
+        }
     }
 
     /**
@@ -227,7 +231,7 @@ class Timer {
      * @ignore
      */
     clearTimer(timerId) {
-        for (var i = 0, len = this.timers.length; i < len; i++) {
+        for (let i = 0, len = this.timers.length; i < len; i++) {
             if (this.timers[i].timerId === timerId) {
                 this.timers.splice(i, 1);
                 break;
@@ -241,8 +245,8 @@ class Timer {
      * @ignore
      */
     updateTimers() {
-        for (var i = 0, len = this.timers.length; i < len; i++) {
-            var _timer = this.timers[i];
+        for (let i = 0, len = this.timers.length; i < len; i++) {
+            let _timer = this.timers[i];
             if (!(_timer.pauseable && state.isPaused())) {
                 _timer.elapsed += this.delta;
             }

package/src/text/bitmaptext.js

@@ -32,7 +32,7 @@ import TextMetrics from "./textmetrics.js";
      *     { name: "arial", type: "image" src: "data/font/arial.png" },
      * ])
      * // Then create an instance of your bitmap font:
-     * var myFont = new me.BitmapText(x, y, {font:"arial", text:"Hello"});
+     * let myFont = new me.BitmapText(x, y, {font:"arial", text:"Hello"});
      * // two possibilities for using "myFont"
      * // either call the draw function from your Renderable draw function
      * myFont.draw(renderer, "Hello!", 0, 0);
@@ -187,12 +187,12 @@ import TextMetrics from "./textmetrics.js";
      * @returns {Bounds} this Bitmap Text bounding box Rectangle object
      */
     updateBounds(absolute = true) {
-        var bounds = this.getBounds();
+        let bounds = this.getBounds();
 
         bounds.clear();
 
         if (typeof this.metrics !== "undefined") {
-            var ax, ay;
+            let ax, ay;
 
             bounds.addBounds(this.metrics.measureText(this._text));
 
@@ -291,7 +291,7 @@ import TextMetrics from "./textmetrics.js";
      */
     draw(renderer, text, x, y) {
         // save the previous global alpha value
-        var _alpha = renderer.globalAlpha();
+        let _alpha = renderer.globalAlpha();
 
         // allows to provide backward compatibility when
         // adding Bitmap Font to an object container
@@ -305,15 +305,15 @@ import TextMetrics from "./textmetrics.js";
             y = this.pos.y;
         }
 
-        var lX = x;
-        var stringHeight = this.metrics.lineHeight();
-        var maxWidth = 0;
+        let lX = x;
+        let stringHeight = this.metrics.lineHeight();
+        let maxWidth = 0;
 
-        for (var i = 0; i < this._text.length; i++) {
+        for (let i = 0; i < this._text.length; i++) {
             x = lX;
-            var string = this._text[i].trimEnd();
+            let string = this._text[i].trimEnd();
             // adjust x pos based on alignment value
-            var stringWidth = this.metrics.lineWidth(string);
+            let stringWidth = this.metrics.lineWidth(string);
             switch (this.textAlign) {
                 case "right":
                     x -= stringWidth;
@@ -355,18 +355,18 @@ import TextMetrics from "./textmetrics.js";
             }
 
             // draw the string
-            var lastGlyph = null;
-            for (var c = 0, len = string.length; c < len; c++) {
+            let lastGlyph = null;
+            for (let c = 0, len = string.length; c < len; c++) {
                 // calculate the char index
-                var ch = string.charCodeAt(c);
-                var glyph = this.fontData.glyphs[ch];
+                let ch = string.charCodeAt(c);
+                let glyph = this.fontData.glyphs[ch];
 
                 if (typeof glyph !== "undefined") {
-                    var glyphWidth = glyph.width;
-                    var glyphHeight = glyph.height;
-                    var kerning = (lastGlyph && lastGlyph.kerning) ? lastGlyph.getKerning(ch) : 0;
-                    var scaleX = this.fontScale.x;
-                    var scaleY = this.fontScale.y;
+                    let glyphWidth = glyph.width;
+                    let glyphHeight = glyph.height;
+                    let kerning = (lastGlyph && lastGlyph.kerning) ? lastGlyph.getKerning(ch) : 0;
+                    let scaleX = this.fontScale.x;
+                    let scaleY = this.fontScale.y;
 
                     // draw it
                     if (glyphWidth !== 0 && glyphHeight !== 0) {