melonjs 13.0.0 → 13.1.0

package/dist/melonjs.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
@@ -315,10 +315,10 @@
 	(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'
 	});
 
@@ -2366,6 +2366,29 @@
 	     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
+	  */
+	  Vector2d.prototype.moveTowards = function 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
@@ -2433,9 +2456,17 @@
 	 };
 
 	// 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;
+	}
 
 	var rgbaRx = /^rgba?\((\d+), ?(\d+), ?(\d+)(, ?([\d\.]+))?\)$/;
 	var hex3Rx = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])$/;
@@ -2635,7 +2666,6 @@
 	/**
 	 * Color Red Component [0 .. 255]
 	 * @type {number}
-	 * @memberof Color
 	 */
 	prototypeAccessors$4.r.get = function () {
 	    return ~~(this.glArray[0] * 255);
@@ -2649,7 +2679,6 @@
 	/**
 	 * Color Green Component [0 .. 255]
 	 * @type {number}
-	 * @memberof Color
 	 */
 	prototypeAccessors$4.g.get = function () {
 	    return ~~(this.glArray[1] * 255);
@@ -2663,7 +2692,6 @@
 	/**
 	 * Color Blue Component [0 .. 255]
 	 * @type {number}
-	 * @memberof Color
 	 */
 	prototypeAccessors$4.b.get = function () {
 	    return ~~(this.glArray[2] * 255);
@@ -2675,7 +2703,6 @@
 	/**
 	 * Color Alpha Component [0.0 .. 1.0]
 	 * @type {number}
-	 * @memberof Color
 	 */
 	prototypeAccessors$4.alpha.get = function () {
 	    return this.glArray[3];
@@ -2688,8 +2715,6 @@
 
 	/**
 	 * 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]
@@ -2706,10 +2731,59 @@
 	    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
+	 */
+	Color.prototype.setHSV = function 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
+	 */
+	Color.prototype.setHSL = function 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
 	 */
 	Color.prototype.clone = function clone () {
@@ -2718,8 +2792,6 @@
 
 	/**
 	 * 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
 	 */
@@ -2734,8 +2806,6 @@
 
 	/**
 	 * 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
 	 */
@@ -2750,8 +2820,6 @@
 
 	/**
 	 * Darken this color value by 0..1
-	 * @name darken
-	 * @memberof Color
 	 * @param {number} scale
 	 * @returns {Color} Reference to this object for method chaining
 	 */
@@ -2766,8 +2834,6 @@
 
 	/**
 	 * 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
@@ -2783,8 +2849,6 @@
 
 	/**
 	 * Lighten this color value by 0..1
-	 * @name lighten
-	 * @memberof Color
 	 * @param {number} scale
 	 * @returns {Color} Reference to this object for method chaining
 	 */
@@ -2799,8 +2863,6 @@
 
 	/**
 	 * 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
@@ -2827,8 +2889,6 @@
 	/**
 	 * 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}
 	 */
@@ -2844,8 +2904,6 @@
 	/**
 	 * 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
 	 */
@@ -2861,8 +2919,6 @@
 
 	/**
 	 * Parse an RGB or RGBA CSS color string
-	 * @name parseRGB
-	 * @memberof Color
 	 * @param {string} rgbColor
 	 * @returns {Color} Reference to this object for method chaining
 	 */
@@ -2880,8 +2936,6 @@
 	/**
 	 * 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
@@ -2941,8 +2995,6 @@
 
 	/**
 	 * 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}
 	 */
@@ -2959,8 +3011,6 @@
 
 	/**
 	 * return an array representation of this object
-	 * @name toArray
-	 * @memberof Color
 	 * @returns {Float32Array}
 	 */
 	Color.prototype.toArray = function toArray () {
@@ -2969,9 +3019,7 @@
 
 
 	/**
-	 * Get the color in "#RRGGBB" format
-	 * @name toHex
-	 * @memberof Color
+	 * return the color in "#RRGGBB" format
 	 * @returns {string}
 	 */
 	Color.prototype.toHex = function toHex$1 () {
@@ -2983,8 +3031,6 @@
 
 	/**
 	 * Get the color in "#RRGGBBAA" format
-	 * @name toHex8
-	 * @memberof Color
 	 * @returns {string}
 	 */
 	Color.prototype.toHex8 = function toHex8 (alpha) {
@@ -2998,8 +3044,6 @@
 
 	/**
 	 * Get the color in "rgb(R,G,B)" format
-	 * @name toRGB
-	 * @memberof Color
 	 * @returns {string}
 	 */
 	Color.prototype.toRGB = function toRGB () {
@@ -3015,8 +3059,6 @@
 
 	/**
 	 * 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}
 	 */
@@ -6904,8 +6946,8 @@
 	    // 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
@@ -10147,13 +10189,9 @@
 	    } 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);
 
@@ -10179,6 +10217,13 @@
 	 */
 	Renderer.prototype.clear = function clear () {};
 
+	/**
+	 * render the main framebuffer on screen
+	 * @name flush
+	 * @memberof Renderer
+	 */
+	Renderer.prototype.flush = function flush () {};
+
 	/**
 	 * Reset context state
 	 * @name reset
@@ -10192,39 +10237,29 @@
 	    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}
 	 */
 	Renderer.prototype.getCanvas = function getCanvas () {
-	    return this.backBufferCanvas;
-	};
-
-	/**
-	 * return a reference to the screen canvas
-	 * @name getScreenCanvas
-	 * @memberof Renderer
-	 * @returns {HTMLCanvasElement}
-	 */
-	Renderer.prototype.getScreenCanvas = function 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}
 	 */
-	Renderer.prototype.getScreenContext = function getScreenContext () {
+	Renderer.prototype.getContext = function getContext () {
 	    return this.context;
 	};
 
@@ -10283,7 +10318,7 @@
 	 * @returns {number}
 	 */
 	Renderer.prototype.getWidth = function getWidth () {
-	    return this.backBufferCanvas.width;
+	    return this.getCanvas().width;
 	};
 
 	/**
@@ -10293,7 +10328,7 @@
 	 * @returns {number} height of the system Canvas
 	 */
 	Renderer.prototype.getHeight = function getHeight () {
-	    return this.backBufferCanvas.height;
+	    return this.getCanvas().height;
 	};
 
 	/**
@@ -10339,9 +10374,10 @@
 	 * @param {number} height new height of the canvas
 	 */
 	Renderer.prototype.resize = function 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;
@@ -14678,8 +14714,32 @@
 	     * @returns {ObservableVector2d} Reference to this object for method chaining
 	     */
 	    ObservableVector2d.prototype.lerp = function 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
+	     */
+	     ObservableVector2d.prototype.moveTowards = function 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;
 	    };
 
@@ -15192,6 +15252,32 @@
 	     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
+	  */
+	 Vector3d.prototype.moveTowards = function 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
@@ -15733,10 +15819,38 @@
 	     * @returns {ObservableVector3d} Reference to this object for method chaining
 	     */
 	    ObservableVector3d.prototype.lerp = function 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
+	     */
+	    ObservableVector3d.prototype.moveTowards = function 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
+	        );
 	    };
 
 	    /**
@@ -16750,7 +16864,7 @@
 
 	        if (pointerEventTarget === null) {
 	            // default pointer event target
-	            pointerEventTarget = renderer.getScreenCanvas();
+	            pointerEventTarget = renderer.getCanvas();
 	        }
 
 	        if (pointerEvent) {
@@ -17181,7 +17295,7 @@
 	 */
 	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);
@@ -24334,17 +24448,7 @@
 	        Renderer.call(this, 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);
 
@@ -24360,13 +24464,13 @@
 	        }
 
 	        // context lost & restore event for canvas
-	        this.getScreenCanvas().addEventListener("contextlost", function (e) {
+	        this.getCanvas().addEventListener("contextlost", function (e) {
 	            e.preventDefault();
 	            this$1$1.isContextValid = false;
 	            emit(ONCONTEXT_LOST, this$1$1);
 	        }, false );
 	        // ctx.restoreContext()
-	        this.getScreenCanvas().addEventListener("contextrestored", function () {
+	        this.getCanvas().addEventListener("contextrestored", function () {
 	            this$1$1.isContextValid = true;
 	            emit(ONCONTEXT_RESTORED, this$1$1);
 	        }, false );
@@ -24392,7 +24496,7 @@
 	     * @memberof CanvasRenderer
 	     */
 	    CanvasRenderer.prototype.resetTransform = function resetTransform () {
-	        this.backBufferContext2D.setTransform(1, 0, 0, 1, 0, 0);
+	        this.getContext().setTransform(1, 0, 0, 1, 0, 0);
 	    };
 
 	    /**
@@ -24436,12 +24540,6 @@
 	                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";
-	        }
 	    };
 
 	    /**
@@ -24455,17 +24553,6 @@
 	        }
 	    };
 
-	    /**
-	     * render the main framebuffer on screen
-	     * @name flush
-	     * @memberof CanvasRenderer
-	     */
-	    CanvasRenderer.prototype.flush = function flush () {
-	        if (this.settings.doubleBuffering) {
-	            this.context.drawImage(this.backBufferCanvas, 0, 0);
-	        }
-	    };
-
 	    /**
 	     * Clears the main framebuffer with the given color
 	     * @name clearColor
@@ -24476,11 +24563,14 @@
 	    CanvasRenderer.prototype.clearColor = function clearColor (color, opaque) {
 	        if ( color === void 0 ) color = "#000000";
 
+	        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();
 	    };
 
@@ -24850,17 +24940,6 @@
 	        this.strokeRoundRect(x, y, width, height, radius, true);
 	    };
 
-
-	    /**
-	     * return a reference to the system 2d Context
-	     * @name getContext
-	     * @memberof CanvasRenderer
-	     * @returns {CanvasRenderingContext2D}
-	     */
-	    CanvasRenderer.prototype.getContext = function getContext () {
-	        return this.backBufferContext2D;
-	    };
-
 	    /**
 	     * return a reference to the font 2d Context
 	     * @ignore
@@ -24876,7 +24955,7 @@
 	     * @memberof CanvasRenderer
 	     */
 	    CanvasRenderer.prototype.save = function save () {
-	        this.backBufferContext2D.save();
+	        this.getContext().save();
 	    };
 
 	    /**
@@ -24885,12 +24964,12 @@
 	     * @memberof CanvasRenderer
 	     */
 	    CanvasRenderer.prototype.restore = function 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;
 	    };
 
 	    /**
@@ -24900,7 +24979,7 @@
 	     * @param {number} angle in radians
 	     */
 	    CanvasRenderer.prototype.rotate = function rotate (angle) {
-	        this.backBufferContext2D.rotate(angle);
+	        this.getContext().rotate(angle);
 	    };
 
 	    /**
@@ -24911,7 +24990,7 @@
 	     * @param {number} y
 	     */
 	    CanvasRenderer.prototype.scale = function scale (x, y) {
-	        this.backBufferContext2D.scale(x, y);
+	        this.getContext().scale(x, y);
 	    };
 
 	    /**
@@ -24922,8 +25001,9 @@
 	     * @param {Color|string} color css color value
 	     */
 	    CanvasRenderer.prototype.setColor = function setColor (color) {
-	        this.backBufferContext2D.strokeStyle =
-	        this.backBufferContext2D.fillStyle = (
+	        var context = this.getContext();
+	        context.strokeStyle =
+	        context.fillStyle = (
 	            color instanceof Color ?
 	            color.toRGBA() :
 	            color
@@ -24937,7 +25017,7 @@
 	     * @param {number} alpha 0.0 to 1.0 values accepted.
 	     */
 	    CanvasRenderer.prototype.setGlobalAlpha = function setGlobalAlpha (alpha) {
-	        this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] = alpha;
+	        this.getContext().globalAlpha = this.currentColor.glArray[3] = alpha;
 	    };
 
 	    /**
@@ -24947,7 +25027,7 @@
 	     * @returns {number} global alpha value
 	     */
 	    CanvasRenderer.prototype.getGlobalAlpha = function getGlobalAlpha () {
-	        return this.backBufferContext2D.globalAlpha;
+	        return this.getContext().globalAlpha;
 	    };
 
 	    /**
@@ -24957,7 +25037,7 @@
 	     * @param {number} width Line width
 	     */
 	    CanvasRenderer.prototype.setLineWidth = function setLineWidth (width) {
-	        this.backBufferContext2D.lineWidth = width;
+	        this.getContext().lineWidth = width;
 	    };
 
 	    /**
@@ -24992,7 +25072,7 @@
 	            f |= 0;
 	        }
 
-	        this.backBufferContext2D.transform(a, b, c, d, e, f);
+	        this.getContext().transform(a, b, c, d, e, f);
 	    };
 
 	    /**
@@ -25004,9 +25084,9 @@
 	     */
 	    CanvasRenderer.prototype.translate = function 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);
 	        }
 	    };
 
@@ -25024,14 +25104,14 @@
 	     * @param {number} height
 	     */
 	    CanvasRenderer.prototype.clipRect = function 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();
@@ -25252,6 +25332,15 @@
 	         */
 	        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;
 
@@ -26649,6 +26738,14 @@
 	     */
 	    this.isCollection = false;
 
+	    /**
+	     * the tileset class
+	     * @public
+	     * @type {boolean}
+	     * @name TMXTileset#class
+	     */
+	    this.class = tileset.class;
+
 	    /**
 	     * Tileset animations
 	     * @private
@@ -27041,20 +27138,31 @@
 	     * 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)
@@ -27309,6 +27417,16 @@
 	     */
 	    this.tintcolor = data.tintcolor;
 
+
+	    /**
+	     * the group class
+	     * @public
+	     * @type {string}
+	     * @name class
+	     * @memberof TMXGroup
+	     */
+	    this.class = data.class;
+
 	    /**
 	     * group z order
 	     * @public
@@ -27559,6 +27677,16 @@
 	     */
 	    this.tiledversion = data.tiledversion;
 
+
+	    /**
+	     * The map class.
+	     * @public
+	     * @type {string}
+	     * @name TMXTileMap#class
+	     */
+	     this.class = data.class;
+
+
 	    // tilesets for this map
 	    this.tilesets = null;
 
@@ -27898,6 +28026,8 @@
 	                    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);
@@ -30733,7 +30863,7 @@
 	         * @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
@@ -30815,13 +30945,13 @@
 	        // to simulate context lost and restore in WebGL:
 	        // var ctx = me.video.renderer.context.getExtension('WEBGL_lose_context');
 	        // ctx.loseContext()
-	        this.getScreenCanvas().addEventListener("webglcontextlost", function (e) {
+	        this.getCanvas().addEventListener("webglcontextlost", function (e) {
 	            e.preventDefault();
 	            this$1$1.isContextValid = false;
 	            emit(ONCONTEXT_LOST, this$1$1);
 	        }, false );
 	        // ctx.restoreContext()
-	        this.getScreenCanvas().addEventListener("webglcontextrestored", function () {
+	        this.getCanvas().addEventListener("webglcontextrestored", function () {
 	            this$1$1.reset();
 	            this$1$1.isContextValid = true;
 	            emit(ONCONTEXT_RESTORED, this$1$1);
@@ -30900,7 +31030,7 @@
 	     */
 	    WebGLRenderer.prototype.createFontTexture = function createFontTexture (cache) {
 	        if (typeof this.fontTexture === "undefined") {
-	            var canvas = this.backBufferCanvas;
+	            var canvas = this.getCanvas();
 	            var width = canvas.width;
 	            var height = canvas.height;
 
@@ -31131,17 +31261,6 @@
 	        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}
-	     */
-	    WebGLRenderer.prototype.getScreenContext = function getScreenContext () {
-	        return this.gl;
-	    };
-
 	    /**
 	     * Returns the WebGL Context object of the given Canvas
 	     * @name getContextGL
@@ -31302,8 +31421,8 @@
 	            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;
 	        }
 	    };
 
@@ -31394,7 +31513,7 @@
 	     * @param {number} width Line width
 	     */
 	    WebGLRenderer.prototype.setLineWidth = function setLineWidth (width) {
-	        this.getScreenContext().lineWidth(width);
+	        this.getContext().lineWidth(width);
 	    };
 
 	    /**
@@ -31703,7 +31822,7 @@
 	     * @param {number} height
 	     */
 	    WebGLRenderer.prototype.clipRect = function 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) {
@@ -31818,10 +31937,9 @@
 	var settings = {
 	    parent : undefined,
 	    renderer : 2, // AUTO
-	    doubleBuffering : false,
 	    autoScale : false,
 	    scale : 1.0,
-	    scaleMethod : "fit",
+	    scaleMethod : "manual",
 	    transparent : false,
 	    blendMode : "normal",
 	    antiAlias : false,
@@ -31862,7 +31980,7 @@
 	        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;
 	        }
@@ -31916,6 +32034,9 @@
 
 	        // 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);
 	    }
 	}
 	/**
@@ -31992,7 +32113,6 @@
 	 * @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
@@ -32007,8 +32127,7 @@
 	 *     parent : "screen",
 	 *     renderer : me.video.AUTO,
 	 *     scale : "auto",
-	 *     scaleMethod : "fit",
-	 *     doubleBuffering : true
+	 *     scaleMethod : "fit"
 	 * });
 	 */
 	function init(width, height, options) {
@@ -32024,7 +32143,6 @@
 	    // 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);
@@ -32044,24 +32162,21 @@
 	        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;
@@ -32133,7 +32248,7 @@
 
 	    // 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) {
@@ -32229,8 +32344,8 @@
 	 * @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;
 
@@ -32990,10 +33105,10 @@
 	     * 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";
 	};
 
 	/**
@@ -33993,7 +34108,8 @@
 	var defaultAttributes = {
 	    offscreenCanvas : false,
 	    willReadFrequently : false,
-	    antiAlias : false
+	    antiAlias : false,
+	    context: "2d"
 	};
 
 	/**
@@ -35663,7 +35779,7 @@
 	        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;
 
@@ -35675,6 +35791,34 @@
 	    NineSliceSprite.prototype = Object.create( Sprite && Sprite.prototype );
 	    NineSliceSprite.prototype.constructor = NineSliceSprite;
 
+	    var prototypeAccessors = { width: { configurable: true },height: { configurable: true } };
+
+	    /**
+	     * width of the NineSliceSprite
+	     * @public
+	     * @type {number}
+	     * @name width
+	     */
+	    prototypeAccessors.width.get = function () {
+	        return Sprite.prototype.width;
+	    };
+	    prototypeAccessors.width.set = function (value) {
+	        Sprite.prototype.width = this.nss_width = value;
+	    };
+
+	    /**
+	     * height of the NineSliceSprite
+	     * @public
+	     * @type {number}
+	     * @name height
+	     */
+	    prototypeAccessors.height.get = function () {
+	        return Sprite.prototype.height;
+	    };
+	    prototypeAccessors.height.set = function (value) {
+	        Sprite.prototype.height = this.nss_height = value;
+	    };
+
 	    /**
 	     * @ignore
 	     */
@@ -35829,6 +35973,8 @@
 	        );
 	    };
 
+	    Object.defineProperties( NineSliceSprite.prototype, prototypeAccessors );
+
 	    return NineSliceSprite;
 	}(Sprite));
 
@@ -37579,7 +37725,6 @@
 	    }
 	});
 
-
 	/**
 	 * @classdesc
 	 * Used to make a game entity draggable
@@ -37620,6 +37765,33 @@
 	    return DroptargetEntity;
 	}(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
 
 
@@ -37630,7 +37802,7 @@
 	 * @name version
 	 * @type {string}
 	 */
-	var version = "13.0.0";
+	var version = "13.1.0";
 
 
 	/**