melonjs 13.1.1 → 13.2.0

package/dist/melonjs.module.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v13.1.1
+ * melonJS Game Engine - v13.2.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -2971,7 +2971,7 @@ class Color {
      * @param {number} [alpha=1.0] alpha value [0.0 .. 1.0]
      * @returns {number}
      */
-    toUint32(alpha = this.alpha) {
+    toUint32(alpha = 1.0) {
         var ur = this.r & 0xff;
         var ug = this.g & 0xff;
         var ub = this.b & 0xff;
@@ -6524,56 +6524,38 @@ class GLShader {
 
         /**
          * 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);
 
@@ -6583,8 +6565,6 @@ class GLShader {
 
     /**
      * Installs this shader program as part of current rendering state
-     * @name bind
-     * @memberof GLShader
      */
     bind() {
         this.gl.useProgram(this.program);
@@ -6592,8 +6572,6 @@ class GLShader {
 
     /**
      * 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
      */
@@ -6608,8 +6586,6 @@ class GLShader {
 
     /**
      * 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
@@ -6630,8 +6606,6 @@ class GLShader {
 
     /**
      * 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
@@ -6653,8 +6627,6 @@ class GLShader {
 
     /**
      * destroy this shader objects resources (program, attributes, uniforms)
-     * @name destroy
-     * @memberof GLShader
      */
     destroy() {
         this.uniforms = null;
@@ -6856,44 +6828,37 @@ class WebGLCompositor {
 
         /**
          * 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;
 
@@ -6954,8 +6919,6 @@ class WebGLCompositor {
 
     /**
      * 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
@@ -7001,8 +6964,6 @@ class WebGLCompositor {
 
     /**
      * 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
@@ -7014,8 +6975,6 @@ class WebGLCompositor {
 
     /**
      * 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
@@ -7058,8 +7017,6 @@ class WebGLCompositor {
 
     /**
      * delete the given WebGL texture
-     * @name bindTexture2D
-     * @memberof WebGLCompositor
      * @param {WebGLTexture} [texture] a WebGL texture to delete
      * @param {number} [unit] Texture unit to delete
      */
@@ -7070,8 +7027,6 @@ class WebGLCompositor {
 
     /**
      * 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
      */
@@ -7081,8 +7036,6 @@ class WebGLCompositor {
 
     /**
      * 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
      */
@@ -7108,8 +7061,6 @@ class WebGLCompositor {
 
     /**
      * 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
@@ -7154,8 +7105,6 @@ class WebGLCompositor {
 
     /**
      * set/change the current projection matrix
-     * @name setProjection
-     * @memberof WebGLCompositor
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -7164,9 +7113,7 @@ class WebGLCompositor {
 
     /**
      * Select the shader to use for compositing
-     * @name useShader
      * @see GLShader
-     * @memberof WebGLCompositor
      * @param {GLShader} shader a reference to a GLShader instance
      */
     useShader(shader) {
@@ -7181,8 +7128,6 @@ class WebGLCompositor {
 
     /**
      * 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
@@ -7238,7 +7183,6 @@ class WebGLCompositor {
     /**
      * Flush batched texture operations to the GPU
      * @param {number} [mode=gl.TRIANGLES] the GL drawing mode
-     * @memberof WebGLCompositor
      */
     flush(mode = this.mode) {
         var vertex = this.vertexBuffer;
@@ -7264,8 +7208,6 @@ class WebGLCompositor {
 
     /**
      * 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
@@ -7292,25 +7234,26 @@ class WebGLCompositor {
     }
 
     /**
-     * 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
      */
-    clearColor(r, g, b, a) {
-        this.gl.clearColor(r, g, b, a);
+    clear(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
      */
-    clear() {
-        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    clearColor(r = 0, g = 0, b = 0, a = 0) {
+        var gl = this.gl;
+        gl.clearColor(r, g, b, a);
+        gl.clear(gl.COLOR_BUFFER_BIT);
     }
 }
 
@@ -9619,17 +9562,18 @@ class Bounds {
      * 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)
      */
-    addPoint(v, m) {
-        if (typeof m !== "undefined") {
-            v = m.apply(v);
+    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);
     }
 
     /**
@@ -10118,6 +10062,86 @@ class Path2D {
     }
 }
 
+/**
+ * @classdesc
+ * represents a point in a 2d space
+ */
+class Point {
+    constructor(x = 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 */
+    onResetEvent(x = 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
+     */
+    set(x = 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}
+     */
+     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
+     */
+    clone() {
+        return new Point(this.x, this.y);
+    }
+}
+
 /**
  * @classdesc
  * a base renderer object
@@ -10130,7 +10154,8 @@ class Renderer {
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
      * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
-     * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
+     * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas
+     * @param {boolean} [options.premultipliedAlpha=true] in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
      * @param {boolean} [options.blendMode="normal"] the default blend mode to use ("normal", "multiply")
      * @param {boolean} [options.subPixel=false] Whether to enable subpixel rendering (performance hit when enabled)
      * @param {boolean} [options.verbose=false] Enable the verbose mode that provides additional details as to what the renderer is doing
@@ -10141,26 +10166,20 @@ class Renderer {
         /**
          * 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 +10231,16 @@ class Renderer {
 
     /**
      * prepare the framebuffer for drawing a new frame
-     * @name clear
-     * @memberof Renderer
      */
     clear() {}
 
     /**
      * render the main framebuffer on screen
-     * @name flush
-     * @memberof Renderer
      */
     flush() {}
 
     /**
      * Reset context state
-     * @name reset
-     * @memberof Renderer
      */
     reset() {
         this.resetTransform();
@@ -10244,8 +10257,6 @@ class Renderer {
 
     /**
      * return a reference to the canvas which this renderer draws to
-     * @name getCanvas
-     * @memberof Renderer
      * @returns {HTMLCanvasElement}
      */
     getCanvas() {
@@ -10255,8 +10266,6 @@ class Renderer {
 
     /**
      * return a reference to this renderer canvas corresponding Context
-     * @name getContext
-     * @memberof Renderer
      * @returns {CanvasRenderingContext2D|WebGLRenderingContext}
      */
     getContext() {
@@ -10265,8 +10274,6 @@ class Renderer {
 
     /**
      * returns the current blend mode for this renderer
-     * @name getBlendMode
-     * @memberof Renderer
      * @returns {string} blend mode
      */
     getBlendMode() {
@@ -10276,8 +10283,6 @@ class Renderer {
     /**
      * 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 +10318,6 @@ class Renderer {
 
     /**
      * return the width of the system Canvas
-     * @name getWidth
-     * @memberof Renderer
      * @returns {number}
      */
     getWidth() {
@@ -10323,8 +10326,6 @@ class Renderer {
 
     /**
      * return the height of the system Canvas
-     * @name getHeight
-     * @memberof Renderer
      * @returns {number} height of the system Canvas
      */
     getHeight() {
@@ -10333,8 +10334,6 @@ class Renderer {
 
     /**
      * get the current fill & stroke style color.
-     * @name getColor
-     * @memberof Renderer
      * @returns {Color} current global color
      */
     getColor() {
@@ -10343,8 +10342,6 @@ class Renderer {
 
     /**
      * return the current global alpha
-     * @name globalAlpha
-     * @memberof Renderer
      * @returns {number}
      */
     globalAlpha() {
@@ -10353,8 +10350,6 @@ class Renderer {
 
     /**
      * 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 +10363,6 @@ class Renderer {
 
     /**
      * 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 +10382,6 @@ class Renderer {
 
     /**
      * enable/disable image smoothing (scaling interpolation) for the given context
-     * @name setAntiAlias
-     * @memberof Renderer
      * @param {CanvasRenderingContext2D} context
      * @param {boolean} [enable=false]
      */
@@ -10418,8 +10409,6 @@ class Renderer {
 
     /**
      * set/change the current projection matrix (WebGL only)
-     * @name setProjection
-     * @memberof Renderer
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -10428,8 +10417,6 @@ class Renderer {
 
     /**
      * 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 +10443,10 @@ class Renderer {
             );
             return;
         }
+        if (shape instanceof Point) {
+            this.strokePoint(shape.x, shape.y);
+            return;
+        }
         throw new Error("Invalid geometry for fill/stroke");
     }
 
@@ -10471,8 +10462,6 @@ class Renderer {
 
     /**
      * 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 +10490,6 @@ class Renderer {
      * 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 +10498,12 @@ class Renderer {
 
     /**
      * disable (remove) the rendering mask set through setMask.
-     * @name clearMask
      * @see Renderer#setMask
-     * @memberof Renderer
      */
     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
      */
@@ -10532,9 +10515,7 @@ class Renderer {
 
     /**
      * clear the rendering tint set through setTint.
-     * @name clearTint
      * @see Renderer#setTint
-     * @memberof Renderer
      */
     clearTint() {
         // reset to default
@@ -18045,21 +18026,14 @@ class Renderable extends Rect {
 
         /**
          * 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 {
@@ -18097,10 +18071,7 @@ class Renderable extends Rect {
         if (typeof this.currentTransform === "undefined") {
             /**
              * the renderable default transformation matrix
-             * @public
              * @type {Matrix2d}
-             * @name currentTransform
-             * @memberof Renderable#
              */
             this.currentTransform = pool.pull("Matrix2d");
         }
@@ -18110,20 +18081,14 @@ class Renderable extends Rect {
         * (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) {
@@ -18135,42 +18100,30 @@ class Renderable extends Rect {
 
         /**
          * 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;
 
@@ -18185,11 +18138,8 @@ class Renderable extends Rect {
              * <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 });
         }
@@ -18197,11 +18147,8 @@ class Renderable extends Rect {
         /**
          * 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 () {
@@ -18221,30 +18168,23 @@ class Renderable extends Rect {
          * 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, [
@@ -18263,40 +18203,19 @@ class Renderable extends Rect {
          */
         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 = "";
 
@@ -18307,8 +18226,6 @@ class Renderable extends Rect {
              * 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});
         }
@@ -18316,9 +18233,7 @@ class Renderable extends Rect {
         /**
          * when true the renderable will be redrawn during the next update cycle
          * @type {boolean}
-         * @name isDirty
          * @default false
-         * @memberof Renderable#
          */
         this.isDirty = false;
 
@@ -18337,23 +18252,45 @@ class Renderable extends Rect {
 
     /**
      * Whether the renderable object is floating, or contained in a floating container
-     * @public
      * @see Renderable#floating
      * @type {boolean}
-     * @name isFloating
-     * @memberof Renderable
      */
     get isFloating() {
         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);
+     */
+    get tint() {
+        if (typeof this._tint === "undefined") {
+            this._tint = pool.pull("Color", 255, 255, 255, 1.0);
+        }
+        return this._tint;
+    }
+    set tint(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
      */
     get inViewport() {
         return this._inViewport;
@@ -18372,8 +18309,6 @@ class Renderable extends Rect {
      * @public
      * @see Renderable#flipX
      * @type {boolean}
-     * @name isFlippedX
-     * @memberof Renderable
      */
     get isFlippedX() {
         return this._flip.x === true;
@@ -18384,8 +18319,6 @@ class Renderable extends Rect {
      * @public
      * @see Renderable#flipY
      * @type {boolean}
-     * @name isFlippedY
-     * @memberof Renderable
      */
     get isFlippedY() {
         return this._flip.y === true;
@@ -18393,8 +18326,6 @@ class Renderable extends Rect {
 
     /**
      * returns the bounding box for this renderable
-     * @name getBounds
-     * @memberof Renderable
      * @returns {Bounds} bounding box Rectangle object
      */
     getBounds() {
@@ -18413,8 +18344,6 @@ class Renderable extends Rect {
 
     /**
      * get the renderable alpha channel value<br>
-     * @name getOpacity
-     * @memberof Renderable
      * @returns {number} current opacity value between 0 and 1
      */
     getOpacity() {
@@ -18423,8 +18352,6 @@ class Renderable extends Rect {
 
     /**
      * set the renderable alpha channel value<br>
-     * @name setOpacity
-     * @memberof Renderable
      * @param {number} alpha opacity value between 0.0 and 1.0
      */
     setOpacity(alpha) {
@@ -18441,8 +18368,6 @@ class Renderable extends Rect {
     /**
      * 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
      */
@@ -18455,8 +18380,6 @@ class Renderable extends Rect {
     /**
      * 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
      */
@@ -18468,8 +18391,6 @@ class Renderable extends Rect {
 
     /**
      * 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
@@ -18484,8 +18405,6 @@ class Renderable extends Rect {
 
     /**
      * return the angle to the specified target
-     * @name angleTo
-     * @memberof Renderable
      * @param {Renderable|Vector2d|Vector3d} target
      * @returns {number} angle in radians
      */
@@ -18507,8 +18426,6 @@ class Renderable extends Rect {
 
     /**
      * return the distance to the specified target
-     * @name distanceTo
-     * @memberof Renderable
      * @param {Renderable|Vector2d|Vector3d} target
      * @returns {number} distance
      */
@@ -18530,8 +18447,6 @@ class Renderable extends Rect {
 
     /**
      * 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
      */
@@ -18553,8 +18468,6 @@ class Renderable extends Rect {
 
     /**
      * 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
@@ -18574,8 +18487,6 @@ class Renderable extends Rect {
      * 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
@@ -18589,8 +18500,6 @@ class Renderable extends Rect {
 
     /**
      * 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
      */
@@ -18600,11 +18509,7 @@ class Renderable extends Rect {
     }
 
     /**
-     * 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
      */
@@ -18615,8 +18520,6 @@ class Renderable extends Rect {
     /**
      * update the bounding box for this shape.
      * @ignore
-     * @name updateBounds
-     * @memberof Renderable
      * @returns {Bounds} this shape bounding box Rectangle object
      */
     updateBounds() {
@@ -18628,8 +18531,6 @@ class Renderable extends Rect {
     /**
      * update the renderable's bounding rect (private)
      * @ignore
-     * @name updateBoundsPos
-     * @memberof Renderable
      */
      updateBoundsPos(newX, newY) {
          var bounds = this.getBounds();
@@ -18660,8 +18561,6 @@ class Renderable extends Rect {
 
      /**
       * return the renderable absolute position in the game world
-      * @name getAbsolutePosition
-      * @memberof Renderable
       * @returns {Vector2d}
       */
       getAbsolutePosition() {
@@ -18679,8 +18578,6 @@ class Renderable extends Rect {
     /**
      * 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
      */
@@ -18693,12 +18590,10 @@ class Renderable extends Rect {
      }
 
     /**
-     * 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
      */
     preDraw(renderer) {
@@ -18749,10 +18644,15 @@ class Renderable extends Rect {
     }
 
     /**
-     * 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
      */
@@ -18761,11 +18661,9 @@ class Renderable extends Rect {
     }
 
     /**
-     * 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
      */
     postDraw(renderer) {
@@ -18787,8 +18685,6 @@ class Renderable extends Rect {
     /**
      * 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)
@@ -18840,9 +18736,9 @@ class Renderable extends Rect {
             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;
@@ -18863,8 +18759,6 @@ class Renderable extends Rect {
     /**
      * OnDestroy Notification function<br>
      * Called by engine before deleting the object
-     * @name onDestroyEvent
-     * @memberof Renderable
      */
     onDestroyEvent() {
         // to be extended !
@@ -19707,7 +19601,7 @@ var collision = {
 class Body {
     /**
      * @param {Renderable} ancestor the parent object this body is attached to
-     * @param {Rect|Rect[]|Polygon|Polygon[]|Line|Line[]|Ellipse|Ellipse[]|Bounds|Bounds[]|object} [shapes] a initial shape, list of shapes, or JSON object defining the body
+     * @param {Rect|Rect[]|Polygon|Polygon[]|Line|Line[]|Ellipse|Ellipse[]|Point|Point[]|Bounds|Bounds[]|object} [shapes] a initial shape, list of shapes, or JSON object defining the body
      * @param {Function} [onBodyUpdate] callback for when the body is updated (e.g. add/remove shapes)
      */
     constructor(ancestor, shapes, onBodyUpdate) {
@@ -19734,7 +19628,7 @@ class Body {
             /**
              * The collision shapes of the body
              * @ignore
-             * @type {Polygon[]|Line[]|Ellipse[]}
+             * @type {Polygon[]|Line[]|Ellipse[]|Point|Point[]}
              */
             this.shapes = [];
         }
@@ -19926,7 +19820,7 @@ class Body {
     /**
      * 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
@@ -19961,6 +19855,12 @@ class Body {
             // 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);
@@ -24446,8 +24346,10 @@ class CanvasRenderer extends Renderer {
      * @memberof CanvasRenderer
      */
     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);
         }
     }
 
@@ -24458,13 +24360,14 @@ class CanvasRenderer extends Renderer {
      * @param {Color|string} [color="#000000"] CSS color.
      * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
      */
-    clearColor(color = "#000000", opaque) {
+    clearColor(color = "#000000", 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();
@@ -24826,6 +24729,30 @@ class CanvasRenderer extends Renderer {
         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
+     */
+    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
+     */
+    fillPoint(x, y) {
+        this.strokePoint(x, y);
+    }
+
     /**
      * return a reference to the font 2d Context
      * @ignore
@@ -27036,7 +26963,7 @@ class TMXObject {
         this.type = settings.type;
 
         /**
-         * the åobject class
+         * the object class
          * @public
          * @type {string}
          * @name class
@@ -27099,6 +27026,15 @@ class TMXObject {
          */
         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
@@ -27122,12 +27058,14 @@ class TMXObject {
             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;
             }
@@ -27201,8 +27139,9 @@ class TMXObject {
                 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);
@@ -27211,10 +27150,8 @@ class TMXObject {
                     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;
@@ -27246,7 +27183,9 @@ class TMXObject {
         // 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();
+                }
             }
         }
 
@@ -29233,7 +29172,12 @@ class Sprite extends Renderable {
         }
 
         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
@@ -30777,7 +30721,8 @@ class WebGLRenderer extends Renderer {
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
      * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
-     * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
+     * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas
+     * @param {boolean} [options.premultipliedAlpha=true] in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
      * @param {boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
      * @param {boolean} [options.preferWebGL1=false] if true the renderer will only use WebGL 1
      * @param {string} [options.powerPreference="default"] a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
@@ -30792,8 +30737,6 @@ class WebGLRenderer extends Renderer {
 
         /**
          * The WebGL version used by this renderer (1 or 2)
-         * @name WebGLVersion
-         * @memberof WebGLRenderer#
          * @type {number}
          * @default 1
          * @readonly
@@ -30802,8 +30745,6 @@ class WebGLRenderer extends Renderer {
 
         /**
          * The vendor string of the underlying graphics driver.
-         * @name GPUVendor
-         * @memberof WebGLRenderer#
          * @type {string}
          * @default null
          * @readonly
@@ -30812,8 +30753,6 @@ class WebGLRenderer extends Renderer {
 
         /**
          * The renderer string of the underlying graphics driver.
-         * @name GPURenderer
-         * @memberof WebGLRenderer#
          * @type {string}
          * @default null
          * @readonly
@@ -30823,15 +30762,12 @@ class WebGLRenderer extends Renderer {
         /**
          * 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
          */
@@ -30859,25 +30795,19 @@ class WebGLRenderer extends Renderer {
 
         /**
          * 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();
 
@@ -30923,8 +30853,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Reset context state
-     * @name reset
-     * @memberof WebGLRenderer
      */
     reset() {
         super.reset();
@@ -30947,9 +30875,7 @@ class WebGLRenderer extends Renderer {
 
     /**
      * set the active compositor for this renderer
-     * @name setCompositor
      * @param {WebGLCompositor|string} compositor a compositor name or instance
-     * @memberof WebGLRenderer
      */
     setCompositor(compositor = "default") {
 
@@ -30973,8 +30899,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Reset the gl transform to identity
-     * @name resetTransform
-     * @memberof WebGLRenderer
      */
     resetTransform() {
         this.currentTransform.identity();
@@ -31019,8 +30943,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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}
@@ -31051,8 +30973,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Flush the compositor to the frame buffer
-     * @name flush
-     * @memberof WebGLRenderer
      */
     flush() {
         this.currentCompositor.flush();
@@ -31060,8 +30980,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * set/change the current projection matrix (WebGL only)
-     * @name setProjection
-     * @memberof WebGLRenderer
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -31069,10 +30987,15 @@ class WebGLRenderer extends Renderer {
         this.currentCompositor.setProjection(matrix);
     }
 
+    /**
+     * prepare the framebuffer for drawing a new frame
+     */
+    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]
      */
@@ -31089,17 +31012,10 @@ class WebGLRenderer extends Renderer {
         }
         // 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.
@@ -31133,7 +31049,7 @@ class WebGLRenderer extends Renderer {
             uvs[1],
             uvs[2],
             uvs[3],
-            this.currentTint.toUint32()
+            this.currentTint.toUint32(this.getGlobalAlpha())
         );
 
         // Clear font context2D
@@ -31147,8 +31063,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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.
@@ -31194,13 +31108,11 @@ class WebGLRenderer extends Renderer {
 
         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
@@ -31210,18 +31122,16 @@ class WebGLRenderer extends Renderer {
      */
     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}
      */
-    getContextGL(canvas, transparent) {
+    getContextGL(canvas, transparent = false) {
         if (typeof canvas === "undefined" || canvas === null) {
             throw new Error(
                 "You must pass a canvas element in order to create " +
@@ -31229,17 +31139,13 @@ class WebGLRenderer extends Renderer {
             );
         }
 
-        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
         };
@@ -31272,8 +31178,6 @@ class WebGLRenderer extends Renderer {
     /**
      * Returns the WebGLContext instance for the renderer
      * return a reference to the system 2d Context
-     * @name getContext
-     * @memberof WebGLRenderer
      * @returns {WebGLRenderingContext}
      */
     getContext() {
@@ -31291,9 +31195,7 @@ class WebGLRenderer extends Renderer {
      * <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]
      */
@@ -31342,8 +31244,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * restores the canvas context
-     * @name restore
-     * @memberof WebGLRenderer
      */
     restore() {
         // do nothing if there is no saved states
@@ -31377,8 +31277,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * saves the canvas context
-     * @name save
-     * @memberof WebGLRenderer
      */
     save() {
         this._colorStack.push(this.currentColor.clone());
@@ -31394,8 +31292,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * rotates the uniform matrix
-     * @name rotate
-     * @memberof WebGLRenderer
      * @param {number} angle in radians
      */
     rotate(angle) {
@@ -31404,8 +31300,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * scales the uniform matrix
-     * @name scale
-     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      */
@@ -31424,8 +31318,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Set the global alpha
-     * @name setGlobalAlpha
-     * @memberof WebGLRenderer
      * @param {number} alpha 0.0 to 1.0 values accepted.
      */
     setGlobalAlpha(alpha) {
@@ -31434,8 +31326,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Return the global alpha
-     * @name getGlobalAlpha
-     * @memberof WebGLRenderer
      * @returns {number} global alpha value
      */
     getGlobalAlpha() {
@@ -31445,8 +31335,6 @@ class WebGLRenderer extends Renderer {
     /**
      * 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.
      */
     setColor(color) {
@@ -31457,8 +31345,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Set the line width
-     * @name setLineWidth
-     * @memberof WebGLRenderer
      * @param {number} width Line width
      */
     setLineWidth(width) {
@@ -31467,8 +31353,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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
@@ -31494,8 +31378,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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
@@ -31509,8 +31391,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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
@@ -31534,8 +31414,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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
@@ -31547,8 +31425,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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
@@ -31568,8 +31444,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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
@@ -31581,8 +31455,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * 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
      */
@@ -31612,8 +31484,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Fill a me.Polygon on the screen
-     * @name fillPolygon
-     * @memberof WebGLRenderer
      * @param {Polygon} poly the shape to draw
      */
     fillPolygon(poly) {
@@ -31622,8 +31492,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Draw a stroke rectangle at the specified coordinates
-     * @name strokeRect
-     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -31646,8 +31514,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Draw a filled rectangle at the specified coordinates
-     * @name fillRect
-     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -31659,8 +31525,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Stroke a rounded rectangle at the specified coordinates
-     * @name strokeRoundRect
-     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -31685,8 +31549,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Draw a rounded filled rectangle at the specified coordinates
-     * @name fillRoundRect
-     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -31697,11 +31559,29 @@ class WebGLRenderer extends Renderer {
         this.strokeRoundRect(x, y, width, height, radius, true);
     }
 
+    /**
+     * Stroke a Point at the specified coordinates
+     * @param {number} x
+     * @param {number} y
+     */
+    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
+     */
+    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
      */
     setTransform(mat2d) {
@@ -31711,8 +31591,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Multiply given matrix into the renderer tranformation matrix
-     * @name transform
-     * @memberof WebGLRenderer
      * @param {Matrix2d} mat2d Matrix to transform by
      */
     transform(mat2d) {
@@ -31728,8 +31606,6 @@ class WebGLRenderer extends Renderer {
 
     /**
      * Translates the uniform matrix by the given coordinates
-     * @name translate
-     * @memberof WebGLRenderer
      * @param {number} x
      * @param {number} y
      */
@@ -31750,8 +31626,6 @@ class WebGLRenderer extends Renderer {
      * 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
@@ -31797,8 +31671,6 @@ class WebGLRenderer extends Renderer {
      * 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
      */
@@ -31812,8 +31684,6 @@ class WebGLRenderer extends Renderer {
             // Enable and setup GL state to write to stencil buffer
             gl.enable(gl.STENCIL_TEST);
             gl.clear(gl.STENCIL_BUFFER_BIT);
-
-
         }
 
         this.maskLevel++;
@@ -31842,9 +31712,7 @@ class WebGLRenderer extends Renderer {
 
     /**
      * disable (remove) the rendering mask set through setMask.
-     * @name clearMask
      * @see WebGLRenderer#setMask
-     * @memberof WebGLRenderer
      */
     clearMask() {
         if (this.maskLevel > 0) {
@@ -31873,6 +31741,7 @@ var settings = {
     scale : 1.0,
     scaleMethod : "manual",
     transparent : false,
+    premultipliedAlpha: true,
     blendMode : "normal",
     antiAlias : false,
     failIfMajorPerformanceCaveat : true,
@@ -33010,10 +32879,10 @@ class BasePlugin {
          * this can be overridden by the plugin
          * @public
          * @type {string}
-         * @default "13.1.1"
+         * @default "13.2.0"
          * @name plugin.Base#version
          */
-        this.version = "13.1.1";
+        this.version = "13.2.0";
     }
 }
 
@@ -34256,7 +34125,7 @@ class TextMetrics extends Bounds {
         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);
@@ -34731,7 +34600,7 @@ class Text extends Renderable {
         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
@@ -34876,12 +34745,7 @@ class BitmapText extends Renderable {
 
         // 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
@@ -34954,7 +34818,12 @@ class BitmapText extends Renderable {
         return this.tint;
     }
     set fillStyle(value) {
-        this.tint = value;
+        if (value instanceof Color) {
+            this.tint.copy(value);
+        } else {
+            // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+            this.tint.parseCSS(value);
+        }
     }
 
     /**
@@ -35011,7 +34880,7 @@ class BitmapText extends Renderable {
 
         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) {
@@ -37822,7 +37691,7 @@ Renderer.prototype.getScreenContext = function()  {
  * @name version
  * @type {string}
  */
-const version = "13.1.1";
+const version = "13.2.0";
 
 
 /**
@@ -37881,6 +37750,7 @@ function boot() {
     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);
 
@@ -37910,6 +37780,7 @@ function boot() {
     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);
@@ -37933,4 +37804,4 @@ onReady(function () {
     }
 });
 
-export { BitmapText, BitmapTextData, Body, Bounds, Camera2d, CanvasRenderer, Collectable, Color, ColorLayer, Container, Draggable, DraggableEntity, DropTarget, DroptargetEntity, Ellipse, Entity, GLShader, GUI_Object, ImageLayer, Light2d, Line, math as Math, Matrix2d, Matrix3d, NineSliceSprite, ObservableVector2d, ObservableVector3d, Particle, ParticleEmitter, ParticleEmitterSettings, Pointer, Polygon, QuadTree, Rect, Renderable, Renderer, RoundRect, Sprite, Stage, TMXHexagonalRenderer, TMXIsometricRenderer, TMXLayer, TMXOrthogonalRenderer, TMXRenderer, TMXStaggeredRenderer, TMXTileMap, TMXTileset, TMXTilesetGroup, Text, TextureAtlas, Tile, Trigger, Tween, Vector2d, Vector3d, WebGLCompositor, WebGLRenderer, World, audio, boot, collision, device, event, game, initialized, input, level, loader, plugin, plugins, pool, save, skipAutoInit, state, timer, utils, version, video, warning };
+export { BitmapText, BitmapTextData, Body, Bounds, Camera2d, CanvasRenderer, Collectable, Color, ColorLayer, Container, Draggable, DraggableEntity, DropTarget, DroptargetEntity, Ellipse, Entity, GLShader, GUI_Object, ImageLayer, Light2d, Line, math as Math, Matrix2d, Matrix3d, NineSliceSprite, ObservableVector2d, ObservableVector3d, Particle, ParticleEmitter, ParticleEmitterSettings, Point, Pointer, Polygon, QuadTree, Rect, Renderable, Renderer, RoundRect, Sprite, Stage, TMXHexagonalRenderer, TMXIsometricRenderer, TMXLayer, TMXOrthogonalRenderer, TMXRenderer, TMXStaggeredRenderer, TMXTileMap, TMXTileset, TMXTilesetGroup, Text, TextureAtlas, Tile, Trigger, Tween, Vector2d, Vector3d, WebGLCompositor, WebGLRenderer, World, audio, boot, collision, device, event, game, initialized, input, level, loader, plugin, plugins, pool, save, skipAutoInit, state, timer, utils, version, video, warning };