melonjs 13.0.0 → 13.2.0

package/dist/melonjs.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v13.0.0
+ * melonJS Game Engine - v13.2.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,13 +2995,11 @@
 
 	/**
 	 * 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}
 	 */
 	Color.prototype.toUint32 = function toUint32 (alpha) {
-	        if ( alpha === void 0 ) alpha = this.alpha;
+	        if ( alpha === void 0 ) alpha = 1.0;
 
 	    var ur = this.r & 0xff;
 	    var ug = this.g & 0xff;
@@ -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}
 	 */
@@ -6501,56 +6543,38 @@
 
 	    /**
 	     * the active gl rendering context
-	     * @public
 	     * @type {WebGLRenderingContext}
-	     * @name gl
-	     * @memberof GLShader
 	     */
 	    this.gl = gl;
 
 	    /**
 	     * the vertex shader source code
-	     * @public
 	     * @type {string}
-	     * @name vertex
-	     * @memberof GLShader
 	     */
 	    this.vertex = setPrecision(minify(vertex), precision || getMaxShaderPrecision(this.gl));
 
 	    /**
 	     * the fragment shader source code
-	     * @public
 	     * @type {string}
-	     * @name vertex
-	     * @memberof GLShader
 	     */
 	    this.fragment = setPrecision(minify(fragment), precision || getMaxShaderPrecision(this.gl));
 
 	    /**
 	     * the location attributes of the shader
-	     * @public
 	     * @type {GLint[]}
-	     * @name attributes
-	     * @memberof GLShader
 	     */
 	    this.attributes = extractAttributes(this.gl, this);
 
 
 	    /**
 	     * a reference to the shader program (once compiled)
-	     * @public
 	     * @type {WebGLProgram}
-	     * @name program
-	     * @memberof GLShader
 	     */
 	    this.program = compileProgram(this.gl, this.vertex, this.fragment, this.attributes);
 
 	    /**
 	     * the uniforms of the shader
-	     * @public
 	     * @type {object}
-	     * @name uniforms
-	     * @memberof GLShader
 	     */
 	    this.uniforms = extractUniforms(this.gl, this);
 
@@ -6560,8 +6584,6 @@
 
 	/**
 	 * Installs this shader program as part of current rendering state
-	 * @name bind
-	 * @memberof GLShader
 	 */
 	GLShader.prototype.bind = function bind () {
 	    this.gl.useProgram(this.program);
@@ -6569,8 +6591,6 @@
 
 	/**
 	 * returns the location of an attribute variable in this shader program
-	 * @name getAttribLocation
-	 * @memberof GLShader
 	 * @param {string} name the name of the attribute variable whose location to get.
 	 * @returns {GLint} number indicating the location of the variable name if found. Returns -1 otherwise
 	 */
@@ -6585,8 +6605,6 @@
 
 	/**
 	 * Set the uniform to the given value
-	 * @name setUniform
-	 * @memberof GLShader
 	 * @param {string} name the uniform name
 	 * @param {object|Float32Array} value the value to assign to that uniform
 	 * @example
@@ -6607,8 +6625,6 @@
 
 	/**
 	 * activate the given vertex attribute for this shader
-	 * @name setVertexAttributes
-	 * @memberof GLShader
 	 * @param {WebGLRenderingContext} gl the current WebGL rendering context
 	 * @param {object[]} attributes an array of vertex attributes
 	 * @param {number} vertexByteSize the size of a single vertex in bytes
@@ -6630,8 +6646,6 @@
 
 	/**
 	 * destroy this shader objects resources (program, attributes, uniforms)
-	 * @name destroy
-	 * @memberof GLShader
 	 */
 	GLShader.prototype.destroy = function destroy () {
 	    this.uniforms = null;
@@ -6828,44 +6842,37 @@
 
 	    /**
 	     * a reference to the active WebGL shader
-	     * @name activeShader
-	     * @memberof WebGLCompositor
 	     * @type {GLShader}
 	     */
 	    this.activeShader = null;
 
 	    /**
 	     * primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
-	     * @name mode
-	     * @see WebGLCompositor
-	     * @memberof WebGLCompositor
+	     * @type {number}
 	     * @default gl.TRIANGLES
 	     */
 	    this.mode = gl.TRIANGLES;
 
 	    /**
 	     * an array of vertex attribute properties
-	     * @name attributes
 	     * @see WebGLCompositor.addAttribute
-	     * @memberof WebGLCompositor
+	     * @type {Array}
 	     */
 	    this.attributes = [];
 
 	    /**
 	     * the size of a single vertex in bytes
 	     * (will automatically be calculated as attributes definitions are added)
-	     * @name vertexByteSize
 	     * @see WebGLCompositor.addAttribute
-	     * @memberof WebGLCompositor
+	     * @type {number}
 	     */
 	    this.vertexByteSize = 0;
 
 	    /**
 	     * the size of a single vertex in floats
 	     * (will automatically be calculated as attributes definitions are added)
-	     * @name vertexSize
 	     * @see WebGLCompositor.addAttribute
-	     * @memberof WebGLCompositor
+	     * @type {number}
 	     */
 	    this.vertexSize = 0;
 
@@ -6904,8 +6911,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
@@ -6926,8 +6933,6 @@
 
 	/**
 	 * add vertex attribute property definition to the compositor
-	 * @name addAttribute
-	 * @memberof WebGLCompositor
 	 * @param {string} name name of the attribute in the vertex shader
 	 * @param {number} size number of components per vertex attribute. Must be 1, 2, 3, or 4.
 	 * @param {GLenum} type data type of each component in the array
@@ -6973,8 +6978,6 @@
 
 	/**
 	 * Sets the viewport
-	 * @name setViewport
-	 * @memberof WebGLCompositor
 	 * @param {number} x x position of viewport
 	 * @param {number} y y position of viewport
 	 * @param {number} w width of viewport
@@ -6986,8 +6989,6 @@
 
 	/**
 	 * Create a WebGL texture from an image
-	 * @name createTexture2D
-	 * @memberof WebGLCompositor
 	 * @param {number} unit Destination texture unit
 	 * @param {Image|HTMLCanvasElement|ImageData|Uint8Array[]|Float32Array[]} image Source image
 	 * @param {number} filter gl.LINEAR or gl.NEAREST
@@ -7034,8 +7035,6 @@
 
 	/**
 	 * delete the given WebGL texture
-	 * @name bindTexture2D
-	 * @memberof WebGLCompositor
 	 * @param {WebGLTexture} [texture] a WebGL texture to delete
 	 * @param {number} [unit] Texture unit to delete
 	 */
@@ -7046,8 +7045,6 @@
 
 	/**
 	 * returns the WebGL texture associated to the given texture unit
-	 * @name bindTexture2D
-	 * @memberof WebGLCompositor
 	 * @param {number} unit Texture unit to which a texture is bound
 	 * @returns {WebGLTexture} texture a WebGL texture
 	 */
@@ -7057,8 +7054,6 @@
 
 	/**
 	 * assign the given WebGL texture to the current batch
-	 * @name bindTexture2D
-	 * @memberof WebGLCompositor
 	 * @param {WebGLTexture} texture a WebGL texture
 	 * @param {number} unit Texture unit to which the given texture is bound
 	 */
@@ -7084,8 +7079,6 @@
 
 	/**
 	 * unbind the given WebGL texture, forcing it to be reuploaded
-	 * @name unbindTexture2D
-	 * @memberof WebGLCompositor
 	 * @param {WebGLTexture} [texture] a WebGL texture
 	 * @param {number} [unit] a WebGL texture
 	 * @returns {number} unit the unit number that was associated with the given texture
@@ -7132,8 +7125,6 @@
 
 	/**
 	 * set/change the current projection matrix
-	 * @name setProjection
-	 * @memberof WebGLCompositor
 	 * @param {Matrix3d} matrix
 	 */
 	WebGLCompositor.prototype.setProjection = function setProjection (matrix) {
@@ -7142,9 +7133,7 @@
 
 	/**
 	 * Select the shader to use for compositing
-	 * @name useShader
 	 * @see GLShader
-	 * @memberof WebGLCompositor
 	 * @param {GLShader} shader a reference to a GLShader instance
 	 */
 	WebGLCompositor.prototype.useShader = function useShader (shader) {
@@ -7159,8 +7148,6 @@
 
 	/**
 	 * Add a textured quad
-	 * @name addQuad
-	 * @memberof WebGLCompositor
 	 * @param {TextureAtlas} texture Source texture atlas
 	 * @param {number} x Destination x-coordinate
 	 * @param {number} y Destination y-coordinate
@@ -7216,7 +7203,6 @@
 	/**
 	 * Flush batched texture operations to the GPU
 	 * @param {number} [mode=gl.TRIANGLES] the GL drawing mode
-	 * @memberof WebGLCompositor
 	 */
 	WebGLCompositor.prototype.flush = function flush (mode) {
 	        if ( mode === void 0 ) mode = this.mode;
@@ -7244,8 +7230,6 @@
 
 	/**
 	 * Draw an array of vertices
-	 * @name drawVertices
-	 * @memberof WebGLCompositor
 	 * @param {GLenum} mode primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
 	 * @param {Vector2d[]} verts vertices
 	 * @param {number} [vertexCount=verts.length] amount of points defined in the points array
@@ -7274,25 +7258,33 @@
 	};
 
 	/**
-	 * Specify the color values used when clearing color buffers. The values are clamped between 0 and 1.
-	 * @name clearColor
-	 * @memberof WebGLCompositor
-	 * @param {number} [r=0] - the red color value used when the color buffers are cleared
-	 * @param {number} [g=0] - the green color value used when the color buffers are cleared
-	 * @param {number} [b=0] - the blue color value used when the color buffers are cleared
-	 * @param {number} [a=0] - the alpha color value used when the color buffers are cleared
+	 * Clear the frame buffer
+	 * @param {number} [alpha = 0.0] - the alpha value used when clearing the framebuffer
 	 */
-	WebGLCompositor.prototype.clearColor = function clearColor (r, g, b, a) {
-	    this.gl.clearColor(r, g, b, a);
+	WebGLCompositor.prototype.clear = function clear (alpha) {
+	        if ( alpha === void 0 ) alpha = 0;
+
+	    var gl = this.gl;
+	    gl.clearColor(0, 0, 0, alpha);
+	    gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
 	};
 
 	/**
-	 * Clear the frame buffer
-	 * @name clear
-	 * @memberof WebGLCompositor
+	 * Specify the color values used when clearing color buffers. The values are clamped between 0 and 1.
+	 * @param {number} [r = 0] - the red color value used when the color buffers are cleared
+	 * @param {number} [g = 0] - the green color value used when the color buffers are cleared
+	 * @param {number} [b = 0] - the blue color value used when the color buffers are cleared
+	 * @param {number} [a = 0] - the alpha color value used when the color buffers are cleared
 	 */
-	WebGLCompositor.prototype.clear = function clear () {
-	    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+	WebGLCompositor.prototype.clearColor = function clearColor (r, g, b, a) {
+	        if ( r === void 0 ) r = 0;
+	        if ( g === void 0 ) g = 0;
+	        if ( b === void 0 ) b = 0;
+	        if ( a === void 0 ) a = 0;
+
+	    var gl = this.gl;
+	    gl.clearColor(r, g, b, a);
+	    gl.clear(gl.COLOR_BUFFER_BIT);
 	};
 
 	var earcut$1 = {exports: {}};
@@ -9590,17 +9582,18 @@
 	 * add the given point to the bounds definition.
 	 * @name addPoint
 	 * @memberof Bounds
-	 * @param {Vector2d} v
-	 * @param {Matrix2d} [m] an optional transform to apply to the given point
+	 * @param {Vector2d|Point} point the point to be added to the bounds
+	 * @param {Matrix2d} [m] an optional transform to apply to the given point (only if the given point is a vector)
 	 */
-	Bounds.prototype.addPoint = function addPoint (v, m) {
-	    if (typeof m !== "undefined") {
-	        v = m.apply(v);
+	Bounds.prototype.addPoint = function addPoint (point, m) {
+	    if ((typeof m !== "undefined") && (typeof point.rotate === "function")) {
+	        // only Vectors object have a rotate function
+	        point = m.apply(point);
 	    }
-	    this.min.x = Math.min(this.min.x, v.x);
-	    this.max.x = Math.max(this.max.x, v.x);
-	    this.min.y = Math.min(this.min.y, v.y);
-	    this.max.y = Math.max(this.max.y, v.y);
+	    this.min.x = Math.min(this.min.x, point.x);
+	    this.max.x = Math.max(this.max.x, point.x);
+	    this.min.y = Math.min(this.min.y, point.y);
+	    this.max.y = Math.max(this.max.y, point.y);
 	};
 
 	/**
@@ -10091,6 +10084,93 @@
 	    this.arcTo(x, y, x + radius, y, radius);
 	};
 
+	/**
+	 * @classdesc
+	 * represents a point in a 2d space
+	 */
+	var Point = function Point(x, y) {
+	    if ( x === void 0 ) x = 0;
+	    if ( y === void 0 ) y = 0;
+
+	    /**
+	     * the position of the point on the horizontal axis
+	     * @public
+	     * @type {Number}
+	     * @default 0
+	     */
+	    this.x = x;
+
+	    /**
+	     * the position of the point on the vertical axis
+	     * @public
+	     * @type {Number}
+	     * @default 0
+	     */
+	    this.y = y;
+	};
+
+	/** @ignore */
+	Point.prototype.onResetEvent = function onResetEvent (x, y) {
+	        if ( x === void 0 ) x = 0;
+	        if ( y === void 0 ) y = 0;
+
+	    this.set(x, y);
+	};
+
+	/**
+	 * set the Point x and y properties to the given values
+	 * @param {number} x
+	 * @param {number} y
+	 * @returns {Point} Reference to this object for method chaining
+	 */
+	Point.prototype.set = function set (x, y) {
+	        if ( x === void 0 ) x = 0;
+	        if ( y === void 0 ) y = 0;
+
+	    this.x = x;
+	    this.y = y;
+	    return this;
+	};
+
+	/**
+	 * return true if the two points are the same
+	 * @name equals
+	 * @memberof Point
+	 * @method
+	 * @param {Point} point
+	 * @returns {boolean}
+	 */
+	/**
+	 * return true if this point is equal to the given values
+	 * @name equals
+	 * @memberof Point
+	 * @param {number} x
+	 * @param {number} y
+	 * @returns {boolean}
+	 */
+	 Point.prototype.equals = function equals () {
+	    var _x, _y;
+	    if (arguments.length === 2) {
+	        // x, y
+	        _x = arguments[0];
+	        _y = arguments[1];
+	    } else {
+	        // point
+	        _x = arguments[0].x;
+	        _y = arguments[0].y;
+	    }
+	    return ((this.x === _x) && (this.y === _y));
+	};
+
+	/**
+	 * clone this Point
+	 * @name clone
+	 * @returns {Point} new Point
+	 */
+	Point.prototype.clone = function clone () {
+	    return new Point(this.x, this.y);
+	};
+
 	/**
 	 * @classdesc
 	 * a base renderer object
@@ -10099,26 +10179,20 @@
 	    /**
 	     * The given constructor options
 	     * @public
-	     * @name settings
-	     * @memberof Renderer#
 	     * @type {object}
 	     */
 	    this.settings = options;
 
 	    /**
 	     * true if the current rendering context is valid
-	     * @name isContextValid
-	     * @memberof Renderer#
 	     * @default true
-	     * type {boolean}
+	     * @type {boolean}
 	     */
 	    this.isContextValid = true;
 
 	    /**
 	     * The Path2D instance used by the renderer to draw primitives
-	     * @name path2D
 	     * @type {Path2D}
-	     * @memberof Renderer#
 	     */
 	    this.path2D = new Path2D();
 
@@ -10147,13 +10221,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);
 
@@ -10174,15 +10244,16 @@
 
 	/**
 	 * prepare the framebuffer for drawing a new frame
-	 * @name clear
-	 * @memberof Renderer
 	 */
 	Renderer.prototype.clear = function clear () {};
 
+	/**
+	 * render the main framebuffer on screen
+	 */
+	Renderer.prototype.flush = function flush () {};
+
 	/**
 	 * Reset context state
-	 * @name reset
-	 * @memberof Renderer
 	 */
 	Renderer.prototype.reset = function reset () {
 	    this.resetTransform();
@@ -10192,46 +10263,30 @@
 	    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
-	 * @name getCanvas
-	 * @memberof Renderer
+	 * return a reference to the canvas which this renderer draws to
 	 * @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
-	 * @memberof Renderer
-	 * @returns {CanvasRenderingContext2D}
+	 * return a reference to this renderer canvas corresponding Context
+	 * @returns {CanvasRenderingContext2D|WebGLRenderingContext}
 	 */
-	Renderer.prototype.getScreenContext = function getScreenContext () {
+	Renderer.prototype.getContext = function getContext () {
 	    return this.context;
 	};
 
 	/**
 	 * returns the current blend mode for this renderer
-	 * @name getBlendMode
-	 * @memberof Renderer
 	 * @returns {string} blend mode
 	 */
 	Renderer.prototype.getBlendMode = function getBlendMode () {
@@ -10241,8 +10296,6 @@
 	/**
 	 * Returns the 2D Context object of the given Canvas<br>
 	 * Also configures anti-aliasing and blend modes based on constructor options.
-	 * @name getContext2d
-	 * @memberof Renderer
 	 * @param {HTMLCanvasElement} canvas
 	 * @param {boolean} [transparent=true] use false to disable transparency
 	 * @returns {CanvasRenderingContext2D}
@@ -10278,28 +10331,22 @@
 
 	/**
 	 * return the width of the system Canvas
-	 * @name getWidth
-	 * @memberof Renderer
 	 * @returns {number}
 	 */
 	Renderer.prototype.getWidth = function getWidth () {
-	    return this.backBufferCanvas.width;
+	    return this.getCanvas().width;
 	};
 
 	/**
 	 * return the height of the system Canvas
-	 * @name getHeight
-	 * @memberof Renderer
 	 * @returns {number} height of the system Canvas
 	 */
 	Renderer.prototype.getHeight = function getHeight () {
-	    return this.backBufferCanvas.height;
+	    return this.getCanvas().height;
 	};
 
 	/**
 	 * get the current fill & stroke style color.
-	 * @name getColor
-	 * @memberof Renderer
 	 * @returns {Color} current global color
 	 */
 	Renderer.prototype.getColor = function getColor () {
@@ -10308,8 +10355,6 @@
 
 	/**
 	 * return the current global alpha
-	 * @name globalAlpha
-	 * @memberof Renderer
 	 * @returns {number}
 	 */
 	Renderer.prototype.globalAlpha = function globalAlpha () {
@@ -10318,8 +10363,6 @@
 
 	/**
 	 * check if the given rect or bounds overlaps with the renderer screen coordinates
-	 * @name overlaps
-	 * @memberof Renderer
 	 * @param {Rect|Bounds} bounds
 	 * @returns {boolean} true if overlaps
 	 */
@@ -10333,15 +10376,14 @@
 
 	/**
 	 * resizes the system canvas
-	 * @name resize
-	 * @memberof Renderer
 	 * @param {number} width new width of the canvas
 	 * @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;
@@ -10353,8 +10395,6 @@
 
 	/**
 	 * enable/disable image smoothing (scaling interpolation) for the given context
-	 * @name setAntiAlias
-	 * @memberof Renderer
 	 * @param {CanvasRenderingContext2D} context
 	 * @param {boolean} [enable=false]
 	 */
@@ -10382,8 +10422,6 @@
 
 	/**
 	 * set/change the current projection matrix (WebGL only)
-	 * @name setProjection
-	 * @memberof Renderer
 	 * @param {Matrix3d} matrix
 	 */
 	Renderer.prototype.setProjection = function setProjection (matrix) {
@@ -10392,8 +10430,6 @@
 
 	/**
 	 * stroke the given shape
-	 * @name stroke
-	 * @memberof Renderer
 	 * @param {Rect|RoundRect|Polygon|Line|Ellipse} shape a shape object to stroke
 	 * @param {boolean} [fill=false] fill the shape with the current color if true
 	 */
@@ -10420,6 +10456,10 @@
 	        );
 	        return;
 	    }
+	    if (shape instanceof Point) {
+	        this.strokePoint(shape.x, shape.y);
+	        return;
+	    }
 	    throw new Error("Invalid geometry for fill/stroke");
 	};
 
@@ -10435,8 +10475,6 @@
 
 	/**
 	 * tint the given image or canvas using the given color
-	 * @name tint
-	 * @memberof Renderer
 	 * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src the source image to be tinted
 	 * @param {Color|string} color the color that will be used to tint the image
 	 * @param {string} [mode="multiply"] the composition mode used to tint the image
@@ -10465,8 +10503,6 @@
 	 * A mask limits rendering elements to the shape and position of the given mask object.
 	 * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
 	 * Mask are not preserved through renderer context save and restore.
-	 * @name setMask
-	 * @memberof Renderer
 	 * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
 	 * @param {boolean} [invert=false] either the given shape should define what is visible (default) or the opposite
 	 */
@@ -10475,16 +10511,12 @@
 
 	/**
 	 * disable (remove) the rendering mask set through setMask.
-	 * @name clearMask
 	 * @see Renderer#setMask
-	 * @memberof Renderer
 	 */
 	Renderer.prototype.clearMask = function clearMask () {};
 
 	/**
 	 * set a coloring tint for sprite based renderables
-	 * @name setTint
-	 * @memberof Renderer
 	 * @param {Color} tint the tint color
 	 * @param {number} [alpha] an alpha value to be applied to the tint
 	 */
@@ -10498,9 +10530,7 @@
 
 	/**
 	 * clear the rendering tint set through setTint.
-	 * @name clearTint
 	 * @see Renderer#setTint
-	 * @memberof Renderer
 	 */
 	Renderer.prototype.clearTint = function clearTint () {
 	    // reset to default
@@ -14678,8 +14708,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 +15246,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 +15813,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 +16858,7 @@
 
 	        if (pointerEventTarget === null) {
 	            // default pointer event target
-	            pointerEventTarget = renderer.getScreenCanvas();
+	            pointerEventTarget = renderer.getCanvas();
 	        }
 
 	        if (pointerEvent) {
@@ -17181,7 +17289,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);
@@ -17978,21 +18086,14 @@
 
 	        /**
 	         * If true then physic collision and input events will not impact this renderable
-	         * @public
 	         * @type {boolean}
 	         * @default true
-	         * @name isKinematic
-	         * @memberof Renderable
 	         */
 	        this.isKinematic = true;
 
 	        /**
 	         * the renderable physic body
-	         * @public
 	         * @type {Body}
-	         * @see Body
-	         * @name body
-	         * @memberof Renderable#
 	         * @example
 	         *  // define a new Player Class
 	         *  class PlayerEntity extends me.Sprite {
@@ -18030,10 +18131,7 @@
 	        if (typeof this.currentTransform === "undefined") {
 	            /**
 	             * the renderable default transformation matrix
-	             * @public
 	             * @type {Matrix2d}
-	             * @name currentTransform
-	             * @memberof Renderable#
 	             */
 	            this.currentTransform = pool.pull("Matrix2d");
 	        }
@@ -18043,20 +18141,14 @@
 	        * (G)ame (U)nique (Id)entifier" <br>
 	        * a GUID will be allocated for any renderable object added <br>
 	        * to an object container (including the `me.game.world` container)
-	        * @public
 	        * @type {string}
-	        * @name GUID
-	        * @memberof Renderable
 	        */
 	        this.GUID = undefined;
 
 	        /**
 	         * an event handler that is called when the renderable leave or enter a camera viewport
-	         * @public
 	         * @type {Function}
 	         * @default undefined
-	         * @name onVisibilityChange
-	         * @memberof Renderable#
 	         * @example
 	         * this.onVisibilityChange = function(inViewport) {
 	         *     if (inViewport === true) {
@@ -18068,42 +18160,30 @@
 
 	        /**
 	         * Whether the renderable object will always update, even when outside of the viewport<br>
-	         * @public
 	         * @type {boolean}
 	         * @default false
-	         * @name alwaysUpdate
-	         * @memberof Renderable
 	         */
 	        this.alwaysUpdate = false;
 
 	        /**
 	         * Whether to update this object when the game is paused.
-	         * @public
 	         * @type {boolean}
 	         * @default false
-	         * @name updateWhenPaused
-	         * @memberof Renderable
 	         */
 	        this.updateWhenPaused = false;
 
 	        /**
 	         * make the renderable object persistent over level changes<br>
-	         * @public
 	         * @type {boolean}
 	         * @default false
-	         * @name isPersistent
-	         * @memberof Renderable
 	         */
 	        this.isPersistent = false;
 
 	        /**
 	         * If true, this renderable will be rendered using screen coordinates,
 	         * as opposed to world coordinates. Use this, for example, to define UI elements.
-	         * @public
 	         * @type {boolean}
 	         * @default false
-	         * @name floating
-	         * @memberof Renderable
 	         */
 	        this.floating = false;
 
@@ -18118,11 +18198,8 @@
 	             * <br>
 	             * <i><b>Note:</b> Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation.
 	             * To specify a value through Tiled, use a json expression like `json:{"x":0.5,"y":0.5}`. </i>
-	             * @public
 	             * @type {ObservableVector2d}
 	             * @default <0.5,0.5>
-	             * @name anchorPoint
-	             * @memberof Renderable#
 	             */
 	            this.anchorPoint = pool.pull("ObservableVector2d", 0.5, 0.5, { onUpdate: this.onAnchorUpdate, scope: this });
 	        }
@@ -18130,11 +18207,8 @@
 	        /**
 	         * When enabled, an object container will automatically apply
 	         * any defined transformation before calling the child draw method.
-	         * @public
 	         * @type {boolean}
 	         * @default true
-	         * @name autoTransform
-	         * @memberof Renderable
 	         * @example
 	         * // enable "automatic" transformation when the object is activated
 	         * onActivateEvent: function () {
@@ -18154,30 +18228,23 @@
 	         * Set to zero if you do not wish an object to be drawn
 	         * @see Renderable#setOpacity
 	         * @see Renderable#getOpacity
-	         * @public
 	         * @type {number}
 	         * @default 1.0
-	         * @name Renderable#alpha
 	         */
 	        this.alpha = 1.0;
 
 	        /**
 	         * a reference to the parent object that contains this renderable
-	         * @public
 	         * @type {Container|Entity}
 	         * @default undefined
-	         * @name Renderable#ancestor
 	         */
 	        this.ancestor = undefined;
 
 	        /**
 	         * A mask limits rendering elements to the shape and position of the given mask object.
 	         * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
-	         * @public
 	         * @type {Rect|RoundRect|Polygon|Line|Ellipse}
-	         * @name mask
 	         * @default undefined
-	         * @memberof Renderable#
 	         * @example
 	         * // apply a mask in the shape of a Star
 	         * myNPCSprite.mask = new me.Polygon(myNPCSprite.width / 2, 0, [
@@ -18196,40 +18263,19 @@
 	         */
 	        this.mask = undefined;
 
-	        /**
-	         * define a tint for this renderable. a (255, 255, 255) r, g, b value will remove the tint effect.
-	         * @public
-	         * @type {Color}
-	         * @name tint
-	         * @default (255, 255, 255)
-	         * @memberof Renderable#
-	         * @example
-	         * // add a red tint to this renderable
-	         * this.tint.setColor(255, 128, 128);
-	         * // remove the tint
-	         * this.tint.setColor(255, 255, 255);
-	         */
-	        this.tint = pool.pull("Color", 255, 255, 255, 1.0);
-
 	        /**
 	         * the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)
-	         * @public
 	         * @type {string}
-	         * @name blendMode
 	         * @default "normal"
 	         * @see CanvasRenderer#setBlendMode
 	         * @see WebGLRenderer#setBlendMode
-	         * @memberof Renderable#
 	         */
 	        this.blendMode = "normal";
 
 	        /**
 	         * The name of the renderable
-	         * @public
 	         * @type {string}
-	         * @name name
 	         * @default ""
-	         * @memberof Renderable
 	         */
 	        this.name = "";
 
@@ -18240,8 +18286,6 @@
 	             * Position of the Renderable relative to its parent container
 	             * @public
 	             * @type {ObservableVector3d}
-	             * @name pos
-	             * @memberof Renderable#
 	             */
 	            this.pos = pool.pull("ObservableVector3d", x, y, 0, { onUpdate: this.updateBoundsPos, scope: this});
 	        }
@@ -18249,9 +18293,7 @@
 	        /**
 	         * when true the renderable will be redrawn during the next update cycle
 	         * @type {boolean}
-	         * @name isDirty
 	         * @default false
-	         * @memberof Renderable#
 	         */
 	        this.isDirty = false;
 
@@ -18272,27 +18314,49 @@
 	    Renderable.prototype = Object.create( Rect && Rect.prototype );
 	    Renderable.prototype.constructor = Renderable;
 
-	    var prototypeAccessors = { isFloating: { configurable: true },inViewport: { configurable: true },isFlippedX: { configurable: true },isFlippedY: { configurable: true } };
+	    var prototypeAccessors = { isFloating: { configurable: true },tint: { configurable: true },inViewport: { configurable: true },isFlippedX: { configurable: true },isFlippedY: { configurable: true } };
 
 	    /**
 	     * Whether the renderable object is floating, or contained in a floating container
-	     * @public
 	     * @see Renderable#floating
 	     * @type {boolean}
-	     * @name isFloating
-	     * @memberof Renderable
 	     */
 	    prototypeAccessors.isFloating.get = function () {
 	        return this.floating === true || (typeof this.ancestor !== "undefined" && this.ancestor.floating === true);
 	    };
 
+	    /**
+	     * define a tint for this renderable. a (255, 255, 255) r, g, b value will remove the tint effect.
+	     * @type {Color}
+	     * @default (255, 255, 255)
+	     * @example
+	     * // add a red tint to this renderable
+	     * this.tint.setColor(255, 128, 128);
+	     * // remove the tint
+	     * this.tint.setColor(255, 255, 255);
+	     */
+	    prototypeAccessors.tint.get = function () {
+	        if (typeof this._tint === "undefined") {
+	            this._tint = pool.pull("Color", 255, 255, 255, 1.0);
+	        }
+	        return this._tint;
+	    };
+	    prototypeAccessors.tint.set = function (value) {
+	        if (typeof this._tint === "undefined") {
+	            this._tint = pool.pull("Color", 255, 255, 255, 1.0);
+	        }
+	        if (value instanceof Color) {
+	            this._tint.copy(value);
+	        } else {
+	            // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+	            this._tint.parseCSS(value);
+	        }
+	    };
+
 	    /**
 	     * Whether the renderable object is visible and within the viewport
-	     * @public
 	     * @type {boolean}
 	     * @default false
-	     * @name inViewport
-	     * @memberof Renderable
 	     */
 	    prototypeAccessors.inViewport.get = function () {
 	        return this._inViewport;
@@ -18311,8 +18375,6 @@
 	     * @public
 	     * @see Renderable#flipX
 	     * @type {boolean}
-	     * @name isFlippedX
-	     * @memberof Renderable
 	     */
 	    prototypeAccessors.isFlippedX.get = function () {
 	        return this._flip.x === true;
@@ -18323,8 +18385,6 @@
 	     * @public
 	     * @see Renderable#flipY
 	     * @type {boolean}
-	     * @name isFlippedY
-	     * @memberof Renderable
 	     */
 	    prototypeAccessors.isFlippedY.get = function () {
 	        return this._flip.y === true;
@@ -18332,8 +18392,6 @@
 
 	    /**
 	     * returns the bounding box for this renderable
-	     * @name getBounds
-	     * @memberof Renderable
 	     * @returns {Bounds} bounding box Rectangle object
 	     */
 	    Renderable.prototype.getBounds = function getBounds () {
@@ -18352,8 +18410,6 @@
 
 	    /**
 	     * get the renderable alpha channel value<br>
-	     * @name getOpacity
-	     * @memberof Renderable
 	     * @returns {number} current opacity value between 0 and 1
 	     */
 	    Renderable.prototype.getOpacity = function getOpacity () {
@@ -18362,8 +18418,6 @@
 
 	    /**
 	     * set the renderable alpha channel value<br>
-	     * @name setOpacity
-	     * @memberof Renderable
 	     * @param {number} alpha opacity value between 0.0 and 1.0
 	     */
 	    Renderable.prototype.setOpacity = function setOpacity (alpha) {
@@ -18380,8 +18434,6 @@
 	    /**
 	     * flip the renderable on the horizontal axis (around the center of the renderable)
 	     * @see Matrix2d#scaleX
-	     * @name flipX
-	     * @memberof Renderable
 	     * @param {boolean} [flip=true] `true` to flip this renderable.
 	     * @returns {Renderable} Reference to this object for method chaining
 	     */
@@ -18396,8 +18448,6 @@
 	    /**
 	     * flip the renderable on the vertical axis (around the center of the renderable)
 	     * @see Matrix2d#scaleY
-	     * @name flipY
-	     * @memberof Renderable
 	     * @param {boolean} [flip=true] `true` to flip this renderable.
 	     * @returns {Renderable} Reference to this object for method chaining
 	     */
@@ -18411,8 +18461,6 @@
 
 	    /**
 	     * multiply the renderable currentTransform with the given matrix
-	     * @name transform
-	     * @memberof Renderable
 	     * @see Renderable#currentTransform
 	     * @param {Matrix2d} m the transformation matrix
 	     * @returns {Renderable} Reference to this object for method chaining
@@ -18427,8 +18475,6 @@
 
 	    /**
 	     * return the angle to the specified target
-	     * @name angleTo
-	     * @memberof Renderable
 	     * @param {Renderable|Vector2d|Vector3d} target
 	     * @returns {number} angle in radians
 	     */
@@ -18450,8 +18496,6 @@
 
 	    /**
 	     * return the distance to the specified target
-	     * @name distanceTo
-	     * @memberof Renderable
 	     * @param {Renderable|Vector2d|Vector3d} target
 	     * @returns {number} distance
 	     */
@@ -18473,8 +18517,6 @@
 
 	    /**
 	     * Rotate this renderable towards the given target.
-	     * @name lookAt
-	     * @memberof Renderable
 	     * @param {Renderable|Vector2d|Vector3d} target the renderable or position to look at
 	     * @returns {Renderable} Reference to this object for method chaining
 	     */
@@ -18496,8 +18538,6 @@
 
 	    /**
 	     * Rotate this renderable by the specified angle (in radians).
-	     * @name rotate
-	     * @memberof Renderable
 	     * @param {number} angle The angle to rotate (in radians)
 	     * @param {Vector2d|ObservableVector2d} [v] an optional point to rotate around
 	     * @returns {Renderable} Reference to this object for method chaining
@@ -18517,8 +18557,6 @@
 	     * when rendering.  It does not scale the object itself.  For example if the renderable
 	     * is an image, the image.width and image.height properties are unaltered but the currentTransform
 	     * member will be changed.
-	     * @name scale
-	     * @memberof Renderable
 	     * @param {number} x a number representing the abscissa of the scaling vector.
 	     * @param {number} [y=x] a number representing the ordinate of the scaling vector.
 	     * @returns {Renderable} Reference to this object for method chaining
@@ -18532,8 +18570,6 @@
 
 	    /**
 	     * scale the renderable around his anchor point
-	     * @name scaleV
-	     * @memberof Renderable
 	     * @param {Vector2d} v scaling vector
 	     * @returns {Renderable} Reference to this object for method chaining
 	     */
@@ -18543,11 +18579,7 @@
 	    };
 
 	    /**
-	     * update function. <br>
-	     * automatically called by the game manager {@link game}
-	     * @name update
-	     * @memberof Renderable
-	     * @protected
+	     * update function (automatically called by melonJS).
 	     * @param {number} dt time since the last update in milliseconds.
 	     * @returns {boolean} true if the renderable is dirty
 	     */
@@ -18558,8 +18590,6 @@
 	    /**
 	     * update the bounding box for this shape.
 	     * @ignore
-	     * @name updateBounds
-	     * @memberof Renderable
 	     * @returns {Bounds} this shape bounding box Rectangle object
 	     */
 	    Renderable.prototype.updateBounds = function updateBounds () {
@@ -18571,8 +18601,6 @@
 	    /**
 	     * update the renderable's bounding rect (private)
 	     * @ignore
-	     * @name updateBoundsPos
-	     * @memberof Renderable
 	     */
 	     Renderable.prototype.updateBoundsPos = function updateBoundsPos (newX, newY) {
 	         var bounds = this.getBounds();
@@ -18603,8 +18631,6 @@
 
 	     /**
 	      * return the renderable absolute position in the game world
-	      * @name getAbsolutePosition
-	      * @memberof Renderable
 	      * @returns {Vector2d}
 	      */
 	      Renderable.prototype.getAbsolutePosition = function getAbsolutePosition () {
@@ -18622,8 +18648,6 @@
 	    /**
 	     * called when the anchor point value is changed
 	     * @private
-	     * @name onAnchorUpdate
-	     * @memberof Renderable
 	     * @param {number} x the new X value to be set for the anchor
 	     * @param {number} y the new Y value to be set for the anchor
 	     */
@@ -18636,12 +18660,10 @@
 	     };
 
 	    /**
-	     * prepare the rendering context before drawing
-	     * (apply defined transforms, anchor point). <br>
-	     * automatically called by the game manager {@link game}
-	     * @name preDraw
-	     * @memberof Renderable
-	     * @protected
+	     * Prepare the rendering context before drawing (automatically called by melonJS).
+	     * This will apply any defined transforms, anchor point, tint or blend mode and translate the context accordingly to this renderable position.
+	     * @see Renderable#draw
+	     * @see Renderable#postDraw
 	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
 	     */
 	    Renderable.prototype.preDraw = function preDraw (renderer) {
@@ -18692,10 +18714,15 @@
 	    };
 
 	    /**
-	     * draw this renderable (automatically called by melonJS)
-	     * @name draw
-	     * @memberof Renderable
-	     * @protected
+	     * Draw this renderable (automatically called by melonJS).
+	     * All draw operations for renderable are made respectively
+	     * to the position or transforms set or applied by the preDraw method.
+	     * The main draw loop will first call preDraw() to prepare the context for drawing the renderable,
+	     * then draw() to draw the renderable, and finally postDraw() to clear the context.
+	     * If you override this method, be mindful about the drawing logic; for example if you draw a shape
+	     * from the draw method, you should make sure that your draw it at the 0, 0 coordinates.
+	     * @see Renderable#preDraw
+	     * @see Renderable#postDraw
 	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
 	     * @param {Camera2d} [viewport] the viewport to (re)draw
 	     */
@@ -18704,11 +18731,9 @@
 	    };
 
 	    /**
-	     * restore the rendering context after drawing. <br>
-	     * automatically called by the game manager {@link game}
-	     * @name postDraw
-	     * @memberof Renderable
-	     * @protected
+	     * restore the rendering context after drawing (automatically called by melonJS).
+	     * @see Renderable#preDraw
+	     * @see Renderable#draw
 	     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
 	     */
 	    Renderable.prototype.postDraw = function postDraw (renderer) {
@@ -18730,8 +18755,6 @@
 	    /**
 	     * onCollision callback, triggered in case of collision,
 	     * when this renderable body is colliding with another one
-	     * @name onCollision
-	     * @memberof Renderable
 	     * @param {ResponseObject} response the collision response object
 	     * @param {Renderable} other the other renderable touching this one (a reference to response.a or response.b)
 	     * @returns {boolean} true if the object should respond to the collision (its position and velocity will be corrected)
@@ -18783,9 +18806,9 @@
 	            this.mask = undefined;
 	        }
 
-	        if (typeof this.tint !== "undefined") {
-	            pool.push(this.tint);
-	            this.tint = undefined;
+	        if (typeof this._tint !== "undefined") {
+	            pool.push(this._tint);
+	            this._tint = undefined;
 	        }
 
 	        this.ancestor = undefined;
@@ -18806,8 +18829,6 @@
 	    /**
 	     * OnDestroy Notification function<br>
 	     * Called by engine before deleting the object
-	     * @name onDestroyEvent
-	     * @memberof Renderable
 	     */
 	    Renderable.prototype.onDestroyEvent = function onDestroyEvent () {
 	        // to be extended !
@@ -19676,7 +19697,7 @@
 	        /**
 	         * The collision shapes of the body
 	         * @ignore
-	         * @type {Polygon[]|Line[]|Ellipse[]}
+	         * @type {Polygon[]|Line[]|Ellipse[]|Point|Point[]}
 	         */
 	        this.shapes = [];
 	    }
@@ -19870,7 +19891,7 @@
 	/**
 	 * add a collision shape to this body <br>
 	 * (note: me.Rect objects will be converted to me.Polygon before being added)
-	 * @param {Rect|Polygon|Line|Ellipse|Bounds|object} shape a shape or JSON object
+	 * @param {Rect|Polygon|Line|Ellipse|Point|Point[]|Bounds|object} shape a shape or JSON object
 	 * @returns {number} the shape array length
 	 * @example
 	 * // add a rectangle shape
@@ -19905,6 +19926,12 @@
 	        // update the body bounds
 	        this.bounds.add(shape.points);
 	        this.bounds.translate(shape.pos);
+	    } else if (shape instanceof Point) {
+	        if (!this.shapes.includes(shape)) {
+	            // see removeShape
+	            this.shapes.push(shape);
+	        }
+	        this.bounds.addPoint(shape);
 	    } else {
 	        // JSON object
 	        this.fromJSON(shape);
@@ -24334,17 +24361,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 +24377,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 +24409,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 +24453,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";
-	        }
 	    };
 
 	    /**
@@ -24450,19 +24461,10 @@
 	     * @memberof CanvasRenderer
 	     */
 	    CanvasRenderer.prototype.clear = function clear () {
-	        if (this.settings.transparent) {
-	            this.clearColor("rgba(0,0,0,0)", true);
-	        }
-	    };
-
-	    /**
-	     * 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);
+	        if (this.settings.transparent === false) {
+	            var canvas = this.getCanvas();
+	            var context = this.getContext();
+	            context.clearRect(0, 0, canvas.width, canvas.height);
 	        }
 	    };
 
@@ -24475,12 +24477,17 @@
 	     */
 	    CanvasRenderer.prototype.clearColor = function clearColor (color, opaque) {
 	        if ( color === void 0 ) color = "#000000";
+	        if ( opaque === void 0 ) opaque = false;
+
+	        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.globalAlpha = 1;
+	        context.globalCompositeOperation = opaque === true ? "copy" : "source-over";
+	        context.fillStyle = (color instanceof Color) ? color.toRGBA() : color;
+	        this.fillRect(0, 0, canvas.width, canvas.height);
 	        this.restore();
 	    };
 
@@ -24850,15 +24857,28 @@
 	        this.strokeRoundRect(x, y, width, height, radius, true);
 	    };
 
+	    /**
+	     * Stroke a Point at the specified coordinates
+	     * @name strokePoint
+	     * @memberof CanvasRenderer
+	     * @param {number} x
+	     * @param {number} y
+	     */
+	    CanvasRenderer.prototype.strokePoint = function strokePoint (x, y) {
+	        this.strokeLine(x, y, x + 1, y + 1);
+	    };
 
 	    /**
-	     * return a reference to the system 2d Context
-	     * @name getContext
+	     * Draw a a point at the specified coordinates
+	     * @name fillPoint
 	     * @memberof CanvasRenderer
-	     * @returns {CanvasRenderingContext2D}
+	     * @param {number} x
+	     * @param {number} y
+	     * @param {number} width
+	     * @param {number} height
 	     */
-	    CanvasRenderer.prototype.getContext = function getContext () {
-	        return this.backBufferContext2D;
+	    CanvasRenderer.prototype.fillPoint = function fillPoint (x, y) {
+	        this.strokePoint(x, y);
 	    };
 
 	    /**
@@ -24876,7 +24896,7 @@
 	     * @memberof CanvasRenderer
 	     */
 	    CanvasRenderer.prototype.save = function save () {
-	        this.backBufferContext2D.save();
+	        this.getContext().save();
 	    };
 
 	    /**
@@ -24885,12 +24905,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 +24920,7 @@
 	     * @param {number} angle in radians
 	     */
 	    CanvasRenderer.prototype.rotate = function rotate (angle) {
-	        this.backBufferContext2D.rotate(angle);
+	        this.getContext().rotate(angle);
 	    };
 
 	    /**
@@ -24911,7 +24931,7 @@
 	     * @param {number} y
 	     */
 	    CanvasRenderer.prototype.scale = function scale (x, y) {
-	        this.backBufferContext2D.scale(x, y);
+	        this.getContext().scale(x, y);
 	    };
 
 	    /**
@@ -24922,8 +24942,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 +24958,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 +24968,7 @@
 	     * @returns {number} global alpha value
 	     */
 	    CanvasRenderer.prototype.getGlobalAlpha = function getGlobalAlpha () {
-	        return this.backBufferContext2D.globalAlpha;
+	        return this.getContext().globalAlpha;
 	    };
 
 	    /**
@@ -24957,7 +24978,7 @@
 	     * @param {number} width Line width
 	     */
 	    CanvasRenderer.prototype.setLineWidth = function setLineWidth (width) {
-	        this.backBufferContext2D.lineWidth = width;
+	        this.getContext().lineWidth = width;
 	    };
 
 	    /**
@@ -24992,7 +25013,7 @@
 	            f |= 0;
 	        }
 
-	        this.backBufferContext2D.transform(a, b, c, d, e, f);
+	        this.getContext().transform(a, b, c, d, e, f);
 	    };
 
 	    /**
@@ -25004,9 +25025,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 +25045,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 +25273,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 +26679,14 @@
 	     */
 	    this.isCollection = false;
 
+	    /**
+	     * the tileset class
+	     * @public
+	     * @type {boolean}
+	     * @name TMXTileset#class
+	     */
+	    this.class = tileset.class;
+
 	    /**
 	     * Tileset animations
 	     * @private
@@ -27041,20 +27079,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)
@@ -27101,6 +27150,15 @@
 	     */
 	    this.isEllipse = false;
 
+	    /**
+	     * if true, the object is a Point
+	     * @public
+	     * @type {boolean}
+	     * @name isPoint
+	     * @memberof TMXObject
+	     */
+	    this.isPoint = false;
+
 	    /**
 	     * if true, the object is a Polygon
 	     * @public
@@ -27124,12 +27182,14 @@
 	        this.setTile(map.tilesets);
 	    }
 	    else {
-	        if (typeof(settings.ellipse) !== "undefined") {
+	        if (typeof settings.ellipse !== "undefined") {
 	            this.isEllipse = true;
-	        } else if (typeof(settings.polygon) !== "undefined") {
+	        } else if (typeof settings.point !== "undefined") {
+	            this.isPoint = true;
+	        } else if (typeof settings.polygon !== "undefined") {
 	            this.points = settings.polygon;
 	            this.isPolygon = true;
-	        } else if (typeof(settings.polyline) !== "undefined") {
+	        } else if (typeof settings.polyline !== "undefined") {
 	            this.points = settings.polyline;
 	            this.isPolyLine = true;
 	        }
@@ -27203,8 +27263,9 @@
 	            this.width,
 	            this.height
 	        )).rotate(this.rotation));
+	    } else if (this.isPoint === true) {
+	        shapes.push(pool.pull("Point", this.x, this.y));
 	    } else {
-
 	        // add a polygon
 	        if (this.isPolygon === true) {
 	            var _polygon = pool.pull("Polygon", 0, 0, this.points);
@@ -27213,10 +27274,8 @@
 	                throw new Error("collision polygones in Tiled should be defined as Convex");
 	            }
 	            shapes.push(_polygon.rotate(this.rotation));
-	        }
 
-	        // add a polyline
-	        else if (this.isPolyLine === true) {
+	        } else if (this.isPolyLine === true) {
 	            var p = this.points;
 	            var p1, p2;
 	            var segments = p.length - 1;
@@ -27248,7 +27307,9 @@
 	    // Apply isometric projection
 	    if (this.orientation === "isometric") {
 	        for (i = 0; i < shapes.length; i++) {
-	            shapes[i].toIso();
+	            if (typeof shapes[i].toIso === "function") {
+	                shapes[i].toIso();
+	            }
 	        }
 	    }
 
@@ -27309,6 +27370,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 +27630,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 +27979,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);
@@ -29172,7 +29255,12 @@
 	        }
 
 	        if (typeof (settings.tint) !== "undefined") {
-	            this.tint.setColor(settings.tint);
+	            if (settings.tint instanceof Color) {
+	                this.tint.copy(settings.tint);
+	            } else {
+	                // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+	                this.tint.parseCSS(settings.tint);
+	            }
 	        }
 
 	        // set the sprite name if specified
@@ -30699,8 +30787,6 @@
 
 	        /**
 	         * The WebGL version used by this renderer (1 or 2)
-	         * @name WebGLVersion
-	         * @memberof WebGLRenderer#
 	         * @type {number}
 	         * @default 1
 	         * @readonly
@@ -30709,8 +30795,6 @@
 
 	        /**
 	         * The vendor string of the underlying graphics driver.
-	         * @name GPUVendor
-	         * @memberof WebGLRenderer#
 	         * @type {string}
 	         * @default null
 	         * @readonly
@@ -30719,8 +30803,6 @@
 
 	        /**
 	         * The renderer string of the underlying graphics driver.
-	         * @name GPURenderer
-	         * @memberof WebGLRenderer#
 	         * @type {string}
 	         * @default null
 	         * @readonly
@@ -30730,15 +30812,12 @@
 	        /**
 	         * The WebGL context
 	         * @name gl
-	         * @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
-	         * @name maxTextures
-	         * @memberof WebGLRenderer#
 	         * @type {number}
 	         * @readonly
 	         */
@@ -30766,25 +30845,19 @@
 
 	        /**
 	         * The current transformation matrix used for transformations on the overall scene
-	         * @name currentTransform
 	         * @type {Matrix2d}
-	         * @memberof WebGLRenderer#
 	         */
 	        this.currentTransform = new Matrix2d();
 
 	        /**
 	         * The current compositor used by the renderer
-	         * @name currentCompositor
 	         * @type {WebGLCompositor}
-	         * @memberof WebGLRenderer#
 	         */
 	        this.currentCompositor = null;
 
 	        /**
 	         * The list of active compositors
-	         * @name compositors
 	         * @type {Map<WebGLCompositor>}
-	         * @memberof WebGLRenderer#
 	         */
 	        this.compositors = new Map();
 
@@ -30815,13 +30888,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);
@@ -30834,8 +30907,6 @@
 
 	    /**
 	     * Reset context state
-	     * @name reset
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.reset = function reset () {
 	        var this$1$1 = this;
@@ -30860,9 +30931,7 @@
 
 	    /**
 	     * set the active compositor for this renderer
-	     * @name setCompositor
 	     * @param {WebGLCompositor|string} compositor a compositor name or instance
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.setCompositor = function setCompositor (compositor) {
 	        if ( compositor === void 0 ) compositor = "default";
@@ -30888,8 +30957,6 @@
 
 	    /**
 	     * Reset the gl transform to identity
-	     * @name resetTransform
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.resetTransform = function resetTransform () {
 	        this.currentTransform.identity();
@@ -30900,7 +30967,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;
 
@@ -30934,8 +31001,6 @@
 
 	    /**
 	     * Create a pattern with the specified repetition
-	     * @name createPattern
-	     * @memberof WebGLRenderer
 	     * @param {Image} image Source image
 	     * @param {string} repeat Define how the pattern should be repeated
 	     * @returns {TextureAtlas}
@@ -30966,8 +31031,6 @@
 
 	    /**
 	     * Flush the compositor to the frame buffer
-	     * @name flush
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.flush = function flush () {
 	        this.currentCompositor.flush();
@@ -30975,8 +31038,6 @@
 
 	    /**
 	     * set/change the current projection matrix (WebGL only)
-	     * @name setProjection
-	     * @memberof WebGLRenderer
 	     * @param {Matrix3d} matrix
 	     */
 	    WebGLRenderer.prototype.setProjection = function setProjection (matrix) {
@@ -30984,10 +31045,15 @@
 	        this.currentCompositor.setProjection(matrix);
 	    };
 
+	    /**
+	     * prepare the framebuffer for drawing a new frame
+	     */
+	    WebGLRenderer.prototype.clear = function clear () {
+	        this.currentCompositor.clear(this.settings.transparent ? 0.0 : 1.0);
+	    };
+
 	    /**
 	     * Clears the gl context with the given color.
-	     * @name clearColor
-	     * @memberof WebGLRenderer
 	     * @param {Color|string} [color="#000000"] CSS color.
 	     * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
 	     */
@@ -31007,17 +31073,10 @@
 	        }
 	        // clear gl context with the specified color
 	        this.currentCompositor.clearColor(glArray[0], glArray[1], glArray[2], (opaque === true) ? 1.0 : glArray[3]);
-	        this.currentCompositor.clear();
-
-	        // restore default clear Color black
-	        this.currentCompositor.clearColor(0.0, 0.0, 0.0, 0.0);
-
 	    };
 
 	    /**
 	     * Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
-	     * @name clearRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x x axis of the coordinate for the rectangle starting point.
 	     * @param {number} y y axis of the coordinate for the rectangle starting point.
 	     * @param {number} width The rectangle's width.
@@ -31051,7 +31110,7 @@
 	            uvs[1],
 	            uvs[2],
 	            uvs[3],
-	            this.currentTint.toUint32()
+	            this.currentTint.toUint32(this.getGlobalAlpha())
 	        );
 
 	        // Clear font context2D
@@ -31065,8 +31124,6 @@
 
 	    /**
 	     * Draw an image to the gl context
-	     * @name drawImage
-	     * @memberof WebGLRenderer
 	     * @param {Image} image An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), specifically, a CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.
 	     * @param {number} sx The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
 	     * @param {number} sy The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
@@ -31112,13 +31169,11 @@
 
 	        var texture = this.cache.get(image);
 	        var uvs = texture.getUVs(sx + "," + sy + "," + sw + "," + sh);
-	        this.currentCompositor.addQuad(texture, dx, dy, dw, dh, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32());
+	        this.currentCompositor.addQuad(texture, dx, dy, dw, dh, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32(this.getGlobalAlpha()));
 	    };
 
 	    /**
 	     * Draw a pattern within the given rectangle.
-	     * @name drawPattern
-	     * @memberof WebGLRenderer
 	     * @param {TextureAtlas} pattern Pattern object
 	     * @param {number} x
 	     * @param {number} y
@@ -31128,29 +31183,18 @@
 	     */
 	    WebGLRenderer.prototype.drawPattern = function drawPattern (pattern, x, y, width, height) {
 	        var uvs = pattern.getUVs("0,0," + width + "," + height);
-	        this.currentCompositor.addQuad(pattern, x, y, width, height, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32());
+	        this.currentCompositor.addQuad(pattern, x, y, width, height, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32(this.getGlobalAlpha()));
 	    };
 
-
 	    /**
-	     * 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
-	     * @memberof WebGLRenderer
+	     * Returns the WebGL Context object of the given canvas element
 	     * @param {HTMLCanvasElement} canvas
-	     * @param {boolean} [transparent=true] use false to disable transparency
+	     * @param {boolean} [transparent=false] use true to enable transparency
 	     * @returns {WebGLRenderingContext}
 	     */
 	    WebGLRenderer.prototype.getContextGL = function getContextGL (canvas, transparent) {
+	        if ( transparent === void 0 ) transparent = false;
+
 	        if (typeof canvas === "undefined" || canvas === null) {
 	            throw new Error(
 	                "You must pass a canvas element in order to create " +
@@ -31158,17 +31202,13 @@
 	            );
 	        }
 
-	        if (typeof transparent !== "boolean") {
-	            transparent = true;
-	        }
-
 	        var attr = {
 	            alpha : transparent,
 	            antialias : this.settings.antiAlias,
 	            depth : false,
 	            stencil: true,
 	            preserveDrawingBuffer : false,
-	            premultipliedAlpha: transparent,
+	            premultipliedAlpha: transparent ? this.settings.premultipliedAlpha : false,
 	            powerPreference: this.settings.powerPreference,
 	            failIfMajorPerformanceCaveat : this.settings.failIfMajorPerformanceCaveat
 	        };
@@ -31201,8 +31241,6 @@
 	    /**
 	     * Returns the WebGLContext instance for the renderer
 	     * return a reference to the system 2d Context
-	     * @name getContext
-	     * @memberof WebGLRenderer
 	     * @returns {WebGLRenderingContext}
 	     */
 	    WebGLRenderer.prototype.getContext = function getContext () {
@@ -31220,9 +31258,7 @@
 	     * <img src="images/lighter-blendmode.png" width="510"/> <br>
 	     * - "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) <br>
 	     * <img src="images/screen-blendmode.png" width="510"/> <br>
-	     * @name setBlendMode
 	     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-	     * @memberof WebGLRenderer
 	     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter", "additive", "screen"
 	     * @param {WebGLRenderingContext} [gl]
 	     */
@@ -31274,8 +31310,6 @@
 
 	    /**
 	     * restores the canvas context
-	     * @name restore
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.restore = function restore () {
 	        // do nothing if there is no saved states
@@ -31302,15 +31336,13 @@
 	            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;
 	        }
 	    };
 
 	    /**
 	     * saves the canvas context
-	     * @name save
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.save = function save () {
 	        this._colorStack.push(this.currentColor.clone());
@@ -31326,8 +31358,6 @@
 
 	    /**
 	     * rotates the uniform matrix
-	     * @name rotate
-	     * @memberof WebGLRenderer
 	     * @param {number} angle in radians
 	     */
 	    WebGLRenderer.prototype.rotate = function rotate (angle) {
@@ -31336,8 +31366,6 @@
 
 	    /**
 	     * scales the uniform matrix
-	     * @name scale
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     */
@@ -31356,8 +31384,6 @@
 
 	    /**
 	     * Set the global alpha
-	     * @name setGlobalAlpha
-	     * @memberof WebGLRenderer
 	     * @param {number} alpha 0.0 to 1.0 values accepted.
 	     */
 	    WebGLRenderer.prototype.setGlobalAlpha = function setGlobalAlpha (alpha) {
@@ -31366,8 +31392,6 @@
 
 	    /**
 	     * Return the global alpha
-	     * @name getGlobalAlpha
-	     * @memberof WebGLRenderer
 	     * @returns {number} global alpha value
 	     */
 	    WebGLRenderer.prototype.getGlobalAlpha = function getGlobalAlpha () {
@@ -31377,8 +31401,6 @@
 	    /**
 	     * Set the current fill & stroke style color.
 	     * By default, or upon reset, the value is set to #000000.
-	     * @name setColor
-	     * @memberof WebGLRenderer
 	     * @param {Color|string} color css color string.
 	     */
 	    WebGLRenderer.prototype.setColor = function setColor (color) {
@@ -31389,18 +31411,14 @@
 
 	    /**
 	     * Set the line width
-	     * @name setLineWidth
-	     * @memberof WebGLRenderer
 	     * @param {number} width Line width
 	     */
 	    WebGLRenderer.prototype.setLineWidth = function setLineWidth (width) {
-	        this.getScreenContext().lineWidth(width);
+	        this.getContext().lineWidth(width);
 	    };
 
 	    /**
 	     * Stroke an arc at the specified coordinates with given radius, start and end points
-	     * @name strokeArc
-	     * @memberof WebGLRenderer
 	     * @param {number} x arc center point x-axis
 	     * @param {number} y arc center point y-axis
 	     * @param {number} radius
@@ -31429,8 +31447,6 @@
 
 	    /**
 	     * Fill an arc at the specified coordinates with given radius, start and end points
-	     * @name fillArc
-	     * @memberof WebGLRenderer
 	     * @param {number} x arc center point x-axis
 	     * @param {number} y arc center point y-axis
 	     * @param {number} radius
@@ -31446,8 +31462,6 @@
 
 	    /**
 	     * Stroke an ellipse at the specified coordinates with given radius
-	     * @name strokeEllipse
-	     * @memberof WebGLRenderer
 	     * @param {number} x ellipse center point x-axis
 	     * @param {number} y ellipse center point y-axis
 	     * @param {number} w horizontal radius of the ellipse
@@ -31473,8 +31487,6 @@
 
 	    /**
 	     * Fill an ellipse at the specified coordinates with given radius
-	     * @name fillEllipse
-	     * @memberof WebGLRenderer
 	     * @param {number} x ellipse center point x-axis
 	     * @param {number} y ellipse center point y-axis
 	     * @param {number} w horizontal radius of the ellipse
@@ -31486,8 +31498,6 @@
 
 	    /**
 	     * Stroke a line of the given two points
-	     * @name strokeLine
-	     * @memberof WebGLRenderer
 	     * @param {number} startX the start x coordinate
 	     * @param {number} startY the start y coordinate
 	     * @param {number} endX the end x coordinate
@@ -31507,8 +31517,6 @@
 
 	    /**
 	     * Fill a line of the given two points
-	     * @name fillLine
-	     * @memberof WebGLRenderer
 	     * @param {number} startX the start x coordinate
 	     * @param {number} startY the start y coordinate
 	     * @param {number} endX the end x coordinate
@@ -31520,8 +31528,6 @@
 
 	    /**
 	     * Stroke a me.Polygon on the screen with a specified color
-	     * @name strokePolygon
-	     * @memberof WebGLRenderer
 	     * @param {Polygon} poly the shape to draw
 	     * @param {boolean} [fill=false] also fill the shape with the current color if true
 	     */
@@ -31553,8 +31559,6 @@
 
 	    /**
 	     * Fill a me.Polygon on the screen
-	     * @name fillPolygon
-	     * @memberof WebGLRenderer
 	     * @param {Polygon} poly the shape to draw
 	     */
 	    WebGLRenderer.prototype.fillPolygon = function fillPolygon (poly) {
@@ -31563,8 +31567,6 @@
 
 	    /**
 	     * Draw a stroke rectangle at the specified coordinates
-	     * @name strokeRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     * @param {number} width
@@ -31589,8 +31591,6 @@
 
 	    /**
 	     * Draw a filled rectangle at the specified coordinates
-	     * @name fillRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     * @param {number} width
@@ -31602,8 +31602,6 @@
 
 	    /**
 	     * Stroke a rounded rectangle at the specified coordinates
-	     * @name strokeRoundRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     * @param {number} width
@@ -31630,8 +31628,6 @@
 
 	    /**
 	     * Draw a rounded filled rectangle at the specified coordinates
-	     * @name fillRoundRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     * @param {number} width
@@ -31642,11 +31638,29 @@
 	        this.strokeRoundRect(x, y, width, height, radius, true);
 	    };
 
+	    /**
+	     * Stroke a Point at the specified coordinates
+	     * @param {number} x
+	     * @param {number} y
+	     */
+	    WebGLRenderer.prototype.strokePoint = function strokePoint (x, y) {
+	        this.strokeLine(x, y, x + 1, y + 1);
+	    };
+
+	    /**
+	     * Draw a a point at the specified coordinates
+	     * @param {number} x
+	     * @param {number} y
+	     * @param {number} width
+	     * @param {number} height
+	     */
+	    WebGLRenderer.prototype.fillPoint = function fillPoint (x, y) {
+	        this.strokePoint(x, y);
+	    };
+
 	    /**
 	     * Reset (overrides) the renderer transformation matrix to the
 	     * identity one, and then apply the given transformation matrix.
-	     * @name setTransform
-	     * @memberof WebGLRenderer
 	     * @param {Matrix2d} mat2d Matrix to transform by
 	     */
 	    WebGLRenderer.prototype.setTransform = function setTransform (mat2d) {
@@ -31656,8 +31670,6 @@
 
 	    /**
 	     * Multiply given matrix into the renderer tranformation matrix
-	     * @name transform
-	     * @memberof WebGLRenderer
 	     * @param {Matrix2d} mat2d Matrix to transform by
 	     */
 	    WebGLRenderer.prototype.transform = function transform (mat2d) {
@@ -31673,8 +31685,6 @@
 
 	    /**
 	     * Translates the uniform matrix by the given coordinates
-	     * @name translate
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     */
@@ -31695,15 +31705,13 @@
 	     * You can however save the current region using the save(),
 	     * and restore it (with the restore() method) any time in the future.
 	     * (<u>this is an experimental feature !</u>)
-	     * @name clipRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     * @param {number} width
 	     * @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) {
@@ -31742,8 +31750,6 @@
 	     * A mask limits rendering elements to the shape and position of the given mask object.
 	     * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
 	     * Mask are not preserved through renderer context save and restore.
-	     * @name setMask
-	     * @memberof WebGLRenderer
 	     * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] a shape defining the mask to be applied
 	     * @param {boolean} [invert=false] either the given shape should define what is visible (default) or the opposite
 	     */
@@ -31759,8 +31765,6 @@
 	            // Enable and setup GL state to write to stencil buffer
 	            gl.enable(gl.STENCIL_TEST);
 	            gl.clear(gl.STENCIL_BUFFER_BIT);
-
-
 	        }
 
 	        this.maskLevel++;
@@ -31789,9 +31793,7 @@
 
 	    /**
 	     * disable (remove) the rendering mask set through setMask.
-	     * @name clearMask
 	     * @see WebGLRenderer#setMask
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.clearMask = function clearMask () {
 	        if (this.maskLevel > 0) {
@@ -31818,11 +31820,11 @@
 	var settings = {
 	    parent : undefined,
 	    renderer : 2, // AUTO
-	    doubleBuffering : false,
 	    autoScale : false,
 	    scale : 1.0,
-	    scaleMethod : "fit",
+	    scaleMethod : "manual",
 	    transparent : false,
+	    premultipliedAlpha: true,
 	    blendMode : "normal",
 	    antiAlias : false,
 	    failIfMajorPerformanceCaveat : true,
@@ -31862,7 +31864,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 +31918,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 +31997,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 +32011,7 @@
 	 *     parent : "screen",
 	 *     renderer : me.video.AUTO,
 	 *     scale : "auto",
-	 *     scaleMethod : "fit",
-	 *     doubleBuffering : true
+	 *     scaleMethod : "fit"
 	 * });
 	 */
 	function init(width, height, options) {
@@ -32024,7 +32027,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 +32046,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 +32132,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 +32228,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 +32989,10 @@
 	     * this can be overridden by the plugin
 	     * @public
 	     * @type {string}
-	     * @default "13.0.0"
+	     * @default "13.2.0"
 	     * @name plugin.Base#version
 	     */
-	    this.version = "13.0.0";
+	    this.version = "13.2.0";
 	};
 
 	/**
@@ -33993,7 +33992,8 @@
 	var defaultAttributes = {
 	    offscreenCanvas : false,
 	    willReadFrequently : false,
-	    antiAlias : false
+	    antiAlias : false,
+	    context: "2d"
 	};
 
 	/**
@@ -34222,7 +34222,7 @@
 	        this.width = this.height = 0;
 
 	        for (var i = 0; i < strings.length; i++) {
-	            this.width = Math.max(this.lineWidth(strings[i].trimRight(), context), this.width);
+	            this.width = Math.max(this.lineWidth(strings[i].trimEnd(), context), this.width);
 	            this.height += this.lineHeight();
 	        }
 	        this.width = Math.ceil(this.width);
@@ -34696,7 +34696,7 @@
 	        setContextStyle(context, this, stroke);
 
 	        for (var i = 0; i < text.length; i++) {
-	            var string = text[i].trimRight();
+	            var string = text[i].trimEnd();
 	            // draw the string
 	            context[stroke ? "strokeText" : "fillText"](string, x, y);
 	            // add leading space
@@ -34814,12 +34814,7 @@
 
 	        // apply given fillstyle
 	        if (typeof settings.fillStyle !== "undefined") {
-	            if (settings.fillStyle instanceof Color) {
-	                this.fillStyle.setColor(settings.fillStyle);
-	            } else {
-	                // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
-	                this.fillStyle.parseCSS(settings.fillStyle);
-	            }
+	            this.fillStyle = settings.fillStyle;
 	        }
 
 	        // update anchorPoint if provided
@@ -34900,7 +34895,12 @@
 	        return this.tint;
 	    };
 	    prototypeAccessors.fillStyle.set = function (value) {
-	        this.tint = value;
+	        if (value instanceof Color) {
+	            this.tint.copy(value);
+	        } else {
+	            // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+	            this.tint.parseCSS(value);
+	        }
 	    };
 
 	    /**
@@ -34959,7 +34959,7 @@
 
 	        for (var i = 0; i < this._text.length; i++) {
 	            x = lX;
-	            var string = this._text[i].trimRight();
+	            var string = this._text[i].trimEnd();
 	            // adjust x pos based on alignment value
 	            var stringWidth = this.metrics.lineWidth(string);
 	            switch (this.textAlign) {
@@ -35663,7 +35663,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 +35675,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 +35857,8 @@
 	        );
 	    };
 
+	    Object.defineProperties( NineSliceSprite.prototype, prototypeAccessors );
+
 	    return NineSliceSprite;
 	}(Sprite));
 
@@ -37579,7 +37609,6 @@
 	    }
 	});
 
-
 	/**
 	 * @classdesc
 	 * Used to make a game entity draggable
@@ -37620,6 +37649,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 +37686,7 @@
 	 * @name version
 	 * @type {string}
 	 */
-	var version = "13.0.0";
+	var version = "13.2.0";
 
 
 	/**
@@ -37689,6 +37745,7 @@
 	    pool.register("me.RoundRect", RoundRect, true);
 	    pool.register("me.Polygon", Polygon, true);
 	    pool.register("me.Line", Line, true);
+	    pool.register("me.Point", Point, true);
 	    pool.register("me.Ellipse", Ellipse, true);
 	    pool.register("me.Bounds", Bounds, true);
 
@@ -37718,6 +37775,7 @@
 	    pool.register("RoundRect", RoundRect, true);
 	    pool.register("Polygon", Polygon, true);
 	    pool.register("Line", Line, true);
+	    pool.register("Point", Point, true);
 	    pool.register("Ellipse", Ellipse, true);
 	    pool.register("Bounds", Bounds, true);
 	    pool.register("CanvasTexture", CanvasTexture, true);
@@ -37771,6 +37829,7 @@
 	exports.Particle = Particle;
 	exports.ParticleEmitter = ParticleEmitter;
 	exports.ParticleEmitterSettings = ParticleEmitterSettings;
+	exports.Point = Point;
 	exports.Pointer = Pointer;
 	exports.Polygon = Polygon;
 	exports.QuadTree = QuadTree;