melonjs 13.0.0 → 13.1.0

package/dist/melonjs.module.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v13.0.0
+ * melonJS Game Engine - v13.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -309,10 +309,10 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.23.5',
+  version: '3.24.1',
   mode: 'global',
   copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.23.5/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.24.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -2350,6 +2350,29 @@ class Vector2d {
         return this;
     }
 
+    /**
+     * interpolate the position of this vector towards the given one by the given maximum step.
+     * @name moveTowards
+     * @memberof Vector2d
+     * @param {Vector2d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {Vector2d} Reference to this object for method chaining
+     */
+     moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this.y, target.x - this.x);
+
+        var distance = this.distance(target);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        this.x += Math.cos(angle) * step;
+        this.y += Math.sin(angle) * step;
+
+        return this;
+    }
+
     /**
      * return the distance between this vector and the passed one
      * @name distance
@@ -2418,9 +2441,17 @@ class Vector2d {
 }
 
 // convert a give color component to it hexadecimal value
-var toHex = function (component) {
+function toHex(component) {
     return "0123456789ABCDEF".charAt((component - (component % 16)) >> 4) + "0123456789ABCDEF".charAt(component % 16);
-};
+}
+function hue2rgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1/6) return p + (q - p) * 6 * t;
+    if (t < 1/2) return q;
+    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+    return p;
+}
 
 const rgbaRx = /^rgba?\((\d+), ?(\d+), ?(\d+)(, ?([\d\.]+))?\)$/;
 const hex3Rx = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])$/;
@@ -2615,7 +2646,6 @@ class Color {
     /**
      * Color Red Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get r() {
         return ~~(this.glArray[0] * 255);
@@ -2629,7 +2659,6 @@ class Color {
     /**
      * Color Green Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get g() {
         return ~~(this.glArray[1] * 255);
@@ -2643,7 +2672,6 @@ class Color {
     /**
      * Color Blue Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get b() {
         return ~~(this.glArray[2] * 255);
@@ -2655,7 +2683,6 @@ class Color {
     /**
      * Color Alpha Component [0.0 .. 1.0]
      * @type {number}
-     * @memberof Color
      */
     get alpha() {
         return this.glArray[3];
@@ -2668,8 +2695,6 @@ class Color {
 
     /**
      * Set this color to the specified value.
-     * @name setColor
-     * @memberof Color
      * @param {number} r red component [0 .. 255]
      * @param {number} g green component [0 .. 255]
      * @param {number} b blue component [0 .. 255]
@@ -2684,10 +2709,59 @@ class Color {
         return this;
     }
 
+    /**
+     * set this color to the specified HSV value
+     * @param {number} h hue (a value from 0 to 1)
+     * @param {number} s saturation (a value from 0 to 1)
+     * @param {number} v value (a value from 0 to 1)
+     * @returns {Color} Reference to this object for method chaining
+     */
+    setHSV(h, s, v) {
+        var r, g, b;
+
+        var i = Math.floor(h * 6);
+        var f = h * 6 - i;
+        var p = v * (1 - s);
+        var q = v * (1 - f * s);
+        var t = v * (1 - (1 - f) * s);
+
+        switch (i % 6) {
+            case 0: r = v, g = t, b = p; break;
+            case 1: r = q, g = v, b = p; break;
+            case 2: r = p, g = v, b = t; break;
+            case 3: r = p, g = q, b = v; break;
+            case 4: r = t, g = p, b = v; break;
+            case 5: r = v, g = p, b = q; break;
+        }
+        return this.setColor(r * 255, g * 255, b * 255);
+    }
+
+    /**
+     * set this color to the specified HSL value
+     * @param {number} h hue (a value from 0 to 1)
+     * @param {number} s saturation (a value from 0 to 1)
+     * @param {number} l lightness (a value from 0 to 1)
+     * @returns {Color} Reference to this object for method chaining
+     */
+    setHSL(h, s, l) {
+        var r, g, b;
+
+        if (s === 0) {
+            r = g = b = l; // achromatic
+        } else {
+            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            var p = 2 * l - q;
+
+            r = hue2rgb(p, q, h + 1/3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1/3);
+        }
+
+        return this.setColor(r * 255, g * 255, b * 255);
+    }
+
     /**
      * Create a new copy of this color object.
-     * @name clone
-     * @memberof Color
      * @returns {Color} Reference to the newly cloned object
      */
     clone() {
@@ -2696,8 +2770,6 @@ class Color {
 
     /**
      * Copy a color object or CSS color into this one.
-     * @name copy
-     * @memberof Color
      * @param {Color|string} color
      * @returns {Color} Reference to this object for method chaining
      */
@@ -2712,8 +2784,6 @@ class Color {
 
     /**
      * Blend this color with the given one using addition.
-     * @name add
-     * @memberof Color
      * @param {Color} color
      * @returns {Color} Reference to this object for method chaining
      */
@@ -2728,8 +2798,6 @@ class Color {
 
     /**
      * Darken this color value by 0..1
-     * @name darken
-     * @memberof Color
      * @param {number} scale
      * @returns {Color} Reference to this object for method chaining
      */
@@ -2744,8 +2812,6 @@ class Color {
 
     /**
      * Linearly interpolate between this color and the given one.
-     * @name lerp
-     * @memberof Color
      * @param {Color} color
      * @param {number} alpha with alpha = 0 being this color, and alpha = 1 being the given one.
      * @returns {Color} Reference to this object for method chaining
@@ -2761,8 +2827,6 @@ class Color {
 
     /**
      * Lighten this color value by 0..1
-     * @name lighten
-     * @memberof Color
      * @param {number} scale
      * @returns {Color} Reference to this object for method chaining
      */
@@ -2777,8 +2841,6 @@ class Color {
 
     /**
      * Generate random r,g,b values for this color object
-     * @name random
-     * @memberof Color
      * @param {number} [min=0] minimum value for the random range
      * @param {number} [max=255] maxmium value for the random range
      * @returns {Color} Reference to this object for method chaining
@@ -2802,8 +2864,6 @@ class Color {
     /**
      * Return true if the r,g,b,a values of this color are equal with the
      * given one.
-     * @name equals
-     * @memberof Color
      * @param {Color} color
      * @returns {boolean}
      */
@@ -2819,8 +2879,6 @@ class Color {
     /**
      * Parse a CSS color string and set this color to the corresponding
      * r,g,b values
-     * @name parseCSS
-     * @memberof Color
      * @param {string} cssColor
      * @returns {Color} Reference to this object for method chaining
      */
@@ -2836,8 +2894,6 @@ class Color {
 
     /**
      * Parse an RGB or RGBA CSS color string
-     * @name parseRGB
-     * @memberof Color
      * @param {string} rgbColor
      * @returns {Color} Reference to this object for method chaining
      */
@@ -2855,8 +2911,6 @@ class Color {
     /**
      * Parse a Hex color ("#RGB", "#RGBA" or "#RRGGBB", "#RRGGBBAA" format) and set this color to
      * the corresponding r,g,b,a values
-     * @name parseHex
-     * @memberof Color
      * @param {string} hexColor
      * @param {boolean} [argb = false] true if format is #ARGB, or #AARRGGBB (as opposed to #RGBA or #RGGBBAA)
      * @returns {Color} Reference to this object for method chaining
@@ -2914,8 +2968,6 @@ class Color {
 
     /**
      * Pack this color into a Uint32 ARGB representation
-     * @name toUint32
-     * @memberof Color
      * @param {number} [alpha=1.0] alpha value [0.0 .. 1.0]
      * @returns {number}
      */
@@ -2930,8 +2982,6 @@ class Color {
 
     /**
      * return an array representation of this object
-     * @name toArray
-     * @memberof Color
      * @returns {Float32Array}
      */
     toArray() {
@@ -2940,9 +2990,7 @@ class Color {
 
 
     /**
-     * Get the color in "#RRGGBB" format
-     * @name toHex
-     * @memberof Color
+     * return the color in "#RRGGBB" format
      * @returns {string}
      */
     toHex() {
@@ -2954,8 +3002,6 @@ class Color {
 
     /**
      * Get the color in "#RRGGBBAA" format
-     * @name toHex8
-     * @memberof Color
      * @returns {string}
      */
     toHex8(alpha = this.alpha) {
@@ -2967,8 +3013,6 @@ class Color {
 
     /**
      * Get the color in "rgb(R,G,B)" format
-     * @name toRGB
-     * @memberof Color
      * @returns {string}
      */
     toRGB() {
@@ -2984,8 +3028,6 @@ class Color {
 
     /**
      * Get the color in "rgba(R,G,B,A)" format
-     * @name toRGBA
-     * @memberof Color
      * @param {number} [alpha=1.0] alpha value [0.0 .. 1.0]
      * @returns {string}
      */
@@ -6890,8 +6932,8 @@ class WebGLCompositor {
         // initial viewport size
         this.setViewport(
             0, 0,
-            this.renderer.getScreenCanvas().width,
-            this.renderer.getScreenCanvas().height
+            this.renderer.getCanvas().width,
+            this.renderer.getCanvas().height
         );
 
         // Initialize clear color
@@ -10086,7 +10128,6 @@ class Renderer {
      * @param {number} options.width The width of the canvas without scaling
      * @param {number} options.height The height of the canvas without scaling
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
-     * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering (not applicable when using the WebGL Renderer)
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
      * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
      * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
@@ -10148,13 +10189,9 @@ class Renderer {
         } else if (typeof this.settings.canvas !== "undefined") {
             this.canvas = this.settings.canvas;
         } else {
-            this.canvas = createCanvas(this.settings.zoomX, this.settings.zoomY);
+            this.canvas = createCanvas(this.settings.width, this.settings.height);
         }
 
-        // canvas object and context
-        this.backBufferCanvas = this.canvas;
-        this.context = null;
-
         // global color
         this.currentColor = new Color(0, 0, 0, 1.0);
 
@@ -10180,6 +10217,13 @@ class Renderer {
      */
     clear() {}
 
+    /**
+     * render the main framebuffer on screen
+     * @name flush
+     * @memberof Renderer
+     */
+    flush() {}
+
     /**
      * Reset context state
      * @name reset
@@ -10193,39 +10237,29 @@ class Renderer {
         this.cache.clear();
         this.currentScissor[0] = 0;
         this.currentScissor[1] = 0;
-        this.currentScissor[2] = this.backBufferCanvas.width;
-        this.currentScissor[3] = this.backBufferCanvas.height;
+        this.currentScissor[2] = this.getCanvas().width;
+        this.currentScissor[3] = this.getCanvas().height;
         this.clearMask();
     }
 
     /**
-     * return a reference to the system canvas
+     * return a reference to the canvas which this renderer draws to
      * @name getCanvas
      * @memberof Renderer
      * @returns {HTMLCanvasElement}
      */
     getCanvas() {
-        return this.backBufferCanvas;
-    }
-
-    /**
-     * return a reference to the screen canvas
-     * @name getScreenCanvas
-     * @memberof Renderer
-     * @returns {HTMLCanvasElement}
-     */
-    getScreenCanvas() {
         return this.canvas;
     }
 
+
     /**
-     * return a reference to the screen canvas corresponding 2d Context<br>
-     * (will return buffered context if double buffering is enabled, or a reference to the Screen Context)
-     * @name getScreenContext
+     * return a reference to this renderer canvas corresponding Context
+     * @name getContext
      * @memberof Renderer
-     * @returns {CanvasRenderingContext2D}
+     * @returns {CanvasRenderingContext2D|WebGLRenderingContext}
      */
-    getScreenContext() {
+    getContext() {
         return this.context;
     }
 
@@ -10284,7 +10318,7 @@ class Renderer {
      * @returns {number}
      */
     getWidth() {
-        return this.backBufferCanvas.width;
+        return this.getCanvas().width;
     }
 
     /**
@@ -10294,7 +10328,7 @@ class Renderer {
      * @returns {number} height of the system Canvas
      */
     getHeight() {
-        return this.backBufferCanvas.height;
+        return this.getCanvas().height;
     }
 
     /**
@@ -10340,9 +10374,10 @@ class Renderer {
      * @param {number} height new height of the canvas
      */
     resize(width, height) {
-        if (width !== this.backBufferCanvas.width || height !== this.backBufferCanvas.height) {
-            this.canvas.width = this.backBufferCanvas.width = width;
-            this.canvas.height = this.backBufferCanvas.height = height;
+        var canvas = this.getCanvas();
+        if (width !== canvas.width || height !== canvas.height) {
+            canvas.width = width;
+            canvas.height = height;
             this.currentScissor[0] = 0;
             this.currentScissor[1] = 0;
             this.currentScissor[2] = width;
@@ -14660,8 +14695,32 @@ class ObservableVector2d extends Vector2d {
      * @returns {ObservableVector2d} Reference to this object for method chaining
      */
     lerp(v, alpha) {
-        this._x += ( v.x - this._x ) * alpha;
-        this._y += ( v.y - this._y ) * alpha;
+        return this._set(
+            this._x + ( v.x - this._x ) * alpha,
+            this._y + ( v.y - this._y ) * alpha
+        );
+    }
+
+    /**
+     * interpolate the position of this vector towards the given one while nsure that the distance never exceeds the given step.
+     * @name moveTowards
+     * @memberof ObservableVector2d
+     * @param {Vector2d|ObservableVector2d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {ObservableVector2d} Reference to this object for method chaining
+     */
+     moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this._y, target.x - this._x);
+
+        var distance = this.distance(target);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        this._x += Math.cos(angle) * step;
+        this._y += Math.sin(angle) * step;
+
         return this;
     }
 
@@ -15166,6 +15225,32 @@ class Vector3d {
         return this;
     }
 
+    /**
+     * interpolate the position of this vector on the x and y axis towards the given one by the given maximum step.
+     * @name moveTowards
+     * @memberof Vector3d
+     * @param {Vector2d|Vector3d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {Vector3d} Reference to this object for method chaining
+     */
+    moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this.y, target.x - this.x);
+
+        var dx = this.x - target.x;
+        var dy = this.y - target.y;
+
+        var distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        this.x += Math.cos(angle) * step;
+        this.y += Math.sin(angle) * step;
+
+        return this;
+    }
+
     /**
      * return the distance between this vector and the passed one
      * @name distance
@@ -15700,10 +15785,38 @@ class ObservableVector3d extends Vector3d {
      * @returns {ObservableVector3d} Reference to this object for method chaining
      */
     lerp(v, alpha) {
-        this._x += ( v.x - this._x ) * alpha;
-        this._y += ( v.y - this._y ) * alpha;
-        this._z += ( v.z - this._z ) * alpha;
-        return this;
+        return this._set(
+            this._x + ( v.x - this._x ) * alpha,
+            this._y + ( v.y - this._y ) * alpha,
+            this._z + ( v.z - this._z ) * alpha
+        );
+    }
+
+    /**
+     * interpolate the position of this vector on the x and y axis towards the given one while ensure that the distance never exceeds the given step.
+     * @name moveTowards
+     * @memberof ObservableVector3d
+     * @param {Vector2d|ObservableVector2d|Vector3d|ObservableVector3d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {ObservableVector3d} Reference to this object for method chaining
+     */
+    moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this._y, target.x - this._x);
+
+        var dx = this._x - target.x;
+        var dy = this._y - target.y;
+
+        var distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        return this._set(
+            this._x + Math.cos(angle) * step,
+            this._y + Math.sin(angle) * step,
+            this._z
+        );
     }
 
     /**
@@ -16698,7 +16811,7 @@ function enablePointerEvent() {
 
         if (pointerEventTarget === null) {
             // default pointer event target
-            pointerEventTarget = renderer.getScreenCanvas();
+            pointerEventTarget = renderer.getCanvas();
         }
 
         if (pointerEvent) {
@@ -17129,7 +17242,7 @@ var throttlingInterval;
  */
 function globalToLocal(x, y, v) {
     v = v || pool.pull("Vector2d");
-    var rect = getElementBounds(renderer.getScreenCanvas());
+    var rect = getElementBounds(renderer.getCanvas());
     var pixelRatio = globalThis.devicePixelRatio || 1;
     x -= rect.left + (globalThis.pageXOffset || 0);
     y -= rect.top + (globalThis.pageYOffset || 0);
@@ -24227,7 +24340,6 @@ class CanvasRenderer extends Renderer {
      * @param {number} options.width The width of the canvas without scaling
      * @param {number} options.height The height of the canvas without scaling
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
-     * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
      * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
      * @param {boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
@@ -24240,17 +24352,7 @@ class CanvasRenderer extends Renderer {
         super(options);
 
         // defined the 2d context
-        this.context = this.getContext2d(this.getScreenCanvas(), this.settings.transparent);
-
-        // create the back buffer if we use double buffering
-        if (this.settings.doubleBuffering) {
-            this.backBufferCanvas = createCanvas(this.settings.width, this.settings.height, true);
-            this.backBufferContext2D = this.getContext2d(this.backBufferCanvas);
-        }
-        else {
-            this.backBufferCanvas = this.getScreenCanvas();
-            this.backBufferContext2D = this.context;
-        }
+        this.context = this.getContext2d(this.getCanvas(), this.settings.transparent);
 
         this.setBlendMode(this.settings.blendMode);
 
@@ -24266,13 +24368,13 @@ class CanvasRenderer extends Renderer {
         }
 
         // context lost & restore event for canvas
-        this.getScreenCanvas().addEventListener("contextlost", (e) => {
+        this.getCanvas().addEventListener("contextlost", (e) => {
             e.preventDefault();
             this.isContextValid = false;
             emit(ONCONTEXT_LOST, this);
         }, false );
         // ctx.restoreContext()
-        this.getScreenCanvas().addEventListener("contextrestored", () => {
+        this.getCanvas().addEventListener("contextrestored", () => {
             this.isContextValid = true;
             emit(ONCONTEXT_RESTORED, this);
         }, false );
@@ -24294,7 +24396,7 @@ class CanvasRenderer extends Renderer {
      * @memberof CanvasRenderer
      */
     resetTransform() {
-        this.backBufferContext2D.setTransform(1, 0, 0, 1, 0, 0);
+        this.getContext().setTransform(1, 0, 0, 1, 0, 0);
     }
 
     /**
@@ -24336,12 +24438,6 @@ class CanvasRenderer extends Renderer {
                 this.currentBlendMode = "normal";
                 break;
         }
-
-        // transparent setting will override the given blendmode for this.context
-        if (this.settings.doubleBuffering && this.settings.transparent) {
-            // Clears the front buffer for each frame blit
-            this.context.globalCompositeOperation = "copy";
-        }
     }
 
     /**
@@ -24355,17 +24451,6 @@ class CanvasRenderer extends Renderer {
         }
     }
 
-    /**
-     * render the main framebuffer on screen
-     * @name flush
-     * @memberof CanvasRenderer
-     */
-    flush() {
-        if (this.settings.doubleBuffering) {
-            this.context.drawImage(this.backBufferCanvas, 0, 0);
-        }
-    }
-
     /**
      * Clears the main framebuffer with the given color
      * @name clearColor
@@ -24374,11 +24459,14 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
      */
     clearColor(color = "#000000", opaque) {
+        var canvas = this.getCanvas();
+        var context = this.getContext();
+
         this.save();
         this.resetTransform();
-        this.backBufferContext2D.globalCompositeOperation = opaque ? "copy" : "source-over";
-        this.backBufferContext2D.fillStyle = (color instanceof Color) ? color.toRGBA() : color;
-        this.fillRect(0, 0, this.backBufferCanvas.width, this.backBufferCanvas.height);
+        context.globalCompositeOperation = opaque ? "copy" : "source-over";
+        context.fillStyle = (color instanceof Color) ? color.toRGBA() : color;
+        this.fillRect(0, 0, canvas.width, canvas.height);
         this.restore();
     }
 
@@ -24738,17 +24826,6 @@ class CanvasRenderer extends Renderer {
         this.strokeRoundRect(x, y, width, height, radius, true);
     }
 
-
-    /**
-     * return a reference to the system 2d Context
-     * @name getContext
-     * @memberof CanvasRenderer
-     * @returns {CanvasRenderingContext2D}
-     */
-    getContext() {
-        return this.backBufferContext2D;
-    }
-
     /**
      * return a reference to the font 2d Context
      * @ignore
@@ -24764,7 +24841,7 @@ class CanvasRenderer extends Renderer {
      * @memberof CanvasRenderer
      */
     save() {
-        this.backBufferContext2D.save();
+        this.getContext().save();
     }
 
     /**
@@ -24773,12 +24850,12 @@ class CanvasRenderer extends Renderer {
      * @memberof CanvasRenderer
      */
     restore() {
-        this.backBufferContext2D.restore();
+        this.getContext().restore();
         this.currentColor.glArray[3] = this.getGlobalAlpha();
         this.currentScissor[0] = 0;
         this.currentScissor[1] = 0;
-        this.currentScissor[2] = this.backBufferCanvas.width;
-        this.currentScissor[3] = this.backBufferCanvas.height;
+        this.currentScissor[2] = this.getCanvas().width;
+        this.currentScissor[3] = this.getCanvas().height;
     }
 
     /**
@@ -24788,7 +24865,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} angle in radians
      */
     rotate(angle) {
-        this.backBufferContext2D.rotate(angle);
+        this.getContext().rotate(angle);
     }
 
     /**
@@ -24799,7 +24876,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} y
      */
     scale(x, y) {
-        this.backBufferContext2D.scale(x, y);
+        this.getContext().scale(x, y);
     }
 
     /**
@@ -24810,8 +24887,9 @@ class CanvasRenderer extends Renderer {
      * @param {Color|string} color css color value
      */
     setColor(color) {
-        this.backBufferContext2D.strokeStyle =
-        this.backBufferContext2D.fillStyle = (
+        var context = this.getContext();
+        context.strokeStyle =
+        context.fillStyle = (
             color instanceof Color ?
             color.toRGBA() :
             color
@@ -24825,7 +24903,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} alpha 0.0 to 1.0 values accepted.
      */
     setGlobalAlpha(alpha) {
-        this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] = alpha;
+        this.getContext().globalAlpha = this.currentColor.glArray[3] = alpha;
     }
 
     /**
@@ -24835,7 +24913,7 @@ class CanvasRenderer extends Renderer {
      * @returns {number} global alpha value
      */
     getGlobalAlpha() {
-        return this.backBufferContext2D.globalAlpha;
+        return this.getContext().globalAlpha;
     }
 
     /**
@@ -24845,7 +24923,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} width Line width
      */
     setLineWidth(width) {
-        this.backBufferContext2D.lineWidth = width;
+        this.getContext().lineWidth = width;
     }
 
     /**
@@ -24880,7 +24958,7 @@ class CanvasRenderer extends Renderer {
             f |= 0;
         }
 
-        this.backBufferContext2D.transform(a, b, c, d, e, f);
+        this.getContext().transform(a, b, c, d, e, f);
     }
 
     /**
@@ -24892,9 +24970,9 @@ class CanvasRenderer extends Renderer {
      */
     translate(x, y) {
         if (this.settings.subPixel === false) {
-            this.backBufferContext2D.translate(~~x, ~~y);
+            this.getContext().translate(~~x, ~~y);
         } else {
-            this.backBufferContext2D.translate(x, y);
+            this.getContext().translate(x, y);
         }
     }
 
@@ -24912,14 +24990,14 @@ class CanvasRenderer extends Renderer {
      * @param {number} height
      */
     clipRect(x, y, width, height) {
-        var canvas = this.backBufferCanvas;
+        var canvas = this.getCanvas();
         // if requested box is different from the current canvas size;
         if (x !== 0 || y !== 0 || width !== canvas.width || height !== canvas.height) {
             var currentScissor = this.currentScissor;
             // if different from the current scissor box
             if (currentScissor[0] !== x || currentScissor[1] !== y ||
                 currentScissor[2] !== width || currentScissor[3] !== height) {
-                var context = this.backBufferContext2D;
+                var context = this.getContext();
                 context.beginPath();
                 context.rect(x, y, width, height);
                 context.clip();
@@ -25145,6 +25223,15 @@ class TMXLayer extends Renderable {
          */
         this.renderorder = data.renderorder || "right-down";
 
+        /**
+         * the layer class
+         * @public
+         * @type {string}
+         * @name class
+         * @name TMXLayer#class
+         */
+        this.class = data.class;
+
         // for displaying order
         this.pos.z = z;
 
@@ -26535,6 +26622,14 @@ class TMXTileset {
          */
         this.isCollection = false;
 
+        /**
+         * the tileset class
+         * @public
+         * @type {boolean}
+         * @name TMXTileset#class
+         */
+        this.class = tileset.class;
+
         /**
          * Tileset animations
          * @private
@@ -26933,20 +27028,31 @@ class TMXObject {
          * object type
          * @public
          * @type {string}
+         * @deprecated since Tiled 1.9
+         * @see https://docs.mapeditor.org/en/stable/reference/tmx-changelog/#tiled-1-9
          * @name type
          * @memberof TMXObject
          */
         this.type = settings.type;
 
+        /**
+         * the åobject class
+         * @public
+         * @type {string}
+         * @name class
+         * @memberof TMXObject
+         */
+        this.class = typeof settings.class !== "undefined" ? settings.class : settings.type;
+
         /**
          * object text
          * @public
          * @type {object}
          * @see http://docs.mapeditor.org/en/stable/reference/tmx-map-format/#text
-         * @name type
+         * @name text
          * @memberof TMXObject
          */
-        this.type = settings.type;
+        this.text = undefined;
 
         /**
          * The rotation of the object in radians clockwise (defaults to 0)
@@ -27202,6 +27308,16 @@ class TMXGroup {
          */
         this.tintcolor = data.tintcolor;
 
+
+        /**
+         * the group class
+         * @public
+         * @type {string}
+         * @name class
+         * @memberof TMXGroup
+         */
+        this.class = data.class;
+
         /**
          * group z order
          * @public
@@ -27463,6 +27579,16 @@ class TMXTileMap {
          */
         this.tiledversion = data.tiledversion;
 
+
+        /**
+         * The map class.
+         * @public
+         * @type {string}
+         * @name TMXTileMap#class
+         */
+         this.class = data.class;
+
+
         // tilesets for this map
         this.tilesets = null;
 
@@ -27800,6 +27926,8 @@ class TMXTileMap {
                         obj.anchorPoint.set(0, 0);
                         obj.name = settings.name;
                         obj.type = settings.type;
+                        // for backward compatibility
+                        obj.class = settings.class || settings.type;
                         obj.id = settings.id;
                         obj.body = new Body(obj, shape);
                         obj.body.setStatic(true);
@@ -30647,7 +30775,6 @@ class WebGLRenderer extends Renderer {
      * @param {number} options.width The width of the canvas without scaling
      * @param {number} options.height The height of the canvas without scaling
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
-     * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering (not applicable when using the WebGL Renderer)
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
      * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
      * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
@@ -30699,7 +30826,7 @@ class WebGLRenderer extends Renderer {
          * @memberof WebGLRenderer
          * @type {WebGLRenderingContext}
          */
-        this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
+        this.context = this.gl = this.getContextGL(this.getCanvas(), options.transparent);
 
         /**
          * Maximum number of texture unit supported under the current context
@@ -30781,13 +30908,13 @@ class WebGLRenderer extends Renderer {
         // to simulate context lost and restore in WebGL:
         // var ctx = me.video.renderer.context.getExtension('WEBGL_lose_context');
         // ctx.loseContext()
-        this.getScreenCanvas().addEventListener("webglcontextlost", (e) => {
+        this.getCanvas().addEventListener("webglcontextlost", (e) => {
             e.preventDefault();
             this.isContextValid = false;
             emit(ONCONTEXT_LOST, this);
         }, false );
         // ctx.restoreContext()
-        this.getScreenCanvas().addEventListener("webglcontextrestored", () => {
+        this.getCanvas().addEventListener("webglcontextrestored", () => {
             this.reset();
             this.isContextValid = true;
             emit(ONCONTEXT_RESTORED, this);
@@ -30858,7 +30985,7 @@ class WebGLRenderer extends Renderer {
      */
     createFontTexture(cache) {
         if (typeof this.fontTexture === "undefined") {
-            var canvas = this.backBufferCanvas;
+            var canvas = this.getCanvas();
             var width = canvas.width;
             var height = canvas.height;
 
@@ -31086,17 +31213,6 @@ class WebGLRenderer extends Renderer {
         this.currentCompositor.addQuad(pattern, x, y, width, height, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32());
     }
 
-
-    /**
-     * return a reference to the screen canvas corresponding WebGL Context
-     * @name getScreenContext
-     * @memberof WebGLRenderer
-     * @returns {WebGLRenderingContext}
-     */
-    getScreenContext() {
-        return this.gl;
-    }
-
     /**
      * Returns the WebGL Context object of the given Canvas
      * @name getContextGL
@@ -31254,8 +31370,8 @@ class WebGLRenderer extends Renderer {
             this.gl.disable(this.gl.SCISSOR_TEST);
             this.currentScissor[0] = 0;
             this.currentScissor[1] = 0;
-            this.currentScissor[2] = this.backBufferCanvas.width;
-            this.currentScissor[3] = this.backBufferCanvas.height;
+            this.currentScissor[2] = this.getCanvas().width;
+            this.currentScissor[3] = this.getCanvas().height;
         }
     }
 
@@ -31346,7 +31462,7 @@ class WebGLRenderer extends Renderer {
      * @param {number} width Line width
      */
     setLineWidth(width) {
-        this.getScreenContext().lineWidth(width);
+        this.getContext().lineWidth(width);
     }
 
     /**
@@ -31642,7 +31758,7 @@ class WebGLRenderer extends Renderer {
      * @param {number} height
      */
     clipRect(x, y, width, height) {
-        var canvas = this.backBufferCanvas;
+        var canvas = this.getCanvas();
         var gl = this.gl;
         // if requested box is different from the current canvas size
         if (x !== 0 || y !== 0 || width !== canvas.width || height !== canvas.height) {
@@ -31753,10 +31869,9 @@ var designHeight = 0;
 var settings = {
     parent : undefined,
     renderer : 2, // AUTO
-    doubleBuffering : false,
     autoScale : false,
     scale : 1.0,
-    scaleMethod : "fit",
+    scaleMethod : "manual",
     transparent : false,
     blendMode : "normal",
     antiAlias : false,
@@ -31797,7 +31912,7 @@ function onresize() {
         var canvasMaxHeight = Infinity;
 
         if (globalThis.getComputedStyle) {
-            var style = globalThis.getComputedStyle(renderer.getScreenCanvas(), null);
+            var style = globalThis.getComputedStyle(renderer.getCanvas(), null);
             canvasMaxWidth = parseInt(style.maxWidth, 10) || Infinity;
             canvasMaxHeight = parseInt(style.maxHeight, 10) || Infinity;
         }
@@ -31851,6 +31966,9 @@ function onresize() {
 
         // adjust scaling ratio based on the new scaling ratio
         scale(scaleX, scaleY);
+    } else {
+        // adjust scaling ratio based on the given settings
+        scale(settings.scale, settings.scale);
     }
 }
 /**
@@ -31927,7 +32045,6 @@ let renderer = null;
  * @param {object} [options] The optional video/renderer parameters.<br> (see Renderer(s) documentation for further specific options)
  * @param {string|HTMLElement} [options.parent=document.body] the DOM parent element to hold the canvas in the HTML file
  * @param {number} [options.renderer=video.AUTO] renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO)
- * @param {boolean} [options.doubleBuffering=false] enable/disable double buffering
  * @param {number|string} [options.scale=1.0] enable scaling of the canvas ('auto' for automatic scaling)
  * @param {string} [options.scaleMethod="fit"] screen scaling modes ('fit','fill-min','fill-max','flex','flex-width','flex-height','stretch')
  * @param {boolean} [options.preferWebGL1=false] if true the renderer will only use WebGL 1
@@ -31942,8 +32059,7 @@ let renderer = null;
  *     parent : "screen",
  *     renderer : me.video.AUTO,
  *     scale : "auto",
- *     scaleMethod : "fit",
- *     doubleBuffering : true
+ *     scaleMethod : "fit"
  * });
  */
 function init(width, height, options) {
@@ -31959,7 +32075,6 @@ function init(width, height, options) {
     // sanitize potential given parameters
     settings.width = width;
     settings.height = height;
-    settings.doubleBuffering = !!(settings.doubleBuffering);
     settings.transparent = !!(settings.transparent);
     settings.antiAlias = !!(settings.antiAlias);
     settings.failIfMajorPerformanceCaveat = !!(settings.failIfMajorPerformanceCaveat);
@@ -31979,24 +32094,21 @@ function init(width, height, options) {
         console.log("melonJS 2 (v" + version + ") | http://melonjs.org" );
     }
 
-    // override renderer settings if &webgl is defined in the URL
+    // override renderer settings if &webgl or &canvas is defined in the URL
     var uriFragment = utils.getUriFragment();
     if (uriFragment.webgl === true || uriFragment.webgl1 === true || uriFragment.webgl2 === true) {
         settings.renderer = WEBGL;
         if (uriFragment.webgl1 === true) {
             settings.preferWebGL1 = true;
         }
+    } else if (uriFragment.canvas === true) {
+        settings.renderer = CANVAS;
     }
 
     // normalize scale
     settings.scale = (settings.autoScale) ? 1.0 : (+settings.scale || 1.0);
     scaleRatio.set(settings.scale, settings.scale);
 
-    // force double buffering if scaling is required
-    if (settings.autoScale || (settings.scale !== 1.0)) {
-        settings.doubleBuffering = true;
-    }
-
     // hold the requested video size ratio
     designRatio = width / height;
     designWidth = width;
@@ -32068,7 +32180,7 @@ function init(width, height, options) {
 
     // add our canvas (default to document.body if settings.parent is undefined)
     parent = getElement(typeof settings.parent !== "undefined" ? settings.parent : document.body);
-    parent.appendChild(renderer.getScreenCanvas());
+    parent.appendChild(renderer.getCanvas());
 
     // Mobile browser hacks
     if (platform.isMobile) {
@@ -32162,8 +32274,8 @@ function getParent() {
  * @param {number} y y scaling multiplier
  */
 function scale(x, y) {
-    var canvas = renderer.getScreenCanvas();
-    var context = renderer.getScreenContext();
+    var canvas = renderer.getCanvas();
+    var context = renderer.getContext();
     var settings = renderer.settings;
     var pixelRatio = devicePixelRatio;
 
@@ -32898,10 +33010,10 @@ class BasePlugin {
          * this can be overridden by the plugin
          * @public
          * @type {string}
-         * @default "13.0.0"
+         * @default "13.1.0"
          * @name plugin.Base#version
          */
-        this.version = "13.0.0";
+        this.version = "13.1.0";
     }
 }
 
@@ -33913,7 +34025,8 @@ class Tween {
 var defaultAttributes = {
     offscreenCanvas : false,
     willReadFrequently : false,
-    antiAlias : false
+    antiAlias : false,
+    context: "2d"
 };
 
 /**
@@ -33923,7 +34036,8 @@ class CanvasTexture {
     /**
      * @param {number} width the desired width of the canvas
      * @param {number} height the desired height of the canvas
-     * @param {object} attributes The attributes to create both the canvas and 2d context
+     * @param {object} attributes The attributes to create both the canvas and context
+     * @param {boolean} [attributes.context="2d"] the context type to be created ("2d", "webgl", "webgl2")
      * @param {boolean} [attributes.offscreenCanvas=false] will create an offscreenCanvas if true instead of a standard canvas
      * @param {boolean} [attributes.willReadFrequently=false] Indicates whether or not a lot of read-back operations are planned
      * @param {boolean} [attributes.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
@@ -35638,7 +35752,7 @@ class NineSliceSprite extends Sprite {
         this.width = Math.floor(settings.width);
         this.height = Math.floor(settings.height);
 
-        // nine slice sprite specific local variables
+        // nine slice sprite specific internal variables
         this.nss_width = this.width;
         this.nss_height = this.height;
 
@@ -35646,6 +35760,32 @@ class NineSliceSprite extends Sprite {
         this.insety = settings.insety;
     }
 
+    /**
+     * width of the NineSliceSprite
+     * @public
+     * @type {number}
+     * @name width
+     */
+    get width() {
+        return super.width;
+    }
+    set width(value) {
+        super.width = this.nss_width = value;
+    }
+
+    /**
+     * height of the NineSliceSprite
+     * @public
+     * @type {number}
+     * @name height
+     */
+    get height() {
+        return super.height;
+    }
+    set height(value) {
+        super.height = this.nss_height = value;
+    }
+
     /**
      * @ignore
      */
@@ -37607,7 +37747,6 @@ Object.defineProperty(Renderer.prototype, "Texture", {
     }
 });
 
-
 /**
  * @classdesc
  * Used to make a game entity draggable
@@ -37646,6 +37785,33 @@ class DroptargetEntity extends DropTarget {
     }
 }
 
+/**
+ * return a reference to the screen canvas
+ * @name getScreenCanvas
+ * @memberof Renderer
+ * @returns {HTMLCanvasElement}
+ * @deprecated since 13.1.0
+ * @see getCanvas();
+ */
+Renderer.prototype.getScreenCanvas = function() {
+    warning("getScreenCanvas", "getCanvas", "13.1.0");
+    return this.getCanvas();
+};
+
+/**
+ * return a reference to the screen canvas corresponding 2d Context<br>
+ * (will return buffered context if double buffering is enabled, or a reference to the Screen Context)
+ * @name getScreenContext
+ * @memberof Renderer
+ * @returns {CanvasRenderingContext2D}
+ * @deprecated since 13.1.0
+ * @see getContext();
+ */
+Renderer.prototype.getScreenContext = function()  {
+    warning("getScreenContext", "getContext", "13.1.0");
+    return this.getContext();
+};
+
 // ES5/ES6 polyfills
 
 
@@ -37656,7 +37822,7 @@ class DroptargetEntity extends DropTarget {
  * @name version
  * @type {string}
  */
-const version = "13.0.0";
+const version = "13.1.0";
 
 
 /**