melonjs 10.8.0 → 10.11.0

package/src/system/timer.js

@@ -1,96 +1,16 @@
 import utils from "./../utils/utils.js";
-import * as event from "./../system/event.js";
+import * as event from "./event.js";
 import state from "./../state/state.js";
 import { clamp } from "./../math/math.js";
 
-//hold element to display fps
-var framecount = 0;
-var framedelta = 0;
-
-/* fps count stuff */
-var last = 0;
-var now = 0;
-var delta = 0;
-// for timeout/interval update
-var step =0;
-var minstep = 0;
-
-// list of defined timer function
-var timers = [];
-var timerId = 0;
-
-/**
- * update
- * @ignore
- */
-function update(time) {
-    last = now;
-    now = time;
-    delta = (now - last);
-
-    // fix for negative timestamp returned by wechat or chrome on startup
-    if (delta < 0) {
-        delta = 0;
-    }
-
-    // get the game tick
-    timer.tick = (delta > minstep && timer.interpolation) ? delta / step : 1;
-
-
-    updateTimers();
-};
-
-/**
- * clear Timers
- * @ignore
- */
-function clearTimer(timerId) {
-    for (var i = 0, len = timers.length; i < len; i++) {
-        if (timers[i].timerId === timerId) {
-            timers.splice(i, 1);
-            break;
-        }
-    }
-};
-
-
-/**
- * update timers
- * @ignore
- */
-function updateTimers() {
-    for (var i = 0, len = timers.length; i < len; i++) {
-        var _timer = timers[i];
-        if (!(_timer.pauseable && state.isPaused())) {
-            _timer.elapsed += delta;
-        }
-        if (_timer.elapsed >= _timer.delay) {
-            _timer.fn.apply(null, _timer.args);
-            if (_timer.repeat === true) {
-                _timer.elapsed -= _timer.delay;
-            } else {
-                timer.clearTimeout(_timer.timerId);
-            }
-        }
-    }
-};
-
-// Initialize me.timer on Boot event
-event.on(event.BOOT, () => {
-    // reset variables to initial state
-    timer.reset();
-    now = last = 0;
-    // register to the game before update event
-    event.on(event.GAME_BEFORE_UPDATE, update);
-});
-
-
 /**
+ * @classdesc
  * a Timer class to manage timing related function (FPS, Game Tick, Time...)
- * @namespace timer
+  * @see {@link timer} the default global timer instance
  */
-var timer = {
+class Timer {
 
+    constructor() {
         /**
          * Last game tick value.<br/>
          * Use this value to scale velocities during frame drops due to slow
@@ -103,7 +23,7 @@ var timer = {
          * @name tick
          * @memberof timer
          */
-        tick : 1.0,
+        this.tick = 1.0;
 
         /**
          * Last measured fps rate.<br/>
@@ -113,7 +33,7 @@ var timer = {
          * @name fps
          * @memberof timer
          */
-        fps : 0,
+        this.fps = 0;
 
         /**
          * Set the maximum target display frame per second
@@ -124,7 +44,7 @@ var timer = {
          * @default 60
          * @memberof timer
          */
-        maxfps : 60,
+        this.maxfps = 60;
 
         /**
          * Enable/disable frame interpolation
@@ -134,146 +54,247 @@ var timer = {
          * @name interpolation
          * @memberof timer
          */
-        interpolation : false,
+        this.interpolation = false;
 
-        /**
-         * reset time (e.g. usefull in case of pause)
-         * @name reset
-         * @memberof timer
-         * @ignore
-         * @function
-         */
-        reset() {
-            // set to "now"
-            last = now = globalThis.performance.now();
-            delta = 0;
-            // reset delta counting variables
-            framedelta = 0;
-            framecount = 0;
-            step = Math.ceil(1000 / this.maxfps); // ROUND IT ?
-            // define some step with some margin
-            minstep = (1000 / this.maxfps) * 1.25; // IS IT NECESSARY?\
-        },
+        //hold element to display fps
+        this.framecount = 0;
+        this.framedelta = 0;
 
-        /**
-         * 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.
-         * @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().
-         * @function
-         * @example
-         * // set a timer to call "myFunction" after 1000ms
-         * me.timer.setTimeout(myFunction, 1000);
-         * // set a timer to call "myFunction" after 1000ms (respecting the pause state) and passing param1 and param2
-         * me.timer.setTimeout(myFunction, 1000, true, param1, param2);
-         */
-        setTimeout(fn, delay, pauseable, ...args) {
-            timers.push({
-                fn : fn,
-                delay : delay,
-                elapsed : 0,
-                repeat : false,
-                timerId : ++timerId,
-                pauseable : pauseable === true || true,
-                args : args
-            });
-            return timerId;
-        },
+        /* fps count stuff */
+        this.last = 0;
+        this.now = 0;
+        this.delta = 0;
+        // for timeout/interval update
+        this.step =0;
+        this.minstep = 0;
 
-        /**
-         * 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.
-         * @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().
-         * @function
-         * @example
-         * // set a timer to call "myFunction" every 1000ms
-         * me.timer.setInterval(myFunction, 1000);
-         * // set a timer to call "myFunction" every 1000ms (respecting the pause state) and passing param1 and param2
-         * me.timer.setInterval(myFunction, 1000, true, param1, param2);
-         */
-        setInterval(fn, delay, pauseable, ...args) {
-            timers.push({
-                fn : fn,
-                delay : delay,
-                elapsed : 0,
-                repeat : true,
-                timerId : ++timerId,
-                pauseable : pauseable === true || true,
-                args : args
-            });
-            return timerId;
-        },
+        // list of defined timer function
+        this.timers = [];
+        this.timerId = 0;
 
-        /**
-         * Clears the delay set by me.timer.setTimeout().
-         * @name clearTimeout
-         * @memberof timer
-         * @function
-         * @param {number} timeoutID ID of the timeout to be cleared
-         */
-        clearTimeout(timeoutID) {
-            utils.function.defer(clearTimer, this, timeoutID);
-        },
+        // Initialize mtimer on Boot event
+        event.on(event.BOOT, () => {
+            // reset variables to initial state
+            this.reset();
+            this.now = this.last = 0;
+            // register to the game before update event
+            event.on(event.GAME_BEFORE_UPDATE, this.update.bind(this));
+        });
 
-        /**
-         * Clears the Interval set by me.timer.setInterval().
-         * @name clearInterval
-         * @memberof timer
-         * @function
-         * @param {number} intervalID ID of the interval to be cleared
-         */
-        clearInterval(intervalID) {
-            utils.function.defer(clearTimer, this, intervalID);
-        },
+        // reset timer
+        event.on(event.STATE_RESUME, () => {
+            this.reset();
+        });
+        event.on(event.STATE_RESTART, () => {
+            this.reset();
+        });
+        event.on(event.STATE_CHANGE, () => {
+            this.reset();
+        });
+    }
 
-        /**
-         * 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}
-         * @function
-         */
-        getTime() {
-            return now;
-        },
 
-        /**
-         * Return elapsed time in milliseconds since the last update
-         * @name getDelta
-         * @memberof timer
-         * @returns {number}
-         * @function
-         */
-        getDelta() {
-            return delta;
-        },
+    /**
+     * reset time (e.g. usefull in case of pause)
+     * @name reset
+     * @memberof timer
+     * @ignore
+     */
+    reset() {
+        // set to "now"
+        this.last = this.now = globalThis.performance.now();
+        this.delta = 0;
+        // reset delta counting variables
+        this.framedelta = 0;
+        this.framecount = 0;
+        this.step = Math.ceil(1000 / this.maxfps); // ROUND IT ?
+        // define some step with some margin
+        this.minstep = (1000 / this.maxfps) * 1.25; // IS IT NECESSARY?\
+    }
 
-        /**
-         * compute the actual frame time and fps rate
-         * @name computeFPS
-         * @ignore
-         * @memberof timer
-         * @function
-         */
-        countFPS() {
-            framecount++;
-            framedelta += delta;
-            if (framecount % 10 === 0) {
-                this.fps = clamp(Math.round((1000 * framecount) / framedelta), 0, this.maxfps);
-                framedelta = 0;
-                framecount = 0;
+    /**
+     * 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.
+     * @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().
+     * @example
+     * // set a timer to call "myFunction" after 1000ms
+     * me.timer.setTimeout(myFunction, 1000);
+     * // set a timer to call "myFunction" after 1000ms (respecting the pause state) and passing param1 and param2
+     * me.timer.setTimeout(myFunction, 1000, true, param1, param2);
+     */
+    setTimeout(fn, delay, pauseable, ...args) {
+        this.timers.push({
+            fn : fn,
+            delay : delay,
+            elapsed : 0,
+            repeat : false,
+            timerId : ++this.timerId,
+            pauseable : pauseable === true || true,
+            args : args
+        });
+        return this.timerId;
+    }
+
+    /**
+     * 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.
+     * @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().
+     * @example
+     * // set a timer to call "myFunction" every 1000ms
+     * me.timer.setInterval(myFunction, 1000);
+     * // set a timer to call "myFunction" every 1000ms (respecting the pause state) and passing param1 and param2
+     * me.timer.setInterval(myFunction, 1000, true, param1, param2);
+     */
+    setInterval(fn, delay, pauseable, ...args) {
+        this.timers.push({
+            fn : fn,
+            delay : delay,
+            elapsed : 0,
+            repeat : true,
+            timerId : ++this.timerId,
+            pauseable : pauseable === true || true,
+            args : args
+        });
+        return this.timerId;
+    }
+
+    /**
+     * Clears the delay set by me.timer.setTimeout().
+     * @name clearTimeout
+     * @memberof timer
+     * @param {number} timeoutID ID of the timeout to be cleared
+     */
+    clearTimeout(timeoutID) {
+        utils.function.defer(this.clearTimer.bind(this), this, timeoutID);
+    }
+
+    /**
+     * Clears the Interval set by me.timer.setInterval().
+     * @name clearInterval
+     * @memberof timer
+     * @param {number} intervalID ID of the interval to be cleared
+     */
+    clearInterval(intervalID) {
+        utils.function.defer(this.clearTimer.bind(this), this, intervalID);
+    }
+
+    /**
+     * 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() {
+        return this.now;
+    }
+
+    /**
+     * Return elapsed time in milliseconds since the last update
+     * @name getDelta
+     * @memberof timer
+     * @returns {number}
+     */
+    getDelta() {
+        return this.delta;
+    }
+
+    /**
+     * compute the actual frame time and fps rate
+     * @name computeFPS
+     * @ignore
+     * @memberof timer
+     */
+    countFPS() {
+        this.framecount++;
+        this.framedelta += this.delta;
+        if (this.framecount % 10 === 0) {
+            this.fps = clamp(Math.round((1000 * this.framecount) / this.framedelta), 0, this.maxfps);
+            this.framedelta = 0;
+            this.framecount = 0;
+        }
+    }
+
+    /**
+     * update
+     * @ignore
+     */
+    update(time) {
+        this.last = this.now;
+        this.now = time;
+        this.delta = (this.now - this.last);
+
+        // fix for negative timestamp returned by wechat or chrome on startup
+        if (this.delta < 0) {
+            this.delta = 0;
+        }
+
+        // get the game tick
+        this.tick = (this.delta > this.minstep && this.interpolation) ? this.delta / this.step : 1;
+
+        this.updateTimers();
+    }
+
+    /**
+     * clear Timers
+     * @ignore
+     */
+    clearTimer(timerId) {
+        for (var i = 0, len = this.timers.length; i < len; i++) {
+            if (this.timers[i].timerId === timerId) {
+                this.timers.splice(i, 1);
+                break;
             }
         }
+    }
+
+
+    /**
+     * update timers
+     * @ignore
+     */
+    updateTimers() {
+        for (var i = 0, len = this.timers.length; i < len; i++) {
+            var _timer = this.timers[i];
+            if (!(_timer.pauseable && state.isPaused())) {
+                _timer.elapsed += this.delta;
+            }
+            if (_timer.elapsed >= _timer.delay) {
+                _timer.fn.apply(null, _timer.args);
+                if (_timer.repeat === true) {
+                    _timer.elapsed -= _timer.delay;
+                } else {
+                    this.clearTimeout(_timer.timerId);
+                }
+            }
+        }
+    }
 };
 
+/**
+ * the default global Timer instance
+ * @namespace timer
+ * @see Timer
+ * @example
+ * // set a timer to call "myFunction" after 1000ms
+ * timer.setTimeout(myFunction, 1000);
+ * // set a timer to call "myFunction" after 1000ms (respecting the pause state) and passing param1 and param2
+ * timer.setTimeout(myFunction, 1000, true, param1, param2);
+ * // set a timer to call "myFunction" every 1000ms
+ * timer.setInterval(myFunction, 1000);
+ * // 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/bitmaptextdata.js

@@ -1,7 +1,7 @@
 import Glyph from "./glyph.js";
 
 // bitmap constants
-var capChars = ["M", "N", "B", "D", "C", "E", "F", "K", "A", "G", "H", "I", "J", "L", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
+const capChars = ["M", "N", "B", "D", "C", "E", "F", "K", "A", "G", "H", "I", "J", "L", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
 
 /**
  * Gets the value from a string of pairs.
@@ -21,7 +21,6 @@ function getValueFromPair(string, pattern) {
  * @ignore
  * @name _getFirstGlyph
  * @memberof BitmapTextData
- * @function
  * @param {object} glyphs the map of glyphs, each key is a char code
  * @returns {Glyph}
  */
@@ -40,7 +39,6 @@ function getFirstGlyph(glyphs) {
  * @ignore
  * @name createSpaceGlyph
  * @memberof BitmapTextData
- * @function
  * @param {object} glyphs the map of glyphs, each key is a char code
  */
 function createSpaceGlyph(glyphs) {
@@ -100,7 +98,6 @@ class BitmapTextData {
      * This parses the font data text and builds a map of glyphs containing the data for each character
      * @name parse
      * @memberof BitmapTextData
-     * @function
      * @param {string} fontData
      */
     parse(fontData) {

package/src/text/glyph.js

@@ -1,7 +1,7 @@
 
 // bitmap constants
-var LOG2_PAGE_SIZE = 9;
-var PAGE_SIZE = 1 << LOG2_PAGE_SIZE;
+const LOG2_PAGE_SIZE = 9;
+const PAGE_SIZE = 1 << LOG2_PAGE_SIZE;
 
 /**
  * a glyph representing a single character in a font

package/src/text/text.js

@@ -1,6 +1,6 @@
 import Color from "./../math/color.js";
 import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
-import { renderer as globalRenderer, createCanvas } from "./../video/video.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";
@@ -17,13 +17,13 @@ import TextMetrics from "./textmetrics.js";
 */
 
 
-var runits = ["ex", "em", "pt", "px"];
-var toPX = [12, 24, 0.75, 1];
+const runits = ["ex", "em", "pt", "px"];
+const toPX = [12, 24, 0.75, 1];
 
 // return a valid 2d context for Text rendering/styling
 var getContext2d = function (renderer, text) {
     if (text.offScreenCanvas === true) {
-        return text.context;
+        return text.canvasTexture.context;
     } else {
         return renderer.getFontContext();
     }
@@ -66,7 +66,8 @@ class Text extends Renderable {
         /**
          * defines the color used to draw the font.<br>
          * @public
-         * @type {Color}
+         * @member {Color}
+         * @name Text#fillStyle
          * @default black
          */
         if (typeof settings.fillStyle !== "undefined") {
@@ -83,7 +84,8 @@ class Text extends Renderable {
         /**
          * defines the color used to draw the font stroke.<br>
          * @public
-         * @type {Color}
+         * @member {Color}
+         * @name strokeStyle
          * @default black
          */
          if (typeof settings.strokeStyle !== "undefined") {
@@ -190,8 +192,7 @@ class Text extends Renderable {
 
         if (settings.offScreenCanvas === true) {
             this.offScreenCanvas = true;
-            this.canvas = createCanvas(2, 2, true);
-            this.context = this.canvas.getContext("2d");
+            this.canvasTexture = pool.pull("CanvasTexture", 2, 2, { offscreenCanvas: true });
         }
 
         // instance to text metrics functions
@@ -206,10 +207,9 @@ class Text extends Renderable {
         // 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.canvas);
-            this.canvas.width = this.canvas.height = 0;
-            this.context = undefined;
-            this.canvas = undefined;
+            globalRenderer.cache.delete(this.canvasTexture.canvas);
+            pool.push(this.canvasTexture);
+            this.canvasTexture = undefined;
             this.glTextureUnit = undefined;
         }
     }
@@ -307,7 +307,7 @@ class Text extends Renderable {
 
             if (globalRenderer instanceof WebGLRenderer) {
                 // invalidate the previous corresponding texture so that it can reuploaded once changed
-                this.glTextureUnit = globalRenderer.cache.getUnit(globalRenderer.cache.get(this.canvas));
+                this.glTextureUnit = globalRenderer.cache.getUnit(globalRenderer.cache.get(this.canvasTexture.canvas));
                 globalRenderer.currentCompositor.unbindTexture2D(null, this.glTextureUnit);
 
                 if (globalRenderer.WebGLVersion === 1) {
@@ -318,14 +318,12 @@ class Text extends Renderable {
             }
 
             // resize the cache canvas if necessary
-            if (this.canvas.width < width || this.canvas.height < height) {
-                this.canvas.width = width;
-                this.canvas.height = height;
-                // resizing the canvas will automatically clear its content
-            } else {
-                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            if (this.canvasTexture.width < width || this.canvasTexture.height < height) {
+                this.canvasTexture.resize(width, height);
             }
-            this._drawFont(this.context, this._text,  this.pos.x - this.metrics.x, this.pos.y - this.metrics.y, false);
+
+            this.canvasTexture.clear();
+            this._drawFont(this.canvasTexture.context, this._text,  this.pos.x - this.metrics.x, this.pos.y - this.metrics.y, false);
         }
 
         this.isDirty = true;
@@ -389,7 +387,7 @@ class Text extends Renderable {
 
         // draw the text
         if (this.offScreenCanvas === true) {
-            renderer.drawImage(this.canvas, x, y);
+            renderer.drawImage(this.canvasTexture.canvas, x, y);
         } else {
             renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke));
         }

package/src/text/textmetrics.js

@@ -1,10 +1,8 @@
 import Bounds from "./../physics/bounds.js";
 import { trimRight } from "./../utils/string.js";
 import Text from "./text.js";
-//import BitmapText from "./bitmaptext.js";
 import setContextStyle from "./textstyle.js";
 
-
 /**
  * @classdesc
  * a Text Metrics object that contains helper for text manipulation

package/src/tweens/easing.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Tween.js - Licensed under the MIT license
  * https://github.com/tweenjs/tween.js
  */

package/src/tweens/interpolation.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Tween.js - Licensed under the MIT license
  * https://github.com/tweenjs/tween.js
  */
@@ -76,7 +76,7 @@ export let Interpolation = {
             return fc( n ) / fc( i ) / fc( n - i );
 
         },
-        /** @ignore */
+        /* @ignore */
         Factorial: ( function () {
 
             var a = [ 1 ];