melonjs 10.0.2 → 10.2.1

package/dist/melonjs.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v10.0.2
+ * melonJS Game Engine - v10.2.1
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -1532,7 +1532,7 @@
     };
 
     /**
-     * Color Red Component
+     * Color Red Component [0 .. 255]
      * @type Number
      * @name r
      * @readonly
@@ -1554,7 +1554,7 @@
 
 
     /**
-     * Color Green Component
+     * Color Green Component [0 .. 255]
      * @type Number
      * @name g
      * @readonly
@@ -1576,7 +1576,7 @@
 
 
     /**
-     * Color Blue Component
+     * Color Blue Component [0 .. 255]
      * @type Number
      * @name b
      * @readonly
@@ -1596,7 +1596,7 @@
     };
 
     /**
-     * Color Alpha Component
+     * Color Alpha Component [0.0 .. 1.0]
      * @type Number
      * @name alpha
      * @readonly
@@ -1887,6 +1887,25 @@
         );
     };
 
+    /**
+     * Pack this color into a Uint32 ARGB representation
+     * @name toUint32
+     * @memberOf me.Color
+     * @function
+     * @param {Number} [alpha=1.0] alpha value [0.0 .. 1.0]
+     * @return {Uint32}
+     */
+    Color.prototype.toUint32 = function toUint32 (alpha) {
+            if ( alpha === void 0 ) alpha = this.alpha;
+
+        var ur = this.r & 0xff;
+        var ug = this.g & 0xff;
+        var ub = this.b & 0xff;
+        var ua = (alpha * 255) & 0xff;
+
+        return (ua << 24) + (ur << 16) + (ug << 8) + ub;
+    };
+
     /**
      * return an array representation of this object
      * @name toArray
@@ -1898,6 +1917,7 @@
         return this.glArray;
     };
 
+
     /**
      * Get the color in "#RRGGBB" format
      * @name toHex
@@ -10918,20 +10938,485 @@
     }
 
     /**
-     * cache value for the offset of the canvas position within the page
+     * @classdesc
+     * a bound object contains methods for creating and manipulating axis-aligned bounding boxes (AABB).
+     * @class Bounds
+     * @memberOf me
+     * @constructor
+     * @memberOf me
+     * @param {me.Vector2d[]} [vertices] an array of me.Vector2d points
+     * @return {me.Bounds} A new bounds object
+     */
+
+    var Bounds$1 = function Bounds(vertices) {
+        this.onResetEvent(vertices);
+    };
+
+    var prototypeAccessors$1 = { x: { configurable: true },y: { configurable: true },width: { configurable: true },height: { configurable: true },left: { configurable: true },right: { configurable: true },top: { configurable: true },bottom: { configurable: true },centerX: { configurable: true },centerY: { configurable: true },center: { configurable: true } };
+
+    Bounds$1.prototype.onResetEvent = function onResetEvent (vertices) {
+        if (typeof this.min === "undefined") {
+            this.min = { x: Infinity,  y: Infinity };
+            this.max = { x: -Infinity, y: -Infinity };
+        } else {
+            this.clear();
+        }
+        if (typeof vertices !== "undefined") {
+            this.update(vertices);
+        }
+
+        // @ignore
+        this._center = new Vector2d();
+    };
+
+    /**
+     * reset the bound
+     * @name clear
+     * @memberOf me.Bounds
+     * @function
+     */
+    Bounds$1.prototype.clear = function clear () {
+        this.setMinMax(Infinity, Infinity, -Infinity, -Infinity);
+
+    };
+
+    /**
+     * sets the bounds to the given min and max value
+     * @name setMinMax
+     * @memberOf me.Bounds
+     * @function
+     * @param {Number} minX
+     * @param {Number} minY
+     * @param {Number} maxX
+     * @param {Number} maxY
+     */
+    Bounds$1.prototype.setMinMax = function setMinMax (minX, minY, maxX, maxY) {
+        this.min.x = minX;
+        this.min.y = minY;
+
+        this.max.x = maxX;
+        this.max.y = maxY;
+    };
+
+    /**
+     * x position of the bound
+     * @public
+     * @type {Number}
+     * @name x
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.x.get = function () {
+        return this.min.x;
+    };
+
+    prototypeAccessors$1.x.set = function (value) {
+        var deltaX = this.max.x - this.min.x;
+        this.min.x = value;
+        this.max.x = value + deltaX;
+    };
+
+    /**
+     * y position of the bounds
+     * @public
+     * @type {Number}
+     * @name y
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.y.get = function () {
+        return this.min.y;
+    };
+
+    prototypeAccessors$1.y.set = function (value) {
+        var deltaY = this.max.y - this.min.y;
+
+        this.min.y = value;
+        this.max.y = value + deltaY;
+    };
+
+    /**
+     * width of the bounds
+     * @public
+     * @type {Number}
+     * @name width
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.width.get = function () {
+        return this.max.x - this.min.x;
+    };
+
+    prototypeAccessors$1.width.set = function (value) {
+        this.max.x = this.min.x + value;
+    };
+
+    /**
+     * width of the bounds
+     * @public
+     * @type {Number}
+     * @name width
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.height.get = function () {
+        return this.max.y - this.min.y;
+    };
+
+    prototypeAccessors$1.height.set = function (value) {
+        this.max.y = this.min.y + value;
+    };
+
+    /**
+     * left coordinate of the bound
+     * @public
+     * @type {Number}
+     * @name left
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.left.get = function () {
+        return this.min.x;
+    };
+
+    /**
+     * right coordinate of the bound
+     * @public
+     * @type {Number}
+     * @name right
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.right.get = function () {
+        return this.max.x;
+    };
+
+    /**
+     * top coordinate of the bound
+     * @public
+     * @type {Number}
+     * @name top
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.top.get = function () {
+        return this.min.y;
+    };
+
+    /**
+     * bottom coordinate of the bound
+     * @public
+     * @type {Number}
+     * @name bottom
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.bottom.get = function () {
+        return this.max.y;
+    };
+
+    /**
+     * center position of the bound on the x axis
+     * @public
+     * @type {Number}
+     * @name centerX
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.centerX.get = function () {
+        return this.min.x + (this.width / 2);
+    };
+
+    /**
+     * center position of the bound on the y axis
+     * @public
+     * @type {Number}
+     * @name centerY
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.centerY.get = function () {
+        return this.min.y + (this.height / 2);
+    };
+
+    /**
+     * return the center position of the bound
+     * @public
+     * @type {me.Vector2d}
+     * @name center
+     * @memberOf me.Bounds
+     */
+    prototypeAccessors$1.center.get = function () {
+        return this._center.set(this.centerX, this.centerY);
+    };
+
+    /**
+     * Updates bounds using the given vertices
+     * @name update
+     * @memberOf me.Bounds
+     * @function
+     * @param {me.Vector2d[]} vertices an array of me.Vector2d points
+     */
+    Bounds$1.prototype.update = function update (vertices) {
+        this.add(vertices, true);
+    };
+
+    /**
+     * add the given vertices to the bounds definition.
+     * @name add
+     * @memberOf me.Bounds
+     * @function
+     * @param {me.Vector2d[]} vertices an array of me.Vector2d points
+     * @param {boolean} [clear=false] either to reset the bounds before adding the new vertices
+     */
+    Bounds$1.prototype.add = function add (vertices, clear) {
+            if ( clear === void 0 ) clear = false;
+
+        if (clear === true) {
+            this.clear();
+        }
+        for (var i = 0; i < vertices.length; i++) {
+            var vertex = vertices[i];
+            if (vertex.x > this.max.x) { this.max.x = vertex.x; }
+            if (vertex.x < this.min.x) { this.min.x = vertex.x; }
+            if (vertex.y > this.max.y) { this.max.y = vertex.y; }
+            if (vertex.y < this.min.y) { this.min.y = vertex.y; }
+        }
+    };
+
+    /**
+     * add the given bounds to the bounds definition.
+     * @name addBounds
+     * @memberOf me.Bounds
+     * @function
+     * @param {me.Bounds} bounds
+     * @param {boolean} [clear=false] either to reset the bounds before adding the new vertices
+     */
+    Bounds$1.prototype.addBounds = function addBounds (bounds, clear) {
+            if ( clear === void 0 ) clear = false;
+
+        if (clear === true) {
+            this.clear();
+        }
+
+        if (bounds.max.x > this.max.x) { this.max.x = bounds.max.x; }
+        if (bounds.min.x < this.min.x) { this.min.x = bounds.min.x; }
+        if (bounds.max.y > this.max.y) { this.max.y = bounds.max.y; }
+        if (bounds.min.y < this.min.y) { this.min.y = bounds.min.y; }
+    };
+
+    /**
+     * add the given point to the bounds definition.
+     * @name addPoint
+     * @memberOf me.Bounds
+     * @function
+     * @param {me.Vector2d} vector
+     * @param {me.Matrix2d} [matrix] an optional transform to apply to the given point
+     */
+    Bounds$1.prototype.addPoint = function addPoint (v, m) {
+        if (typeof m !== "undefined") {
+            v = m.apply(v);
+        }
+        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);
+    };
+
+    /**
+     * add the given quad coordinates to this bound definition, multiplied by the given matrix
+     * @name addFrame
+     * @memberOf me.Bounds
+     * @function
+     * @param {Number} x0 - left X coordinates of the quad
+     * @param {Number} y0 - top Y coordinates of the quad
+     * @param {Number} x1 - right X coordinates of the quad
+     * @param {Number} y1 - bottom y coordinates of the quad
+     * @param {me.Matrix2d} [matrix] an optional transform to apply to the given frame coordinates
+     */
+    Bounds$1.prototype.addFrame = function addFrame (x0, y0, x1, y1, m) {
+        var v = me.pool.pull("Vector2d");
+
+        // transform all points and add to the bound definition
+        this.addPoint(v.set(x0, y0), m);
+        this.addPoint(v.set(x1, y0), m);
+        this.addPoint(v.set(x0, y1), m);
+        this.addPoint(v.set(x1, y1), m);
+
+        me.pool.push(v);
+    };
+
+    /**
+     * Returns true if the bounds contains the given point.
+     * @name contains
+     * @memberOf me.Bounds
+     * @function
+     * @param {me.Vector2d} point
+     * @return {boolean} True if the bounds contain the point, otherwise false
+     */
+    /**
+     * Returns true if the bounds contains the given point.
+     * @name contains
+     * @memberOf me.Bounds
+     * @function
+     * @param {Number} x
+     * @param {Number} y
+     * @return {boolean} True if the bounds contain the point, otherwise false
+     */
+    Bounds$1.prototype.contains = function contains () {
+        var arg0 = arguments[0];
+        var _x1, _x2, _y1, _y2;
+        if (arguments.length === 2) {
+            // x, y
+            _x1 = _x2 = arg0;
+            _y1 = _y2 = arguments[1];
+        } else {
+            if (arg0 instanceof Bounds$1) {
+                // bounds
+                _x1 = arg0.min.x;
+                _x2 = arg0.max.x;
+                _y1 = arg0.min.y;
+                _y2 = arg0.max.y;
+            } else {
+                // vector
+                _x1 = _x2 = arg0.x;
+                _y1 = _y2 = arg0.y;
+            }
+        }
+
+        return _x1 >= this.min.x && _x2 <= this.max.x
+            && _y1 >= this.min.y && _y2 <= this.max.y;
+    };
+
+    /**
+     * Returns true if the two bounds intersect.
+     * @name overlaps
+     * @memberOf me.Bounds
+     * @function
+     * @param {me.Bounds|me.Rect} bounds
+     * @return {boolean} True if the bounds overlap, otherwise false
+     */
+    Bounds$1.prototype.overlaps = function overlaps (bounds) {
+        return !(this.right < bounds.left || this.left > bounds.right ||
+                 this.bottom < bounds.top || this.top > bounds.bottom);
+    };
+
+    /**
+     * determines whether all coordinates of this bounds are finite numbers.
+     * @name isFinite
+     * @memberOf me.Bounds
+     * @function
+     * @return {boolean} false if all coordinates are positive or negative Infinity or NaN; otherwise, true.
+     */
+    Bounds$1.prototype.isFinite = function isFinite$1 () {
+        return (isFinite(this.min.x) && isFinite(this.max.x) && isFinite(this.min.y) && isFinite(this.max.y));
+    };
+
+    /**
+     * Translates the bounds by the given vector.
+     * @name translate
+     * @memberOf me.Bounds
+     * @function
+     * @param {me.Vector2d} vector
+     */
+    /**
+     * Translates the bounds by x on the x axis, and y on the y axis
+     * @name translate
+     * @memberOf me.Bounds
+     * @function
+     * @param {Number} x
+     * @param {Number} y
+     */
+    Bounds$1.prototype.translate = function translate () {
+        var _x, _y;
+        if (arguments.length === 2) {
+            // x, y
+            _x = arguments[0];
+            _y = arguments[1];
+        } else {
+            // vector
+            _x = arguments[0].x;
+            _y = arguments[0].y;
+        }
+        this.min.x += _x;
+        this.max.x += _x;
+        this.min.y += _y;
+        this.max.y += _y;
+    };
+
+    /**
+     * Shifts the bounds to the given position vector.
+     * @name shift
+     * @memberOf me.Bounds
+     * @function
+     * @param {me.Vector2d} position
+     */
+    /**
+     * Shifts the bounds to the given x, y position.
+     * @name shift
+     * @memberOf me.Bounds
+     * @function
+     * @param {Number} x
+     * @param {Number} y
+     */
+    Bounds$1.prototype.shift = function shift () {
+        var _x, _y;
+
+        if (arguments.length === 2) {
+            // x, y
+            _x = arguments[0];
+            _y = arguments[1];
+        } else {
+            // vector
+            _x = arguments[0].x;
+            _y = arguments[0].y;
+        }
+
+        var deltaX = this.max.x - this.min.x,
+            deltaY = this.max.y - this.min.y;
+
+        this.min.x = _x;
+        this.max.x = _x + deltaX;
+        this.min.y = _y;
+        this.max.y = _y + deltaY;
+    };
+
+    /**
+     * clone this bounds
+     * @name clone
+     * @memberOf me.Bounds
+     * @function
+     * @return {me.Bounds}
+     */
+    Bounds$1.prototype.clone = function clone () {
+        var bounds = new Bounds$1();
+        bounds.addBounds(this);
+        return bounds;
+    };
+
+    /**
+     * Returns a polygon whose edges are the same as this bounds.
+     * @name toPolygon
+     * @memberOf me.Bounds
+     * @function
+     * @return {me.Polygon} a new Polygon that represents this bounds.
+     */
+    Bounds$1.prototype.toPolygon = function toPolygon () {
+        return new Polygon(this.x, this.y, [
+            new Vector2d(0,      0),
+            new Vector2d(this.width, 0),
+            new Vector2d(this.width, this.height),
+            new Vector2d(0,      this.height)
+        ]);
+    };
+
+    Object.defineProperties( Bounds$1.prototype, prototypeAccessors$1 );
+
+    /**
+     * a temporary vector object
      * @ignore
      */
-    var viewportOffset = new Vector2d();
+    var tmpVec = new Vector2d();
 
     /**
      * @classdesc
      * a pointer object, representing a single finger on a touch enabled device.
      * @class
-     * @extends me.Rect
+     * @extends me.Bounds
      * @memberOf me
      * @constructor
      */
-    var Pointer = /*@__PURE__*/(function (Rect) {
+    var Pointer = /*@__PURE__*/(function (Bounds) {
         function Pointer(x, y, w, h) {
             if ( x === void 0 ) x = 0;
             if ( y === void 0 ) y = 0;
@@ -10940,7 +11425,10 @@
 
 
             // parent constructor
-            Rect.call(this, x, y, w, h);
+            Bounds.call(this);
+
+            // initial coordinates/size
+            this.setMinMax(x, y, x + w, y + h);
 
             /**
              * constant for left button
@@ -11180,8 +11668,8 @@
             this.bind = [ 0, 0, 0 ];
         }
 
-        if ( Rect ) Pointer.__proto__ = Rect;
-        Pointer.prototype = Object.create( Rect && Rect.prototype );
+        if ( Bounds ) Pointer.__proto__ = Bounds;
+        Pointer.prototype = Object.create( Bounds && Bounds.prototype );
         Pointer.prototype.constructor = Pointer;
 
         /**
@@ -11203,9 +11691,6 @@
             if ( clientY === void 0 ) clientY = 0;
             if ( pointerId === void 0 ) pointerId = 1;
 
-            var width = 1;
-            var height = 1;
-
             // the original event object
             this.event = event;
 
@@ -11215,7 +11700,9 @@
             this.clientY = clientY;
 
             // translate to local coordinates
-            globalToLocal(this.pageX, this.pageY, this.pos);
+            globalToLocal(this.pageX, this.pageY, tmpVec);
+            this.gameScreenX = this.x = tmpVec.x;
+            this.gameScreenY = this.y = tmpVec.y;
 
             // true if not originally a pointer event
             this.isNormalized = !device$1.PointerEvent || (device$1.PointerEvent && !(event instanceof window.PointerEvent));
@@ -11241,34 +11728,33 @@
 
             this.type = event.type;
 
-            this.gameScreenX = this.pos.x;
-            this.gameScreenY = this.pos.y;
+
 
             // get the current screen to game world offset
             if (typeof viewport !== "undefined") {
-                viewport.localToWorld(this.gameScreenX, this.gameScreenY, viewportOffset);
+                viewport.localToWorld(this.gameScreenX, this.gameScreenY, tmpVec);
             }
 
             /* Initialize the two coordinate space properties. */
-            this.gameWorldX = viewportOffset.x;
-            this.gameWorldY = viewportOffset.y;
+            this.gameWorldX = tmpVec.x;
+            this.gameWorldY = tmpVec.y;
 
             // get the pointer size
             if (this.isNormalized === false) {
                 // native PointerEvent
-                width = event.width || 1;
-                height = event.height || 1;
+                this.width = event.width || 1;
+                this.height = event.height || 1;
             } else if (typeof(event.radiusX) === "number") {
                 // TouchEvent
-                width = (event.radiusX * 2) || 1;
-                height = (event.radiusY * 2) || 1;
+                this.width = (event.radiusX * 2) || 1;
+                this.height = (event.radiusY * 2) || 1;
+            } else {
+                this.width = this.height = 1;
             }
-            // resize the pointer object accordingly
-            this.resize(width, height);
         };
 
         return Pointer;
-    }(Rect));
+    }(Bounds$1));
 
     /**
      * A pool of `Pointer` objects to cache pointer/touch event coordinates.
@@ -11376,8 +11862,6 @@
             // the current pointer area
             currentPointer = new Rect(0, 0, 1, 1);
 
-            pointer = new Pointer(0, 0, 1, 1);
-
             // instantiate a pool of pointer catched
             for (var v = 0; v < device$1.maxTouchPoints; v++) {
                 T_POINTERS.push(new Pointer());
@@ -11667,15 +12151,15 @@
      * @ignore
      */
     function normalizeEvent(originalEvent) {
-        var pointer;
+        var _pointer;
 
         // PointerEvent or standard Mouse event
         if (device$1.TouchEvent && originalEvent.changedTouches) {
             // iOS/Android Touch event
             for (var i = 0, l = originalEvent.changedTouches.length; i < l; i++) {
                 var touchEvent = originalEvent.changedTouches[i];
-                pointer = T_POINTERS.pop();
-                pointer.setEvent(
+                _pointer = T_POINTERS.pop();
+                _pointer.setEvent(
                     originalEvent,
                     touchEvent.pageX,
                     touchEvent.pageY,
@@ -11683,12 +12167,12 @@
                     touchEvent.clientY,
                     touchEvent.identifier
                 );
-                normalizedEvents.push(pointer);
+                normalizedEvents.push(_pointer);
             }
         } else {
             // Mouse or PointerEvent
-            pointer = T_POINTERS.pop();
-            pointer.setEvent(
+            _pointer = T_POINTERS.pop();
+            _pointer.setEvent(
                 originalEvent,
                 originalEvent.pageX,
                 originalEvent.pageY,
@@ -11696,7 +12180,7 @@
                 originalEvent.clientY,
                 originalEvent.pointerId
             );
-            normalizedEvents.push(pointer);
+            normalizedEvents.push(_pointer);
         }
 
         // if event.isPrimary is defined and false, return
@@ -11768,7 +12252,7 @@
      * @name pointer
      * @memberOf me.input
      */
-    var pointer;
+    var pointer = new Pointer(0, 0, 1, 1);
 
     /**
      * time interval for event throttling in milliseconds<br>
@@ -11790,8 +12274,8 @@
      * @function
      * @param {Number} x the global x coordinate to be translated.
      * @param {Number} y the global y coordinate to be translated.
-     * @param {Number} [v] an optional vector object where to set the
-     * @return {me.Vector2d} A vector object with the corresponding translated coordinates.
+     * @param {me.Vector2d} [v] an optional vector object where to set the translated coordinates
+     * @return {me.Vector2d} A vector object with the corresponding translated coordinates
      * @example
      * onMouseEvent : function (pointer) {
      *    // convert the given into local (viewport) relative coordinates
@@ -12528,7 +13012,7 @@
         __proto__: null,
         preventDefault: preventDefault,
         get pointerEventTarget () { return pointerEventTarget; },
-        get pointer () { return pointer; },
+        pointer: pointer,
         get throttlingInterval () { return throttlingInterval; },
         globalToLocal: globalToLocal,
         setTouchAction: setTouchAction,
@@ -12593,7 +13077,6 @@
              * @public
              * @type {me.Body}
              * @see me.Body
-             * @see me.collision#check
              * @name body
              * @memberOf me.Renderable#
              * @example
@@ -12972,6 +13455,7 @@
                 if (isNaN(this.alpha)) {
                     this.alpha = 1.0;
                 }
+                this.isDirty = true;
             }
         };
 
@@ -13293,8 +13777,8 @@
             // offset by the anchor point
             renderer.translate(-ax, -ay);
 
-            // apply the defined tint, if any
-            renderer.setTint(this.tint);
+            // apply the current tint and opacity
+            renderer.setTint(this.tint, this.getOpacity());
         };
 
         /**
@@ -13705,471 +14189,6 @@
         );
     };
 
-    /**
-     * @classdesc
-     * a bound object contains methods for creating and manipulating axis-aligned bounding boxes (AABB).
-     * @class Bounds
-     * @memberOf me
-     * @constructor
-     * @memberOf me
-     * @param {me.Vector2d[]} [vertices] an array of me.Vector2d points
-     * @return {me.Bounds} A new bounds object
-     */
-
-    var Bounds$1 = function Bounds(vertices) {
-        this.onResetEvent(vertices);
-    };
-
-    var prototypeAccessors$1 = { x: { configurable: true },y: { configurable: true },width: { configurable: true },height: { configurable: true },left: { configurable: true },right: { configurable: true },top: { configurable: true },bottom: { configurable: true },centerX: { configurable: true },centerY: { configurable: true },center: { configurable: true } };
-
-    Bounds$1.prototype.onResetEvent = function onResetEvent (vertices) {
-        if (typeof this.min === "undefined") {
-            this.min = { x: Infinity,  y: Infinity };
-            this.max = { x: -Infinity, y: -Infinity };
-        } else {
-            this.clear();
-        }
-        if (typeof vertices !== "undefined") {
-            this.update(vertices);
-        }
-
-        // @ignore
-        this._center = new Vector2d();
-    };
-
-    /**
-     * reset the bound
-     * @name clear
-     * @memberOf me.Bounds
-     * @function
-     */
-    Bounds$1.prototype.clear = function clear () {
-        this.setMinMax(Infinity, Infinity, -Infinity, -Infinity);
-
-    };
-
-    /**
-     * sets the bounds to the given min and max value
-     * @name setMinMax
-     * @memberOf me.Bounds
-     * @function
-     * @param {Number} minX
-     * @param {Number} minY
-     * @param {Number} maxX
-     * @param {Number} maxY
-     */
-    Bounds$1.prototype.setMinMax = function setMinMax (minX, minY, maxX, maxY) {
-        this.min.x = minX;
-        this.min.y = minY;
-
-        this.max.x = maxX;
-        this.max.y = maxY;
-    };
-
-    /**
-     * x position of the bound
-     * @public
-     * @type {Number}
-     * @name x
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.x.get = function () {
-        return this.min.x;
-    };
-
-    prototypeAccessors$1.x.set = function (value) {
-        var deltaX = this.max.x - this.min.x;
-        this.min.x = value;
-        this.max.x = value + deltaX;
-    };
-
-    /**
-     * y position of the bounds
-     * @public
-     * @type {Number}
-     * @name y
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.y.get = function () {
-        return this.min.y;
-    };
-
-    prototypeAccessors$1.y.set = function (value) {
-        var deltaY = this.max.y - this.min.y;
-
-        this.min.y = value;
-        this.max.y = value + deltaY;
-    };
-
-    /**
-     * width of the bounds
-     * @public
-     * @type {Number}
-     * @name width
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.width.get = function () {
-        return this.max.x - this.min.x;
-    };
-
-    prototypeAccessors$1.width.set = function (value) {
-        this.max.x = this.min.x + value;
-    };
-
-    /**
-     * width of the bounds
-     * @public
-     * @type {Number}
-     * @name width
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.height.get = function () {
-        return this.max.y - this.min.y;
-    };
-
-    prototypeAccessors$1.height.set = function (value) {
-        this.max.y = this.min.y + value;
-    };
-
-    /**
-     * left coordinate of the bound
-     * @public
-     * @type {Number}
-     * @name left
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.left.get = function () {
-        return this.min.x;
-    };
-
-    /**
-     * right coordinate of the bound
-     * @public
-     * @type {Number}
-     * @name right
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.right.get = function () {
-        return this.max.x;
-    };
-
-    /**
-     * top coordinate of the bound
-     * @public
-     * @type {Number}
-     * @name top
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.top.get = function () {
-        return this.min.y;
-    };
-
-    /**
-     * bottom coordinate of the bound
-     * @public
-     * @type {Number}
-     * @name bottom
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.bottom.get = function () {
-        return this.max.y;
-    };
-
-    /**
-     * center position of the bound on the x axis
-     * @public
-     * @type {Number}
-     * @name centerX
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.centerX.get = function () {
-        return this.min.x + (this.width / 2);
-    };
-
-    /**
-     * center position of the bound on the y axis
-     * @public
-     * @type {Number}
-     * @name centerY
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.centerY.get = function () {
-        return this.min.y + (this.height / 2);
-    };
-
-    /**
-     * return the center position of the bound
-     * @public
-     * @type {me.Vector2d}
-     * @name center
-     * @memberOf me.Bounds
-     */
-    prototypeAccessors$1.center.get = function () {
-        return this._center.set(this.centerX, this.centerY);
-    };
-
-    /**
-     * Updates bounds using the given vertices
-     * @name update
-     * @memberOf me.Bounds
-     * @function
-     * @param {me.Vector2d[]} vertices an array of me.Vector2d points
-     */
-    Bounds$1.prototype.update = function update (vertices) {
-        this.add(vertices, true);
-    };
-
-    /**
-     * add the given vertices to the bounds definition.
-     * @name add
-     * @memberOf me.Bounds
-     * @function
-     * @param {me.Vector2d[]} vertices an array of me.Vector2d points
-     * @param {boolean} [clear=false] either to reset the bounds before adding the new vertices
-     */
-    Bounds$1.prototype.add = function add (vertices, clear) {
-            if ( clear === void 0 ) clear = false;
-
-        if (clear === true) {
-            this.clear();
-        }
-        for (var i = 0; i < vertices.length; i++) {
-            var vertex = vertices[i];
-            if (vertex.x > this.max.x) { this.max.x = vertex.x; }
-            if (vertex.x < this.min.x) { this.min.x = vertex.x; }
-            if (vertex.y > this.max.y) { this.max.y = vertex.y; }
-            if (vertex.y < this.min.y) { this.min.y = vertex.y; }
-        }
-    };
-
-    /**
-     * add the given bounds to the bounds definition.
-     * @name addBounds
-     * @memberOf me.Bounds
-     * @function
-     * @param {me.Bounds} bounds
-     * @param {boolean} [clear=false] either to reset the bounds before adding the new vertices
-     */
-    Bounds$1.prototype.addBounds = function addBounds (bounds, clear) {
-            if ( clear === void 0 ) clear = false;
-
-        if (clear === true) {
-            this.clear();
-        }
-
-        if (bounds.max.x > this.max.x) { this.max.x = bounds.max.x; }
-        if (bounds.min.x < this.min.x) { this.min.x = bounds.min.x; }
-        if (bounds.max.y > this.max.y) { this.max.y = bounds.max.y; }
-        if (bounds.min.y < this.min.y) { this.min.y = bounds.min.y; }
-    };
-
-    /**
-     * add the given point to the bounds definition.
-     * @name addPoint
-     * @memberOf me.Bounds
-     * @function
-     * @param {me.Vector2d} vector
-     * @param {me.Matrix2d} [matrix] an optional transform to apply to the given point
-     */
-    Bounds$1.prototype.addPoint = function addPoint (v, m) {
-        if (typeof m !== "undefined") {
-            v = m.apply(v);
-        }
-        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);
-    };
-
-    /**
-     * add the given quad coordinates to this bound definition, multiplied by the given matrix
-     * @name addFrame
-     * @memberOf me.Bounds
-     * @function
-     * @param {Number} x0 - left X coordinates of the quad
-     * @param {Number} y0 - top Y coordinates of the quad
-     * @param {Number} x1 - right X coordinates of the quad
-     * @param {Number} y1 - bottom y coordinates of the quad
-     * @param {me.Matrix2d} [matrix] an optional transform to apply to the given frame coordinates
-     */
-    Bounds$1.prototype.addFrame = function addFrame (x0, y0, x1, y1, m) {
-        var v = me.pool.pull("Vector2d");
-
-        // transform all points and add to the bound definition
-        this.addPoint(v.set(x0, y0), m);
-        this.addPoint(v.set(x1, y0), m);
-        this.addPoint(v.set(x0, y1), m);
-        this.addPoint(v.set(x1, y1), m);
-
-        me.pool.push(v);
-    };
-
-    /**
-     * Returns true if the bounds contains the given point.
-     * @name contains
-     * @memberOf me.Bounds
-     * @function
-     * @param {me.Vector2d} point
-     * @return {boolean} True if the bounds contain the point, otherwise false
-     */
-    /**
-     * Returns true if the bounds contains the given point.
-     * @name contains
-     * @memberOf me.Bounds
-     * @function
-     * @param {Number} x
-     * @param {Number} y
-     * @return {boolean} True if the bounds contain the point, otherwise false
-     */
-    Bounds$1.prototype.contains = function contains () {
-        var arg0 = arguments[0];
-        var _x1, _x2, _y1, _y2;
-        if (arguments.length === 2) {
-            // x, y
-            _x1 = _x2 = arg0;
-            _y1 = _y2 = arguments[1];
-        } else {
-            if (arg0 instanceof Bounds$1) {
-                // bounds
-                _x1 = arg0.min.x;
-                _x2 = arg0.max.x;
-                _y1 = arg0.min.y;
-                _y2 = arg0.max.y;
-            } else {
-                // vector
-                _x1 = _x2 = arg0.x;
-                _y1 = _y2 = arg0.y;
-            }
-        }
-
-        return _x1 >= this.min.x && _x2 <= this.max.x
-            && _y1 >= this.min.y && _y2 <= this.max.y;
-    };
-
-    /**
-     * Returns true if the two bounds intersect.
-     * @name overlaps
-     * @memberOf me.Bounds
-     * @function
-     * @param {me.Bounds|me.Rect} bounds
-     * @return {boolean} True if the bounds overlap, otherwise false
-     */
-    Bounds$1.prototype.overlaps = function overlaps (bounds) {
-        return (this.left <= bounds.right && this.right >= bounds.left
-            && this.bottom >= bounds.top && this.top <= bounds.bottom);
-    };
-
-    /**
-     * determines whether all coordinates of this bounds are finite numbers.
-     * @name isFinite
-     * @memberOf me.Bounds
-     * @function
-     * @return {boolean} false if all coordinates are positive or negative Infinity or NaN; otherwise, true.
-     */
-    Bounds$1.prototype.isFinite = function isFinite$1 () {
-        return (isFinite(this.min.x) && isFinite(this.max.x) && isFinite(this.min.y) && isFinite(this.max.y));
-    };
-
-    /**
-     * Translates the bounds by the given vector.
-     * @name translate
-     * @memberOf me.Bounds
-     * @function
-     * @param {me.Vector2d} vector
-     */
-    /**
-     * Translates the bounds by x on the x axis, and y on the y axis
-     * @name translate
-     * @memberOf me.Bounds
-     * @function
-     * @param {Number} x
-     * @param {Number} y
-     */
-    Bounds$1.prototype.translate = function translate () {
-        var _x, _y;
-        if (arguments.length === 2) {
-            // x, y
-            _x = arguments[0];
-            _y = arguments[1];
-        } else {
-            // vector
-            _x = arguments[0].x;
-            _y = arguments[0].y;
-        }
-        this.min.x += _x;
-        this.max.x += _x;
-        this.min.y += _y;
-        this.max.y += _y;
-    };
-
-    /**
-     * Shifts the bounds to the given position vector.
-     * @name shift
-     * @memberOf me.Bounds
-     * @function
-     * @param {me.Vector2d} position
-     */
-    /**
-     * Shifts the bounds to the given x, y position.
-     * @name shift
-     * @memberOf me.Bounds
-     * @function
-     * @param {Number} x
-     * @param {Number} y
-     */
-    Bounds$1.prototype.shift = function shift () {
-        var _x, _y;
-
-        if (arguments.length === 2) {
-            // x, y
-            _x = arguments[0];
-            _y = arguments[1];
-        } else {
-            // vector
-            _x = arguments[0].x;
-            _y = arguments[0].y;
-        }
-
-        var deltaX = this.max.x - this.min.x,
-            deltaY = this.max.y - this.min.y;
-
-        this.min.x = _x;
-        this.max.x = _x + deltaX;
-        this.min.y = _y;
-        this.max.y = _y + deltaY;
-    };
-
-    /**
-     * clone this bounds
-     * @name clone
-     * @memberOf me.Bounds
-     * @function
-     * @return {me.Bounds}
-     */
-    Bounds$1.prototype.clone = function clone () {
-        var bounds = new Bounds$1();
-        bounds.addBounds(this);
-        return bounds;
-    };
-
-    /**
-     * Returns a polygon whose edges are the same as this bounds.
-     * @name toPolygon
-     * @memberOf me.Bounds
-     * @function
-     * @return {me.Polygon} a new Polygon that represents this bounds.
-     */
-    Bounds$1.prototype.toPolygon = function toPolygon () {
-        return new Polygon(this.x, this.y, [
-            new Vector2d(0,      0),
-            new Vector2d(this.width, 0),
-            new Vector2d(this.width, this.height),
-            new Vector2d(0,      this.height)
-        ]);
-    };
-
-    Object.defineProperties( Bounds$1.prototype, prototypeAccessors$1 );
-
     /*
     * Separating Axis Theorem implementation, based on the SAT.js library by Jim Riecken <jimr@jimr.ca>
     * Available under the MIT License - https://github.com/jriecken/sat-js
@@ -14696,7 +14715,6 @@
      * @name ResponseObject
      * @memberOf me.collision
      * @public
-     * @see me.collision.check
      */
     var ResponseObject = function ResponseObject() {
         this.a = null;
@@ -15018,13 +15036,7 @@
     };
 
     /**
-     * a Generic Body Object with some physic properties and behavior functionality<br>
-     The body object is attached as a member of a Renderable.  The Body object can handle movements of the parent with
-     the body.update call.  It is important to know that when body.update is called there are several things that happen related to
-     the movement and positioning of the parent renderable object.  1) The force/gravity/friction parameters are used
-     to calculate a new velocity and 2) the parent position is updated by adding this to the parent.pos (position me.Vector2d)
-     value. Thus Affecting the movement of the parent.  Look at the source code for /src/physics/body.js:update (me.Body.update) for
-     a better understanding.
+     * a Generic Physic Body Object with some physic properties and behavior functionality, to as a member of a Renderable.
      * @class Body
      * @memberOf me
      * @constructor
@@ -15827,6 +15839,7 @@
     var globalFloatingCounter = 0;
 
     /**
+     * @classdesc
      * me.Container represents a collection of child objects
      * @class Container
      * @extends me.Renderable
@@ -17172,8 +17185,9 @@
     };
 
     /**
+    * @classdesc
      * an object representing the physic world, and responsible for managing and updating all childs and physics
-     * @class
+     * @class World
      * @extends me.Container
      * @memberOf me
      * @constructor
@@ -17483,7 +17497,7 @@
      * Update the renderer framerate using the system config variables.
      * @function me.game.updateFrameRate
      * @see me.timer.maxfps
-     * @see me.game.world.fps
+     * @see me.World.fps
      */
     function updateFrameRate() {
         // reset the frame counter
@@ -17817,9 +17831,12 @@
          * @param {Number} [y=0]
          */
         Camera2d.prototype.reset = function reset (x, y) {
+            if ( x === void 0 ) x = 0;
+            if ( y === void 0 ) y = 0;
+
             // reset the initial camera position to 0,0
-            this.pos.x = x || 0;
-            this.pos.y = y || 0;
+            this.pos.x = x;
+            this.pos.y = y;
 
             // reset the target
             this.unfollow();
@@ -18389,7 +18406,7 @@
      * @memberOf me
      * @constructor
      * @param {Object} [options] The stage` parameters
-     * @param {Boolean} [options.cameras=[new me.Camera2d()]] a list of cameras (experimental)
+     * @param {me.Camera2d[]} [options.cameras=[new me.Camera2d()]] a list of cameras (experimental)
      * @param {Function} [options.onResetEvent] called by the state manager when reseting the object
      * @param {Function} [options.onDestroyEvent] called by the state manager before switching to another state
      * @see me.state
@@ -18423,7 +18440,7 @@
     Stage.prototype.reset = function reset$1 () {
             var this$1$1 = this;
 
-            
+
         // add all defined cameras
         this.settings.cameras.forEach(function (camera) {
             this$1$1.cameras.set(camera.name, camera);
@@ -18710,84 +18727,23 @@
 
         return IconLogo;
     }(Renderable));
-    // the melonJS Text Logo
-    var TextLogo = /*@__PURE__*/(function (Renderable) {
-        function TextLogo(w, h) {
-            Renderable.call(this, 0, 0, w, h);
-
-            this.textWidth = 0;
-
-            // offscreen cache canvas
-            this.fontCanvas = createCanvas(256, 64, true);
-            this.drawFont(renderer.getContext2d(this.fontCanvas));
-
-            this.anchorPoint.set(0, 0.5);
-        }
-
-        if ( Renderable ) TextLogo.__proto__ = Renderable;
-        TextLogo.prototype = Object.create( Renderable && Renderable.prototype );
-        TextLogo.prototype.constructor = TextLogo;
-
-        TextLogo.prototype.drawFont = function drawFont (context) {
-            var logo1 = pool.pull("Text", 0, 0, {
-                font: "century gothic",
-                size: 32,
-                fillStyle: "white",
-                textAlign: "middle",
-                textBaseline : "top",
-                text: "melon"
-            });
-            var logo2 = pool.pull("Text", 0, 0, {
-                font: "century gothic",
-                size: 32,
-                fillStyle: "#55aa00",
-                textAlign: "middle",
-                textBaseline : "top",
-                bold: true,
-                text: "JS"
-            });
-
-
-            // compute both logo respective size
-            var logo1_width = logo1.measureText(context).width;
-            var logo2_width = logo2.measureText(context).width;
-
-            this.textWidth = logo1_width + logo2_width;
-
-            // calculate the final rendering position
-            this.pos.x = Math.round(this.width - this.textWidth / 2);
-            this.pos.y = Math.round(this.height + 16);
-
-            // use the private _drawFont method to directly draw on the canvas context
-            logo1._drawFont(context, ["melon"], 0, 0);
-            logo2._drawFont(context, ["JS"], logo1_width, 0);
-
-            // put them back into the object pool
-            pool.push(logo1);
-            pool.push(logo2);
-        };
 
-        /**
-         * @ignore
-         */
-        TextLogo.prototype.draw = function draw (renderer) {
-            renderer.drawImage(this.fontCanvas, Math.round((renderer.getWidth() - this.textWidth) / 2), this.pos.y);
-        };
-
-        return TextLogo;
-    }(Renderable));
     /**
      * a default loading screen
      * @memberOf me
      * @ignore
      * @constructor
      */
-    var defaultLoadingScreen = new Stage({
-        /**
-         * call when the loader is resetted
-         * @ignore
-         */
-        onResetEvent : function () {
+    var DefaultLoadingScreen = /*@__PURE__*/(function (Stage) {
+        function DefaultLoadingScreen () {
+            Stage.apply(this, arguments);
+        }
+
+        if ( Stage ) DefaultLoadingScreen.__proto__ = Stage;
+        DefaultLoadingScreen.prototype = Object.create( Stage && Stage.prototype );
+        DefaultLoadingScreen.prototype.constructor = DefaultLoadingScreen;
+
+        DefaultLoadingScreen.prototype.onResetEvent = function onResetEvent () {
             var barHeight = 8;
 
             // clear the background
@@ -18808,13 +18764,47 @@
 
             ), 2);
 
+            var logo1 = pool.pull("Text",
+                renderer.getWidth() / 2,
+                (renderer.getHeight() / 2) + 16, {
+                    font: "century gothic",
+                    size: 32,
+                    fillStyle: "white",
+                    textAlign: "left",
+                    textBaseline : "top",
+                    text: "melon",
+                    offScreenCanvas: true
+                }
+            );
+            logo1.anchorPoint.set(0, 0);
+
+            var logo2 = pool.pull("Text",
+                renderer.getWidth() / 2,
+                (renderer.getHeight() / 2) + 16, {
+                    font: "century gothic",
+                    size: 32,
+                    fillStyle: "#55aa00",
+                    textAlign: "left",
+                    textBaseline : "top",
+                    bold: true,
+                    text: "JS",
+                    offScreenCanvas: true
+                }
+            );
+            logo2.anchorPoint.set(0, 0);
+
+            // adjust position of both text
+            var text_width = logo1.getBounds().width + logo2.getBounds().width;
+            logo1.pos.x = renderer.getWidth() / 2 - text_width / 2;
+            logo2.pos.x = logo1.pos.x + logo1.getBounds().width;
+
             // melonJS text
-            world.addChild(new TextLogo(
-                renderer.getWidth(),
-                renderer.getHeight()
-            ), 2);
-        }
-    });
+            world.addChild(logo1, 2);
+            world.addChild(logo2, 2);
+        };
+
+        return DefaultLoadingScreen;
+    }(Stage));
 
     // current state
     var _state = -1;
@@ -18946,7 +18936,7 @@
     // initialize me.state on system boot
     on(BOOT, function () {
         // set the built-in loading stage
-        state.set(state.LOADING, defaultLoadingScreen);
+        state.set(state.LOADING, new DefaultLoadingScreen());
         // set and enable the default stage
         state.set(state.DEFAULT, new Stage());
         // enable by default as soon as the display is initialized
@@ -19764,6 +19754,17 @@
         return this.cache.get(image);
     };
 
+    /**
+     * @ignore
+     */
+    TextureCache.prototype.remove = function remove (image) {
+        if (!this.cache.has(image)) {
+            if (this.cache.remove(image) === true) {
+                this.length--;
+            }
+        }
+    };
+
     /**
      * @ignore
      */
@@ -20091,10 +20092,10 @@
               var sh = atlas[frame].height;
 
               atlas[frame].uvs = new Float32Array([
-                  s.x / w,      // Left
-                  s.y / h,      // Top
-                  (s.x + sw) / w, // Right
-                  (s.y + sh) / h// Bottom
+                  s.x / w,      // u0 (left)
+                  s.y / h,      // v0 (top)
+                  (s.x + sw) / w, // u1 (right)
+                  (s.y + sh) / h// v1 (bottom)
               ]);
               // Cache source coordinates
               // TODO: Remove this when the Batcher only accepts a region name
@@ -20230,7 +20231,8 @@
        * @function
        * @param {String} name name of the sprite
        * @param {Object} [settings] Additional settings passed to the {@link me.Sprite} contructor
-       * @return {me.Sprite}
+       * @param {Boolean} [nineSlice=false] if true returns a 9-slice sprite
+       * @return {me.Sprite|me.NineSliceSprite}
        * @example
        * // create a new texture object under the `game` namespace
        * game.texture = new me.video.renderer.Texture(
@@ -20243,11 +20245,22 @@
        * var sprite = game.texture.createSpriteFromName("coin.png");
        * // set the renderable position to bottom center
        * sprite.anchorPoint.set(0.5, 1.0);
+       * ...
+       * ...
+       * // create a 9-slice sprite
+       * var dialogPanel = game.texture.createSpriteFromName(
+       *  "rpg_dialo.png",
+       *  // width & height are mandatory for 9-slice sprites
+       *  { width: this.width, height: this.height },
+       *  true
+       * );
        */
-      Texture.prototype.createSpriteFromName = function createSpriteFromName (name, settings) {
+      Texture.prototype.createSpriteFromName = function createSpriteFromName (name, settings, nineSlice) {
+            if ( nineSlice === void 0 ) nineSlice = false;
+
           // instantiate a new sprite object
           return pool.pull(
-              "me.Sprite",
+              nineSlice === true ? "me.NineSliceSprite" : "me.Sprite",
               0, 0,
               Object.assign({
                   image: this,
@@ -20335,7 +20348,7 @@
      * @param {String} [settings.region] region name of a specific region to use when using a texture atlas, see {@link me.Renderer.Texture}
      * @param {Number} [settings.framewidth] Width of a single frame within the spritesheet
      * @param {Number} [settings.frameheight] Height of a single frame within the spritesheet
-     * @param {String|Color} [settings.tint] a tint to be applied to this sprite
+     * @param {String|me.Color} [settings.tint] a tint to be applied to this sprite
      * @param {Number} [settings.flipX] flip the sprite on the horizontal axis
      * @param {Number} [settings.flipY] flip the sprite on the vertical axis
      * @param {me.Vector2d} [settings.anchorPoint={x:0.5, y:0.5}] Anchor point to draw the frame at (defaults to the center of the frame).
@@ -20492,7 +20505,7 @@
             // set the default rotation angle is defined in the settings
             // * WARNING: rotating sprites decreases performance with Canvas Renderer
             if (typeof (settings.rotation) !== "undefined") {
-                this.currentTransform.rotate(settings.rotation);
+                this.rotate(settings.rotation);
             }
 
             // update anchorPoint
@@ -21413,7 +21426,7 @@
      * @function
      * @param {HTMLCanvasElement} canvas
      * @param {Boolean} [transparent=true] use false to disable transparency
-     * @return {Context2d}
+     * @return {CanvasRenderingContext2D}
      */
     Renderer.prototype.getContext2d = function getContext2d (c, transparent) {
         if (typeof c === "undefined" || c === null) {
@@ -21655,11 +21668,15 @@
      * @name setTint
      * @memberOf me.Renderer.prototype
      * @function
-     * @param {me.Color} [tint] the tint color
+     * @param {me.Color} tint the tint color
+     * @param {Number} [alpha] an alpha value to be applied to the tint
      */
-    Renderer.prototype.setTint = function setTint (tint) {
+    Renderer.prototype.setTint = function setTint (tint, alpha) {
+            if ( alpha === void 0 ) alpha = tint.alpha;
+
         // global tint color
         this.currentTint.copy(tint);
+        this.currentTint.alpha *= alpha;
     };
 
     /**
@@ -22726,7 +22743,7 @@
          * // get the TMX Map Layer called "Front layer"
          * var layer = me.game.world.getChildByName("Front Layer")[0];
          * // get the tile object corresponding to the latest pointer position
-         * var tile = layer.getTile(me.input.pointer.pos.x, me.input.pointer.pos.y);
+         * var tile = layer.getTile(me.input.pointer.x, me.input.pointer.y);
          */
         TMXLayer.prototype.getTile = function getTile (x, y) {
             var tile = null;
@@ -23219,8 +23236,8 @@
      * @return {boolean} True if the bounds overlap, otherwise false
      */
     Bounds.prototype.overlaps = function overlaps (bounds) {
-        return (this.left <= bounds.right && this.right >= bounds.left
-            && this.bottom >= bounds.top && this.top <= bounds.bottom);
+        return !(this.right < bounds.left || this.left > bounds.right ||
+                 this.bottom < bounds.top || this.top > bounds.bottom);
     };
 
     /**
@@ -26554,6 +26571,8 @@
          * me.loader.preload(game.resources, this.loaded.bind(this));
          */
         preload: function preload(res, onload, switchToLoadState) {
+            if ( switchToLoadState === void 0 ) switchToLoadState = true;
+
             // parse the resources
             for (var i = 0; i < res.length; i++) {
                 resourceCount += this.load(
@@ -26567,7 +26586,7 @@
                 this.onload = onload;
             }
 
-            if (switchToLoadState !== false) {
+            if (switchToLoadState === true) {
                 // swith to the loading screen
                 state.change(state.LOADING);
             }
@@ -27627,6 +27646,10 @@
         device.hasDeviceOrientation = !!window.DeviceOrientationEvent;
         device.hasAccelerometer = !!window.DeviceMotionEvent;
 
+        // support the ScreenOrientation API
+        device.ScreenOrientation = (typeof screen !== "undefined") &&
+                                   (typeof screen.orientation !== "undefined");
+
         // fullscreen api detection & polyfill when possible
         device.hasFullscreenSupport = prefixed("fullscreenEnabled", document) ||
                                     document.mozFullScreenEnabled;
@@ -27769,6 +27792,16 @@
          */
         hasDeviceOrientation : false,
 
+        /**
+         * Supports the ScreenOrientation API
+         * @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/onchange
+         * @type Boolean
+         * @readonly
+         * @name ScreenOrientation
+         * @memberOf me.device
+         */
+        ScreenOrientation : false,
+
         /**
          * Browser full screen support
          * @type Boolean
@@ -28201,7 +28234,7 @@
             var screen = window.screen;
 
             // first try using "standard" values
-            if (typeof screen !== "undefined") {
+            if (this.ScreenOrientation === true) {
                 var orientation = prefixed("orientation", screen);
                 if (typeof orientation !== "undefined" && typeof orientation.type === "string") {
                     // Screen Orientation API specification
@@ -29033,14 +29066,149 @@
         this.fragment = null;
     };
 
+    /**
+     * @classdesc
+     * a Vertex Buffer object
+     * @class VertexArrayBuffer
+     * @private
+     */
+
+    var VertexArrayBuffer = function VertexArrayBuffer(vertex_size, vertex_per_quad) {
+        // the size of one vertex
+        this.vertexSize = vertex_size;
+        // size of a quad in vertex
+        this.quadSize = vertex_per_quad;
+        // the maximum number of vertices the vertex array buffer can hold
+        this.maxVertex = 256;
+        // the current number of vertices added to the vertex array buffer
+        this.vertexCount = 0;
+
+        // the actual vertex data buffer
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        // Float32 and Uint32 view of the vertex data array buffer
+        this.bufferF32 = new Float32Array(this.buffer);
+        this.bufferU32 = new Uint32Array(this.buffer);
+
+
+        return this;
+    };
+
+    /**
+     * clear the vertex array buffer
+     */
+    VertexArrayBuffer.prototype.clear = function clear () {
+        this.vertexCount = 0;
+    };
+
+
+    /**
+     * return true if full
+     */
+    VertexArrayBuffer.prototype.isFull = function isFull (vertex) {
+             if ( vertex === void 0 ) vertex = 0;
+
+         return (this.vertexCount + vertex >= this.maxVertex);
+    };
+
+    /**
+     * resize the vertex buffer, retaining its original contents
+     */
+    VertexArrayBuffer.prototype.resize = function resize () {
+        // double the vertex size
+        this.maxVertex <<= 1;
+        // save a reference to the previous data
+        var data = this.bufferF32;
+
+        // recreate ArrayBuffer and views
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        this.bufferF32 = new Float32Array(this.buffer);
+        this.bufferU32 = new Uint32Array(this.buffer);
+
+        // copy previous data
+        this.bufferF32.set(data);
+
+        return this;
+    };
+
+    /**
+     * push a new vertex to the buffer
+     */
+    VertexArrayBuffer.prototype.push = function push (x, y, u, v, tint) {
+        var offset = this.vertexCount * this.vertexSize;
+
+        if (this.vertexCount >= this.maxVertex) {
+            this.resize();
+        }
+
+        this.bufferF32[offset + 0] = x;
+        this.bufferF32[offset + 1] = y;
+
+        if (typeof u !== "undefined") {
+            this.bufferF32[offset + 2] = u;
+            this.bufferF32[offset + 3] = v;
+        }
+
+        if (typeof tint !== "undefined") {
+            this.bufferU32[offset + 4] = tint;
+        }
+
+        this.vertexCount++;
+
+        return this;
+    };
+
+    /**
+     * return a reference to the data in Float32 format
+     */
+    VertexArrayBuffer.prototype.toFloat32 = function toFloat32 (begin, end) {
+        if (typeof end !== "undefined") {
+            return this.bufferF32.subarray(begin, end);
+        } else {
+            return this.bufferF32;
+        }
+    };
+
+    /**
+     * return a reference to the data in Uint32 format
+     */
+    VertexArrayBuffer.prototype.toUint32 = function toUint32 (begin, end) {
+        if (typeof end !== "undefined") {
+            return this.bufferU32.subarray(begin, end);
+        } else {
+            return this.bufferU32;
+        }
+    };
+
+    /**
+     * return the size of the vertex in vertex
+     */
+    VertexArrayBuffer.prototype.length = function length () {
+        return this.vertexCount;
+    };
+
+    /**
+     * return true if empty
+     */
+    VertexArrayBuffer.prototype.isEmpty = function isEmpty () {
+        return this.vertexCount === 0;
+    };
+
     var primitiveVertex = "// Current vertex point\nattribute vec2 aVertex;\n\n// Projection matrix\nuniform mat4 uProjectionMatrix;\n\n// Vertex color\nuniform vec4 uColor;\n\n// Fragment color\nvarying vec4 vColor;\n\nvoid main(void) {\n    // Transform the vertex position by the projection matrix\n    gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);\n    // Pass the remaining attributes to the fragment shader\n    vColor = vec4(uColor.rgb * uColor.a, uColor.a);\n}\n";
 
     var primitiveFragment = "varying vec4 vColor;\n\nvoid main(void) {\n    gl_FragColor = vColor;\n}\n";
 
-    var quadVertex = "attribute vec2 aVertex;\nattribute vec2 aRegion;\nattribute vec4 aColor;\n\nuniform mat4 uProjectionMatrix;\n\nvarying vec2 vRegion;\nvarying vec4 vColor;\n\nvoid main(void) {\n    // Transform the vertex position by the projection matrix\n     gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);\n    // Pass the remaining attributes to the fragment shader\n    vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n    vRegion = aRegion;\n}\n";
+    var quadVertex = "attribute vec2 aVertex;\nattribute vec2 aRegion;\nattribute vec4 aColor;\n\nuniform mat4 uProjectionMatrix;\n\nvarying vec2 vRegion;\nvarying vec4 vColor;\n\nvoid main(void) {\n    // Transform the vertex position by the projection matrix\n     gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);\n    // Pass the remaining attributes to the fragment shader\n    vColor = vec4(aColor.bgr * aColor.a, aColor.a);\n    vRegion = aRegion;\n}\n";
 
     var quadFragment = "uniform sampler2D uSampler;\nvarying vec4 vColor;\nvarying vec2 vRegion;\n\nvoid main(void) {\n    gl_FragColor = texture2D(uSampler, vRegion) * vColor;\n}\n";
 
+    // a pool of resuable vectors
+    var V_ARRAY = [
+        new Vector2d(),
+        new Vector2d(),
+        new Vector2d(),
+        new Vector2d()
+    ];
+
     // Handy constants
     var VERTEX_SIZE = 2;
     var REGION_SIZE = 2;
@@ -29049,15 +29217,31 @@
     var ELEMENT_SIZE = VERTEX_SIZE + REGION_SIZE + COLOR_SIZE;
     var ELEMENT_OFFSET = ELEMENT_SIZE * Float32Array.BYTES_PER_ELEMENT;
 
-    var VERTEX_ELEMENT = 0;
-    var REGION_ELEMENT = VERTEX_ELEMENT + VERTEX_SIZE;
-    var COLOR_ELEMENT = REGION_ELEMENT + REGION_SIZE;
-
     var ELEMENTS_PER_QUAD = 4;
     var INDICES_PER_QUAD = 6;
 
     var MAX_LENGTH = 16000;
 
+    /**
+     * Create a full index buffer for the element array
+     * @ignore
+     */
+    function createIB() {
+        var indices = [
+            0, 1, 2,
+            2, 1, 3
+        ];
+
+        // ~384KB index buffer
+        var data = new Array(MAX_LENGTH * INDICES_PER_QUAD);
+        for (var i = 0; i < data.length; i++) {
+            data[i] = indices[i % INDICES_PER_QUAD] +
+                ~~(i / INDICES_PER_QUAD) * ELEMENTS_PER_QUAD;
+        }
+
+        return new Uint16Array(data);
+    }
+
     /**
      * @classdesc
      * A WebGL Compositor object. This class handles all of the WebGL state<br>
@@ -29088,20 +29272,12 @@
          * @type Number
          * @readonly
          */
-        this.length = 0;
+        //this.length = 0;
 
         // list of active texture units
         this.currentTextureUnit = -1;
         this.boundTextures = [];
 
-        // Vector pool
-        this.v = [
-            new Vector2d(),
-            new Vector2d(),
-            new Vector2d(),
-            new Vector2d()
-        ];
-
         // the associated renderer
         this.renderer = renderer;
 
@@ -29111,9 +29287,6 @@
         // Global fill color
         this.color = renderer.currentColor;
 
-        // Global tint color
-        this.tint = renderer.currentTint;
-
         // Global transformation matrix
         this.viewMatrix = renderer.currentTransform;
 
@@ -29149,9 +29322,9 @@
         /// define all vertex attributes
         this.addAttribute("aVertex", 2, gl.FLOAT, false, 0 * Float32Array.BYTES_PER_ELEMENT); // 0
         this.addAttribute("aRegion", 2, gl.FLOAT, false, 2 * Float32Array.BYTES_PER_ELEMENT); // 1
-        this.addAttribute("aColor",  4, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT); // 2
+        this.addAttribute("aColor",  4, gl.UNSIGNED_BYTE, true, 4 * Float32Array.BYTES_PER_ELEMENT); // 2
 
-        // Stream buffer
+        // vertex buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
         gl.bufferData(
             gl.ARRAY_BUFFER,
@@ -29159,17 +29332,11 @@
             gl.STREAM_DRAW
         );
 
-        this.sbSize = 256;
-        this.sbIndex = 0;
-
-        // Quad stream buffer
-        this.stream = new Float32Array(
-            this.sbSize * ELEMENT_SIZE * ELEMENTS_PER_QUAD
-        );
+        this.vertexBuffer = new VertexArrayBuffer(ELEMENT_SIZE, ELEMENTS_PER_QUAD);
 
-        // Index buffer
+        // Cache index buffer (TODO Remove use for cache by replacing drawElements by drawArrays)
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.createIB(), gl.STATIC_DRAW);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, createIB(), gl.STATIC_DRAW);
 
         // register to the CANVAS resize channel
         on(CANVAS_ONRESIZE, function (width, height) {
@@ -29185,9 +29352,6 @@
      * @ignore
      */
     WebGLCompositor.prototype.reset = function reset () {
-        this.sbIndex = 0;
-        this.length = 0;
-
         // WebGL context
         this.gl = this.renderer.gl;
 
@@ -29225,7 +29389,7 @@
      * @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
-     * @param {Boolean} normalized whether integer data values should be normalized into a certain
+     * @param {Boolean} normalized whether integer data values should be normalized into a certain range when being cast to a float
      * @param {Number} offset offset in bytes of the first component in the vertex attribute array
      */
     WebGLCompositor.prototype.addAttribute = function addAttribute (name, size, type, normalized, offset) {
@@ -29277,10 +29441,10 @@
         var gl = this.gl;
         var isPOT = isPowerOfTwo(w || image.width) && isPowerOfTwo(h || image.height);
         var texture = gl.createTexture();
-        var rs = (repeat.search(/^repeat(-x)?$/) === 0) && (isPOT || this.renderer.WebGLVersion === 2) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
-        var rt = (repeat.search(/^repeat(-y)?$/) === 0) && (isPOT || this.renderer.WebGLVersion === 2) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+        var rs = (repeat.search(/^repeat(-x)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+        var rt = (repeat.search(/^repeat(-y)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
 
-        this.setTexture2D(texture, unit);
+        this.bindTexture2D(texture, unit);
 
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, rs);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, rt);
@@ -29304,13 +29468,13 @@
 
     /**
      * assign the given WebGL texture to the current batch
-     * @name setTexture2D
+     * @name bindTexture2D
      * @memberOf me.WebGLCompositor
      * @function
      * @param {WebGLTexture} a WebGL texture
      * @param {Number} unit Texture unit to which the given texture is bound
      */
-    WebGLCompositor.prototype.setTexture2D = function setTexture2D (texture, unit) {
+    WebGLCompositor.prototype.bindTexture2D = function bindTexture2D (texture, unit) {
         var gl = this.gl;
 
         if (texture !== this.boundTextures[unit]) {
@@ -29330,6 +29494,17 @@
         }
     };
 
+    /**
+     * unbind the given WebGL texture, forcing it to be reuploaded
+     * @name unbindTexture2D
+     * @memberOf me.WebGLCompositor
+     * @function
+     * @param {WebGLTexture} a WebGL texture
+     */
+    WebGLCompositor.prototype.unbindTexture2D = function unbindTexture2D (texture) {
+        var unit = this.renderer.cache.getUnit(texture);
+        this.boundTextures[unit] = null;
+    };
 
     /**
      * @ignore
@@ -29350,43 +29525,12 @@
                 texture.premultipliedAlpha
             );
         } else {
-            this.setTexture2D(texture2D, unit);
+            this.bindTexture2D(texture2D, unit);
         }
 
         return this.currentTextureUnit;
     };
 
-    /**
-     * Create a full index buffer for the element array
-     * @ignore
-     */
-    WebGLCompositor.prototype.createIB = function createIB () {
-        var indices = [
-            0, 1, 2,
-            2, 1, 3
-        ];
-
-        // ~384KB index buffer
-        var data = new Array(MAX_LENGTH * INDICES_PER_QUAD);
-        for (var i = 0; i < data.length; i++) {
-            data[i] = indices[i % INDICES_PER_QUAD] +
-                ~~(i / INDICES_PER_QUAD) * ELEMENTS_PER_QUAD;
-        }
-
-        return new Uint16Array(data);
-    };
-
-    /**
-     * Resize the stream buffer, retaining its original contents
-     * @ignore
-     */
-    WebGLCompositor.prototype.resizeSB = function resizeSB () {
-        this.sbSize <<= 1;
-        var stream = new Float32Array(this.sbSize * ELEMENT_SIZE * ELEMENTS_PER_QUAD);
-        stream.set(this.stream);
-        this.stream = stream;
-    };
-
     /**
      * Select the shader to use for compositing
      * @name useShader
@@ -29424,33 +29568,29 @@
      * @memberOf me.WebGLCompositor
      * @function
      * @param {me.Renderer.Texture} texture Source texture
-     * @param {String} key Source texture region name
      * @param {Number} x Destination x-coordinate
      * @param {Number} y Destination y-coordinate
      * @param {Number} w Destination width
      * @param {Number} h Destination height
+     * @param {number} u0 Texture UV (u0) value.
+     * @param {number} v0 Texture UV (v0) value.
+     * @param {number} u1 Texture UV (u1) value.
+     * @param {number} v1 Texture UV (v1) value.
+     * @param {number} tint tint color to be applied to the texture in UINT32 format
      */
-    WebGLCompositor.prototype.addQuad = function addQuad (texture, key, x, y, w, h) {
-        //var gl = this.gl;
-        var color = this.color.toArray();
-        var tint = this.tint.toArray();
+    WebGLCompositor.prototype.addQuad = function addQuad (texture, x, y, w, h, u0, v0, u1, v1, tint) {
 
-        if (color[3] < 1 / 255) {
+        if (this.color.alpha < 1 / 255) {
             // Fast path: don't send fully transparent quads
             return;
-        } else {
-            // use the global alpha
-            tint[3] = color[3];
         }
 
-        if (this.length >= MAX_LENGTH) {
+        this.useShader(this.quadShader);
+
+        if (this.vertexBuffer.isFull(4)) {
+            // is the vertex buffer full if we add 4 more vertices
             this.flush();
         }
-        if (this.length >= this.sbSize) {
-            this.resizeSB();
-        }
-
-        this.useShader(this.quadShader);
 
         // upload and activate the texture if necessary
         var unit = this.uploadTexture(texture);
@@ -29459,56 +29599,22 @@
 
         // Transform vertices
         var m = this.viewMatrix,
-            v0 = this.v[0].set(x, y),
-            v1 = this.v[1].set(x + w, y),
-            v2 = this.v[2].set(x, y + h),
-            v3 = this.v[3].set(x + w, y + h);
+            vec0 = V_ARRAY[0].set(x, y),
+            vec1 = V_ARRAY[1].set(x + w, y),
+            vec2 = V_ARRAY[2].set(x, y + h),
+            vec3 = V_ARRAY[3].set(x + w, y + h);
 
         if (!m.isIdentity()) {
-            m.apply(v0);
-            m.apply(v1);
-            m.apply(v2);
-            m.apply(v3);
-        }
-
-        // Array index computation
-        var idx0 = this.sbIndex,
-            idx1 = idx0 + ELEMENT_SIZE,
-            idx2 = idx1 + ELEMENT_SIZE,
-            idx3 = idx2 + ELEMENT_SIZE;
-
-        // Fill vertex buffer
-        // FIXME: Pack each vertex vector into single float
-        this.stream[idx0 + VERTEX_ELEMENT + 0] = v0.x;
-        this.stream[idx0 + VERTEX_ELEMENT + 1] = v0.y;
-        this.stream[idx1 + VERTEX_ELEMENT + 0] = v1.x;
-        this.stream[idx1 + VERTEX_ELEMENT + 1] = v1.y;
-        this.stream[idx2 + VERTEX_ELEMENT + 0] = v2.x;
-        this.stream[idx2 + VERTEX_ELEMENT + 1] = v2.y;
-        this.stream[idx3 + VERTEX_ELEMENT + 0] = v3.x;
-        this.stream[idx3 + VERTEX_ELEMENT + 1] = v3.y;
-
-        // Fill texture coordinates buffer
-        var uvs = texture.getUVs(key);
-        // FIXME: Pack each texture coordinate into single floats
-        this.stream[idx0 + REGION_ELEMENT + 0] = uvs[0];
-        this.stream[idx0 + REGION_ELEMENT + 1] = uvs[1];
-        this.stream[idx1 + REGION_ELEMENT + 0] = uvs[2];
-        this.stream[idx1 + REGION_ELEMENT + 1] = uvs[1];
-        this.stream[idx2 + REGION_ELEMENT + 0] = uvs[0];
-        this.stream[idx2 + REGION_ELEMENT + 1] = uvs[3];
-        this.stream[idx3 + REGION_ELEMENT + 0] = uvs[2];
-        this.stream[idx3 + REGION_ELEMENT + 1] = uvs[3];
-
-        // Fill color buffer
-        // FIXME: Pack color vector into single float
-        this.stream.set(tint, idx0 + COLOR_ELEMENT);
-        this.stream.set(tint, idx1 + COLOR_ELEMENT);
-        this.stream.set(tint, idx2 + COLOR_ELEMENT);
-        this.stream.set(tint, idx3 + COLOR_ELEMENT);
-
-        this.sbIndex += ELEMENT_SIZE * ELEMENTS_PER_QUAD;
-        this.length++;
+            m.apply(vec0);
+            m.apply(vec1);
+            m.apply(vec2);
+            m.apply(vec3);
+        }
+
+        this.vertexBuffer.push(vec0.x, vec0.y, u0, v0, tint);
+        this.vertexBuffer.push(vec1.x, vec1.y, u1, v0, tint);
+        this.vertexBuffer.push(vec2.x, vec2.y, u0, v1, tint);
+        this.vertexBuffer.push(vec3.x, vec3.y, u1, v1, tint);
     };
 
     /**
@@ -29517,28 +29623,34 @@
      * @memberOf me.WebGLCompositor
      * @function
      */
-    WebGLCompositor.prototype.flush = function flush () {
-        if (this.length) {
+    WebGLCompositor.prototype.flush = function flush (mode) {
+            if ( mode === void 0 ) mode = this.mode;
+
+        var vertex = this.vertexBuffer;
+        var vertexCount = vertex.vertexCount;
+
+        if (vertexCount > 0) {
             var gl = this.gl;
+            var vertexSize = vertex.vertexSize;
 
             // Copy data into stream buffer
-            var len = this.length * ELEMENT_SIZE * ELEMENTS_PER_QUAD;
-            gl.bufferData(
-                gl.ARRAY_BUFFER,
-                this.stream.subarray(0, len),
-                gl.STREAM_DRAW
-            );
+            if (this.renderer.WebGLVersion > 1) {
+                gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(), gl.STREAM_DRAW, 0, vertexCount * vertexSize);
+            } else {
+                gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(0, vertexCount * vertexSize), gl.STREAM_DRAW);
+            }
 
             // Draw the stream buffer
-            gl.drawElements(
-                this.mode,
-                this.length * INDICES_PER_QUAD,
-                gl.UNSIGNED_SHORT,
-                0
-            );
+            // TODO : finalize the WebGLCompositor implementation (splitting this one into two)
+            // so that different compositor with different attributes/uniforms & drawing method can be used
+            if (this.activeShader === this.primitiveShader) {
+                gl.drawArrays(mode, 0, vertexCount);
+            } else {
+                gl.drawElements(mode, vertexCount / vertex.quadSize * INDICES_PER_QUAD, gl.UNSIGNED_SHORT, 0);
+            }
 
-            this.sbIndex = 0;
-            this.length = 0;
+            // clear the vertex buffer
+            vertex.clear();
         }
     };
 
@@ -29547,43 +29659,31 @@
      * @name drawVertices
      * @memberOf me.WebGLCompositor
      * @function
-     * @param {GLENUM} [mode=gl.TRIANGLES] primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
-     * @param {me.Vector2d[]} [verts=[]] vertices
+     * @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 {me.Vector2d[]} verts vertices
      * @param {Number} [vertexCount=verts.length] amount of points defined in the points array
      */
     WebGLCompositor.prototype.drawVertices = function drawVertices (mode, verts, vertexCount) {
-        var gl = this.gl;
-
-        vertexCount = vertexCount || verts.length;
+            if ( vertexCount === void 0 ) vertexCount = verts.length;
 
         // use the primitive shader
         this.useShader(this.primitiveShader);
-
         // Set the line color
         this.primitiveShader.setUniform("uColor", this.color);
 
-        // Put vertex data into the stream buffer
-        var offset = 0;
         var m = this.viewMatrix;
+        var vertex = this.vertexBuffer;
         var m_isIdentity = m.isIdentity();
+
         for (var i = 0; i < vertexCount; i++) {
             if (!m_isIdentity) {
                 m.apply(verts[i]);
             }
-            this.stream[offset + 0] = verts[i].x;
-            this.stream[offset + 1] = verts[i].y;
-            offset += ELEMENT_SIZE;
+            vertex.push(verts[i].x, verts[i].y);
         }
 
-        // Copy data into the stream buffer
-        gl.bufferData(
-            gl.ARRAY_BUFFER,
-            this.stream.subarray(0, vertexCount * ELEMENT_SIZE),
-            gl.STREAM_DRAW
-        );
-
-        // Draw the stream buffer
-        gl.drawArrays(mode, 0, vertexCount);
+        // flush
+        this.flush(mode);
     };
 
     /**
@@ -29640,14 +29740,6 @@
             // parent contructor
             Renderer.call(this, options);
 
-            /**
-             * The WebGL context
-             * @name gl
-             * @memberOf me.WebGLRenderer
-             * type {WebGLRenderingContext}
-             */
-            this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
-
             /**
              * The WebGL version used by this renderer (1 or 2)
              * @name WebGLVersion
@@ -29656,7 +29748,7 @@
              * @default 1
              * @readonly
              */
-            this.webGLVersion = 1;
+            this.WebGLVersion = 1;
 
             /**
              * The vendor string of the underlying graphics driver.
@@ -29678,6 +29770,14 @@
              */
             this.GPURenderer = null;
 
+            /**
+             * The WebGL context
+             * @name gl
+             * @memberOf me.WebGLRenderer
+             * type {WebGLRenderingContext}
+             */
+            this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
+
             /**
              * Maximum number of texture unit supported under the current context
              * @name maxTextures
@@ -29958,14 +30058,18 @@
             this.currentCompositor.uploadTexture(this.fontTexture, 0, 0, 0, true);
 
             // Add the new quad
-            var key = bounds.left + "," + bounds.top + "," + bounds.width + "," + bounds.height;
+            var uvs = this.fontTexture.getUVs(bounds.left + "," + bounds.top + "," + bounds.width + "," + bounds.height);
             this.currentCompositor.addQuad(
                 this.fontTexture,
-                key,
                 bounds.left,
                 bounds.top,
                 bounds.width,
-                bounds.height
+                bounds.height,
+                uvs[0],
+                uvs[1],
+                uvs[2],
+                uvs[3],
+                this.currentTint.toUint32()
             );
 
             // Clear font context2D
@@ -30025,8 +30129,9 @@
                 dy |= 0;
             }
 
-            var key = sx + "," + sy + "," + sw + "," + sh;
-            this.currentCompositor.addQuad(this.cache.get(image), key, dx, dy, dw, dh);
+            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());
         };
 
         /**
@@ -30042,8 +30147,8 @@
          * @see me.WebGLRenderer#createPattern
          */
         WebGLRenderer.prototype.drawPattern = function drawPattern (pattern, x, y, width, height) {
-            var key = "0,0," + width + "," + height;
-            this.currentCompositor.addQuad(pattern, key, 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());
         };
 
 
@@ -30257,7 +30362,7 @@
          * @param {Number} alpha 0.0 to 1.0 values accepted.
          */
         WebGLRenderer.prototype.setGlobalAlpha = function setGlobalAlpha (a) {
-            this.currentColor.glArray[3] = a;
+            this.currentColor.alpha = a;
         };
 
         /**
@@ -30269,9 +30374,9 @@
          * @param {me.Color|String} color css color string.
          */
         WebGLRenderer.prototype.setColor = function setColor (color) {
-            var alpha = this.currentColor.glArray[3];
+            var alpha = this.currentColor.alpha;
             this.currentColor.copy(color);
-            this.currentColor.glArray[3] *= alpha;
+            this.currentColor.alpha *= alpha;
         };
 
         /**
@@ -30534,7 +30639,7 @@
             }
 
             // calculate all vertices
-            for (i = 0; i < indices.length; i ++ ) {
+            for (i = 0; i < indices.length; i++ ) {
                 glPoints[i].set(x + points[indices[i]].x, y + points[indices[i]].y);
             }
 
@@ -31037,9 +31142,9 @@
             },
             false
         );
-        if (typeof window.screen !== "undefined") {
-            // is this one required ?
-            window.screen.onorientationchange = function (e) {
+
+        if (device$1.ScreenOrientation === true) {
+            window.screen.orientation.onchange = function (e) {
                 emit(WINDOW_ONORIENTATION_CHANGE, e);
             };
         }
@@ -31682,10 +31787,10 @@
          * this can be overridden by the plugin
          * @public
          * @type String
-         * @default "10.0.2"
+         * @default "10.2.1"
          * @name me.plugin.Base#version
          */
-        this.version = "10.0.2";
+        this.version = "10.2.1";
     };
 
     /**
@@ -32719,6 +32824,8 @@
      * @ignore
      */
     var setContextStyle = function(context, font, stroke) {
+        if ( stroke === void 0 ) stroke = false;
+
         context.font = font.font;
         context.fillStyle = font.fillStyle.toRGBA();
         if (stroke === true) {
@@ -32748,7 +32855,8 @@
      * @param {String} [settings.textBaseline="top"] the text baseline
      * @param {Number} [settings.lineHeight=1.0] line spacing height
      * @param {me.Vector2d} [settings.anchorPoint={x:0.0, y:0.0}] anchor point to draw the text at
-     * @param {(String|String[])} [settings.text] a string, or an array of strings
+     * @param {Boolean} [settings.offScreenCanvas=false] whether to draw the font to an individual "cache" texture first
+     * @param {(String|String[])} [settings.text=""] a string, or an array of strings
      * @example
      * var font = new me.Text(0, 0, {font: "Arial", size: 8, fillStyle: this.color});
      */
@@ -32841,6 +32949,17 @@
              */
             this.lineHeight = settings.lineHeight || 1.0;
 
+            /**
+             * whether to draw the font to a indidividual offscreen canvas texture first <br>
+             * Note: this will improve performances when using WebGL, but will impact
+             * memory consumption as every text element will have its own canvas texture
+             * @public
+             * @type Boolean
+             * @default false
+             * @name me.Text#offScreenCanvas
+             */
+            this.offScreenCanvas = false;
+
             /**
              * the text to be displayed
              * @private
@@ -32883,8 +33002,31 @@
                 this.italic();
             }
 
+            if (settings.offScreenCanvas === true) {
+                this.offScreenCanvas = true;
+                this.canvas = createCanvas(2, 2, true);
+                this.context = this.canvas.getContext("2d");
+            }
+
             // set the text
             this.setText(settings.text);
+
+            // force update bounds on object creation
+            this.update(0);
+        };
+
+        /** @ignore */
+        Text.prototype.onDeactivateEvent = function onDeactivateEvent () {
+            // free the canvas and potential corresponding texture when deactivated
+            if (this.offScreenCanvas === true) {
+                if (renderer instanceof WebGLRenderer) {
+                    renderer.currentCompositor.unbindTexture2D(renderer.cache.get(this.canvas));
+                    renderer.cache.remove(this.canvas);
+                }
+                this.canvas.width = this.canvas.height = 0;
+                this.context = undefined;
+                this.canvas = undefined;
+            }
         };
 
         /**
@@ -32966,9 +33108,7 @@
          * @return this object for chaining
          */
         Text.prototype.setText = function setText (value) {
-            if (typeof value === "undefined") {
-                value = "";
-            }
+            if ( value === void 0 ) value = "";
 
             if (this._text.toString() !== value.toString()) {
                 if (!Array.isArray(value)) {
@@ -32987,28 +33127,25 @@
          * @name measureText
          * @memberOf me.Text.prototype
          * @function
-         * @param {me.CanvasRenderer|me.WebGLRenderer} [renderer] reference a renderer instance
+         * @param {me.CanvasRenderer|me.WebGLRenderer} [renderer] reference to the active renderer
          * @param {String} [text] the text to be measured
          * @param {me.Rect|me.Bounds} [ret] a object in which to store the text metrics
          * @returns {TextMetrics} a TextMetrics object with two properties: `width` and `height`, defining the output dimensions
          */
         Text.prototype.measureText = function measureText (_renderer, text, ret) {
             var context;
+            var textMetrics = ret || this.getBounds();
+            var lineHeight = this.fontSize * this.lineHeight;
+            var strings = typeof text !== "undefined" ? ("" + (text)).split("\n") : this._text;
 
-            if (typeof _renderer === "undefined") {
-                context = renderer.getFontContext();
+            if (this.offScreenCanvas === true) {
+                context = this.context;
             } else if (_renderer instanceof Renderer) {
                 context = _renderer.getFontContext();
             } else {
-                // else it's a 2d rendering context object
-                context = _renderer;
+                context = renderer.getFontContext();
             }
 
-            var textMetrics = ret || this.getBounds();
-            var lineHeight = this.fontSize * this.lineHeight;
-
-            var strings = typeof text !== "undefined" ? ("" + (text)).split("\n") : this._text;
-
             // save the previous context
             context.save();
 
@@ -33044,7 +33181,33 @@
          */
         Text.prototype.update = function update (/* dt */) {
             if (this.isDirty === true) {
-                this.measureText();
+                var bounds = this.measureText(renderer);
+                if (this.offScreenCanvas === true) {
+                    var width = Math.round(bounds.width),
+                        height = Math.round(bounds.height);
+
+                    if (renderer instanceof WebGLRenderer) {
+                        // invalidate the previous corresponding texture so that it can reuploaded once changed
+                        renderer.currentCompositor.unbindTexture2D(renderer.cache.get(this.canvas));
+
+                        if (renderer.WebGLVersion === 1) {
+                            // round size to next Pow2
+                            width = nextPowerOfTwo(bounds.width);
+                            height = nextPowerOfTwo(bounds.height);
+                        }
+                    }
+
+                    // resize the cache canvas if necessary
+                    if (this.canvas.width < width || this.canvas.height < height) {
+                        this.canvas.width = width;
+                        this.canvas.height = height;
+                        // resizing the canvas will automatically clear its content
+                    } else {
+                        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                    }
+                    this._drawFont(this.context, this._text,  this.pos.x - bounds.x, this.pos.y - bounds.y, false);
+
+                }
             }
             return this.isDirty;
         };
@@ -33094,7 +33257,12 @@
             }
 
             // draw the text
-            renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke || false));
+            if (this.offScreenCanvas === true) {
+                renderer.drawImage(this.canvas, this.getBounds().x, this.getBounds().y);
+            } else {
+                renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke));
+            }
+
 
             // for backward compatibilty
             if (typeof this.ancestor === "undefined") {
@@ -33127,6 +33295,8 @@
          * @ignore
          */
         Text.prototype._drawFont = function _drawFont (context, text, x, y, stroke) {
+            if ( stroke === void 0 ) stroke = false;
+
             setContextStyle(context, this, stroke);
 
             var lineHeight = this.fontSize * this.lineHeight;
@@ -34044,6 +34214,8 @@
             else {
                 this.pos.y = y;
             }
+
+            this.isDirty = true;
         };
 
        /*
@@ -34114,6 +34286,216 @@
        return ImageLayer;
     }(Sprite));
 
+    /**
+     * @classdesc
+     * A NineSliceSprite is similar to a Sprite, but it uses 9-slice scaling to strech its inner area to fit the size of the Renderable,
+     * by proportionally scaling a sprite by splitting it in a grid of nine parts (with only parts 1, 3, 7, 9 not being scaled). <br>
+     * <img src="images/9-slice-scaling.png"/><br>
+     * @see https://en.wikipedia.org/wiki/9-slice_scaling
+     * @class NineSliceSprite
+     * @extends me.Sprite
+     * @memberOf me
+     * @constructor
+     * @param {Number} x the x coordinates of the sprite object
+     * @param {Number} y the y coordinates of the sprite object
+     * @param {Object} settings Configuration parameters for the Sprite object
+     * @param {Number} settings.width the width of the Renderable over which the sprite needs to be stretched
+     * @param {Number} settings.height the height of the Renderable over which the sprite needs to be stretched
+     * @param {me.Renderer.Texture|HTMLImageElement|HTMLCanvasElement|String} settings.image reference to a texture, spritesheet image or to a texture atlas
+     * @param {String} [settings.name=""] name of this object
+     * @param {String} [settings.region] region name of a specific region to use when using a texture atlas, see {@link me.Renderer.Texture}
+     * @param {Number} [settings.framewidth] Width of a single frame within the spritesheet
+     * @param {Number} [settings.frameheight] Height of a single frame within the spritesheet
+     * @param {String|me.Color} [settings.tint] a tint to be applied to this sprite
+     * @param {Number} [settings.flipX] flip the sprite on the horizontal axis
+     * @param {Number} [settings.flipY] flip the sprite on the vertical axis
+     * @param {me.Vector2d} [settings.anchorPoint={x:0.5, y:0.5}] Anchor point to draw the frame at (defaults to the center of the frame).
+     * @example
+     * this.panelSprite = new me.NineSliceSprite(0, 0, {
+     *     image : game.texture,
+     *     region : "grey_panel",
+     *     width : this.width,
+     *     height : this.height
+     * });
+     */
+
+    var NineSliceSprite = /*@__PURE__*/(function (Sprite) {
+        function NineSliceSprite(x, y, settings) {
+            // call the super constructor
+            Sprite.call(this, x, y, settings);
+
+            // ensure mandatory properties are defined
+            if ((typeof settings.width !== "number") || (typeof settings.height !== "number")) {
+                throw new Error("height and width properties are mandatory");
+            }
+
+            // override the renderable sprite with the given one
+            // resize based on the active frame
+            this.width = settings.width;
+            this.height = settings.height;
+        }
+
+        if ( Sprite ) NineSliceSprite.__proto__ = Sprite;
+        NineSliceSprite.prototype = Object.create( Sprite && Sprite.prototype );
+        NineSliceSprite.prototype.constructor = NineSliceSprite;
+
+        /**
+         * @ignore
+         */
+        NineSliceSprite.prototype.draw = function draw (renderer) {
+            // the frame to draw
+            var frame = this.current;
+
+            // cache the current position and size
+            var dx = this.pos.x,
+                dy = this.pos.y;
+
+            var w = frame.width,
+                h = frame.height;
+
+            // frame offset in the texture/atlas
+            var frame_offset = frame.offset;
+            var g_offset = this.offset;
+
+
+            // remove image's TexturePacker/ShoeBox rotation
+            if (frame.angle !== 0) {
+                renderer.translate(-dx, -dy);
+                renderer.rotate(frame.angle);
+                dx -= h;
+                w = frame.height;
+                h = frame.width;
+            }
+
+            var sx = g_offset.x + frame_offset.x,
+                sy = g_offset.y + frame_offset.y;
+
+            // should this be configurable ?
+            var corner_width = frame.width / 4,
+                corner_height = frame.height / 4;
+
+            // OPTIMIZE ME !
+
+            // DRAW CORNERS
+
+            // Top Left
+            renderer.drawImage(
+                this.image,
+                sx,                          // sx
+                sy,                          // sy
+                corner_width, corner_height, // sw,sh
+                dx, dy,                      // dx,dy
+                corner_width, corner_height  // dw,dh
+            );
+
+            // Top Right
+            renderer.drawImage(
+                this.image,
+                sx + w - corner_width,          // sx
+                sy,                             // sy
+                corner_width, corner_height,    // sw,sh
+                dx + this.width - corner_width, // dx
+                dy,                             // dy
+                corner_width, corner_height     // dw,dh
+            );
+            // Bottom Left
+            renderer.drawImage(
+                this.image,
+                sx,                                 // sx
+                sy + h - corner_height,             // sy
+                corner_width, corner_height,        // sw,sh
+                dx,                                 // dx
+                dy + this.height - corner_height,   // dy
+                corner_width, corner_height         // dw,dh
+            );
+            // Bottom Right
+            renderer.drawImage(
+                this.image,
+                sx + w - corner_width,              // sx
+                sy + h - corner_height,             // sy
+                corner_width, corner_height,        // sw,sh
+                dx + this.width - corner_width,     //dx
+                dy + this.height - corner_height,   // dy
+                corner_width, corner_height         // dw,dh
+            );
+
+
+            // DRAW SIDES and CENTER
+            var image_center_width = w - (corner_width << 1);
+            var image_center_height = h - (corner_height << 1);
+
+            var target_center_width = this.width - (corner_width << 1);
+            var target_center_height = this.height - (corner_height << 1);
+
+            //Top center
+            renderer.drawImage(
+                this.image,
+                sx + corner_width,         // sx
+                sy,                        // sy
+                image_center_width,        // sw
+                corner_height,             // sh
+                dx + corner_width,         // dx
+                dy,                        // dy
+                target_center_width,       // dw
+                corner_height              // dh
+            );
+
+            //Bottom center
+            renderer.drawImage(
+                this.image,
+                sx + corner_width,                  // sx
+                sy + h - corner_height,             // sy
+                image_center_width,                 // sw
+                corner_height,                      // sh
+                dx + corner_width,                  // dx
+                dy + this.height - corner_height,   // dx
+                target_center_width,                // dw
+                corner_height                       // dh
+            );
+
+            // Middle Left
+            renderer.drawImage(
+                this.image,
+                sx,                   // sx
+                sy + corner_height,   // sy
+                corner_width,         // sw
+                image_center_height,  // sh
+                dx,                   // dx
+                dy + corner_height,   // dy
+                corner_width,         // dw
+                target_center_height  // dh
+            );
+
+            // Middle Right
+            renderer.drawImage(
+                this.image,
+                sx + w - corner_width,          // sx
+                sy + corner_height,             // sy
+                corner_width,                   // sw
+                image_center_height,            // sh
+                dx + this.width - corner_width, // dx
+                dy + corner_height,             // dy
+                corner_width,                   // dw
+                target_center_height            // dh
+            );
+
+            // Middle Center
+            renderer.drawImage(
+                this.image,
+                sx + corner_width,    // sx
+                sy + corner_height,   // sy
+                image_center_width,   // sw
+                image_center_height,  // sh
+                dx + corner_width,    // dx
+                dy + corner_height,   // dy
+                target_center_width,  // dw
+                target_center_height  // dh
+            );
+        };
+
+        return NineSliceSprite;
+    }(Sprite));
+
     /**
      * @classdesc
      * GUI Object<br>
@@ -35952,7 +36334,7 @@
      * @name version
      * @type {string}
      */
-    var version = "10.0.2";
+    var version = "10.2.1";
 
 
     /**
@@ -35997,6 +36379,7 @@
         pool.register("me.Color", Color, true);
         pool.register("me.Particle", Particle, true);
         pool.register("me.Sprite", Sprite);
+        pool.register("me.NineSliceSprite", NineSliceSprite);
         pool.register("me.Renderable", Renderable);
         pool.register("me.Text", Text, true);
         pool.register("me.BitmapText", BitmapText);
@@ -36023,6 +36406,7 @@
         pool.register("Color", Color, true);
         pool.register("Particle", Particle, true);
         pool.register("Sprite", Sprite);
+        pool.register("NineSliceSprite", NineSliceSprite);
         pool.register("Renderable", Renderable);
         pool.register("Text", Text, true);
         pool.register("BitmapText", BitmapText);
@@ -36081,6 +36465,7 @@
     exports.Math = math;
     exports.Matrix2d = Matrix2d;
     exports.Matrix3d = Matrix3d;
+    exports.NineSliceSprite = NineSliceSprite;
     exports.ObservableVector2d = ObservableVector2d;
     exports.ObservableVector3d = ObservableVector3d;
     exports.Particle = Particle;