Working through making the Input system DOM responsive and not reliant on the game step

Author: photonstorm

src/input/InputManager.js

@@ -246,8 +246,8 @@ var InputManager = new Class({
          * @type {boolean}
          * @default false
          * @since 3.0.0
+        this.ignoreEvents = -1;
          */
-        this.ignoreEvents = false;
 
         /**
          * The time this Input Manager was last updated.
@@ -260,16 +260,6 @@ var InputManager = new Class({
          */
         this.time = 0;
 
-        /**
-         * Internal property that tracks frame event state.
-         *
-         * @name Phaser.Input.InputManager#_updatedThisFrame
-         * @type {boolean}
-         * @private
-         * @since 3.16.0
-         */
-        this._updatedThisFrame = false;
-
         /**
          * A re-cycled point-like object to store hit test values in.
          *
@@ -331,7 +321,9 @@ var InputManager = new Class({
 
         this.events.emit(Events.MANAGER_BOOT);
 
-        this.game.events.on(GameEvents.PRE_STEP, this.preStep, this);
+        this.game.events.on(GameEvents.PRE_RENDER, this.preStep, this);
+
+        this.game.events.on(GameEvents.POST_RENDER, this.postRender, this);
 
         this.game.events.once(GameEvents.DESTROY, this.destroy, this);
     },
@@ -371,7 +363,7 @@ var InputManager = new Class({
     },
 
     /**
-     * Internal update, called automatically by the Game Step.
+     * Internal update, called automatically by the Game Step right at the start.
      *
      * @method Phaser.Input.InputManager#preStep
      * @private
@@ -383,16 +375,33 @@ var InputManager = new Class({
     {
         this.time = time;
 
-        this.ignoreEvents = false;
+        this.events.emit(Events.MANAGER_UPDATE);
+
+        // this.ignoreEvents = false;
+    },
+
+    /**
+     * Internal update, called automatically by the Game Step right after everything has finished rendering.
+     * 
+     * We do this because, in the life of a frame, rAF comes _after_ the input events. So, we need to clear down
+     * the input settings, ready incase the new input events potentially change them prior to the next game step.
+     * 
+     * https://medium.com/@paul_irish/requestanimationframe-scheduling-for-nerds-9c57f7438ef4
+     *
+     * @method Phaser.Input.InputManager#postRender
+     * @private
+     * @since 3.18.0
+     */
+    postRender: function ()
+    {
+        // this.ignoreEvents = false;
 
         var pointers = this.pointers;
 
         for (var i = 0; i < this.pointersTotal; i++)
         {
-            pointers[i].reset(time);
+            pointers[i].reset(this.game.getTime());
         }
-
-        this.events.emit(Events.MANAGER_UPDATE);
     },
 
     /**
@@ -704,9 +713,10 @@ var InputManager = new Class({
         {
             var scene = scenes[i];
 
-            if (scene.sys.input)
+            if (scene.sys.input && scene.sys.input.update(time, delta) && this.globalTopOnly)
             {
-                scene.sys.input.update(time, delta);
+                //  If the Scene returns true, it means it captured some input that no other Scene should get, so we bail out
+                return;
             }
         }
     },
@@ -806,6 +816,8 @@ var InputManager = new Class({
      */
     onMouseDown: function (event)
     {
+        console.log(this.game.getFrame(), 'md', event.pageX, event.pageY);
+
         this.mousePointer.down(event);
 
         this.mousePointer.updateMotion();

src/input/InputPlugin.js

@@ -356,6 +356,16 @@ var InputPlugin = new Class({
          */
         this._validTypes = [ 'onDown', 'onUp', 'onOver', 'onOut', 'onMove', 'onDragStart', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDrop' ];
 
+        /**
+         * Internal property that tracks frame event state.
+         *
+         * @name Phaser.Input.InputPlugin#_updatedThisFrame
+         * @type {boolean}
+         * @private
+         * @since 3.18.0
+         */
+        this._updatedThisFrame = false;
+
         scene.sys.events.once(SceneEvents.BOOT, this.boot, this);
         scene.sys.events.on(SceneEvents.START, this.start, this);
     },
@@ -525,10 +535,9 @@ var InputPlugin = new Class({
     {
         this.pluginEvents.emit(Events.UPDATE, time, delta);
 
-        /*
-        if (this.pollRate > -1)
+        if (this.pollRate > -1 && !this._updatedThisFrame)
         {
-            this.update(time, delta);
+            this.updatePoll(time, delta);
         }
         else
         {
@@ -539,7 +548,92 @@ var InputPlugin = new Class({
 
             this.pluginEvents.emit(Events.UPDATE, time, delta);
         }
-        */
+
+        this._updatedThisFrame = false;
+    },
+
+    updatePoll: function (time, delta)
+    {
+        console.log('poll');
+
+        if (!this.isActive())
+        {
+            return false;
+        }
+
+        if (this.pollRate > 0)
+        {
+            this._pollTimer -= delta;
+
+            if (this._pollTimer < 0)
+            {
+                //  Discard timer diff, we're ready to poll again
+                this._pollTimer = this.pollRate;
+            }
+            else
+            {
+                //  Not enough time has elapsed since the last poll, so abort now
+                return;
+            }
+        }
+
+        //  We got this far? Then we should poll for movement
+        var manager = this.manager;
+        var pointers = manager.pointers;
+        var pointersTotal = manager.pointersTotal;
+        var captured = false;
+
+        for (var i = 0; i < pointersTotal; i++)
+        {
+            var pointer = pointers[i];
+
+            //  Always reset this array
+            this._tempZones = [];
+
+            //  _temp contains a hit tested and camera culled list of IO objects
+            this._temp = this.hitTestPointer(pointer);
+
+            this.sortGameObjects(this._temp);
+            this.sortGameObjects(this._tempZones);
+
+            if (this.topOnly)
+            {
+                //  Only the top-most one counts now, so safely ignore the rest
+                if (this._temp.length)
+                {
+                    this._temp.splice(1);
+                }
+
+                if (this._tempZones.length)
+                {
+                    this._tempZones.splice(1);
+                }
+            }
+
+            var total = 0;
+
+            //  TODO: Enable for touch - the method needs recoding to take ALL pointers at once
+            //  and process them all together, in the same batch, otherwise the justOut and stillOver
+            //  arrays will get corrupted in multi-touch enabled games. For now, we'll enable it for
+            //  single touch games (which is probably the majority anyway).
+            if (pointersTotal < 3 || !pointer.wasTouch)
+            {
+                total += this.processOverOutEvents(pointer);
+            }
+
+            if (pointer.justMoved)
+            {
+                total += this.processMoveEvents(pointer);
+            }
+
+            if (total > 0 && manager.globalTopOnly)
+            {
+                //  We interacted with an event in this Scene, so block any Scenes below us from doing the same this frame
+                captured = true;
+            }
+        }
+
+        return captured;
     },
 
     /**
@@ -553,37 +647,21 @@ var InputPlugin = new Class({
      *
      * @param {number} time - The time value from the most recent Game step. Typically a high-resolution timer value, or Date.now().
      * @param {number} delta - The delta value since the last frame. This is smoothed to avoid delta spikes by the TimeStep class.
+     * 
+     * @return {boolean} `true` if this Scene has captured the input events from all other Scenes, otherwise `false`.
      */
     update: function (time, delta)
     {
         if (!this.isActive())
         {
-            return;
+            return false;
         }
 
         var manager = this.manager;
 
-        // this.pluginEvents.emit(Events.UPDATE, time, delta);
-
-        //  Another Scene above this one has already consumed the input events, or we're in transition
-        if (manager.globalTopOnly && manager.ignoreEvents)
-        {
-            return;
-        }
-
-        if (this.pollRate > 0)
-        {
-            this._pollTimer -= delta;
-
-            if (this._pollTimer < 0)
-            {
-                //  Discard timer diff
-                this._pollTimer = this.pollRate;
-            }
-        }
-
-        var pointers = this.manager.pointers;
-        var pointersTotal = this.manager.pointersTotal;
+        var pointers = manager.pointers;
+        var pointersTotal = manager.pointersTotal;
+        var captured = false;
 
         for (var i = 0; i < pointersTotal; i++)
         {
@@ -641,9 +719,13 @@ var InputPlugin = new Class({
             if (total > 0 && manager.globalTopOnly)
             {
                 //  We interacted with an event in this Scene, so block any Scenes below us from doing the same this frame
-                manager.ignoreEvents = true;
+                captured = true;
             }
         }
+
+        this._updatedThisFrame = true;
+
+        return captured;
     },
 
     /**