melonjs 13.1.0 → 13.2.1

package/dist/melonjs.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v13.1.0
+ * melonJS Game Engine - v13.2.1
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -2999,7 +2999,7 @@
 	 * @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;
@@ -6543,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);
 
@@ -6602,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);
@@ -6611,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
 	 */
@@ -6627,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
@@ -6649,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
@@ -6672,8 +6646,6 @@
 
 	/**
 	 * destroy this shader objects resources (program, attributes, uniforms)
-	 * @name destroy
-	 * @memberof GLShader
 	 */
 	GLShader.prototype.destroy = function destroy () {
 	    this.uniforms = null;
@@ -6870,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;
 
@@ -6968,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
@@ -7015,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
@@ -7028,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
@@ -7076,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
 	 */
@@ -7088,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
 	 */
@@ -7099,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
 	 */
@@ -7126,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
@@ -7174,8 +7125,6 @@
 
 	/**
 	 * set/change the current projection matrix
-	 * @name setProjection
-	 * @memberof WebGLCompositor
 	 * @param {Matrix3d} matrix
 	 */
 	WebGLCompositor.prototype.setProjection = function setProjection (matrix) {
@@ -7184,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) {
@@ -7201,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
@@ -7258,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;
@@ -7286,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
@@ -7316,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: {}};
@@ -9632,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);
 	};
 
 	/**
@@ -10133,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
@@ -10141,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();
 
@@ -10212,22 +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
-	 * @name flush
-	 * @memberof Renderer
 	 */
 	Renderer.prototype.flush = function flush () {};
 
 	/**
 	 * Reset context state
-	 * @name reset
-	 * @memberof Renderer
 	 */
 	Renderer.prototype.reset = function reset () {
 	    this.resetTransform();
@@ -10244,8 +10270,6 @@
 
 	/**
 	 * return a reference to the canvas which this renderer draws to
-	 * @name getCanvas
-	 * @memberof Renderer
 	 * @returns {HTMLCanvasElement}
 	 */
 	Renderer.prototype.getCanvas = function getCanvas () {
@@ -10255,8 +10279,6 @@
 
 	/**
 	 * return a reference to this renderer canvas corresponding Context
-	 * @name getContext
-	 * @memberof Renderer
 	 * @returns {CanvasRenderingContext2D|WebGLRenderingContext}
 	 */
 	Renderer.prototype.getContext = function getContext () {
@@ -10265,8 +10287,6 @@
 
 	/**
 	 * returns the current blend mode for this renderer
-	 * @name getBlendMode
-	 * @memberof Renderer
 	 * @returns {string} blend mode
 	 */
 	Renderer.prototype.getBlendMode = function getBlendMode () {
@@ -10276,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}
@@ -10313,8 +10331,6 @@
 
 	/**
 	 * return the width of the system Canvas
-	 * @name getWidth
-	 * @memberof Renderer
 	 * @returns {number}
 	 */
 	Renderer.prototype.getWidth = function getWidth () {
@@ -10323,8 +10339,6 @@
 
 	/**
 	 * return the height of the system Canvas
-	 * @name getHeight
-	 * @memberof Renderer
 	 * @returns {number} height of the system Canvas
 	 */
 	Renderer.prototype.getHeight = function getHeight () {
@@ -10333,8 +10347,6 @@
 
 	/**
 	 * get the current fill & stroke style color.
-	 * @name getColor
-	 * @memberof Renderer
 	 * @returns {Color} current global color
 	 */
 	Renderer.prototype.getColor = function getColor () {
@@ -10343,8 +10355,6 @@
 
 	/**
 	 * return the current global alpha
-	 * @name globalAlpha
-	 * @memberof Renderer
 	 * @returns {number}
 	 */
 	Renderer.prototype.globalAlpha = function globalAlpha () {
@@ -10353,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
 	 */
@@ -10368,8 +10376,6 @@
 
 	/**
 	 * resizes the system canvas
-	 * @name resize
-	 * @memberof Renderer
 	 * @param {number} width new width of the canvas
 	 * @param {number} height new height of the canvas
 	 */
@@ -10389,8 +10395,6 @@
 
 	/**
 	 * enable/disable image smoothing (scaling interpolation) for the given context
-	 * @name setAntiAlias
-	 * @memberof Renderer
 	 * @param {CanvasRenderingContext2D} context
 	 * @param {boolean} [enable=false]
 	 */
@@ -10418,8 +10422,6 @@
 
 	/**
 	 * set/change the current projection matrix (WebGL only)
-	 * @name setProjection
-	 * @memberof Renderer
 	 * @param {Matrix3d} matrix
 	 */
 	Renderer.prototype.setProjection = function setProjection (matrix) {
@@ -10428,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
 	 */
@@ -10456,6 +10456,10 @@
 	        );
 	        return;
 	    }
+	    if (shape instanceof Point) {
+	        this.strokePoint(shape.x, shape.y);
+	        return;
+	    }
 	    throw new Error("Invalid geometry for fill/stroke");
 	};
 
@@ -10471,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
@@ -10501,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
 	 */
@@ -10511,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
 	 */
@@ -10534,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
@@ -18092,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 {
@@ -18144,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");
 	        }
@@ -18157,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) {
@@ -18182,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;
 
@@ -18232,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 });
 	        }
@@ -18244,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 () {
@@ -18268,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, [
@@ -18310,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 = "";
 
@@ -18354,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});
 	        }
@@ -18363,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;
 
@@ -18386,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;
@@ -18425,8 +18375,6 @@
 	     * @public
 	     * @see Renderable#flipX
 	     * @type {boolean}
-	     * @name isFlippedX
-	     * @memberof Renderable
 	     */
 	    prototypeAccessors.isFlippedX.get = function () {
 	        return this._flip.x === true;
@@ -18437,8 +18385,6 @@
 	     * @public
 	     * @see Renderable#flipY
 	     * @type {boolean}
-	     * @name isFlippedY
-	     * @memberof Renderable
 	     */
 	    prototypeAccessors.isFlippedY.get = function () {
 	        return this._flip.y === true;
@@ -18446,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 () {
@@ -18466,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 () {
@@ -18476,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) {
@@ -18494,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
 	     */
@@ -18510,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
 	     */
@@ -18525,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
@@ -18541,8 +18475,6 @@
 
 	    /**
 	     * return the angle to the specified target
-	     * @name angleTo
-	     * @memberof Renderable
 	     * @param {Renderable|Vector2d|Vector3d} target
 	     * @returns {number} angle in radians
 	     */
@@ -18564,8 +18496,6 @@
 
 	    /**
 	     * return the distance to the specified target
-	     * @name distanceTo
-	     * @memberof Renderable
 	     * @param {Renderable|Vector2d|Vector3d} target
 	     * @returns {number} distance
 	     */
@@ -18587,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
 	     */
@@ -18610,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
@@ -18631,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
@@ -18646,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
 	     */
@@ -18657,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
 	     */
@@ -18672,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 () {
@@ -18685,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();
@@ -18717,8 +18631,6 @@
 
 	     /**
 	      * return the renderable absolute position in the game world
-	      * @name getAbsolutePosition
-	      * @memberof Renderable
 	      * @returns {Vector2d}
 	      */
 	      Renderable.prototype.getAbsolutePosition = function getAbsolutePosition () {
@@ -18736,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
 	     */
@@ -18750,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) {
@@ -18806,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
 	     */
@@ -18818,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) {
@@ -18844,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)
@@ -18897,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;
@@ -18920,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 !
@@ -19790,7 +19697,7 @@
 	        /**
 	         * The collision shapes of the body
 	         * @ignore
-	         * @type {Polygon[]|Line[]|Ellipse[]}
+	         * @type {Polygon[]|Line[]|Ellipse[]|Point|Point[]}
 	         */
 	        this.shapes = [];
 	    }
@@ -19984,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
@@ -20019,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);
@@ -24548,8 +24461,10 @@
 	     * @memberof CanvasRenderer
 	     */
 	    CanvasRenderer.prototype.clear = function clear () {
-	        if (this.settings.transparent) {
-	            this.clearColor("rgba(0,0,0,0)", true);
+	        if (this.settings.transparent === false) {
+	            var canvas = this.getCanvas();
+	            var context = this.getContext();
+	            context.clearRect(0, 0, canvas.width, canvas.height);
 	        }
 	    };
 
@@ -24562,13 +24477,15 @@
 	     */
 	    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();
-	        context.globalCompositeOperation = opaque ? "copy" : "source-over";
+	        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();
@@ -24940,6 +24857,30 @@
 	        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);
+	    };
+
+	    /**
+	     * Draw a a point at the specified coordinates
+	     * @name fillPoint
+	     * @memberof CanvasRenderer
+	     * @param {number} x
+	     * @param {number} y
+	     * @param {number} width
+	     * @param {number} height
+	     */
+	    CanvasRenderer.prototype.fillPoint = function fillPoint (x, y) {
+	        this.strokePoint(x, y);
+	    };
+
 	    /**
 	     * return a reference to the font 2d Context
 	     * @ignore
@@ -27146,7 +27087,7 @@
 	    this.type = settings.type;
 
 	    /**
-	     * the åobject class
+	     * the object class
 	     * @public
 	     * @type {string}
 	     * @name class
@@ -27209,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
@@ -27232,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;
 	        }
@@ -27311,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);
@@ -27321,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;
@@ -27356,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();
+	            }
 	        }
 	    }
 
@@ -29302,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
@@ -30829,8 +30787,6 @@
 
 	        /**
 	         * The WebGL version used by this renderer (1 or 2)
-	         * @name WebGLVersion
-	         * @memberof WebGLRenderer#
 	         * @type {number}
 	         * @default 1
 	         * @readonly
@@ -30839,8 +30795,6 @@
 
 	        /**
 	         * The vendor string of the underlying graphics driver.
-	         * @name GPUVendor
-	         * @memberof WebGLRenderer#
 	         * @type {string}
 	         * @default null
 	         * @readonly
@@ -30849,8 +30803,6 @@
 
 	        /**
 	         * The renderer string of the underlying graphics driver.
-	         * @name GPURenderer
-	         * @memberof WebGLRenderer#
 	         * @type {string}
 	         * @default null
 	         * @readonly
@@ -30860,15 +30812,12 @@
 	        /**
 	         * The WebGL context
 	         * @name gl
-	         * @memberof WebGLRenderer
 	         * @type {WebGLRenderingContext}
 	         */
 	        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
 	         */
@@ -30896,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();
 
@@ -30964,8 +30907,6 @@
 
 	    /**
 	     * Reset context state
-	     * @name reset
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.reset = function reset () {
 	        var this$1$1 = this;
@@ -30990,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";
@@ -31018,8 +30957,6 @@
 
 	    /**
 	     * Reset the gl transform to identity
-	     * @name resetTransform
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.resetTransform = function resetTransform () {
 	        this.currentTransform.identity();
@@ -31064,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}
@@ -31096,8 +31031,6 @@
 
 	    /**
 	     * Flush the compositor to the frame buffer
-	     * @name flush
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.flush = function flush () {
 	        this.currentCompositor.flush();
@@ -31105,8 +31038,6 @@
 
 	    /**
 	     * set/change the current projection matrix (WebGL only)
-	     * @name setProjection
-	     * @memberof WebGLRenderer
 	     * @param {Matrix3d} matrix
 	     */
 	    WebGLRenderer.prototype.setProjection = function setProjection (matrix) {
@@ -31114,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]
 	     */
@@ -31137,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.
@@ -31181,7 +31110,7 @@
 	            uvs[1],
 	            uvs[2],
 	            uvs[3],
-	            this.currentTint.toUint32()
+	            this.currentTint.toUint32(this.getGlobalAlpha())
 	        );
 
 	        // Clear font context2D
@@ -31195,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.
@@ -31242,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
@@ -31258,18 +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()));
 	    };
 
 	    /**
-	     * 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 " +
@@ -31277,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
 	        };
@@ -31320,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 () {
@@ -31339,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]
 	     */
@@ -31393,8 +31310,6 @@
 
 	    /**
 	     * restores the canvas context
-	     * @name restore
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.restore = function restore () {
 	        // do nothing if there is no saved states
@@ -31428,8 +31343,6 @@
 
 	    /**
 	     * saves the canvas context
-	     * @name save
-	     * @memberof WebGLRenderer
 	     */
 	    WebGLRenderer.prototype.save = function save () {
 	        this._colorStack.push(this.currentColor.clone());
@@ -31445,8 +31358,6 @@
 
 	    /**
 	     * rotates the uniform matrix
-	     * @name rotate
-	     * @memberof WebGLRenderer
 	     * @param {number} angle in radians
 	     */
 	    WebGLRenderer.prototype.rotate = function rotate (angle) {
@@ -31455,8 +31366,6 @@
 
 	    /**
 	     * scales the uniform matrix
-	     * @name scale
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     */
@@ -31475,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) {
@@ -31485,8 +31392,6 @@
 
 	    /**
 	     * Return the global alpha
-	     * @name getGlobalAlpha
-	     * @memberof WebGLRenderer
 	     * @returns {number} global alpha value
 	     */
 	    WebGLRenderer.prototype.getGlobalAlpha = function getGlobalAlpha () {
@@ -31496,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) {
@@ -31508,8 +31411,6 @@
 
 	    /**
 	     * Set the line width
-	     * @name setLineWidth
-	     * @memberof WebGLRenderer
 	     * @param {number} width Line width
 	     */
 	    WebGLRenderer.prototype.setLineWidth = function setLineWidth (width) {
@@ -31518,8 +31419,6 @@
 
 	    /**
 	     * 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
@@ -31548,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
@@ -31565,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
@@ -31592,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
@@ -31605,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
@@ -31626,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
@@ -31639,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
 	     */
@@ -31672,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) {
@@ -31682,8 +31567,6 @@
 
 	    /**
 	     * Draw a stroke rectangle at the specified coordinates
-	     * @name strokeRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     * @param {number} width
@@ -31708,8 +31591,6 @@
 
 	    /**
 	     * Draw a filled rectangle at the specified coordinates
-	     * @name fillRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     * @param {number} width
@@ -31721,8 +31602,6 @@
 
 	    /**
 	     * Stroke a rounded rectangle at the specified coordinates
-	     * @name strokeRoundRect
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     * @param {number} width
@@ -31749,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
@@ -31761,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) {
@@ -31775,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) {
@@ -31792,8 +31685,6 @@
 
 	    /**
 	     * Translates the uniform matrix by the given coordinates
-	     * @name translate
-	     * @memberof WebGLRenderer
 	     * @param {number} x
 	     * @param {number} y
 	     */
@@ -31814,8 +31705,6 @@
 	     * 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
@@ -31861,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
 	     */
@@ -31878,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++;
@@ -31908,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) {
@@ -31941,6 +31824,7 @@
 	    scale : 1.0,
 	    scaleMethod : "manual",
 	    transparent : false,
+	    premultipliedAlpha: true,
 	    blendMode : "normal",
 	    antiAlias : false,
 	    failIfMajorPerformanceCaveat : true,
@@ -33105,10 +32989,10 @@
 	     * this can be overridden by the plugin
 	     * @public
 	     * @type {string}
-	     * @default "13.1.0"
+	     * @default "13.2.1"
 	     * @name plugin.Base#version
 	     */
-	    this.version = "13.1.0";
+	    this.version = "13.2.1";
 	};
 
 	/**
@@ -34338,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);
@@ -34812,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
@@ -34930,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
@@ -35016,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);
+	        }
 	    };
 
 	    /**
@@ -35075,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) {
@@ -37802,7 +37686,7 @@
 	 * @name version
 	 * @type {string}
 	 */
-	var version = "13.1.0";
+	var version = "13.2.1";
 
 
 	/**
@@ -37861,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);
 
@@ -37890,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);
@@ -37943,6 +37829,7 @@
 	exports.Particle = Particle;
 	exports.ParticleEmitter = ParticleEmitter;
 	exports.ParticleEmitterSettings = ParticleEmitterSettings;
+	exports.Point = Point;
 	exports.Pointer = Pointer;
 	exports.Polygon = Polygon;
 	exports.QuadTree = QuadTree;