pixi.js - npm Package Compare versions

Comparing version 4.3.5 to 4.4.0

lib/accessibility/AccessibilityManager.js

@@ -24,3 +24,3 @@ 'use strict';
 // add some extra variables to the container..
-Object.assign(core.DisplayObject.prototype, _accessibleTarget2.default);
+core.utils.mixins.delayMixin(core.DisplayObject.prototype, _accessibleTarget2.default);
 
@@ -27,0 +27,0 @@ var KEY_CODE_TAB = 9;

lib/core/Application.js

@@ -13,6 +13,4 @@ 'use strict';
 
-var _Ticker = require('./ticker/Ticker');
+var _ticker = require('./ticker');
 
-var _Ticker2 = _interopRequireDefault(_Ticker);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,4 +50,9 @@
    * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present
+   * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility
+   * with older / less advanced devices. If you experience unexplained flickering try setting this to true.
+   * @param {boolean} [useSharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker.
    */
   function Application(width, height, options, noWebGL) {
+    var useSharedTicker = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+
     _classCallCheck(this, Application);
@@ -64,3 +67,3 @@
     /**
-     * The root display container that's renderered.
+     * The root display container that's rendered.
      * @member {PIXI.Container}
@@ -71,9 +74,15 @@ */
     /**
+     * Internal reference to the ticker
+     * @member {PIXI.ticker.Ticker}
+     * @private
+     */
+    this._ticker = null;
+
+    /**
      * Ticker for doing render updates.
      * @member {PIXI.ticker.Ticker}
+     * @default PIXI.ticker.shared
      */
-    this.ticker = new _Ticker2.default();
+    this.ticker = useSharedTicker ? _ticker.shared : new _ticker.Ticker();
 
-    this.ticker.add(this.render, this);
-
     // Start the rendering
@@ -86,4 +95,2 @@ this.start();
    */
-
-
   Application.prototype.render = function render() {
@@ -99,3 +106,3 @@ this.renderer.render(this.stage);
   Application.prototype.stop = function stop() {
-    this.ticker.stop();
+    this._ticker.stop();
   };
@@ -109,3 +116,3 @@
   Application.prototype.start = function start() {
-    this.ticker.start();
+    this._ticker.start();
   };
@@ -126,3 +133,2 @@
     this.stop();
-    this.ticker.remove(this.render, this);
     this.ticker = null;
@@ -138,2 +144,18 @@
   _createClass(Application, [{
+    key: 'ticker',
+    set: function set(ticker) // eslint-disable-line require-jsdoc
+    {
+      if (this._ticker) {
+        this._ticker.remove(this.render, this);
+      }
+      this._ticker = ticker;
+      if (ticker) {
+        ticker.add(this.render, this);
+      }
+    },
+    get: function get() // eslint-disable-line require-jsdoc
+    {
+      return this._ticker;
+    }
+  }, {
     key: 'view',
@@ -143,2 +165,14 @@ get: function get() {
     }
+
+    /**
+     * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen
+     * @member {PIXI.Rectangle}
+     * @readonly
+     */
+
+  }, {
+    key: 'screen',
+    get: function get() {
+      return this.renderer.screen;
+    }
   }]);
@@ -145,0 +179,0 @@

lib/core/const.js

@@ -13,3 +13,3 @@ 'use strict';
  */
-var VERSION = exports.VERSION = '4.3.5';
+var VERSION = exports.VERSION = '4.4.0';
 
@@ -188,3 +188,3 @@ /**
  * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO
- * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not
+ * If set to GC_MODE, the renderer will occasionally check textures usage. If they are not
  * used for a specified period of time they will be removed from the GPU. They will of course
@@ -191,0 +191,0 @@ * be uploaded again when they are required. This is a silent behind the scenes process that

lib/core/display/Container.js

@@ -93,9 +93,10 @@ 'use strict';
             child.parent = this;
+            // ensure child transform will be recalculated
+            child.transform._parentID = -1;
 
-            // ensure a transform will be recalculated..
-            this.transform._parentID = -1;
+            this.children.push(child);
+
+            // ensure bounds will be recalculated
             this._boundsID++;
 
-            this.children.push(child);
-
             // TODO - lets either do all callbacks or all events.. not both!
@@ -128,5 +129,10 @@ this.onChildrenChange(this.children.length - 1);
         child.parent = this;
+        // ensure child transform will be recalculated
+        child.transform._parentID = -1;
 
         this.children.splice(index, 0, child);
 
+        // ensure bounds will be recalculated
+        this._boundsID++;
+
         // TODO - lets either do all callbacks or all events.. not both!
@@ -195,2 +201,3 @@ this.onChildrenChange(index);
         this.children.splice(index, 0, child); // add at new position
+
         this.onChildrenChange(index);
@@ -239,6 +246,7 @@ };
             child.parent = null;
+            // ensure child transform will be recalculated
+            child.transform._parentID = -1;
             (0, _utils.removeItems)(this.children, index, 1);
 
-            // ensure a transform will be recalculated..
-            this.transform._parentID = -1;
+            // ensure bounds will be recalculated
             this._boundsID++;
@@ -265,5 +273,10 @@
 
+        // ensure child transform will be recalculated..
         child.parent = null;
+        child.transform._parentID = -1;
         (0, _utils.removeItems)(this.children, index, 1);
 
+        // ensure bounds will be recalculated
+        this._boundsID++;
+
         // TODO - lets either do all callbacks or all events.. not both!
@@ -299,4 +312,9 @@ this.onChildrenChange(index);
                 removed[i].parent = null;
+                if (removed[i].transform) {
+                    removed[i].transform._parentID = -1;
+                }
             }
 
+            this._boundsID++;
+
             this.onChildrenChange(beginIndex);
@@ -303,0 +321,0 @@

lib/core/display/DisplayObject.js

@@ -145,3 +145,3 @@ 'use strict';
          *
-         * @member {PIXI.Rectangle}
+         * @member {PIXI.Graphics|PIXI.Sprite}
          * @private
@@ -148,0 +148,0 @@ */

lib/core/graphics/Graphics.js

@@ -71,4 +71,7 @@ 'use strict';
      *
+     * @param {boolean} [nativeLines=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP
      */
     function Graphics() {
+        var nativeLines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
         _classCallCheck(this, Graphics);
@@ -95,2 +98,9 @@
         /**
+         * If true the lines will be draw using LINES instead of TRIANGLE_STRIP
+         *
+         * @member {boolean}
+         */
+        _this.nativeLines = nativeLines;
+
+        /**
          * The color of any lines drawn.
@@ -782,22 +792,9 @@ *
         if (!this._spriteRect) {
-            if (!Graphics._SPRITE_TEXTURE) {
-                Graphics._SPRITE_TEXTURE = _RenderTexture2.default.create(10, 10);
+            this._spriteRect = new _Sprite2.default(new _Texture2.default(_Texture2.default.WHITE));
+        }
 
-                var canvas = document.createElement('canvas');
+        var sprite = this._spriteRect;
 
-                canvas.width = 10;
-                canvas.height = 10;
-
-                var context = canvas.getContext('2d');
-
-                context.fillStyle = 'white';
-                context.fillRect(0, 0, 10, 10);
-
-                Graphics._SPRITE_TEXTURE = _Texture2.default.fromCanvas(canvas);
-            }
-
-            this._spriteRect = new _Sprite2.default(Graphics._SPRITE_TEXTURE);
-        }
         if (this.tint === 0xffffff) {
-            this._spriteRect.tint = this.graphicsData[0].fillColor;
+            sprite.tint = this.graphicsData[0].fillColor;
         } else {
@@ -814,16 +811,17 @@ var t1 = tempColor1;
 
-            this._spriteRect.tint = (0, _utils.rgb2hex)(t1);
+            sprite.tint = (0, _utils.rgb2hex)(t1);
         }
-        this._spriteRect.alpha = this.graphicsData[0].fillAlpha;
-        this._spriteRect.worldAlpha = this.worldAlpha * this._spriteRect.alpha;
+        sprite.alpha = this.graphicsData[0].fillAlpha;
+        sprite.worldAlpha = this.worldAlpha * sprite.alpha;
+        sprite.blendMode = this.blendMode;
 
-        Graphics._SPRITE_TEXTURE._frame.width = rect.width;
-        Graphics._SPRITE_TEXTURE._frame.height = rect.height;
+        sprite.texture._frame.width = rect.width;
+        sprite.texture._frame.height = rect.height;
 
-        this._spriteRect.transform.worldTransform = this.transform.worldTransform;
+        sprite.transform.worldTransform = this.transform.worldTransform;
 
-        this._spriteRect.anchor.set(-rect.x / rect.width, -rect.y / rect.height);
-        this._spriteRect._onAnchorUpdate();
+        sprite.anchor.set(-rect.x / rect.width, -rect.y / rect.height);
+        sprite._onAnchorUpdate();
 
-        this._spriteRect._renderWebGL(renderer);
+        sprite._renderWebGL(renderer);
     };
@@ -1031,3 +1029,3 @@
 
-        var data = new _GraphicsData2.default(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+        var data = new _GraphicsData2.default(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, this.nativeLines, shape);
 
@@ -1066,7 +1064,12 @@ this.graphicsData.push(data);
 
-        tempMatrix.tx = -bounds.x;
-        tempMatrix.ty = -bounds.y;
+        this.transform.updateLocalTransform();
+        this.transform.localTransform.copy(tempMatrix);
 
-        canvasRenderer.render(this, canvasBuffer, false, tempMatrix);
+        tempMatrix.invert();
 
+        tempMatrix.tx -= bounds.x;
+        tempMatrix.ty -= bounds.y;
+
+        canvasRenderer.render(this, canvasBuffer, true, tempMatrix);
+
         var texture = _Texture2.default.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode);
@@ -1073,0 +1076,0 @@

lib/core/graphics/GraphicsData.js

@@ -22,5 +22,6 @@ "use strict";
    * @param {boolean} fill - whether or not the shape is filled with a colour
+   * @param {boolean} nativeLines - the method for drawing lines
    * @param {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Polygon} shape - The shape object to draw.
    */
-  function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) {
+  function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape) {
     _classCallCheck(this, GraphicsData);
@@ -32,2 +33,6 @@
     this.lineWidth = lineWidth;
+    /**
+     * @member {boolean} if true the liens will be draw using LINES instead of TRIANGLE_STRIP
+     */
+    this.nativeLines = nativeLines;
 
@@ -90,3 +95,3 @@ /**
   GraphicsData.prototype.clone = function clone() {
-    return new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.fill, this.shape);
+    return new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.fill, this.nativeLines, this.shape);
   };
@@ -93,0 +98,0 @@

lib/core/graphics/webgl/GraphicsRenderer.js

@@ -144,3 +144,8 @@ 'use strict';
             renderer.bindVao(webGLData.vao);
-            webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length);
+
+            if (graphics.nativeLines) {
+                gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6);
+            } else {
+                webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length);
+            }
         }
@@ -147,0 +152,0 @@ };

lib/core/graphics/webgl/utils/buildCircle.js

@@ -43,2 +43,6 @@ 'use strict';
 
+    if (width === 0 || height === 0) {
+        return;
+    }
+
     var totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height));
@@ -45,0 +49,0 @@

lib/core/graphics/webgl/utils/buildLine.js

 'use strict';
 
 exports.__esModule = true;
-exports.default = buildLine;
 
+exports.default = function (graphicsData, webGLData) {
+    if (graphicsData.nativeLines) {
+        buildNativeLine(graphicsData, webGLData);
+    } else {
+        buildLine(graphicsData, webGLData);
+    }
+};
+
 var _math = require('../../../math');
@@ -11,3 +18,3 @@
 /**
- * Builds a line to draw
+ * Builds a line to draw using the poligon method.
  *
@@ -209,2 +216,55 @@ * Ignored from docs since it is not directly exposed.
 }
+
+/**
+ * Builds a line to draw using the gl.drawArrays(gl.LINES) method
+ *
+ * Ignored from docs since it is not directly exposed.
+ *
+ * @ignore
+ * @private
+ * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
+ * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ */
+
+
+/**
+ * Builds a line to draw
+ *
+ * Ignored from docs since it is not directly exposed.
+ *
+ * @ignore
+ * @private
+ * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
+ * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ */
+function buildNativeLine(graphicsData, webGLData) {
+    var i = 0;
+    var points = graphicsData.points;
+
+    if (points.length === 0) return;
+
+    var verts = webGLData.points;
+    var length = points.length / 2;
+
+    // sort color
+    var color = (0, _utils.hex2rgb)(graphicsData.lineColor);
+    var alpha = graphicsData.lineAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    for (i = 1; i < length; i++) {
+        var p1x = points[(i - 1) * 2];
+        var p1y = points[(i - 1) * 2 + 1];
+
+        var p2x = points[i * 2];
+        var p2y = points[i * 2 + 1];
+
+        verts.push(p1x, p1y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(p2x, p2y);
+        verts.push(r, g, b, alpha);
+    }
+}
 //# sourceMappingURL=buildLine.js.map

lib/core/graphics/webgl/utils/buildRoundedRectangle.js

@@ -88,2 +88,21 @@ 'use strict';
 /**
+ * Calculate a single point for a quadratic bezier curve.
+ * Utility function used by quadraticBezierCurve.
+ * Ignored from docs since it is not directly exposed.
+ *
+ * @ignore
+ * @private
+ * @param {number} n1 - first number
+ * @param {number} n2 - second number
+ * @param {number} perc - percentage
+ * @return {number} the result
+ *
+ */
+function getPt(n1, n2, perc) {
+    var diff = n2 - n1;
+
+    return n1 + diff * perc;
+}
+
+/**
  * Calculate the points for a quadratic bezier curve. (helper function..)
@@ -118,8 +137,2 @@ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
 
-    function getPt(n1, n2, perc) {
-        var diff = n2 - n1;
-
-        return n1 + diff * perc;
-    }
-
     for (var i = 0, j = 0; i <= n; ++i) {
@@ -126,0 +139,0 @@ j = i / n;

lib/core/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.autoDetectRenderer = exports.Application = exports.Filter = exports.SpriteMaskFilter = exports.Quad = exports.RenderTarget = exports.ObjectRenderer = exports.WebGLManager = exports.Shader = exports.CanvasRenderTarget = exports.TextureUvs = exports.VideoBaseTexture = exports.BaseRenderTexture = exports.RenderTexture = exports.BaseTexture = exports.Texture = exports.CanvasGraphicsRenderer = exports.GraphicsRenderer = exports.GraphicsData = exports.Graphics = exports.TextStyle = exports.Text = exports.SpriteRenderer = exports.CanvasTinter = exports.CanvasSpriteRenderer = exports.Sprite = exports.TransformBase = exports.TransformStatic = exports.Transform = exports.Container = exports.DisplayObject = exports.Bounds = exports.glCore = exports.WebGLRenderer = exports.CanvasRenderer = exports.ticker = exports.utils = exports.settings = undefined;
+exports.autoDetectRenderer = exports.Application = exports.Filter = exports.SpriteMaskFilter = exports.Quad = exports.RenderTarget = exports.ObjectRenderer = exports.WebGLManager = exports.Shader = exports.CanvasRenderTarget = exports.TextureUvs = exports.VideoBaseTexture = exports.BaseRenderTexture = exports.RenderTexture = exports.BaseTexture = exports.Texture = exports.Spritesheet = exports.CanvasGraphicsRenderer = exports.GraphicsRenderer = exports.GraphicsData = exports.Graphics = exports.TextStyle = exports.Text = exports.SpriteRenderer = exports.CanvasTinter = exports.CanvasSpriteRenderer = exports.Sprite = exports.TransformBase = exports.TransformStatic = exports.Transform = exports.Container = exports.DisplayObject = exports.Bounds = exports.glCore = exports.WebGLRenderer = exports.CanvasRenderer = exports.ticker = exports.utils = exports.settings = undefined;
 
@@ -183,2 +183,11 @@ var _const = require('./const');
 
+var _Spritesheet = require('./textures/Spritesheet');
+
+Object.defineProperty(exports, 'Spritesheet', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Spritesheet).default;
+  }
+});
+
 var _Texture = require('./textures/Texture');
@@ -185,0 +194,0 @@

lib/core/math/Matrix.js

@@ -27,5 +27,17 @@ 'use strict';
     /**
-     *
+     * @param {number} [a=1] - x scale
+     * @param {number} [b=0] - y skew
+     * @param {number} [c=0] - x skew
+     * @param {number} [d=1] - y scale
+     * @param {number} [tx=0] - x translation
+     * @param {number} [ty=0] - y translation
      */
     function Matrix() {
+        var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        var c = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+        var d = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+        var tx = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+        var ty = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+
         _classCallCheck(this, Matrix);
@@ -37,3 +49,3 @@
          */
-        this.a = 1;
+        this.a = a;
 
@@ -44,3 +56,3 @@ /**
          */
-        this.b = 0;
+        this.b = b;
 
@@ -51,3 +63,3 @@ /**
          */
-        this.c = 0;
+        this.c = c;
 
@@ -58,3 +70,3 @@ /**
          */
-        this.d = 1;
+        this.d = d;
 
@@ -65,3 +77,3 @@ /**
          */
-        this.tx = 0;
+        this.tx = tx;
 
@@ -72,3 +84,3 @@ /**
          */
-        this.ty = 0;
+        this.ty = ty;
 
@@ -75,0 +87,0 @@ this.array = null;

lib/core/renderers/canvas/CanvasRenderer.js

@@ -50,4 +50,4 @@ 'use strict';
     /**
-     * @param {number} [width=800] - the width of the canvas view
-     * @param {number} [height=600] - the height of the canvas view
+     * @param {number} [screenWidth=800] - the width of the screen
+     * @param {number} [screenHeight=600] - the height of the screen
      * @param {object} [options] - The optional renderer parameters
@@ -67,3 +67,3 @@ * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
      */
-    function CanvasRenderer(width, height) {
+    function CanvasRenderer(screenWidth, screenHeight) {
         var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -73,3 +73,3 @@
 
-        var _this = _possibleConstructorReturn(this, _SystemRenderer.call(this, 'Canvas', width, height, options));
+        var _this = _possibleConstructorReturn(this, _SystemRenderer.call(this, 'Canvas', screenWidth, screenHeight, options));
 
@@ -126,3 +126,3 @@ _this.type = _const.RENDERER_TYPE.CANVAS;
 
-        _this.resize(width, height);
+        _this.resize(screenWidth, screenHeight);
         return _this;
@@ -183,2 +183,5 @@ }
                 transform.copy(tempWt);
+
+                // lets not forget to flag the parent transform as dirty...
+                this._tempDisplayObjectParent.transform._worldID = -1;
             } else {
@@ -189,2 +192,3 @@ tempWt.identity();
             displayObject.parent = this._tempDisplayObjectParent;
+
             displayObject.updateTransform();
@@ -293,9 +297,9 @@ displayObject.parent = cacheParent;
      *
-     * @param {number} width - The new width of the canvas view
-     * @param {number} height - The new height of the canvas view
+     * @param {number} screenWidth - the new width of the screen
+     * @param {number} screenHeight - the new height of the screen
      */
 
 
-    CanvasRenderer.prototype.resize = function resize(width, height) {
-        _SystemRenderer.prototype.resize.call(this, width, height);
+    CanvasRenderer.prototype.resize = function resize(screenWidth, screenHeight) {
+        _SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight);
 
@@ -302,0 +306,0 @@ // reset the scale mode.. oddly this seems to be reset when the canvas is resized.

lib/core/renderers/canvas/utils/CanvasRenderTarget.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var RESOLUTION = _settings2.default.RESOLUTION;
-
 /**
@@ -24,3 +22,2 @@ * Creates a Canvas element of the given size.
  */
-
 var CanvasRenderTarget = function () {
@@ -49,3 +46,3 @@ /**
 
-    this.resolution = resolution || RESOLUTION;
+    this.resolution = resolution || _settings2.default.RESOLUTION;
 
@@ -52,0 +49,0 @@ this.resize(width, height);

lib/core/renderers/SystemRenderer.js

@@ -54,4 +54,4 @@ 'use strict';
    * @param {string} system - The name of the system this renderer is for.
-   * @param {number} [width=800] - the width of the canvas view
-   * @param {number} [height=600] - the height of the canvas view
+   * @param {number} [screenWidth=800] - the width of the screen
+   * @param {number} [screenHeight=600] - the height of the screen
    * @param {object} [options] - The optional renderer parameters
@@ -71,3 +71,3 @@ * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
    */
-  function SystemRenderer(system, width, height, options) {
+  function SystemRenderer(system, screenWidth, screenHeight, options) {
     _classCallCheck(this, SystemRenderer);
@@ -100,16 +100,9 @@
     /**
-     * The width of the canvas view
+     * Measurements of the screen. (0, 0, screenWidth, screenHeight)
      *
-     * @member {number}
-     * @default 800
-     */
-    _this.width = width || 800;
-
-    /**
-     * The height of the canvas view
+     * Its safe to use as filterArea or hitArea for whole stage
      *
-     * @member {number}
-     * @default 600
+     * @member {PIXI.Rectangle}
      */
-    _this.height = height || 600;
+    _this.screen = new _math.Rectangle(0, 0, screenWidth || 800, screenHeight || 600);
 
@@ -139,3 +132,3 @@ /**
     /**
-     * Whether the render view should be resized automatically
+     * Whether css dimensions of canvas view should be resized to screen dimensions automatically
      *
@@ -226,19 +219,27 @@ * @member {boolean}
   /**
-   * Resizes the canvas view to the specified width and height
+   * Same as view.width, actual number of pixels in the canvas by horizontal
    *
-   * @param {number} width - the new width of the canvas view
-   * @param {number} height - the new height of the canvas view
+   * @member {number}
+   * @readonly
+   * @default 800
    */
 
 
-  SystemRenderer.prototype.resize = function resize(width, height) {
-    this.width = width * this.resolution;
-    this.height = height * this.resolution;
+  /**
+   * Resizes the screen and canvas to the specified width and height
+   * Canvas dimensions are multiplied by resolution
+   *
+   * @param {number} screenWidth - the new width of the screen
+   * @param {number} screenHeight - the new height of the screen
+   */
+  SystemRenderer.prototype.resize = function resize(screenWidth, screenHeight) {
+    this.screen.width = screenWidth;
+    this.screen.height = screenHeight;
 
-    this.view.width = this.width;
-    this.view.height = this.height;
+    this.view.width = screenWidth * this.resolution;
+    this.view.height = screenHeight * this.resolution;
 
     if (this.autoResize) {
-      this.view.style.width = this.width / this.resolution + 'px';
-      this.view.style.height = this.height / this.resolution + 'px';
+      this.view.style.width = screenWidth + 'px';
+      this.view.style.height = screenHeight + 'px';
     }
@@ -285,7 +286,6 @@ };
 
-    this.width = 0;
-    this.height = 0;
-
     this.view = null;
 
+    this.screen = null;
+
     this.resolution = 0;
@@ -321,2 +321,21 @@
   _createClass(SystemRenderer, [{
+    key: 'width',
+    get: function get() {
+      return this.view.width;
+    }
+
+    /**
+     * Same as view.height, actual number of pixels in the canvas by vertical
+     *
+     * @member {number}
+     * @readonly
+     * @default 600
+     */
+
+  }, {
+    key: 'height',
+    get: function get() {
+      return this.view.height;
+    }
+  }, {
     key: 'backgroundColor',
@@ -323,0 +342,0 @@ get: function get() {

lib/core/renderers/webgl/filters/extractUniformsFromSrc.js

@@ -22,3 +22,3 @@ 'use strict';
 function extractUniformsFromString(string) {
-    var maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$');
+    var maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$');
 
@@ -25,0 +25,0 @@ var uniforms = {};

lib/core/renderers/webgl/filters/Filter.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _settings = require('../../../settings');
+
+var _settings2 = _interopRequireDefault(_settings);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,4 +58,2 @@
 
-    // pull out the vertex and shader uniforms if they are not specified..
-    // currently this does not extract structs only default types
     this.uniformData = uniforms || (0, _extractUniformsFromSrc2.default)(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler');
@@ -98,3 +100,3 @@
      */
-    this.resolution = 1;
+    this.resolution = _settings2.default.RESOLUTION;
 
@@ -116,6 +118,10 @@ /**
    * @param {boolean} clear - Should the output be cleared before rendering to it
+   * @param {object} [currentState] - It's current state of filter.
+   *        There are some useful properties in the currentState :
+   *        target, filters, sourceFrame, destinationFrame, renderTarget, resolution
    */
 
 
-  Filter.prototype.apply = function apply(filterManager, input, output, clear) {
+  Filter.prototype.apply = function apply(filterManager, input, output, clear, currentState) // eslint-disable-line no-unused-vars
+  {
     // --- //
@@ -122,0 +128,0 @@ //  this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda );

lib/core/renderers/webgl/managers/FilterManager.js

@@ -189,3 +189,3 @@ 'use strict';
         if (filters.length === 1) {
-            filters[0].apply(this, currentState.renderTarget, lastState.renderTarget, false);
+            filters[0].apply(this, currentState.renderTarget, lastState.renderTarget, false, currentState);
             this.freePotRenderTarget(currentState.renderTarget);
@@ -204,3 +204,3 @@ } else {
             for (i = 0; i < filters.length - 1; ++i) {
-                filters[i].apply(this, flip, flop, true);
+                filters[i].apply(this, flip, flop, true, currentState);
 
@@ -213,3 +213,3 @@ var t = flip;
 
-            filters[i].apply(this, flip, lastState.renderTarget, true);
+            filters[i].apply(this, flip, lastState.renderTarget, false, currentState);
 
@@ -315,4 +315,8 @@ this.freePotRenderTarget(flip);
 
-        if (shader.uniforms.data.filterArea) {
+        // filterArea and filterClamp that are handled by FilterManager directly
+        // they must not appear in uniformData
+
+        if (shader.uniforms.filterArea) {
             currentState = this.filterData.stack[this.filterData.index];
+
             var filterArea = shader.uniforms.filterArea;
@@ -330,4 +334,4 @@
         // see displacementFilter fragment shader for an example
-        if (shader.uniforms.data.filterClamp) {
-            currentState = this.filterData.stack[this.filterData.index];
+        if (shader.uniforms.filterClamp) {
+            currentState = currentState || this.filterData.stack[this.filterData.index];
 
@@ -476,3 +480,3 @@ var filterClamp = shader.uniforms.filterClamp;
     FilterManager.prototype.destroy = function destroy() {
-        this.shaderCache = [];
+        this.shaderCache = {};
         this.emptyPool();
@@ -479,0 +483,0 @@ };

lib/core/renderers/webgl/TextureManager.js

@@ -79,3 +79,3 @@ 'use strict';
      * @param {PIXI.BaseTexture|PIXI.Texture} texture - the texture to update
-     * @param {Number} location - the location the texture will be bound to.
+     * @param {number} location - the location the texture will be bound to.
      * @return {GLTexture} The gl texture.
@@ -82,0 +82,0 @@ */

lib/core/renderers/webgl/utils/RenderTarget.js

@@ -140,3 +140,3 @@ 'use strict';
      */
-    this.scaleMode = scaleMode || _settings2.default.SCALE_MODE;
+    this.scaleMode = scaleMode !== undefined ? scaleMode : _settings2.default.SCALE_MODE;
 
@@ -143,0 +143,0 @@ /**

lib/core/renderers/webgl/WebGLRenderer.js

@@ -87,4 +87,4 @@ 'use strict';
      *
-     * @param {number} [width=0] - the width of the canvas view
-     * @param {number} [height=0] - the height of the canvas view
+     * @param {number} [screenWidth=800] - the width of the screen
+     * @param {number} [screenHeight=600] - the height of the screen
      * @param {object} [options] - The optional renderer parameters
@@ -107,4 +107,6 @@ * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
      *  rendering, stopping pixel interpolation.
+     * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility
+     * with older / less advanced devices. If you experiance unexplained flickering try setting this to true.
      */
-    function WebGLRenderer(width, height) {
+    function WebGLRenderer(screenWidth, screenHeight) {
         var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -114,2 +116,10 @@
 
+        var _this = _possibleConstructorReturn(this, _SystemRenderer.call(this, 'WebGL', screenWidth, screenHeight, options));
+
+        _this.legacy = !!options.legacy;
+
+        if (_this.legacy) {
+            _pixiGlCore2.default.VertexArrayObject.FORCE_NATIVE = true;
+        }
+
         /**
@@ -121,4 +131,2 @@ * The type of this renderer as a standardised const
          */
-        var _this = _possibleConstructorReturn(this, _SystemRenderer.call(this, 'WebGL', width, height, options));
-
         _this.type = _const.RENDERER_TYPE.WEBGL;
@@ -292,3 +300,3 @@
         // setup the width/height properties and gl viewport
-        this.resize(this.width, this.height);
+        this.resize(this.screen.width, this.screen.height);
     };
@@ -385,13 +393,13 @@
      *
-     * @param {number} width - the new width of the webGL view
-     * @param {number} height - the new height of the webGL view
+     * @param {number} screenWidth - the new width of the screen
+     * @param {number} screenHeight - the new height of the screen
      */
 
 
-    WebGLRenderer.prototype.resize = function resize(width, height) {
+    WebGLRenderer.prototype.resize = function resize(screenWidth, screenHeight) {
         //  if(width * this.resolution === this.width && height * this.resolution === this.height)return;
 
-        _SystemRenderer3.default.prototype.resize.call(this, width, height);
+        _SystemRenderer3.default.prototype.resize.call(this, screenWidth, screenHeight);
 
-        this.rootRenderTarget.resize(width, height);
+        this.rootRenderTarget.resize(screenWidth, screenHeight);
 
@@ -441,2 +449,22 @@ if (this._activeRenderTarget === this.rootRenderTarget) {
     /**
+     * Erases the render texture and fills the drawing area with a colour
+     *
+     * @param {PIXI.RenderTexture} renderTexture - The render texture to clear
+     * @param {number} [clearColor] - The colour
+     * @return {PIXI.WebGLRenderer} Returns itself.
+     */
+
+
+    WebGLRenderer.prototype.clearRenderTexture = function clearRenderTexture(renderTexture, clearColor) {
+        var baseTexture = renderTexture.baseTexture;
+        var renderTarget = baseTexture._glRenderTargets[this.CONTEXT_UID];
+
+        if (renderTarget) {
+            renderTarget.clear(clearColor);
+        }
+
+        return this;
+    };
+
+    /**
      * Binds a render texture for rendering
@@ -502,2 +530,3 @@ *
      * @param {PIXI.Shader} shader - the new shader
+     * @param {boolean} [autoProject=true] - Whether automatically set the projection matrix
      * @return {PIXI.WebGLRenderer} Returns itself.
@@ -507,3 +536,3 @@ */
 
-    WebGLRenderer.prototype.bindShader = function bindShader(shader) {
+    WebGLRenderer.prototype.bindShader = function bindShader(shader, autoProject) {
         // TODO cache
@@ -514,4 +543,9 @@ if (this._activeShader !== shader) {
 
-            // automatically set the projection matrix
-            shader.uniforms.projectionMatrix = this._activeRenderTarget.projectionMatrix.toArray(true);
+            // `autoProject` normally would be a default parameter set to true
+            // but because of how Babel transpiles default parameters
+            // it hinders the performance of this method.
+            if (autoProject !== false) {
+                // automatically set the projection matrix
+                shader.uniforms.projectionMatrix = this._activeRenderTarget.projectionMatrix.toArray(true);
+            }
         }
@@ -518,0 +552,0 @@

lib/core/renderers/webgl/WebGLState.js

@@ -93,3 +93,3 @@ 'use strict';
         // next state..
-        var state = this.stack[++this.stackIndex];
+        var state = this.stack[this.stackIndex];
 
@@ -100,6 +100,8 @@ if (!state) {
 
+        ++this.stackIndex;
+
         // copy state..
         // set active state so we can force overrides of gl state
         for (var i = 0; i < this.activeState.length; i++) {
-            this.activeState[i] = state[i];
+            state[i] = this.activeState[i];
         }
@@ -106,0 +108,0 @@ };

lib/core/settings.js

@@ -91,7 +91,7 @@ 'use strict';
    * @memberof PIXI.settings
-   * @type {RegExp|string}
+   * @type {RegExp}
    * @example `@2x`
-   * @default /@(.+)x/
+   * @default /@([0-9\.]+)x/
    */
-  RETINA_PREFIX: /@(.+)x/,
+  RETINA_PREFIX: /@([0-9\.]+)x/,
 
@@ -190,3 +190,3 @@ /**
   /**
-   * Default specify float precision in shaders.
+   * Default specify float precision in vertex shader.
    *
@@ -196,5 +196,15 @@ * @static
    * @type {PIXI.PRECISION}
+   * @default PIXI.PRECISION.HIGH
+   */
+  PRECISION_VERTEX: 'highp',
+
+  /**
+   * Default specify float precision in fragment shader.
+   *
+   * @static
+   * @memberof PIXI.settings
+   * @type {PIXI.PRECISION}
    * @default PIXI.PRECISION.MEDIUM
    */
-  PRECISION: 'mediump',
+  PRECISION_FRAGMENT: 'mediump',
 
@@ -201,0 +211,0 @@ /**

lib/core/Shader.js

@@ -19,6 +19,3 @@ 'use strict';
 
-var PRECISION = _settings2.default.PRECISION;
-
-
-function checkPrecision(src) {
+function checkPrecision(src, def) {
     if (src instanceof Array) {
@@ -28,3 +25,3 @@ if (src[0].substring(0, 9) !== 'precision') {
 
-            copy.unshift('precision ' + PRECISION + ' float;');
+            copy.unshift('precision ' + def + ' float;');
 
@@ -34,3 +31,3 @@ return copy;
     } else if (src.substring(0, 9) !== 'precision') {
-        return 'precision ' + PRECISION + ' float;\n' + src;
+        return 'precision ' + def + ' float;\n' + src;
     }
@@ -62,3 +59,3 @@
 
-        return _possibleConstructorReturn(this, _GLShader.call(this, gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)));
+        return _possibleConstructorReturn(this, _GLShader.call(this, gl, checkPrecision(vertexSrc, _settings2.default.PRECISION_VERTEX), checkPrecision(fragmentSrc, _settings2.default.PRECISION_FRAGMENT)));
     }
@@ -65,0 +62,0 @@

lib/core/sprites/canvas/CanvasTinter.js

@@ -81,4 +81,4 @@ 'use strict';
 
-        canvas.width = crop.width;
-        canvas.height = crop.height;
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
 
@@ -116,4 +116,4 @@ context.fillStyle = '#' + ('00000' + (color | 0).toString(16)).substr(-6);
 
-        canvas.width = crop.width;
-        canvas.height = crop.height;
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
 
@@ -149,4 +149,4 @@ context.globalCompositeOperation = 'copy';
 
-        canvas.width = crop.width;
-        canvas.height = crop.height;
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
 
@@ -153,0 +153,0 @@ context.globalCompositeOperation = 'copy';

lib/core/sprites/Sprite.js

@@ -238,7 +238,7 @@ 'use strict';
         } else {
-            w0 = orig.width * (1 - anchor._x);
-            w1 = orig.width * -anchor._x;
+            w1 = -anchor._x * orig.width;
+            w0 = w1 + orig.width;
 
-            h0 = orig.height * (1 - anchor._y);
-            h1 = orig.height * -anchor._y;
+            h1 = -anchor._y * orig.height;
+            h0 = h1 + orig.height;
         }
@@ -294,7 +294,7 @@
 
-        var w0 = orig.width * (1 - anchor._x);
-        var w1 = orig.width * -anchor._x;
+        var w1 = -anchor._x * orig.width;
+        var w0 = w1 + orig.width;
 
-        var h0 = orig.height * (1 - anchor._y);
-        var h1 = orig.height * -anchor._y;
+        var h1 = -anchor._y * orig.height;
+        var h0 = h1 + orig.height;
 
@@ -372,4 +372,4 @@ // xy
      *
-     * @param {Rectangle} rect - The output rectangle.
-     * @return {Rectangle} The bounds.
+     * @param {PIXI.Rectangle} rect - The output rectangle.
+     * @return {PIXI.Rectangle} The bounds.
      */
@@ -464,3 +464,3 @@
      * @param {number|string|PIXI.BaseTexture|HTMLCanvasElement|HTMLVideoElement} source Source to create texture from
-     * @return {PIXI.Texture} The newly created texture
+     * @return {PIXI.Sprite} The newly created sprite
      */
@@ -569,4 +569,4 @@
         /**
-         * The tint applied to the sprite. This is a hex value. A value of
-         * 0xFFFFFF will remove any tint effect.
+         * The tint applied to the sprite. This is a hex value.
+         * A value of 0xFFFFFF will remove any tint effect.
          *
@@ -573,0 +573,0 @@ * @member {number}

lib/core/sprites/webgl/SpriteRenderer.js

@@ -72,3 +72,3 @@ 'use strict';
          * Number of values sent in the vertex buffer.
-         * positionX, positionY, colorR, colorG, colorB = 5
+         * aVertexPosition(2), aTextureCoord(1), aColor(1), aTextureId(1) = 5
          *
@@ -119,3 +119,2 @@ * @member {number}
         _this.currentIndex = 0;
-        TICK = 0;
         _this.groups = [];
@@ -149,7 +148,11 @@
 
-        // step 1: first check max textures the GPU can handle.
-        this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), _settings2.default.SPRITE_MAX_TEXTURES);
+        if (this.renderer.legacy) {
+            this.MAX_TEXTURES = 1;
+        } else {
+            // step 1: first check max textures the GPU can handle.
+            this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), _settings2.default.SPRITE_MAX_TEXTURES);
 
-        // step 2: check the maximum number of if statements the shader can have too..
-        this.MAX_TEXTURES = (0, _checkMaxIfStatmentsInShader2.default)(this.MAX_TEXTURES, gl);
+            // step 2: check the maximum number of if statements the shader can have too..
+            this.MAX_TEXTURES = (0, _checkMaxIfStatmentsInShader2.default)(this.MAX_TEXTURES, gl);
+        }
 
@@ -172,4 +175,8 @@ var shader = this.shader = (0, _generateMultiTextureShader2.default)(gl, this.MAX_TEXTURES);
             // build the vao object that will render..
-            this.vaos[i] = this.renderer.createVao().addIndex(this.indexBuffer).addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0).addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4).addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4).addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4);
+            this.vaos[i] = this.renderer.createVao().addIndex(this.indexBuffer).addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0).addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4).addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4);
 
+            if (shader.attributes.aTextureId) {
+                this.vaos[i].addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4);
+            }
+
             /* eslint-enable max-len */
@@ -402,4 +409,8 @@ }
                 // build the vao object that will render..
-                this.vaos[this.vertexCount] = this.renderer.createVao().addIndex(this.indexBuffer).addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0).addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4).addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4).addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4);
+                this.vaos[this.vertexCount] = this.renderer.createVao().addIndex(this.indexBuffer).addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0).addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4).addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4);
 
+                if (this.shader.attributes.aTextureId) {
+                    this.vaos[this.vertexCount].addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4);
+                }
+
                 /* eslint-enable max-len */
@@ -406,0 +417,0 @@ }

lib/core/text/Text.js

@@ -29,2 +29,6 @@ 'use strict';
 
+var _trimCanvas = require('../utils/trimCanvas');
+
+var _trimCanvas2 = _interopRequireDefault(_trimCanvas);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -92,3 +96,3 @@
          * The canvas 2d context that everything is drawn with
-         * @member {HTMLCanvasElement}
+         * @member {CanvasRenderingContext2D}
          */
@@ -220,5 +224,7 @@ _this.context = _this.canvas.getContext('2d');
         if (style.dropShadow) {
+            this.context.shadowBlur = style.dropShadowBlur;
+            this.context.globalAlpha = style.dropShadowAlpha;
+
             if (style.dropShadowBlur > 0) {
                 this.context.shadowColor = style.dropShadowColor;
-                this.context.shadowBlur = style.dropShadowBlur;
             } else {
@@ -253,2 +259,6 @@ this.context.fillStyle = style.dropShadowColor;
 
+        // reset the shadow blur and alpha that was set by the drop shadow, for the regular text
+        this.context.shadowBlur = 0;
+        this.context.globalAlpha = 1;
+
         // set canvas text styles
@@ -333,2 +343,10 @@ this.context.fillStyle = this._generateFillStyle(style, lines);
     Text.prototype.updateTexture = function updateTexture() {
+        if (this._style.trim) {
+            var trimmed = (0, _trimCanvas2.default)(this.canvas);
+
+            this.canvas.width = trimmed.width;
+            this.canvas.height = trimmed.height;
+            this.context.putImageData(trimmed.data, 0, 0);
+        }
+
         var texture = this._texture;
@@ -469,2 +487,16 @@ var style = this._style;
     /**
+     * Gets the local bounds of the text object.
+     *
+     * @param {Rectangle} rect - The output rectangle.
+     * @return {Rectangle} The bounds.
+     */
+
+
+    Text.prototype.getLocalBounds = function getLocalBounds(rect) {
+        this.updateText(true);
+
+        return _Sprite.prototype.getLocalBounds.call(this, rect);
+    };
+
+    /**
      * calculates the bounds of the Text as a rectangle. The bounds calculation takes the worldTransform into account.
@@ -521,2 +553,23 @@ */
 
+        // make a copy of the style settings, so we can manipulate them later
+        var fill = style.fill.slice();
+        var fillGradientStops = style.fillGradientStops.slice();
+
+        // wanting to evenly distribute the fills. So an array of 4 colours should give fills of 0.25, 0.5 and 0.75
+        if (!fillGradientStops.length) {
+            var lengthPlus1 = fill.length + 1;
+
+            for (var i = 1; i < lengthPlus1; ++i) {
+                fillGradientStops.push(i / lengthPlus1);
+            }
+        }
+
+        // stop the bleeding of the last gradient on the line above to the top gradient of the this line
+        // by hard defining the first gradient colour at point 0, and last gradient colour at point 1
+        fill.unshift(style.fill[0]);
+        fillGradientStops.unshift(0);
+
+        fill.push(style.fill[style.fill.length - 1]);
+        fillGradientStops.push(1);
+
         if (style.fillGradientType === _const.TEXT_GRADIENT.LINEAR_VERTICAL) {
@@ -528,9 +581,13 @@ // start the gradient at the top center of the canvas, and end at the bottom middle of the canvas
             // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875
-            totalIterations = (style.fill.length + 1) * lines.length;
+            totalIterations = (fill.length + 1) * lines.length;
             currentIteration = 0;
-            for (var i = 0; i < lines.length; i++) {
+            for (var _i3 = 0; _i3 < lines.length; _i3++) {
                 currentIteration += 1;
-                for (var j = 0; j < style.fill.length; j++) {
-                    stop = currentIteration / totalIterations;
-                    gradient.addColorStop(stop, style.fill[j]);
+                for (var j = 0; j < fill.length; j++) {
+                    if (fillGradientStops[j]) {
+                        stop = fillGradientStops[j] / lines.length + _i3 / lines.length;
+                    } else {
+                        stop = currentIteration / totalIterations;
+                    }
+                    gradient.addColorStop(stop, fill[j]);
                     currentIteration++;
@@ -545,8 +602,12 @@ }
             // to an even left to right gradient
-            totalIterations = style.fill.length + 1;
+            totalIterations = fill.length + 1;
             currentIteration = 1;
 
-            for (var _i3 = 0; _i3 < style.fill.length; _i3++) {
-                stop = currentIteration / totalIterations;
-                gradient.addColorStop(stop, style.fill[_i3]);
+            for (var _i4 = 0; _i4 < fill.length; _i4++) {
+                if (fillGradientStops[_i4]) {
+                    stop = fillGradientStops[_i4];
+                } else {
+                    stop = currentIteration / totalIterations;
+                }
+                gradient.addColorStop(stop, fill[_i4]);
                 currentIteration++;
@@ -562,3 +623,3 @@ }
      * Note* Unlike a Sprite, a Text object will automatically destroy its baseTexture and texture as
-     * the majorety of the time the texture will not be shared with any other Sprites.
+     * the majority of the time the texture will not be shared with any other Sprites.
      *
@@ -808,3 +869,3 @@ * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options
         {
-            text = String(text || ' ');
+            text = String(text === '' || text === null || text === undefined ? ' ' : text);
 
@@ -811,0 +872,0 @@ if (this._text === text) {

lib/core/text/TextStyle.js

@@ -18,2 +18,3 @@ 'use strict';
     dropShadow: false,
+    dropShadowAlpha: 1,
     dropShadowAngle: Math.PI / 6,
@@ -25,2 +26,3 @@ dropShadowBlur: 0,
     fillGradientType: _const.TEXT_GRADIENT.LINEAR_VERTICAL,
+    fillGradientStops: [],
     fontFamily: 'Arial',
@@ -39,2 +41,3 @@ fontSize: 26,
     textBaseline: 'alphabetic',
+    trim: false,
     wordWrap: false,
@@ -60,2 +63,3 @@ wordWrapWidth: 100
      * @param {boolean} [style.dropShadow=false] - Set a drop shadow for the text
+     * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow
      * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow
@@ -69,4 +73,6 @@ * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius
      * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN}
-     * @param {number} [style.fillGradientType=PIXI.TEXT_GRADIENT.LINEAR_VERTICAL] - If fills styles are
-     *  supplied, this can change the type/direction of the gradient. See {@link PIXI.TEXT_GRADIENT} for possible values
+     * @param {number} [style.fillGradientType=PIXI.TEXT_GRADIENT.LINEAR_VERTICAL] - If fill is an array of colours
+     *  to create a gradient, this can change the type/direction of the gradient. See {@link PIXI.TEXT_GRADIENT}
+     * @param {number[]} [style.fillGradientStops] - If fill is an array of colours to create a gradient, this array can set
+     * the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.
      * @param {string|string[]} [style.fontFamily='Arial'] - The font family
@@ -91,2 +97,3 @@ * @param {number|string} [style.fontSize=26] - The font size (as a number it converts to px, but as a string,
      *  Default is 0 (no stroke)
+     * @param {boolean} [style.trim=false] - Trim transparent borders
      * @param {string} [style.textBaseline='alphabetic'] - The baseline of the text that is rendered.
@@ -165,2 +172,13 @@ * @param {boolean} [style.wordWrap=false] - Indicates if word wrap should be used
     }, {
+        key: 'dropShadowAlpha',
+        get: function get() {
+            return this._dropShadowAlpha;
+        },
+        set: function set(dropShadowAlpha) {
+            if (this._dropShadowAlpha !== dropShadowAlpha) {
+                this._dropShadowAlpha = dropShadowAlpha;
+                this.styleID++;
+            }
+        }
+    }, {
         key: 'dropShadowAngle',
@@ -234,2 +252,13 @@ get: function get() {
     }, {
+        key: 'fillGradientStops',
+        get: function get() {
+            return this._fillGradientStops;
+        },
+        set: function set(fillGradientStops) {
+            if (!areArraysEqual(this._fillGradientStops, fillGradientStops)) {
+                this._fillGradientStops = fillGradientStops;
+                this.styleID++;
+            }
+        }
+    }, {
         key: 'fontFamily',
@@ -379,2 +408,13 @@ get: function get() {
     }, {
+        key: 'trim',
+        get: function get() {
+            return this._trim;
+        },
+        set: function set(trim) {
+            if (this._trim !== trim) {
+                this._trim = trim;
+                this.styleID++;
+            }
+        }
+    }, {
         key: 'wordWrap',
@@ -445,2 +485,28 @@ get: function get() {
 }
+
+/**
+ * Utility function to convert hexadecimal colors to strings, and simply return the color if it's a string.
+ * This version can also convert array of colors
+ *
+ * @param {Array} array1 First array to compare
+ * @param {Array} array2 Second array to compare
+ * @return {boolean} Do the arrays contain the same values in the same order
+ */
+function areArraysEqual(array1, array2) {
+    if (!Array.isArray(array1) || !Array.isArray(array2)) {
+        return false;
+    }
+
+    if (array1.length !== array2.length) {
+        return false;
+    }
+
+    for (var i = 0; i < array1.length; ++i) {
+        if (array1[i] !== array2[i]) {
+            return false;
+        }
+    }
+
+    return true;
+}
 //# sourceMappingURL=TextStyle.js.map

lib/core/textures/BaseRenderTexture.js

@@ -21,5 +21,2 @@ 'use strict';
 
-var RESOLUTION = _settings2.default.RESOLUTION,
-    SCALE_MODE = _settings2.default.SCALE_MODE;
-
 /**
@@ -64,3 +61,2 @@ * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it.
  */
-
 var BaseRenderTexture = function (_BaseTexture) {
@@ -85,3 +81,3 @@ _inherits(BaseRenderTexture, _BaseTexture);
 
-    _this.resolution = resolution || RESOLUTION;
+    _this.resolution = resolution || _settings2.default.RESOLUTION;
 
@@ -94,3 +90,3 @@ _this.width = width;
 
-    _this.scaleMode = scaleMode || SCALE_MODE;
+    _this.scaleMode = scaleMode !== undefined ? scaleMode : _settings2.default.SCALE_MODE;
     _this.hasLoaded = true;
@@ -97,0 +93,0 @@

lib/core/textures/BaseTexture.js

@@ -5,4 +5,2 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var _utils = require('../utils');
@@ -106,3 +104,3 @@
          */
-        _this.scaleMode = scaleMode || _settings2.default.SCALE_MODE;
+        _this.scaleMode = scaleMode !== undefined ? scaleMode : _settings2.default.SCALE_MODE;
 
@@ -262,6 +260,3 @@ /**
 
-            this.width = this.realWidth / this.resolution;
-            this.height = this.realHeight / this.resolution;
-
-            this.isPowerOfTwo = _bitTwiddle2.default.isPow2(this.realWidth) && _bitTwiddle2.default.isPow2(this.realHeight);
+            this._updateDimensions();
         }
@@ -273,2 +268,14 @@
     /**
+     * Update dimensions from real values
+     */
+
+
+    BaseTexture.prototype._updateDimensions = function _updateDimensions() {
+        this.width = this.realWidth / this.resolution;
+        this.height = this.realHeight / this.resolution;
+
+        this.isPowerOfTwo = _bitTwiddle2.default.isPow2(this.realWidth) && _bitTwiddle2.default.isPow2(this.realHeight);
+    };
+
+    /**
      * Load a source.
@@ -297,4 +304,2 @@ *
     BaseTexture.prototype.loadSource = function loadSource(source) {
-        var _this2 = this;
-
         var wasLoading = this.isLoading;
@@ -329,76 +334,70 @@
         } else if (!source.getContext) {
-            var _ret = function () {
-                // Image fail / not ready
-                _this2.isLoading = true;
+            // Image fail / not ready
+            this.isLoading = true;
 
-                var scope = _this2;
+            var scope = this;
 
-                source.onload = function () {
-                    scope._updateImageType();
-                    source.onload = null;
-                    source.onerror = null;
+            source.onload = function () {
+                scope._updateImageType();
+                source.onload = null;
+                source.onerror = null;
 
-                    if (!scope.isLoading) {
-                        return;
-                    }
+                if (!scope.isLoading) {
+                    return;
+                }
 
-                    scope.isLoading = false;
-                    scope._sourceLoaded();
+                scope.isLoading = false;
+                scope._sourceLoaded();
 
-                    if (scope.imageType === 'svg') {
-                        scope._loadSvgSource();
+                if (scope.imageType === 'svg') {
+                    scope._loadSvgSource();
 
-                        return;
-                    }
+                    return;
+                }
 
-                    scope.emit('loaded', scope);
-                };
+                scope.emit('loaded', scope);
+            };
 
-                source.onerror = function () {
-                    source.onload = null;
-                    source.onerror = null;
+            source.onerror = function () {
+                source.onload = null;
+                source.onerror = null;
 
-                    if (!scope.isLoading) {
-                        return;
-                    }
+                if (!scope.isLoading) {
+                    return;
+                }
 
-                    scope.isLoading = false;
-                    scope.emit('error', scope);
-                };
+                scope.isLoading = false;
+                scope.emit('error', scope);
+            };
 
-                // Per http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
-                //   "The value of `complete` can thus change while a script is executing."
-                // So complete needs to be re-checked after the callbacks have been added..
-                // NOTE: complete will be true if the image has no src so best to check if the src is set.
-                if (source.complete && source.src) {
-                    // ..and if we're complete now, no need for callbacks
-                    source.onload = null;
-                    source.onerror = null;
+            // Per http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
+            //   "The value of `complete` can thus change while a script is executing."
+            // So complete needs to be re-checked after the callbacks have been added..
+            // NOTE: complete will be true if the image has no src so best to check if the src is set.
+            if (source.complete && source.src) {
+                // ..and if we're complete now, no need for callbacks
+                source.onload = null;
+                source.onerror = null;
 
-                    if (scope.imageType === 'svg') {
-                        scope._loadSvgSource();
+                if (scope.imageType === 'svg') {
+                    scope._loadSvgSource();
 
-                        return {
-                            v: void 0
-                        };
-                    }
+                    return;
+                }
 
-                    _this2.isLoading = false;
+                this.isLoading = false;
 
-                    if (source.width && source.height) {
-                        _this2._sourceLoaded();
+                if (source.width && source.height) {
+                    this._sourceLoaded();
 
-                        // If any previous subscribers possible
-                        if (wasLoading) {
-                            _this2.emit('loaded', _this2);
-                        }
+                    // If any previous subscribers possible
+                    if (wasLoading) {
+                        this.emit('loaded', this);
                     }
-                    // If any previous subscribers possible
-                    else if (wasLoading) {
-                            _this2.emit('error', _this2);
-                        }
                 }
-            }();
-
-            if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
+                // If any previous subscribers possible
+                else if (wasLoading) {
+                        this.emit('error', this);
+                    }
+            }
         }
@@ -490,3 +489,3 @@ };
     BaseTexture.prototype._loadSvgSourceUsingXhr = function _loadSvgSourceUsingXhr() {
-        var _this3 = this;
+        var _this2 = this;
 
@@ -507,7 +506,7 @@ var svgXhr = new XMLHttpRequest();
 
-            _this3._loadSvgSourceUsingString(svgXhr.response);
+            _this2._loadSvgSourceUsingString(svgXhr.response);
         };
 
         svgXhr.onerror = function () {
-            return _this3.emit('error', _this3);
+            return _this2.emit('error', _this2);
         };
@@ -544,8 +543,4 @@
 
-        this.width = this.realWidth / this.resolution;
-        this.height = this.realHeight / this.resolution;
+        this._updateDimensions();
 
-        // Check pow2 after scale
-        this.isPowerOfTwo = _bitTwiddle2.default.isPow2(this.realWidth) && _bitTwiddle2.default.isPow2(this.realHeight);
-
         // Create a canvas element
@@ -707,2 +702,44 @@ var canvas = document.createElement('canvas');
 
+    /**
+     * Helper function that creates a base texture based on the source you provide.
+     * The source can be - image url, image element, canvas element.
+     *
+     * @static
+     * @param {string|HTMLImageElement|HTMLCanvasElement} source - The source to create base texture from.
+     * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values
+     * @param {number} [sourceScale=(auto)] - Scale for the original image, used with Svg images.
+     * @return {PIXI.BaseTexture} The new base texture.
+     */
+
+
+    BaseTexture.from = function from(source, scaleMode, sourceScale) {
+        if (typeof source === 'string') {
+            return BaseTexture.fromImage(source, undefined, scaleMode, sourceScale);
+        } else if (source instanceof HTMLImageElement) {
+            var imageUrl = source.src;
+            var baseTexture = _utils.BaseTextureCache[imageUrl];
+
+            if (!baseTexture) {
+                baseTexture = new BaseTexture(source, scaleMode);
+                baseTexture.imageUrl = imageUrl;
+
+                if (sourceScale) {
+                    baseTexture.sourceScale = sourceScale;
+                }
+
+                // if there is an @2x at the end of the url we are going to assume its a highres image
+                baseTexture.resolution = (0, _utils.getResolutionOfUrl)(imageUrl);
+
+                _utils.BaseTextureCache[imageUrl] = baseTexture;
+            }
+
+            return baseTexture;
+        } else if (source instanceof HTMLCanvasElement) {
+            return BaseTexture.fromCanvas(source, scaleMode);
+        }
+
+        // lets assume its a base texture!
+        return source;
+    };
+
     return BaseTexture;
@@ -709,0 +746,0 @@ }(_eventemitter2.default);

lib/core/textures/RenderTexture.js

@@ -75,4 +75,4 @@ 'use strict';
             var height = arguments[2];
-            var scaleMode = arguments[3] || 0;
-            var resolution = arguments[4] || 1;
+            var scaleMode = arguments[3];
+            var resolution = arguments[4];
 
@@ -79,0 +79,0 @@ // we have an old render texture..

lib/core/textures/Texture.js

@@ -390,3 +390,4 @@ 'use strict';
      * @static
-     * @param {number|string|PIXI.BaseTexture|HTMLCanvasElement|HTMLVideoElement} source - Source to create texture from
+     * @param {number|string|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|PIXI.BaseTexture}
+     *        source - Source to create texture from
      * @return {PIXI.Texture} The newly created texture
@@ -415,3 +416,3 @@ */
         } else if (source instanceof HTMLImageElement) {
-            return new Texture(new _BaseTexture2.default(source));
+            return new Texture(_BaseTexture2.default.from(source));
         } else if (source instanceof HTMLCanvasElement) {
@@ -430,2 +431,38 @@ return Texture.fromCanvas(source);
     /**
+     * Create a texture from a source and add to the cache.
+     *
+     * @static
+     * @param {HTMLImageElement|HTMLCanvasElement} source - The input source.
+     * @param {String} imageUrl - File name of texture, for cache and resolving resolution.
+     * @param {String} [name] - Human readible name for the texture cache. If no name is
+     *        specified, only `imageUrl` will be used as the cache ID.
+     * @return {PIXI.Texture} Output texture
+     */
+
+
+    Texture.fromLoader = function fromLoader(source, imageUrl, name) {
+        var baseTexture = new _BaseTexture2.default(source, null, (0, _utils.getResolutionOfUrl)(imageUrl));
+        var texture = new Texture(baseTexture);
+
+        baseTexture.imageUrl = imageUrl;
+
+        // No name, use imageUrl instead
+        if (!name) {
+            name = imageUrl;
+        }
+
+        // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions
+        _utils.BaseTextureCache[name] = baseTexture;
+        _utils.TextureCache[name] = texture;
+
+        // also add references by url if they are different.
+        if (name !== imageUrl) {
+            _utils.BaseTextureCache[imageUrl] = baseTexture;
+            _utils.TextureCache[imageUrl] = texture;
+        }
+
+        return texture;
+    };
+
+    /**
      * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object.
@@ -480,3 +517,3 @@ *
             if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) {
-                throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this);
+                throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' + ('X: ' + frame.x + ' + ' + frame.width + ' > ' + this.baseTexture.width + ' ') + ('Y: ' + frame.y + ' + ' + frame.height + ' > ' + this.baseTexture.height));
             }
@@ -547,2 +584,26 @@
 
+exports.default = Texture;
+
+
+function createWhiteTexture() {
+    var canvas = document.createElement('canvas');
+
+    canvas.width = 10;
+    canvas.height = 10;
+
+    var context = canvas.getContext('2d');
+
+    context.fillStyle = 'white';
+    context.fillRect(0, 0, 10, 10);
+
+    return new Texture(new _BaseTexture2.default(canvas));
+}
+
+function removeAllHandlers(tex) {
+    tex.destroy = function _emptyDestroy() {/* empty */};
+    tex.on = function _emptyOn() {/* empty */};
+    tex.once = function _emptyOnce() {/* empty */};
+    tex.emit = function _emptyEmit() {/* empty */};
+}
+
 /**
@@ -555,10 +616,14 @@ * An empty texture, used often to not have to create multiple empty textures.
  */
+Texture.EMPTY = new Texture(new _BaseTexture2.default());
+removeAllHandlers(Texture.EMPTY);
 
-
-exports.default = Texture;
-Texture.EMPTY = new Texture(new _BaseTexture2.default());
-Texture.EMPTY.destroy = function _emptyDestroy() {/* empty */};
-Texture.EMPTY.on = function _emptyOn() {/* empty */};
-Texture.EMPTY.once = function _emptyOnce() {/* empty */};
-Texture.EMPTY.emit = function _emptyEmit() {/* empty */};
+/**
+ * A white texture of 10x10 size, used for graphics and other things
+ * Can not be destroyed.
+ *
+ * @static
+ * @constant
+ */
+Texture.WHITE = createWhiteTexture();
+removeAllHandlers(Texture.WHITE);
 //# sourceMappingURL=Texture.js.map

lib/core/ticker/Ticker.js

@@ -88,7 +88,8 @@ 'use strict';
          * this value will have a precision of 1 µs.
+         * Defaults to target frame time
          *
          * @member {number}
-         * @default 1 / TARGET_FPMS
+         * @default 16.66
          */
-        this.elapsedMS = 1 / _settings2.default.TARGET_FPMS; // default to target frame time
+        this.elapsedMS = 1 / _settings2.default.TARGET_FPMS;
 
@@ -95,0 +96,0 @@ /**

lib/core/utils/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.BaseTextureCache = exports.TextureCache = exports.pluginTarget = exports.EventEmitter = exports.isMobile = undefined;
+exports.BaseTextureCache = exports.TextureCache = exports.mixins = exports.pluginTarget = exports.EventEmitter = exports.isMobile = undefined;
 exports.uid = uid;
@@ -18,2 +18,4 @@ exports.hex2rgb = hex2rgb;
 exports.removeItems = removeItems;
+exports.destroyTextureCache = destroyTextureCache;
+exports.clearTextureCache = clearTextureCache;
 
@@ -34,2 +36,6 @@ var _const = require('../const');
 
+var _mixin = require('./mixin');
+
+var mixins = _interopRequireWildcard(_mixin);
+
 var _ismobilejs = require('ismobilejs');
@@ -52,2 +58,3 @@
 exports.pluginTarget = _pluginTarget2.default;
+exports.mixins = mixins;
 
@@ -109,3 +116,3 @@ /**
 function rgb2hex(rgb) {
-    return (rgb[0] * 255 << 16) + (rgb[1] * 255 << 8) + rgb[2] * 255;
+    return (rgb[0] * 255 << 16) + (rgb[1] * 255 << 8) + (rgb[2] * 255 | 0);
 }
@@ -341,2 +348,36 @@
 var BaseTextureCache = exports.BaseTextureCache = {};
+
+/**
+ * Destroys all texture in the cache
+ *
+ * @memberof PIXI.utils
+ * @function destroyTextureCache
+ */
+function destroyTextureCache() {
+    var key = void 0;
+
+    for (key in TextureCache) {
+        TextureCache[key].destroy();
+    }
+    for (key in BaseTextureCache) {
+        BaseTextureCache[key].destroy();
+    }
+}
+
+/**
+ * Removes all textures from cache, but does not destroy them
+ *
+ * @memberof PIXI.utils
+ * @function clearTextureCache
+ */
+function clearTextureCache() {
+    var key = void 0;
+
+    for (key in TextureCache) {
+        delete TextureCache[key];
+    }
+    for (key in BaseTextureCache) {
+        delete BaseTextureCache[key];
+    }
+}
 //# sourceMappingURL=index.js.map

lib/deprecation.js

@@ -31,2 +31,6 @@ 'use strict';
 
+var _interaction = require('./interaction');
+
+var interaction = _interopRequireWildcard(_interaction);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -508,3 +512,3 @@
 // Move the default properties to settings
-var defaults = [{ parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, { parent: 'GC_MODES', target: 'GC_MODE' }, { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, { parent: 'PRECISION', target: 'PRECISION' }];
+var defaults = [{ parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, { parent: 'GC_MODES', target: 'GC_MODE' }, { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }];
 
@@ -533,2 +537,26 @@ var _loop = function _loop(i) {
 
+Object.defineProperties(core.settings, {
+
+    /**
+     * @static
+     * @name PRECISION
+     * @memberof PIXI.settings
+     * @see PIXI.PRECISION
+     * @deprecated since version 4.4.0
+     */
+    PRECISION: {
+        enumerable: true,
+        get: function get() {
+            warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT');
+
+            return core.settings.PRECISION_FRAGMENT;
+        },
+        set: function set(value) {
+            warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT');
+
+            core.settings.PRECISION_FRAGMENT = value;
+        }
+    }
+});
+
 Object.defineProperties(extras, {
@@ -655,3 +683,3 @@
 
-    return Text.calculateFontProperties(fontStyle);
+    return core.Text.calculateFontProperties(fontStyle);
 };
@@ -922,2 +950,61 @@
 });
+
+/**
+ * @name PIXI.interaction.interactiveTarget#defaultCursor
+ * @static
+ * @type {number}
+ * @see PIXI.interaction.interactiveTarget#cursor
+ * @deprecated since 4.3.0
+ */
+Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', {
+    set: function set(value) {
+        warn('Property defaultCursor has been replaced with \'cursor\'. ');
+        this.cursor = value;
+    },
+    get: function get() {
+        warn('Property defaultCursor has been replaced with \'cursor\'. ');
+
+        return this.cursor;
+    },
+
+    enumerable: true
+});
+
+/**
+ * @name PIXI.interaction.InteractionManager#defaultCursorStyle
+ * @static
+ * @type {string}
+ * @see PIXI.interaction.InteractionManager#cursorStyles
+ * @deprecated since 4.3.0
+ */
+Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', {
+    set: function set(value) {
+        warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. ');
+        this.cursorStyles.default = value;
+    },
+    get: function get() {
+        warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. ');
+
+        return this.cursorStyles.default;
+    }
+});
+
+/**
+ * @name PIXI.interaction.InteractionManager#currentCursorStyle
+ * @static
+ * @type {string}
+ * @see PIXI.interaction.InteractionManager#cursorStyles
+ * @deprecated since 4.3.0
+ */
+Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', {
+    set: function set(value) {
+        warn('Property currentCursorStyle has been removed.' + 'See the currentCursorMode property, which works differently.');
+        this.currentCursorMode = value;
+    },
+    get: function get() {
+        warn('Property currentCursorStyle has been removed.' + 'See the currentCursorMode property, which works differently.');
+
+        return this.currentCursorMode;
+    }
+});
 //# sourceMappingURL=deprecation.js.map

lib/extras/BitmapText.js

@@ -337,2 +337,60 @@ 'use strict';
 
+    /**
+     * Register a bitmap font with data and a texture.
+     *
+     * @static
+     * @param {XMLDocument} xml - The XML document data.
+     * @param {PIXI.Texture} texture - Texture with all symbols.
+     * @return {Object} Result font object with font, size, lineHeight and char fields.
+     */
+    BitmapText.registerFont = function registerFont(xml, texture) {
+        var data = {};
+        var info = xml.getElementsByTagName('info')[0];
+        var common = xml.getElementsByTagName('common')[0];
+
+        data.font = info.getAttribute('face');
+        data.size = parseInt(info.getAttribute('size'), 10);
+        data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
+        data.chars = {};
+
+        // parse letters
+        var letters = xml.getElementsByTagName('char');
+
+        for (var i = 0; i < letters.length; i++) {
+            var letter = letters[i];
+            var charCode = parseInt(letter.getAttribute('id'), 10);
+
+            var textureRect = new core.Rectangle(parseInt(letter.getAttribute('x'), 10) + texture.frame.x, parseInt(letter.getAttribute('y'), 10) + texture.frame.y, parseInt(letter.getAttribute('width'), 10), parseInt(letter.getAttribute('height'), 10));
+
+            data.chars[charCode] = {
+                xOffset: parseInt(letter.getAttribute('xoffset'), 10),
+                yOffset: parseInt(letter.getAttribute('yoffset'), 10),
+                xAdvance: parseInt(letter.getAttribute('xadvance'), 10),
+                kerning: {},
+                texture: new core.Texture(texture.baseTexture, textureRect)
+
+            };
+        }
+
+        // parse kernings
+        var kernings = xml.getElementsByTagName('kerning');
+
+        for (var _i5 = 0; _i5 < kernings.length; _i5++) {
+            var kerning = kernings[_i5];
+            var first = parseInt(kerning.getAttribute('first'), 10);
+            var second = parseInt(kerning.getAttribute('second'), 10);
+            var amount = parseInt(kerning.getAttribute('amount'), 10);
+
+            if (data.chars[second]) {
+                data.chars[second].kerning[first] = amount;
+            }
+        }
+
+        // I'm leaving this as a temporary fix so we can test the bitmap fonts in v3
+        // but it's very likely to change
+        BitmapText.fonts[data.font] = data;
+
+        return data;
+    };
+
     _createClass(BitmapText, [{
@@ -339,0 +397,0 @@ key: 'tint',

lib/extras/cacheAsBitmap.js

@@ -52,2 +52,5 @@ 'use strict';
      *
+     * IMPORTANT GOTCHA - make sure that all your textures are preloaded BEFORE setting this property to true
+     * as it will take a snapshot of what is currently there. If the textures have not loaded then they will not appear.
+     *
      * @member {boolean}
@@ -54,0 +57,0 @@ * @memberof PIXI.DisplayObject#

lib/extras/TilingSprite.js

@@ -201,12 +201,22 @@ 'use strict';
 
+        renderer.setBlendMode(this.blendMode);
+
+        // fill the pattern!
+        context.fillStyle = this._canvasPattern;
+
         // TODO - this should be rolled into the setTransform above..
         context.scale(this.tileScale.x / baseTextureResolution, this.tileScale.y / baseTextureResolution);
 
-        context.translate(modX + this.anchor.x * -this._width, modY + this.anchor.y * -this._height);
+        var anchorX = this.anchor.x * -this._width;
+        var anchorY = this.anchor.y * -this._height;
 
-        renderer.setBlendMode(this.blendMode);
+        if (this.uvRespectAnchor) {
+            context.translate(modX, modY);
 
-        // fill the pattern!
-        context.fillStyle = this._canvasPattern;
-        context.fillRect(-modX, -modY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+            context.fillRect(-modX + anchorX, -modY + anchorY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+        } else {
+            context.translate(modX + anchorX, modY + anchorY);
+
+            context.fillRect(-modX, -modY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution);
+        }
     };
@@ -213,0 +223,0 @@

lib/filters/blur/BlurFilter.js

@@ -53,6 +53,5 @@ 'use strict';
         _this.blurYFilter = new _BlurYFilter2.default(strength, quality, resolution, kernelSize);
-        _this.resolution = 1;
 
         _this.padding = 0;
-        _this.resolution = resolution || 1;
+        _this.resolution = resolution || core.settings.RESOLUTION;
         _this.quality = quality || 4;
@@ -59,0 +58,0 @@ _this.blur = strength || 8;

lib/filters/blur/BlurXFilter.js

@@ -62,3 +62,3 @@ 'use strict';
 
-        _this.resolution = resolution || 1;
+        _this.resolution = resolution || core.settings.RESOLUTION;
 
@@ -65,0 +65,0 @@ _this._quality = 0;

lib/filters/blur/BlurYFilter.js

@@ -62,3 +62,3 @@ 'use strict';
 
-        _this.resolution = resolution || 1;
+        _this.resolution = resolution || core.settings.RESOLUTION;
 
@@ -65,0 +65,0 @@ _this._quality = 0;

lib/filters/colormatrix/ColorMatrixFilter.js

@@ -49,3 +49,3 @@ 'use strict';
         // fragment shader
-        'varying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float m[20];\n\nvoid main(void)\n{\n\n    vec4 c = texture2D(uSampler, vTextureCoord);\n\n    gl_FragColor.r = (m[0] * c.r);\n        gl_FragColor.r += (m[1] * c.g);\n        gl_FragColor.r += (m[2] * c.b);\n        gl_FragColor.r += (m[3] * c.a);\n        gl_FragColor.r += m[4] * c.a;\n\n    gl_FragColor.g = (m[5] * c.r);\n        gl_FragColor.g += (m[6] * c.g);\n        gl_FragColor.g += (m[7] * c.b);\n        gl_FragColor.g += (m[8] * c.a);\n        gl_FragColor.g += m[9] * c.a;\n\n     gl_FragColor.b = (m[10] * c.r);\n        gl_FragColor.b += (m[11] * c.g);\n        gl_FragColor.b += (m[12] * c.b);\n        gl_FragColor.b += (m[13] * c.a);\n        gl_FragColor.b += m[14] * c.a;\n\n     gl_FragColor.a = (m[15] * c.r);\n        gl_FragColor.a += (m[16] * c.g);\n        gl_FragColor.a += (m[17] * c.b);\n        gl_FragColor.a += (m[18] * c.a);\n        gl_FragColor.a += m[19] * c.a;\n\n//    gl_FragColor = vec4(m[0]);\n}\n'));
+        'varying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float m[20];\n\nvoid main(void)\n{\n    vec4 c = texture2D(uSampler, vTextureCoord);\n    // Un-premultiply alpha before applying the color matrix. See issue #3539.\n    if (c.a > 0.0) {\n      c.rgb /= c.a;\n    }\n    vec4 result;\n    result.r = (m[0] * c.r);\n        result.r += (m[1] * c.g);\n        result.r += (m[2] * c.b);\n        result.r += (m[3] * c.a);\n        result.r += m[4];\n\n    result.g = (m[5] * c.r);\n        result.g += (m[6] * c.g);\n        result.g += (m[7] * c.b);\n        result.g += (m[8] * c.a);\n        result.g += m[9];\n\n    result.b = (m[10] * c.r);\n       result.b += (m[11] * c.g);\n       result.b += (m[12] * c.b);\n       result.b += (m[13] * c.a);\n       result.b += m[14];\n\n    result.a = (m[15] * c.r);\n       result.a += (m[16] * c.g);\n       result.a += (m[17] * c.b);\n       result.a += (m[18] * c.a);\n       result.a += m[19];\n\n    // Premultiply alpha again.\n    result.rgb *= result.a;\n\n    gl_FragColor = result;\n}\n'));
 
@@ -96,3 +96,3 @@ _this.uniforms.m = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
         out[3] = a[0] * b[3] + a[1] * b[8] + a[2] * b[13] + a[3] * b[18];
-        out[4] = a[0] * b[4] + a[1] * b[9] + a[2] * b[14] + a[3] * b[19];
+        out[4] = a[0] * b[4] + a[1] * b[9] + a[2] * b[14] + a[3] * b[19] + a[4];
 
@@ -104,3 +104,3 @@ // Green Channel
         out[8] = a[5] * b[3] + a[6] * b[8] + a[7] * b[13] + a[8] * b[18];
-        out[9] = a[5] * b[4] + a[6] * b[9] + a[7] * b[14] + a[8] * b[19];
+        out[9] = a[5] * b[4] + a[6] * b[9] + a[7] * b[14] + a[8] * b[19] + a[9];
 
@@ -112,3 +112,3 @@ // Blue Channel
         out[13] = a[10] * b[3] + a[11] * b[8] + a[12] * b[13] + a[13] * b[18];
-        out[14] = a[10] * b[4] + a[11] * b[9] + a[12] * b[14] + a[13] * b[19];
+        out[14] = a[10] * b[4] + a[11] * b[9] + a[12] * b[14] + a[13] * b[19] + a[14];
 
@@ -120,3 +120,3 @@ // Alpha Channel
         out[18] = a[15] * b[3] + a[16] * b[8] + a[17] * b[13] + a[18] * b[18];
-        out[19] = a[15] * b[4] + a[16] * b[9] + a[17] * b[14] + a[18] * b[19];
+        out[19] = a[15] * b[4] + a[16] * b[9] + a[17] * b[14] + a[18] * b[19] + a[19];
 
@@ -123,0 +123,0 @@ return out;

lib/filters/displacement/DisplacementFilter.js

@@ -56,3 +56,3 @@ 'use strict';
         _this.uniforms.mapSampler = sprite.texture;
-        _this.uniforms.filterMatrix = maskMatrix.toArray(true);
+        _this.uniforms.filterMatrix = maskMatrix;
         _this.uniforms.scale = { x: 1, y: 1 };
@@ -59,0 +59,0 @@

lib/index.js

@@ -80,2 +80,9 @@ 'use strict';
 
+// export libs
+
+
+// export core
+_core.utils.mixins.performMixins();
+
+// handle mixins now, after all code has been added, including deprecation
 // import polyfills. Done as an export to make sure polyfills are imported first
@@ -100,8 +107,2 @@ exports.accessibility = accessibility;
 
-
-// export libs
-
-
-// export core
-
 var loader = loaders && loaders.Loader ? new loaders.Loader() : null; // check is there in case user excludes loader lib
@@ -108,0 +109,0 @@

lib/interaction/InteractionData.js

@@ -34,5 +34,5 @@ 'use strict';
     /**
-     * The target Sprite that was interacted with
+     * The target DisplayObject that was interacted with
      *
-     * @member {PIXI.Sprite}
+     * @member {PIXI.DisplayObject}
      */
@@ -47,2 +47,9 @@ this.target = null;
     this.originalEvent = null;
+
+    /**
+     * Unique identifier for this interaction
+     *
+     * @member {number}
+     */
+    this.identifier = null;
   }
@@ -49,0 +56,0 @@

lib/interaction/InteractionEvent.js

@@ -68,3 +68,3 @@ "use strict";
   /**
-   * Prevents event from reaching any objects other than the current object.
+   * Resets the event.
    *
@@ -71,0 +71,0 @@ * @private

lib/interaction/InteractionManager.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var _core = require('../core');
@@ -18,2 +20,6 @@
 
+var _InteractionTrackingData = require('./InteractionTrackingData');
+
+var _InteractionTrackingData2 = _interopRequireDefault(_InteractionTrackingData);
+
 var _eventemitter = require('eventemitter3');
@@ -27,6 +33,2 @@
 
-var _ismobilejs = require('ismobilejs');
-
-var _ismobilejs2 = _interopRequireDefault(_ismobilejs);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,7 +44,9 @@
 
-// Mix interactiveTarget into core.DisplayObject.prototype
-Object.assign(core.DisplayObject.prototype, _interactiveTarget2.default);
+// Mix interactiveTarget into core.DisplayObject.prototype, after deprecation has been handled
+core.utils.mixins.delayMixin(core.DisplayObject.prototype, _interactiveTarget2.default);
 
+var MOUSE_POINTER_ID = 'MOUSE';
+
 /**
- * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
+ * The interaction manager deals with mouse, touch and pointer events. Any DisplayObject can be interactive
  * if its interactive parameter is set to true
@@ -106,2 +110,3 @@ * This manager also supports multitouch.
         _this.mouse = new _InteractionData2.default();
+        _this.mouse.identifier = MOUSE_POINTER_ID;
 
@@ -113,11 +118,17 @@ // setting the mouse to start off far off screen will mean that mouse over does
         /**
-         * The pointer data
+         * Actively tracked InteractionData
          *
-         * @member {PIXI.interaction.InteractionData}
+         * @private
+         * @member {Object.<number,PIXI.interation.InteractionData>}
          */
-        _this.pointer = new _InteractionData2.default();
+        _this.activeInteractionData = {};
+        _this.activeInteractionData[MOUSE_POINTER_ID] = _this.mouse;
 
-        // setting the pointer to start off far off screen will mean that pointer over does
-        //  not get called before we even move the pointer.
-        _this.pointer.global.set(-999999);
+        /**
+         * Pool of unused InteractionData
+         *
+         * @private
+         * @member {PIXI.interation.InteractionData[]}
+         */
+        _this.interactionDataPool = [];
 
@@ -132,9 +143,2 @@ /**
         /**
-         * Tiny little interactiveData pool !
-         *
-         * @member {PIXI.interaction.InteractionData[]}
-         */
-        _this.interactiveDataPool = [];
-
-        /**
          * The DOM element to bind to.
@@ -194,22 +198,2 @@ *
 
-        /**
-         * Are touch events being 'normalized' and converted into pointer events if pointer events are not supported
-         * For example, on a touch screen mobile device, a touchstart would also be emitted as a pointerdown
-         *
-         * @private
-         * @readonly
-         * @member {boolean}
-         */
-        _this.normalizeTouchEvents = !_this.supportsPointerEvents && _this.supportsTouchEvents;
-
-        /**
-         * Are mouse events being 'normalized' and converted into pointer events if pointer events are not supported
-         * For example, on a desktop pc, a mousedown would also be emitted as a pointerdown
-         *
-         * @private
-         * @readonly
-         * @member {boolean}
-         */
-        _this.normalizeMouseEvents = !_this.supportsPointerEvents && !_ismobilejs2.default.any;
-
         // this will make it so that you don't have to call bind all the time
@@ -221,4 +205,4 @@
          */
-        _this.onMouseUp = _this.onMouseUp.bind(_this);
-        _this.processMouseUp = _this.processMouseUp.bind(_this);
+        _this.onPointerUp = _this.onPointerUp.bind(_this);
+        _this.processPointerUp = _this.processPointerUp.bind(_this);
 
@@ -229,4 +213,4 @@ /**
          */
-        _this.onMouseDown = _this.onMouseDown.bind(_this);
-        _this.processMouseDown = _this.processMouseDown.bind(_this);
+        _this.onPointerCancel = _this.onPointerCancel.bind(_this);
+        _this.processPointerCancel = _this.processPointerCancel.bind(_this);
 
@@ -237,29 +221,2 @@ /**
          */
-        _this.onMouseMove = _this.onMouseMove.bind(_this);
-        _this.processMouseMove = _this.processMouseMove.bind(_this);
-
-        /**
-         * @private
-         * @member {Function}
-         */
-        _this.onMouseOut = _this.onMouseOut.bind(_this);
-        _this.processMouseOverOut = _this.processMouseOverOut.bind(_this);
-
-        /**
-        * @private
-        * @member {Function}
-        */
-        _this.onMouseOver = _this.onMouseOver.bind(_this);
-
-        /**
-         * @private
-         * @member {Function}
-         */
-        _this.onPointerUp = _this.onPointerUp.bind(_this);
-        _this.processPointerUp = _this.processPointerUp.bind(_this);
-
-        /**
-         * @private
-         * @member {Function}
-         */
         _this.onPointerDown = _this.onPointerDown.bind(_this);
@@ -289,37 +246,28 @@ _this.processPointerDown = _this.processPointerDown.bind(_this);
         /**
-         * @private
-         * @member {Function}
+         * Dictionary of how different cursor modes are handled. Strings are handled as CSS cursor
+         * values, objects are handled as dictionaries of CSS values for interactionDOMElement,
+         * and functions are called instead of changing the CSS.
+         * Default CSS cursor values are provided for 'default' and 'pointer' modes.
+         * @member {Object.<string, (string|Function|Object.<string, string>)>}
          */
-        _this.onTouchStart = _this.onTouchStart.bind(_this);
-        _this.processTouchStart = _this.processTouchStart.bind(_this);
+        _this.cursorStyles = {
+            default: 'inherit',
+            pointer: 'pointer'
+        };
 
         /**
-         * @private
-         * @member {Function}
-         */
-        _this.onTouchEnd = _this.onTouchEnd.bind(_this);
-        _this.processTouchEnd = _this.processTouchEnd.bind(_this);
-
-        /**
-         * @private
-         * @member {Function}
-         */
-        _this.onTouchMove = _this.onTouchMove.bind(_this);
-        _this.processTouchMove = _this.processTouchMove.bind(_this);
-
-        /**
-         * Every update cursor will be reset to this value, if some element wont override it in
-         * its hitTest.
+         * The mode of the cursor that is being used.
+         * The value of this is a key from the cursorStyles dictionary.
          *
          * @member {string}
-         * @default 'inherit'
          */
-        _this.defaultCursorStyle = 'inherit';
+        _this.currentCursorMode = null;
 
         /**
-         * The css style of the cursor that is being used.
+         * Internal cached let.
          *
+         * @private
          * @member {string}
          */
-        _this.currentCursorStyle = 'inherit';
+        _this.cursor = null;
 
@@ -349,2 +297,3 @@ /**
          * @event mousedown
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -358,2 +307,3 @@ */
          * @event rightdown
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -367,2 +317,3 @@ */
          * @event mouseup
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -376,2 +327,3 @@ */
          * @event rightup
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -385,2 +337,3 @@ */
          * @event click
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -394,2 +347,3 @@ */
          * @event rightclick
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -404,2 +358,3 @@ */
          * @event mouseupoutside
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -414,2 +369,3 @@ */
          * @event rightupoutside
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -422,2 +378,3 @@ */
          * @event mousemove
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -430,2 +387,3 @@ */
          * @event mouseover
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -438,2 +396,3 @@ */
          * @event mouseout
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -446,2 +405,3 @@ */
          * @event pointerdown
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -454,2 +414,3 @@ */
          * @event pointerup
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -459,5 +420,13 @@ */
         /**
+         * Fired when the operating system cancels a pointer event
+         *
+         * @event pointercancel
+         * @memberof PIXI.interaction.InteractionManager#
+         */
+
+        /**
          * Fired when a pointer device button is pressed and released on the display object.
          *
          * @event pointertap
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -471,2 +440,3 @@ */
          * @event pointerupoutside
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -479,2 +449,3 @@ */
          * @event pointermove
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -487,2 +458,3 @@ */
          * @event pointerover
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -495,2 +467,3 @@ */
          * @event pointerout
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -503,2 +476,3 @@ */
          * @event touchstart
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -511,2 +485,3 @@ */
          * @event touchend
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -516,5 +491,13 @@ */
         /**
+         * Fired when the operating system cancels a touch
+         *
+         * @event touchcancel
+         * @memberof PIXI.interaction.InteractionManager#
+         */
+
+        /**
          * Fired when a touch point is placed and removed from the display object.
          *
          * @event tap
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -528,2 +511,3 @@ */
          * @event touchendoutside
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -536,2 +520,3 @@ */
          * @event touchmove
+         * @type {PIXI.interaction.InteractionData}
          * @memberof PIXI.interaction.InteractionManager#
@@ -593,38 +578,24 @@ */
             this.interactionDOMElement.addEventListener('pointerdown', this.onPointerDown, true);
-            this.interactionDOMElement.addEventListener('pointerout', this.onPointerOut, true);
+            // pointerout is fired in addition to pointerup (for touch events) and pointercancel
+            // we already handle those, so for the purposes of what we do in onPointerOut, we only
+            // care about the pointerleave event
+            this.interactionDOMElement.addEventListener('pointerleave', this.onPointerOut, true);
             this.interactionDOMElement.addEventListener('pointerover', this.onPointerOver, true);
+            window.addEventListener('pointercancel', this.onPointerCancel, true);
             window.addEventListener('pointerup', this.onPointerUp, true);
         } else {
-            /**
-             * If pointer events aren't available on a device, this will turn either the touch or
-             * mouse events into pointer events. This allows a developer to just listen for emitted
-             * pointer events on interactive sprites
-             */
-            if (this.normalizeTouchEvents) {
+            window.document.addEventListener('mousemove', this.onPointerMove, true);
+            this.interactionDOMElement.addEventListener('mousedown', this.onPointerDown, true);
+            this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true);
+            this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true);
+            window.addEventListener('mouseup', this.onPointerUp, true);
+
+            if (this.supportsTouchEvents) {
                 this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true);
+                this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true);
                 this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true);
                 this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true);
             }
-
-            if (this.normalizeMouseEvents) {
-                window.document.addEventListener('mousemove', this.onPointerMove, true);
-                this.interactionDOMElement.addEventListener('mousedown', this.onPointerDown, true);
-                this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true);
-                this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true);
-                window.addEventListener('mouseup', this.onPointerUp, true);
-            }
         }
 
-        window.document.addEventListener('mousemove', this.onMouseMove, true);
-        this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true);
-        this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true);
-        this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true);
-        window.addEventListener('mouseup', this.onMouseUp, true);
-
-        if (this.supportsTouchEvents) {
-            this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true);
-            this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true);
-            this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true);
-        }
-
         this.eventsAdded = true;
@@ -657,38 +628,21 @@ };
             this.interactionDOMElement.removeEventListener('pointerdown', this.onPointerDown, true);
-            this.interactionDOMElement.removeEventListener('pointerout', this.onPointerOut, true);
+            this.interactionDOMElement.removeEventListener('pointerleave', this.onPointerOut, true);
             this.interactionDOMElement.removeEventListener('pointerover', this.onPointerOver, true);
+            window.removeEventListener('pointercancel', this.onPointerCancel, true);
             window.removeEventListener('pointerup', this.onPointerUp, true);
         } else {
-            /**
-             * If pointer events aren't available on a device, this will turn either the touch or
-             * mouse events into pointer events. This allows a developer to just listen for emitted
-             * pointer events on interactive sprites
-             */
-            if (this.normalizeTouchEvents) {
+            window.document.removeEventListener('mousemove', this.onPointerMove, true);
+            this.interactionDOMElement.removeEventListener('mousedown', this.onPointerDown, true);
+            this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true);
+            this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true);
+            window.removeEventListener('mouseup', this.onPointerUp, true);
+
+            if (this.supportsTouchEvents) {
                 this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true);
+                this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true);
                 this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true);
                 this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true);
             }
-
-            if (this.normalizeMouseEvents) {
-                window.document.removeEventListener('mousemove', this.onPointerMove, true);
-                this.interactionDOMElement.removeEventListener('mousedown', this.onPointerDown, true);
-                this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true);
-                this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true);
-                window.removeEventListener('mouseup', this.onPointerUp, true);
-            }
         }
 
-        window.document.removeEventListener('mousemove', this.onMouseMove, true);
-        this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true);
-        this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true);
-        this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true);
-        window.removeEventListener('mouseup', this.onMouseUp, true);
-
-        if (this.supportsTouchEvents) {
-            this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true);
-            this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true);
-            this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true);
-        }
-
         this.interactionDOMElement = null;
@@ -720,3 +674,3 @@
 
-        // if the user move the mouse this check has already been dfone using the mouse move!
+        // if the user move the mouse this check has already been done using the mouse move!
         if (this.didMove) {
@@ -728,3 +682,3 @@ this.didMove = false;
 
-        this.cursor = this.defaultCursorStyle;
+        this.cursor = null;
 
@@ -734,11 +688,17 @@ // Resets the flag as set by a stopPropagation call. This flag is usually reset by a user interaction of any kind,
         // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function
-        this.eventData._reset();
+        for (var k in this.activeInteractionData) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (this.activeInteractionData.hasOwnProperty(k)) {
+                var interactionData = this.activeInteractionData[k];
 
-        this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true);
+                if (interactionData.originalEvent && interactionData.pointerType !== 'touch') {
+                    var interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, interactionData.originalEvent, interactionData);
 
-        if (this.currentCursorStyle !== this.cursor) {
-            this.currentCursorStyle = this.cursor;
-            this.interactionDOMElement.style.cursor = this.cursor;
+                    this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, true);
+                }
+            }
         }
 
+        this.setCursorMode(this.cursor);
+
         // TODO
@@ -748,2 +708,38 @@ };
     /**
+     * Sets the current cursor mode, handling any callbacks or CSS style changes.
+     *
+     * @param {string} mode - cursor mode, a key from the cursorStyles dictionary
+     */
+
+
+    InteractionManager.prototype.setCursorMode = function setCursorMode(mode) {
+        mode = mode || 'default';
+        // if the mode didn't actually change, bail early
+        if (this.currentCursorMode === mode) {
+            return;
+        }
+        this.currentCursorMode = mode;
+        var style = this.cursorStyles[mode];
+
+        // only do things if there is a cursor style for it
+        if (style) {
+            switch (typeof style === 'undefined' ? 'undefined' : _typeof(style)) {
+                case 'string':
+                    // string styles are handled as cursor CSS
+                    this.interactionDOMElement.style.cursor = style;
+                    break;
+                case 'function':
+                    // functions are just called, and passed the cursor mode
+                    style(mode);
+                    break;
+                case 'object':
+                    // if it is an object, assume that it is a dictionary of CSS styles,
+                    // apply it to the interactionDOMElement
+                    Object.assign(this.interactionDOMElement.style, style);
+                    break;
+            }
+        }
+    };
+
+    /**
      * Dispatches an event on the display object that was interacted with
@@ -803,7 +799,9 @@ *
      *
-     * @param {PIXI.Point} point - the point that is tested for collision
+     * @private
+     * @param {InteractionEvent} interactionEvent - event containing the point that
+     *  is tested for collision
      * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - the displayObject
      *  that will be hit test (recursively crawls its children)
      * @param {Function} [func] - the function that will be called on each interactive object. The
-     *  displayObject and hit will be passed to the function
+     *  interactionEvent, displayObject and hit will be passed to the function
      * @param {boolean} [hitTest] - this indicates if the objects inside should be hit test against the point
@@ -815,3 +813,3 @@ * @param {boolean} [interactive] - Whether the displayObject is interactive
 
-    InteractionManager.prototype.processInteractive = function processInteractive(point, displayObject, func, hitTest, interactive) {
+    InteractionManager.prototype.processInteractive = function processInteractive(interactionEvent, displayObject, func, hitTest, interactive) {
         if (!displayObject || !displayObject.visible) {
@@ -821,2 +819,4 @@ return false;
 
+        var point = interactionEvent.data.global;
+
         // Took a little while to rework this function correctly! But now it is done and nice and optimised. ^_^
@@ -844,16 +844,10 @@ //
         }
-
-        // it has a mask! Then lets hit test that before continuing..
-        if (hitTest && displayObject._mask) {
-            if (!displayObject._mask.containsPoint(point)) {
-                hitTest = false;
+        // it has a mask! Then lets hit test that before continuing
+        else if (hitTest && displayObject._mask) {
+                if (!displayObject._mask.containsPoint(point)) {
+                    hitTest = false;
+                }
             }
-        }
 
-        // it has a filterArea! Same as mask but easier, its a rectangle
-        if (hitTest && displayObject.filterArea) {
-            if (!displayObject.filterArea.contains(point.x, point.y)) {
-                hitTest = false;
-            }
-        }
+        var keepHitTestingAfterChildren = hitTest;
 
@@ -870,3 +864,3 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it
                 // time to get recursive.. if this function will return if something is hit..
-                if (this.processInteractive(point, child, func, hitTest, interactiveParent)) {
+                if (this.processInteractive(interactionEvent, child, func, hitTest, interactiveParent)) {
                     // its a good idea to check if a child has lost its parent.
@@ -889,6 +883,8 @@ // this means it has been removed whilst looping so its best
 
-                    // {
-                    hitTest = false;
-                    // }
+                    keepHitTestingAfterChildren = false;
 
+                    if (child.interactive) {
+                        hitTest = false;
+                    }
+
                     // we can break now as we have hit an object.
@@ -899,2 +895,4 @@ }
 
+        hitTest = keepHitTestingAfterChildren;
+
         // no point running this if the item is not interactive or does not have an interactive parent.
@@ -915,9 +913,7 @@ if (interactive) {
             if (displayObject.interactive) {
-                if (hit && !this.eventData.target) {
-                    this.eventData.target = displayObject;
-                    this.mouse.target = displayObject;
-                    this.pointer.target = displayObject;
+                if (hit && !interactionEvent.target) {
+                    interactionEvent.target = displayObject;
                 }
 
-                func(displayObject, hit);
+                func(interactionEvent, displayObject, hit);
             }
@@ -930,45 +926,45 @@ }
     /**
-     * Is called when the mouse button is pressed down on the renderer element
+     * Is called when the pointer button is pressed down on the renderer element
      *
      * @private
-     * @param {MouseEvent} event - The DOM event of a mouse button being pressed down
+     * @param {PointerEvent} originalEvent - The DOM event of a pointer button being pressed down
      */
 
 
-    InteractionManager.prototype.onMouseDown = function onMouseDown(event) {
-        this.mouse.originalEvent = event;
-        this.eventData.data = this.mouse;
-        this.eventData._reset();
+    InteractionManager.prototype.onPointerDown = function onPointerDown(originalEvent) {
+        var events = this.normalizeToPointerData(originalEvent);
 
-        // Update internal mouse reference
-        this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY);
+        /**
+         * No need to prevent default on natural pointer events, as there are no side effects
+         * Normalized events, however, may have the double mousedown/touchstart issue on the native android browser,
+         * so still need to be prevented.
+         */
 
-        if (this.autoPreventDefault) {
-            this.mouse.originalEvent.preventDefault();
+        // Guaranteed that there will be at least one event in events, and all events must have the same pointer type
+
+        if (this.autoPreventDefault && events[0].isNormalized) {
+            originalEvent.preventDefault();
         }
 
-        this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true);
+        var eventLen = events.length;
 
-        var isRightButton = event.button === 2 || event.which === 3;
+        for (var i = 0; i < eventLen; i++) {
+            var event = events[i];
 
-        this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData);
-    };
+            var interactionData = this.getInteractionDataForPointerId(event.pointerId);
 
-    /**
-     * Processes the result of the mouse down check and dispatches the event if need be
-     *
-     * @private
-     * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
-     * @param {boolean} hit - the result of the hit test on the display object
-     */
+            var interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
 
+            interactionEvent.data.originalEvent = originalEvent;
 
-    InteractionManager.prototype.processMouseDown = function processMouseDown(displayObject, hit) {
-        var e = this.mouse.originalEvent;
+            this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerDown, true);
 
-        var isRightButton = e.button === 2 || e.which === 3;
+            this.emit('pointerdown', interactionEvent);
+            if (event.pointerType === 'touch') {
+                this.emit('touchstart', interactionEvent);
+            } else if (event.pointerType === 'mouse') {
+                var isRightButton = event.button === 2 || event.which === 3;
 
-        if (hit) {
-            displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true;
-            this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData);
+                this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData);
+            }
         }
@@ -978,28 +974,6 @@ };
     /**
-     * Is called when the mouse button is released on the renderer element
+     * Processes the result of the pointer down check and dispatches the event if need be
      *
      * @private
-     * @param {MouseEvent} event - The DOM event of a mouse button being released
-     */
-
-
-    InteractionManager.prototype.onMouseUp = function onMouseUp(event) {
-        this.mouse.originalEvent = event;
-        this.eventData.data = this.mouse;
-        this.eventData._reset();
-
-        // Update internal mouse reference
-        this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY);
-
-        this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true);
-
-        var isRightButton = event.button === 2 || event.which === 3;
-
-        this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData);
-    };
-
-    /**
-     * Processes the result of the mouse up check and dispatches the event if need be
-     *
-     * @private
+     * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
      * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
@@ -1010,18 +984,26 @@ * @param {boolean} hit - the result of the hit test on the display object
 
-    InteractionManager.prototype.processMouseUp = function processMouseUp(displayObject, hit) {
-        var e = this.mouse.originalEvent;
+    InteractionManager.prototype.processPointerDown = function processPointerDown(interactionEvent, displayObject, hit) {
+        var e = interactionEvent.data.originalEvent;
 
-        var isRightButton = e.button === 2 || e.which === 3;
-        var isDown = isRightButton ? '_isRightDown' : '_isLeftDown';
+        var id = interactionEvent.data.identifier;
 
         if (hit) {
-            this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData);
+            if (!displayObject.trackedPointers[id]) {
+                displayObject.trackedPointers[id] = new _InteractionTrackingData2.default(id);
+            }
+            this.dispatchEvent(displayObject, 'pointerdown', interactionEvent);
 
-            if (displayObject[isDown]) {
-                displayObject[isDown] = false;
-                this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData);
+            if (e.type === 'touchstart' || e.pointerType === 'touch') {
+                this.dispatchEvent(displayObject, 'touchstart', interactionEvent);
+            } else if (e.type === 'mousedown' || e.pointerType === 'mouse') {
+                var isRightButton = e.button === 2 || e.which === 3;
+
+                if (isRightButton) {
+                    displayObject.trackedPointers[id].rightDown = true;
+                } else {
+                    displayObject.trackedPointers[id].leftDown = true;
+                }
+
+                this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', interactionEvent);
             }
-        } else if (displayObject[isDown]) {
-            displayObject[isDown] = false;
-            this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData);
         }
@@ -1031,47 +1013,37 @@ };
     /**
-     * Is called when the mouse moves across the renderer element
+     * Is called when the pointer button is released on the renderer element
      *
      * @private
-     * @param {MouseEvent} event - The DOM event of the mouse moving
+     * @param {PointerEvent} originalEvent - The DOM event of a pointer button being released
+     * @param {boolean} cancelled - true if the pointer is cancelled
+     * @param {Function} func - Function passed to {@link processInteractive}
      */
 
 
-    InteractionManager.prototype.onMouseMove = function onMouseMove(event) {
-        this.mouse.originalEvent = event;
-        this.eventData.data = this.mouse;
-        this.eventData._reset();
+    InteractionManager.prototype.onPointerComplete = function onPointerComplete(originalEvent, cancelled, func) {
+        var events = this.normalizeToPointerData(originalEvent);
 
-        this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY);
+        var eventLen = events.length;
 
-        this.didMove = true;
+        for (var i = 0; i < eventLen; i++) {
+            var event = events[i];
 
-        this.cursor = this.defaultCursorStyle;
+            var interactionData = this.getInteractionDataForPointerId(event.pointerId);
 
-        this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true);
+            var interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
 
-        this.emit('mousemove', this.eventData);
+            interactionEvent.data.originalEvent = originalEvent;
 
-        if (this.currentCursorStyle !== this.cursor) {
-            this.currentCursorStyle = this.cursor;
-            this.interactionDOMElement.style.cursor = this.cursor;
-        }
+            this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true);
 
-        // TODO BUG for parents interactive object (border order issue)
-    };
+            this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent);
 
-    /**
-     * Processes the result of the mouse move check and dispatches the event if need be
-     *
-     * @private
-     * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
-     * @param {boolean} hit - the result of the hit test on the display object
-     */
+            if (event.pointerType === 'mouse') {
+                var isRightButton = event.button === 2 || event.which === 3;
 
-
-    InteractionManager.prototype.processMouseMove = function processMouseMove(displayObject, hit) {
-        this.processMouseOverOut(displayObject, hit);
-
-        // only display on mouse over
-        if (!this.moveWhenInside || hit) {
-            this.dispatchEvent(displayObject, 'mousemove', this.eventData);
+                this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent);
+            } else if (event.pointerType === 'touch') {
+                this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent);
+                this.releaseInteractionDataForPointerId(event.pointerId, interactionData);
+            }
         }
@@ -1081,51 +1053,34 @@ };
     /**
-     * Is called when the mouse is moved out of the renderer element
+     * Is called when the pointer button is cancelled
      *
      * @private
-     * @param {MouseEvent} event - The DOM event of the mouse being moved out
+     * @param {PointerEvent} event - The DOM event of a pointer button being released
      */
 
 
-    InteractionManager.prototype.onMouseOut = function onMouseOut(event) {
-        this.mouseOverRenderer = false;
-
-        this.mouse.originalEvent = event;
-        this.eventData.data = this.mouse;
-        this.eventData._reset();
-
-        // Update internal mouse reference
-        this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY);
-
-        this.interactionDOMElement.style.cursor = this.defaultCursorStyle;
-
-        // TODO optimize by not check EVERY TIME! maybe half as often? //
-        this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY);
-
-        this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false);
-
-        this.emit('mouseout', this.eventData);
+    InteractionManager.prototype.onPointerCancel = function onPointerCancel(event) {
+        this.onPointerComplete(event, true, this.processPointerCancel);
     };
 
     /**
-     * Processes the result of the mouse over/out check and dispatches the event if need be
+     * Processes the result of the pointer cancel check and dispatches the event if need be
      *
      * @private
+     * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
      * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
-     * @param {boolean} hit - the result of the hit test on the display object
      */
 
 
-    InteractionManager.prototype.processMouseOverOut = function processMouseOverOut(displayObject, hit) {
-        if (hit && this.mouseOverRenderer) {
-            if (!displayObject._mouseOver) {
-                displayObject._mouseOver = true;
-                this.dispatchEvent(displayObject, 'mouseover', this.eventData);
-            }
+    InteractionManager.prototype.processPointerCancel = function processPointerCancel(interactionEvent, displayObject) {
+        var e = interactionEvent.data.originalEvent;
 
-            if (displayObject.buttonMode) {
-                this.cursor = displayObject.defaultCursor;
+        var id = interactionEvent.data.identifier;
+
+        if (displayObject.trackedPointers[id] !== undefined) {
+            delete displayObject.trackedPointers[id];
+            this.dispatchEvent(displayObject, 'pointercancel', interactionEvent);
+
+            if (e.type === 'touchcancel' || e.pointerType === 'touch') {
+                this.dispatchEvent(displayObject, 'touchcancel', interactionEvent);
             }
-        } else if (displayObject._mouseOver) {
-            displayObject._mouseOver = false;
-            this.dispatchEvent(displayObject, 'mouseout', this.eventData);
         }
@@ -1135,109 +1090,85 @@ };
     /**
-     * Is called when the mouse enters the renderer element area
+     * Is called when the pointer button is released on the renderer element
      *
      * @private
-     * @param {MouseEvent} event - The DOM event of the mouse moving into the renderer view
+     * @param {PointerEvent} event - The DOM event of a pointer button being released
      */
 
 
-    InteractionManager.prototype.onMouseOver = function onMouseOver(event) {
-        this.mouseOverRenderer = true;
-
-        this.mouse.originalEvent = event;
-        this.eventData.data = this.mouse;
-        this.eventData._reset();
-
-        this.emit('mouseover', this.eventData);
+    InteractionManager.prototype.onPointerUp = function onPointerUp(event) {
+        this.onPointerComplete(event, false, this.processPointerUp);
     };
 
     /**
-     * Is called when the pointer button is pressed down on the renderer element
+     * Processes the result of the pointer up check and dispatches the event if need be
      *
      * @private
-     * @param {PointerEvent} event - The DOM event of a pointer button being pressed down
+     * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
+     * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
+     * @param {boolean} hit - the result of the hit test on the display object
      */
 
 
-    InteractionManager.prototype.onPointerDown = function onPointerDown(event) {
-        this.normalizeToPointerData(event);
-        this.pointer.originalEvent = event;
-        this.eventData.data = this.pointer;
-        this.eventData._reset();
+    InteractionManager.prototype.processPointerUp = function processPointerUp(interactionEvent, displayObject, hit) {
+        var e = interactionEvent.data.originalEvent;
 
-        // Update internal pointer reference
-        this.mapPositionToPoint(this.pointer.global, event.clientX, event.clientY);
+        var id = interactionEvent.data.identifier;
 
-        /**
-         * No need to prevent default on natural pointer events, as there are no side effects
-         * Normalized events, however, may have the double mousedown/touchstart issue on the native android browser,
-         * so still need to be prevented.
-         */
-        if (this.autoPreventDefault && (this.normalizeMouseEvents || this.normalizeTouchEvents)) {
-            this.pointer.originalEvent.preventDefault();
-        }
+        var trackingData = displayObject.trackedPointers[id];
 
-        this.processInteractive(this.pointer.global, this.renderer._lastObjectRendered, this.processPointerDown, true);
+        var isTouch = e.type === 'touchend' || e.pointerType === 'touch';
 
-        this.emit('pointerdown', this.eventData);
-    };
+        var isMouse = e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse';
 
-    /**
-     * Processes the result of the pointer down check and dispatches the event if need be
-     *
-     * @private
-     * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
-     * @param {boolean} hit - the result of the hit test on the display object
-     */
+        // Mouse only
+        if (isMouse) {
+            var isRightButton = e.button === 2 || e.which === 3;
 
+            var flags = _InteractionTrackingData2.default.FLAGS;
 
-    InteractionManager.prototype.processPointerDown = function processPointerDown(displayObject, hit) {
-        if (hit) {
-            displayObject._pointerDown = true;
-            this.dispatchEvent(displayObject, 'pointerdown', this.eventData);
-        }
-    };
+            var test = isRightButton ? flags.RIGHT_DOWN : flags.LEFT_DOWN;
 
-    /**
-     * Is called when the pointer button is released on the renderer element
-     *
-     * @private
-     * @param {PointerEvent} event - The DOM event of a pointer button being released
-     */
+            var isDown = trackingData !== undefined && trackingData.flags | test;
 
+            if (hit) {
+                this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', interactionEvent);
 
-    InteractionManager.prototype.onPointerUp = function onPointerUp(event) {
-        this.normalizeToPointerData(event);
-        this.pointer.originalEvent = event;
-        this.eventData.data = this.pointer;
-        this.eventData._reset();
+                if (isDown) {
+                    this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', interactionEvent);
+                }
+            } else if (isDown) {
+                this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', interactionEvent);
+            }
+            // update the down state of the tracking data
+            if (trackingData) {
+                if (isRightButton) {
+                    trackingData.rightDown = hit;
+                } else {
+                    trackingData.leftDown = hit;
+                }
+            }
+        }
 
-        // Update internal pointer reference
-        this.mapPositionToPoint(this.pointer.global, event.clientX, event.clientY);
-
-        this.processInteractive(this.pointer.global, this.renderer._lastObjectRendered, this.processPointerUp, true);
-
-        this.emit('pointerup', this.eventData);
-    };
-
-    /**
-     * Processes the result of the pointer up check and dispatches the event if need be
-     *
-     * @private
-     * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
-     * @param {boolean} hit - the result of the hit test on the display object
-     */
-
-
-    InteractionManager.prototype.processPointerUp = function processPointerUp(displayObject, hit) {
+        // Pointers and Touches, and Mouse
         if (hit) {
-            this.dispatchEvent(displayObject, 'pointerup', this.eventData);
+            this.dispatchEvent(displayObject, 'pointerup', interactionEvent);
+            if (isTouch) this.dispatchEvent(displayObject, 'touchend', interactionEvent);
 
-            if (displayObject._pointerDown) {
-                displayObject._pointerDown = false;
-                this.dispatchEvent(displayObject, 'pointertap', this.eventData);
+            if (trackingData) {
+                this.dispatchEvent(displayObject, 'pointertap', interactionEvent);
+                if (isTouch) {
+                    this.dispatchEvent(displayObject, 'tap', interactionEvent);
+                    // touches are no longer over (if they ever were) when we get the touchend
+                    // so we should ensure that we don't keep pretending that they are
+                    trackingData.over = false;
+                }
             }
-        } else if (displayObject._pointerDown) {
-            displayObject._pointerDown = false;
-            this.dispatchEvent(displayObject, 'pointerupoutside', this.eventData);
+        } else if (trackingData) {
+            this.dispatchEvent(displayObject, 'pointerupoutside', interactionEvent);
+            if (isTouch) this.dispatchEvent(displayObject, 'touchendoutside', interactionEvent);
         }
+        // Only remove the tracking data if there is no over/down state still associated with it
+        if (trackingData && trackingData.none) {
+            delete displayObject.trackedPointers[id];
+        }
     };
@@ -1249,64 +1180,46 @@
      * @private
-     * @param {PointerEvent} event - The DOM event of a pointer moving
+     * @param {PointerEvent} originalEvent - The DOM event of a pointer moving
      */
 
 
-    InteractionManager.prototype.onPointerMove = function onPointerMove(event) {
-        this.normalizeToPointerData(event);
-        this.pointer.originalEvent = event;
-        this.eventData.data = this.pointer;
-        this.eventData._reset();
+    InteractionManager.prototype.onPointerMove = function onPointerMove(originalEvent) {
+        var events = this.normalizeToPointerData(originalEvent);
 
-        this.mapPositionToPoint(this.pointer.global, event.clientX, event.clientY);
+        if (events[0].pointerType === 'mouse') {
+            this.didMove = true;
 
-        this.processInteractive(this.pointer.global, this.renderer._lastObjectRendered, this.processPointerMove, true);
+            this.cursor = null;
+        }
 
-        this.emit('pointermove', this.eventData);
-    };
+        var eventLen = events.length;
 
-    /**
-     * Processes the result of the pointer move check and dispatches the event if need be
-     *
-     * @private
-     * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
-     * @param {boolean} hit - the result of the hit test on the display object
-     */
+        for (var i = 0; i < eventLen; i++) {
+            var event = events[i];
 
+            var interactionData = this.getInteractionDataForPointerId(event.pointerId);
 
-    InteractionManager.prototype.processPointerMove = function processPointerMove(displayObject, hit) {
-        if (!this.pointer.originalEvent.changedTouches) {
-            this.processPointerOverOut(displayObject, hit);
-        }
+            var interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
 
-        if (!this.moveWhenInside || hit) {
-            this.dispatchEvent(displayObject, 'pointermove', this.eventData);
-        }
-    };
+            interactionEvent.data.originalEvent = originalEvent;
 
-    /**
-     * Is called when the pointer is moved out of the renderer element
-     *
-     * @private
-     * @param {PointerEvent} event - The DOM event of a pointer being moved out
-     */
+            var interactive = event.pointerType === 'touch' ? this.moveWhenInside : true;
 
+            this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerMove, interactive);
+            this.emit('pointermove', interactionEvent);
+            if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent);
+            if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent);
+        }
 
-    InteractionManager.prototype.onPointerOut = function onPointerOut(event) {
-        this.normalizeToPointerData(event);
-        this.pointer.originalEvent = event;
-        this.eventData.data = this.pointer;
-        this.eventData._reset();
+        if (events[0].pointerType === 'mouse') {
+            this.setCursorMode(this.cursor);
 
-        // Update internal pointer reference
-        this.mapPositionToPoint(this.pointer.global, event.clientX, event.clientY);
-
-        this.processInteractive(this.pointer.global, this.renderer._lastObjectRendered, this.processPointerOverOut, false);
-
-        this.emit('pointerout', this.eventData);
+            // TODO BUG for parents interactive object (border order issue)
+        }
     };
 
     /**
-     * Processes the result of the pointer over/out check and dispatches the event if need be
+     * Processes the result of the pointer move check and dispatches the event if need be
      *
      * @private
+     * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
      * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
@@ -1317,60 +1230,50 @@ * @param {boolean} hit - the result of the hit test on the display object
 
-    InteractionManager.prototype.processPointerOverOut = function processPointerOverOut(displayObject, hit) {
-        if (hit && this.mouseOverRenderer) {
-            if (!displayObject._pointerOver) {
-                displayObject._pointerOver = true;
-                this.dispatchEvent(displayObject, 'pointerover', this.eventData);
-            }
-        } else if (displayObject._pointerOver) {
-            displayObject._pointerOver = false;
-            this.dispatchEvent(displayObject, 'pointerout', this.eventData);
-        }
-    };
+    InteractionManager.prototype.processPointerMove = function processPointerMove(interactionEvent, displayObject, hit) {
+        var e = interactionEvent.data.originalEvent;
 
-    /**
-     * Is called when the pointer is moved into the renderer element
-     *
-     * @private
-     * @param {PointerEvent} event - The DOM event of a pointer button being moved into the renderer view
-     */
+        var isTouch = e.type === 'touchmove' || e.pointerType === 'touch';
 
+        var isMouse = e.type === 'mousemove' || e.pointerType === 'mouse';
 
-    InteractionManager.prototype.onPointerOver = function onPointerOver(event) {
-        this.pointer.originalEvent = event;
-        this.eventData.data = this.pointer;
-        this.eventData._reset();
+        if (isMouse) {
+            this.processPointerOverOut(interactionEvent, displayObject, hit);
+        }
 
-        this.emit('pointerover', this.eventData);
+        if (!this.moveWhenInside || hit) {
+            this.dispatchEvent(displayObject, 'pointermove', interactionEvent);
+            if (isTouch) this.dispatchEvent(displayObject, 'touchmove', interactionEvent);
+            if (isMouse) this.dispatchEvent(displayObject, 'mousemove', interactionEvent);
+        }
     };
 
     /**
-     * Is called when a touch is started on the renderer element
+     * Is called when the pointer is moved out of the renderer element
      *
      * @private
-     * @param {TouchEvent} event - The DOM event of a touch starting on the renderer view
+     * @param {PointerEvent} originalEvent - The DOM event of a pointer being moved out
      */
 
 
-    InteractionManager.prototype.onTouchStart = function onTouchStart(event) {
-        if (this.autoPreventDefault) {
-            event.preventDefault();
-        }
+    InteractionManager.prototype.onPointerOut = function onPointerOut(originalEvent) {
+        var events = this.normalizeToPointerData(originalEvent);
 
-        var changedTouches = event.changedTouches;
-        var cLength = changedTouches.length;
+        // Only mouse and pointer can call onPointerOut, so events will always be length 1
+        var event = events[0];
 
-        for (var i = 0; i < cLength; i++) {
-            var touch = changedTouches[i];
-            var touchData = this.getTouchData(touch);
+        if (event.pointerType === 'mouse') {
+            this.mouseOverRenderer = false;
+            this.setCursorMode(null);
+        }
 
-            touchData.originalEvent = event;
+        var interactionData = this.getInteractionDataForPointerId(event.pointerId);
 
-            this.eventData.data = touchData;
-            this.eventData._reset();
+        var interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
 
-            this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true);
+        interactionEvent.data.originalEvent = event;
 
-            this.emit('touchstart', this.eventData);
+        this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false);
 
-            this.returnTouchData(touchData);
+        this.emit('pointerout', interactionEvent);
+        if (event.pointerType === 'mouse') {
+            this.emit('mouseout', interactionEvent);
         }
@@ -1380,5 +1283,6 @@ };
     /**
-     * Processes the result of a touch check and dispatches the event if need be
+     * Processes the result of the pointer over/out check and dispatches the event if need be
      *
      * @private
+     * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
      * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
@@ -1389,41 +1293,42 @@ * @param {boolean} hit - the result of the hit test on the display object
 
-    InteractionManager.prototype.processTouchStart = function processTouchStart(displayObject, hit) {
-        if (hit) {
-            displayObject._touchDown = true;
-            this.dispatchEvent(displayObject, 'touchstart', this.eventData);
-        }
-    };
+    InteractionManager.prototype.processPointerOverOut = function processPointerOverOut(interactionEvent, displayObject, hit) {
+        var e = interactionEvent.data.originalEvent;
 
-    /**
-     * Is called when a touch ends on the renderer element
-     *
-     * @private
-     * @param {TouchEvent} event - The DOM event of a touch ending on the renderer view
-     */
+        var id = interactionEvent.data.identifier;
 
+        var isMouse = e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse';
 
-    InteractionManager.prototype.onTouchEnd = function onTouchEnd(event) {
-        if (this.autoPreventDefault) {
-            event.preventDefault();
+        var trackingData = displayObject.trackedPointers[id];
+
+        // if we just moused over the display object, then we need to track that state
+        if (hit && !trackingData) {
+            trackingData = displayObject.trackedPointers[id] = new _InteractionTrackingData2.default(id);
         }
 
-        var changedTouches = event.changedTouches;
-        var cLength = changedTouches.length;
+        if (trackingData === undefined) return;
 
-        for (var i = 0; i < cLength; i++) {
-            var touchEvent = changedTouches[i];
+        if (hit && this.mouseOverRenderer) {
+            if (!trackingData.over) {
+                trackingData.over = true;
+                this.dispatchEvent(displayObject, 'pointerover', interactionEvent);
+                if (isMouse) {
+                    this.dispatchEvent(displayObject, 'mouseover', interactionEvent);
+                }
+            }
 
-            var touchData = this.getTouchData(touchEvent);
-
-            touchData.originalEvent = event;
-
-            // TODO this should be passed along.. no set
-            this.eventData.data = touchData;
-            this.eventData._reset();
-
-            this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true);
-
-            this.emit('touchend', this.eventData);
-
-            this.returnTouchData(touchData);
+            // only change the cursor if it has not already been changed (by something deeper in the
+            // display tree)
+            if (isMouse && this.cursor === null) {
+                this.cursor = displayObject.cursor;
+            }
+        } else if (trackingData.over) {
+            trackingData.over = false;
+            this.dispatchEvent(displayObject, 'pointerout', this.eventData);
+            if (isMouse) {
+                this.dispatchEvent(displayObject, 'mouseout', interactionEvent);
+            }
+            // if there is no mouse down information for the pointer, then it is safe to delete
+            if (trackingData.none) {
+                delete displayObject.trackedPointers[id];
+            }
         }
@@ -1433,70 +1338,69 @@ };
     /**
-     * Processes the result of the end of a touch and dispatches the event if need be
+     * Is called when the pointer is moved into the renderer element
      *
      * @private
-     * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
-     * @param {boolean} hit - the result of the hit test on the display object
+     * @param {PointerEvent} originalEvent - The DOM event of a pointer button being moved into the renderer view
      */
 
 
-    InteractionManager.prototype.processTouchEnd = function processTouchEnd(displayObject, hit) {
-        if (hit) {
-            this.dispatchEvent(displayObject, 'touchend', this.eventData);
+    InteractionManager.prototype.onPointerOver = function onPointerOver(originalEvent) {
+        var events = this.normalizeToPointerData(originalEvent);
 
-            if (displayObject._touchDown) {
-                displayObject._touchDown = false;
-                this.dispatchEvent(displayObject, 'tap', this.eventData);
-            }
-        } else if (displayObject._touchDown) {
-            displayObject._touchDown = false;
-            this.dispatchEvent(displayObject, 'touchendoutside', this.eventData);
+        // Only mouse and pointer can call onPointerOver, so events will always be length 1
+        var event = events[0];
+
+        var interactionData = this.getInteractionDataForPointerId(event.pointerId);
+
+        var interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
+
+        interactionEvent.data.originalEvent = event;
+
+        if (event.pointerType === 'mouse') {
+            this.mouseOverRenderer = true;
         }
+
+        this.emit('pointerover', interactionEvent);
+        if (event.pointerType === 'mouse') {
+            this.emit('mouseover', interactionEvent);
+        }
     };
 
     /**
-     * Is called when a touch is moved across the renderer element
+     * Get InteractionData for a given pointerId. Store that data as well
      *
      * @private
-     * @param {TouchEvent} event - The DOM event of a touch moving accross the renderer view
+     * @param {number} pointerId - Identifier from a pointer event
+     * @return {InteractionData} - Interaction data for the given pointer identifier
      */
 
 
-    InteractionManager.prototype.onTouchMove = function onTouchMove(event) {
-        if (this.autoPreventDefault) {
-            event.preventDefault();
+    InteractionManager.prototype.getInteractionDataForPointerId = function getInteractionDataForPointerId(pointerId) {
+        if (pointerId === MOUSE_POINTER_ID) {
+            return this.mouse;
+        } else if (this.activeInteractionData[pointerId]) {
+            return this.activeInteractionData[pointerId];
         }
 
-        var changedTouches = event.changedTouches;
-        var cLength = changedTouches.length;
+        var interactionData = this.interactionDataPool.pop() || new _InteractionData2.default();
 
-        for (var i = 0; i < cLength; i++) {
-            var touchEvent = changedTouches[i];
+        interactionData.identifier = pointerId;
+        this.activeInteractionData[pointerId] = interactionData;
 
-            var touchData = this.getTouchData(touchEvent);
-
-            touchData.originalEvent = event;
-
-            this.eventData.data = touchData;
-            this.eventData._reset();
-
-            this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside);
-
-            this.emit('touchmove', this.eventData);
-
-            this.returnTouchData(touchData);
-        }
+        return interactionData;
     };
 
     /**
-     * Processes the result of a touch move check and dispatches the event if need be
+     * Return unused InteractionData to the pool, for a given pointerId
      *
      * @private
-     * @param {PIXI.Container|PIXI.Sprite|PIXI.extras.TilingSprite} displayObject - The display object that was tested
-     * @param {boolean} hit - the result of the hit test on the display object
+     * @param {number} pointerId - Identifier from a pointer event
      */
 
 
-    InteractionManager.prototype.processTouchMove = function processTouchMove(displayObject, hit) {
-        if (!this.moveWhenInside || hit) {
-            this.dispatchEvent(displayObject, 'touchmove', this.eventData);
+    InteractionManager.prototype.releaseInteractionDataForPointerId = function releaseInteractionDataForPointerId(pointerId) {
+        var interactionData = this.activeInteractionData[pointerId];
+
+        if (interactionData) {
+            delete this.activeInteractionData[pointerId];
+            this.interactionDataPool.push(interactionData);
         }
@@ -1506,37 +1410,35 @@ };
     /**
-     * Grabs an interaction data object from the internal pool
+     * Configure an InteractionEvent to wrap a DOM PointerEvent and InteractionData
      *
      * @private
-     * @param {Touch} touch - The touch data we need to pair with an interactionData object
-     * @return {PIXI.interaction.InteractionData} The built data object.
+     * @param {InteractionEvent} interactionEvent - The event to be configured
+     * @param {PointerEvent} pointerEvent - The DOM event that will be paired with the InteractionEvent
+     * @param {InteractionData} interactionData - The InteractionData that will be paired with the InteractionEvent
+     * @return {InteractionEvent} the interaction event that was passed in
      */
 
 
-    InteractionManager.prototype.getTouchData = function getTouchData(touch) {
-        var touchData = this.interactiveDataPool.pop() || new _InteractionData2.default();
+    InteractionManager.prototype.configureInteractionEventForDOMEvent = function configureInteractionEventForDOMEvent(interactionEvent, pointerEvent, interactionData) {
+        interactionEvent.data = interactionData;
 
-        touchData.identifier = touch.identifier;
-        this.mapPositionToPoint(touchData.global, touch.clientX, touch.clientY);
+        this.mapPositionToPoint(interactionData.global, pointerEvent.clientX, pointerEvent.clientY);
 
-        if (navigator.isCocoonJS) {
-            touchData.global.x = touchData.global.x / this.resolution;
-            touchData.global.y = touchData.global.y / this.resolution;
+        // This is the way InteractionManager processed touch events before the refactoring, so I've kept
+        // it here. But it doesn't make that much sense to me, since mapPositionToPoint already factors
+        // in this.resolution, so this just divides by this.resolution twice for touch events...
+        if (navigator.isCocoonJS && pointerEvent.pointerType === 'touch') {
+            interactionData.global.x = interactionData.global.x / this.resolution;
+            interactionData.global.y = interactionData.global.y / this.resolution;
         }
 
-        touch.globalX = touchData.global.x;
-        touch.globalY = touchData.global.y;
+        // Not really sure why this is happening, but it's how a previous version handled things
+        if (pointerEvent.pointerType === 'touch') {
+            pointerEvent.globalX = interactionData.global.x;
+            pointerEvent.globalY = interactionData.global.y;
+        }
 
-        return touchData;
-    };
+        interactionData.originalEvent = pointerEvent;
+        interactionEvent._reset();
 
-    /**
-     * Returns an interaction data object to the internal pool
-     *
-     * @private
-     * @param {PIXI.interaction.InteractionData} touchData - The touch data object we want to return to the pool
-     */
-
-
-    InteractionManager.prototype.returnTouchData = function returnTouchData(touchData) {
-        this.interactiveDataPool.push(touchData);
+        return interactionEvent;
     };
@@ -1548,3 +1450,5 @@
      * @private
-     * @param {TouchEvent|MouseEvent} event - The original event data from a touch or mouse event
+     * @param {TouchEvent|MouseEvent|PointerEvent} event - The original event data from a touch or mouse event
+     * @return {PointerEvent[]} An array containing a single normalized pointer event, in the case of a pointer
+     *  or mouse event, or a multiple normalized pointer events if there are multiple changed touches
      */
@@ -1554,34 +1458,50 @@
     InteractionManager.prototype.normalizeToPointerData = function normalizeToPointerData(event) {
-        if (this.normalizeTouchEvents && event.changedTouches) {
-            if (typeof event.button === 'undefined') event.button = event.touches.length ? 1 : 0;
-            if (typeof event.buttons === 'undefined') event.buttons = event.touches.length ? 1 : 0;
-            if (typeof event.isPrimary === 'undefined') event.isPrimary = event.touches.length === 1;
-            if (typeof event.width === 'undefined') event.width = event.changedTouches[0].radiusX || 1;
-            if (typeof event.height === 'undefined') event.height = event.changedTouches[0].radiusY || 1;
-            if (typeof event.tiltX === 'undefined') event.tiltX = 0;
-            if (typeof event.tiltY === 'undefined') event.tiltY = 0;
-            if (typeof event.pointerType === 'undefined') event.pointerType = 'touch';
-            if (typeof event.pointerId === 'undefined') event.pointerId = event.changedTouches[0].identifier || 0;
-            if (typeof event.pressure === 'undefined') event.pressure = event.changedTouches[0].force || 0.5;
-            if (typeof event.rotation === 'undefined') event.rotation = event.changedTouches[0].rotationAngle || 0;
+        var normalizedEvents = [];
 
-            if (typeof event.clientX === 'undefined') event.clientX = event.changedTouches[0].clientX;
-            if (typeof event.clientY === 'undefined') event.clientY = event.changedTouches[0].clientY;
-            if (typeof event.pageX === 'undefined') event.pageX = event.changedTouches[0].pageX;
-            if (typeof event.pageY === 'undefined') event.pageY = event.changedTouches[0].pageY;
-            if (typeof event.screenX === 'undefined') event.screenX = event.changedTouches[0].screenX;
-            if (typeof event.screenY === 'undefined') event.screenY = event.changedTouches[0].screenY;
-            if (typeof event.layerX === 'undefined') event.layerX = event.offsetX = event.clientX;
-            if (typeof event.layerY === 'undefined') event.layerY = event.offsetY = event.clientY;
-        } else if (this.normalizeMouseEvents) {
-            if (typeof event.isPrimary === 'undefined') event.isPrimary = true;
-            if (typeof event.width === 'undefined') event.width = 1;
-            if (typeof event.height === 'undefined') event.height = 1;
-            if (typeof event.tiltX === 'undefined') event.tiltX = 0;
-            if (typeof event.tiltY === 'undefined') event.tiltY = 0;
-            if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse';
-            if (typeof event.pointerId === 'undefined') event.pointerId = 1;
-            if (typeof event.pressure === 'undefined') event.pressure = 0.5;
-            if (typeof event.rotation === 'undefined') event.rotation = 0;
+        if (this.supportsTouchEvents && event instanceof TouchEvent) {
+            for (var i = 0, li = event.changedTouches.length; i < li; i++) {
+                var touch = event.changedTouches[i];
+
+                if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0;
+                if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0;
+                if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1;
+                if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1;
+                if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1;
+                if (typeof touch.tiltX === 'undefined') touch.tiltX = 0;
+                if (typeof touch.tiltY === 'undefined') touch.tiltY = 0;
+                if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch';
+                if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0;
+                if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5;
+                if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0;
+
+                if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX;
+                if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY;
+
+                // mark the touch as normalized, just so that we know we did it
+                touch.isNormalized = true;
+
+                normalizedEvents.push(touch);
+            }
         }
+        // apparently PointerEvent subclasses MouseEvent, so yay
+        else if (event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof window.PointerEvent))) {
+                if (typeof event.isPrimary === 'undefined') event.isPrimary = true;
+                if (typeof event.width === 'undefined') event.width = 1;
+                if (typeof event.height === 'undefined') event.height = 1;
+                if (typeof event.tiltX === 'undefined') event.tiltX = 0;
+                if (typeof event.tiltY === 'undefined') event.tiltY = 0;
+                if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse';
+                if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID;
+                if (typeof event.pressure === 'undefined') event.pressure = 0.5;
+                if (typeof event.rotation === 'undefined') event.rotation = 0;
+
+                // mark the mouse event as normalized, just so that we know we did it
+                event.isNormalized = true;
+
+                normalizedEvents.push(event);
+            } else {
+                normalizedEvents.push(event);
+            }
+
+        return normalizedEvents;
     };
@@ -1606,20 +1526,4 @@
 
-        this.interactiveDataPool = null;
-
         this.interactionDOMElement = null;
 
-        this.onMouseDown = null;
-        this.processMouseDown = null;
-
-        this.onMouseUp = null;
-        this.processMouseUp = null;
-
-        this.onMouseMove = null;
-        this.processMouseMove = null;
-
-        this.onMouseOut = null;
-        this.processMouseOverOut = null;
-
-        this.onMouseOver = null;
-
         this.onPointerDown = null;
@@ -1631,2 +1535,5 @@ this.processPointerDown = null;
 
+        this.onPointerCancel = null;
+        this.processPointerCancel = null;
+
         this.onPointerMove = null;
@@ -1640,11 +1547,2 @@ this.processPointerMove = null;
 
-        this.onTouchStart = null;
-        this.processTouchStart = null;
-
-        this.onTouchEnd = null;
-        this.processTouchEnd = null;
-
-        this.onTouchMove = null;
-        this.processTouchMove = null;
-
         this._tempPoint = null;
@@ -1651,0 +1549,0 @@ };

lib/interaction/interactiveTarget.js

@@ -15,3 +15,3 @@ 'use strict';
  *      Object.assign(
- *          MyObject.prototype,
+ *          core.DisplayObject.prototype,
  *          PIXI.interaction.interactiveTarget
@@ -45,11 +45,22 @@ *      );
   /**
-   * If enabled, the mouse cursor will change when hovered over the displayObject if it is interactive
+   * If enabled, the mouse cursor use the pointer behavior when hovered over the displayObject if it is interactive
+   * Setting this changes the 'cursor' property to `'pointer'`.
    *
-   * @inner {boolean}
+   * @member {boolean}
+   * @memberof PIXI.interaction.interactiveTarget#
    */
-  buttonMode: false,
+  get buttonMode() {
+    return this.cursor === 'pointer';
+  },
+  set buttonMode(value) {
+    if (value) {
+      this.cursor = 'pointer';
+    } else if (this.cursor === 'pointer') {
+      this.cursor = null;
+    }
+  },
 
   /**
-   * If buttonMode is enabled, this defines what CSS cursor property is used when the mouse cursor
-   * is hovered over the displayObject
+   * This defines what cursor mode is used when the mouse cursor
+   * is hovered over the displayObject.
    *
@@ -60,53 +71,24 @@ * @see https://developer.mozilla.org/en/docs/Web/CSS/cursor
    */
-  defaultCursor: 'pointer',
+  cursor: null,
 
-  // some internal checks..
   /**
-   * Internal check to detect if the mouse cursor is hovered over the displayObject
+   * Internal set of all active pointers, by identifier
    *
-   * @inner {boolean}
+   * @member {Map<number, InteractionTrackingData>}
+   * @memberof PIXI.interaction.interactiveTarget#
    * @private
    */
-  _over: false,
+  get trackedPointers() {
+    if (this._trackedPointers === undefined) this._trackedPointers = {};
 
-  /**
-   * Internal check to detect if the left mouse button is pressed on the displayObject
-   *
-   * @inner {boolean}
-   * @private
-   */
-  _isLeftDown: false,
+    return this._trackedPointers;
+  },
 
   /**
-   * Internal check to detect if the right mouse button is pressed on the displayObject
+   * Map of all tracked pointers, by identifier. Use trackedPointers to access.
    *
-   * @inner {boolean}
-   * @private
+   * @private {Map<number, InteractionTrackingData>}
    */
-  _isRightDown: false,
-
-  /**
-   * Internal check to detect if the pointer cursor is hovered over the displayObject
-   *
-   * @inner {boolean}
-   * @private
-   */
-  _pointerOver: false,
-
-  /**
-   * Internal check to detect if the pointer is down on the displayObject
-   *
-   * @inner {boolean}
-   * @private
-   */
-  _pointerDown: false,
-
-  /**
-   * Internal check to detect if a user has touched the displayObject
-   *
-   * @inner {boolean}
-   * @private
-   */
-  _touchDown: false
+  _trackedPointers: undefined
 };
 //# sourceMappingURL=interactiveTarget.js.map

lib/loaders/bitmapFontParser.js

@@ -80,49 +80,13 @@ 'use strict';
 
+/**
+ * Register a BitmapText font from loader resource.
+ *
+ * @function parseBitmapFontData
+ * @memberof PIXI.loaders
+ * @param {PIXI.loaders.Resource} resource - Loader resource.
+ * @param {PIXI.Texture} texture - Reference to texture.
+ */
 function parse(resource, texture) {
-    var data = {};
-    var info = resource.data.getElementsByTagName('info')[0];
-    var common = resource.data.getElementsByTagName('common')[0];
-
-    data.font = info.getAttribute('face');
-    data.size = parseInt(info.getAttribute('size'), 10);
-    data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
-    data.chars = {};
-
-    // parse letters
-    var letters = resource.data.getElementsByTagName('char');
-
-    for (var i = 0; i < letters.length; i++) {
-        var charCode = parseInt(letters[i].getAttribute('id'), 10);
-
-        var textureRect = new _core.Rectangle(parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), parseInt(letters[i].getAttribute('height'), 10));
-
-        data.chars[charCode] = {
-            xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
-            yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
-            xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
-            kerning: {},
-            texture: new _core.Texture(texture.baseTexture, textureRect)
-
-        };
-    }
-
-    // parse kernings
-    var kernings = resource.data.getElementsByTagName('kerning');
-
-    for (var _i = 0; _i < kernings.length; _i++) {
-        var first = parseInt(kernings[_i].getAttribute('first'), 10);
-        var second = parseInt(kernings[_i].getAttribute('second'), 10);
-        var amount = parseInt(kernings[_i].getAttribute('amount'), 10);
-
-        if (data.chars[second]) {
-            data.chars[second].kerning[first] = amount;
-        }
-    }
-
-    resource.bitmapFont = data;
-
-    // I'm leaving this as a temporary fix so we can test the bitmap fonts in v3
-    // but it's very likely to change
-    _extras.BitmapText.fonts[data.font] = data;
+    resource.bitmapFont = _extras.BitmapText.registerFont(resource.data, texture);
 }
 //# sourceMappingURL=bitmapFontParser.js.map

lib/loaders/loader.js

@@ -37,16 +37,43 @@ 'use strict';
  *
- * The new loader, extends Resource Loader by Chad Engler : https://github.com/englercj/resource-loader
+ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader
  *
  * ```js
- * let loader = PIXI.loader; // pixi exposes a premade instance for you to use.
+ * const loader = PIXI.loader; // pixi exposes a premade instance for you to use.
  * //or
- * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want
+ * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want
  *
- * loader.add('bunny', 'data/bunny.png');
- * loader.add('spaceship', 'assets/spritesheet.json');
+ * const sprites = {};
+ *
+ * // Chainable `add` to enqueue a resource
+ * loader.add('bunny', 'data/bunny.png')
+ *       .add('spaceship', 'assets/spritesheet.json');
  * loader.add('scoreFont', 'assets/score.fnt');
  *
- * loader.once('complete',onAssetsLoaded);
+ * // Chainable `pre` to add a middleware that runs for each resource, *before* loading that resource.
+ * // This is useful to implement custom caching modules (using filesystem, indexeddb, memory, etc).
+ * loader.pre(cachingMiddleware);
  *
- * loader.load();
+ * // Chainable `use` to add a middleware that runs for each resource, *after* loading that resource.
+ * // This is useful to implement custom parsing modules (like spritesheet parsers, spine parser, etc).
+ * loader.use(parsingMiddleware);
+ *
+ * // The `load` method loads the queue of resources, and calls the passed in callback called once all
+ * // resources have loaded.
+ * loader.load((loader, resources) => {
+ *     // resources is an object where the key is the name of the resource loaded and the value is the resource object.
+ *     // They have a couple default properties:
+ *     // - `url`: The URL that the resource was loaded from
+ *     // - `error`: The error that happened when trying to load (if any)
+ *     // - `data`: The raw data that was loaded
+ *     // also may contain other properties based on the middleware that runs.
+ *     sprites.bunny = new PIXI.TilingSprite(resources.bunny.texture);
+ *     sprites.spaceship = new PIXI.TilingSprite(resources.spaceship.texture);
+ *     sprites.scoreFont = new PIXI.TilingSprite(resources.scoreFont.texture);
+ * });
+ *
+ * // throughout the process multiple signals can be dispatched.
+ * loader.onProgress.add(() => {}); // called once per loaded/errored file
+ * loader.onError.add(() => {}); // called once per errored file
+ * loader.onLoad.add(() => {}); // called once per loaded file
+ * loader.onComplete.add(() => {}); // called once when the queued resources all load.
  * ```
@@ -53,0 +80,0 @@ *

lib/loaders/spritesheetParser.js

@@ -33,85 +33,9 @@ 'use strict';
         this.add(imageResourceName, resourcePath, loadOptions, function onImageLoad(res) {
-            resource.textures = {};
+            var spritesheet = new _core.Spritesheet(res.texture.baseTexture, resource.data, resource.url);
 
-            var frames = resource.data.frames;
-            var frameKeys = Object.keys(frames);
-            var baseTexture = res.texture.baseTexture;
-            var scale = resource.data.meta.scale;
-
-            // Use a defaultValue of `null` to check if a url-based resolution is set
-            var resolution = core.utils.getResolutionOfUrl(resource.url, null);
-
-            // No resolution found via URL
-            if (resolution === null) {
-                // Use the scale value or default to 1
-                resolution = scale !== undefined ? scale : 1;
-            }
-
-            // For non-1 resolutions, update baseTexture
-            if (resolution !== 1) {
-                baseTexture.resolution = resolution;
-                baseTexture.update();
-            }
-
-            var batchIndex = 0;
-
-            function processFrames(initialFrameIndex, maxFrames) {
-                var frameIndex = initialFrameIndex;
-
-                while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) {
-                    var i = frameKeys[frameIndex];
-                    var rect = frames[i].frame;
-
-                    if (rect) {
-                        var frame = null;
-                        var trim = null;
-                        var orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution);
-
-                        if (frames[i].rotated) {
-                            frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution);
-                        } else {
-                            frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution);
-                        }
-
-                        //  Check to see if the sprite is trimmed
-                        if (frames[i].trimmed) {
-                            trim = new core.Rectangle(frames[i].spriteSourceSize.x / resolution, frames[i].spriteSourceSize.y / resolution, rect.w / resolution, rect.h / resolution);
-                        }
-
-                        resource.textures[i] = new core.Texture(baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0);
-
-                        // lets also add the frame to pixi's global cache for fromFrame and fromImage functions
-                        core.utils.TextureCache[i] = resource.textures[i];
-                    }
-
-                    frameIndex++;
-                }
-            }
-
-            function shouldProcessNextBatch() {
-                return batchIndex * BATCH_SIZE < frameKeys.length;
-            }
-
-            function processNextBatch(done) {
-                processFrames(batchIndex * BATCH_SIZE, BATCH_SIZE);
-                batchIndex++;
-                setTimeout(done, 0);
-            }
-
-            function iteration() {
-                processNextBatch(function () {
-                    if (shouldProcessNextBatch()) {
-                        iteration();
-                    } else {
-                        next();
-                    }
-                });
-            }
-
-            if (frameKeys.length <= BATCH_SIZE) {
-                processFrames(0, BATCH_SIZE);
+            spritesheet.parse(function () {
+                resource.spritesheet = spritesheet;
+                resource.textures = spritesheet.textures;
                 next();
-            } else {
-                iteration();
-            }
+            });
         });
@@ -129,9 +53,3 @@ };
 
-var core = _interopRequireWildcard(_core);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var BATCH_SIZE = 1000;
 //# sourceMappingURL=spritesheetParser.js.map

lib/loaders/textureParser.js

@@ -9,18 +9,4 @@ 'use strict';
         if (resource.data && resource.type === _resourceLoader.Resource.TYPE.IMAGE) {
-            var baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url));
-
-            baseTexture.imageUrl = resource.url;
-            resource.texture = new core.Texture(baseTexture);
-
-            // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions
-            core.utils.BaseTextureCache[resource.name] = baseTexture;
-            core.utils.TextureCache[resource.name] = resource.texture;
-
-            // also add references by url if they are different.
-            if (resource.name !== resource.url) {
-                core.utils.BaseTextureCache[resource.url] = baseTexture;
-                core.utils.TextureCache[resource.url] = resource.texture;
-            }
+            resource.texture = _Texture2.default.fromLoader(resource.data, resource.url, resource.name);
         }
-
         next();
@@ -30,9 +16,9 @@ };
 
-var _core = require('../core');
+var _resourceLoader = require('resource-loader');
 
-var core = _interopRequireWildcard(_core);
+var _Texture = require('../core/textures/Texture');
 
-var _resourceLoader = require('resource-loader');
+var _Texture2 = _interopRequireDefault(_Texture);
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=textureParser.js.map

lib/polyfill/requestAnimationFrame.js

@@ -25,13 +25,11 @@ 'use strict';
 if (!(global.performance && global.performance.now)) {
-    (function () {
-        var startTime = Date.now();
+    var startTime = Date.now();
 
-        if (!global.performance) {
-            global.performance = {};
-        }
+    if (!global.performance) {
+        global.performance = {};
+    }
 
-        global.performance.now = function () {
-            return Date.now() - startTime;
-        };
-    })();
+    global.performance.now = function () {
+        return Date.now() - startTime;
+    };
 }
@@ -38,0 +36,0 @@

lib/prepare/BasePrepare.js

@@ -39,3 +39,3 @@ 'use strict';
  * @class
- * @memberof PIXI
+ * @memberof PIXI.prepare
  */
@@ -128,5 +128,5 @@
      *
-     * @param {Function|PIXI.DisplayObject|PIXI.Container} item - Either
-     *        the container or display object to search for items to upload or
-     *        the callback function, if items have been added using `prepare.add`.
+     * @param {Function|PIXI.DisplayObject|PIXI.Container|PIXI.BaseTexture|PIXI.Texture|PIXI.Graphics|PIXI.Text} item -
+     *        Either the container or display object to search for items to upload, the items to upload themselves,
+     *        or the callback function, if items have been added using `prepare.add`.
      * @param {Function} [done] - Optional callback when all queued uploads have completed
@@ -245,3 +245,4 @@ */
      *
-     * @param {PIXI.DisplayObject|PIXI.Container|*} item - Object to add to the queue
+     * @param {PIXI.DisplayObject|PIXI.Container|PIXI.BaseTexture|PIXI.Texture|PIXI.Graphics|PIXI.Text|*} item - Object to
+     *        add to the queue
      * @return {PIXI.CanvasPrepare} Instance of plugin for chaining.
@@ -248,0 +249,0 @@ */

lib/prepare/canvas/CanvasPrepare.js

@@ -34,3 +34,4 @@ 'use strict';
  * @class
- * @memberof PIXI
+ * @extends PIXI.prepare.BasePrepare
+ * @memberof PIXI.prepare
  */
@@ -37,0 +38,0 @@

lib/prepare/webgl/WebGLPrepare.js

@@ -29,3 +29,4 @@ 'use strict';
  * @class
- * @memberof PIXI
+ * @extends PIXI.prepare.BasePrepare
+ * @memberof PIXI.prepare
  */
@@ -32,0 +33,0 @@ var WebGLPrepare = function (_BasePrepare) {

package.json

 {
   "name": "pixi.js",
-  "version": "4.3.5",
+  "version": "4.4.0",
   "description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
@@ -64,3 +64,3 @@ "author": "Mat Groves",
     "pixi-gl-core": "^1.0.3",
-    "resource-loader": "^2.0.4"
+    "resource-loader": "^2.0.6"
   },
@@ -74,5 +74,5 @@ "devDependencies": {
     "del": "^2.2.0",
-    "electron-prebuilt": "^1.3.2",
+    "electron": "^1.4.15",
     "eslint": "^3.5.0",
-    "floss": "^1.2.0",
+    "floss": "^2.0.1",
     "gh-pages": "^0.11.0",
@@ -79,0 +79,0 @@ "jaguarjs-jsdoc": "^1.0.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6919222

increased by3.06%

Number of package files

304

increased by2.7%

Lines of code

55586

increased by3.31%

Worsened metrics

Published versions last two months

53

decreased by-10.17%

Dependency changes

• Updatedresource-loader@^2.0.6