Lots of work on making Game Objects draggable

Author: photonstorm

v3/src/input/InteractiveObject.js

@@ -25,7 +25,14 @@ var InteractiveObject = function (gameObject, hitArea, hitAreaCallback)
         onDown: NOOP,
         onUp: NOOP,
         onOver: NOOP,
-        onOut: NOOP
+        onOut: NOOP,
+
+        dragX: 0,
+        dragY: 0,
+
+        onDragStart: NOOP,
+        onDrag: NOOP,
+        onDragEnd: NOOP
     };
 };
 

v3/src/plugins/InputManager.js

@@ -48,6 +48,9 @@ var InputManager = new Class({
         //  Only those which are currently below a pointer (any pointer)
         this._over = [];
 
+        //  Only Game Objects which have been flagged as draggable are added to this array
+        this._draggable = [];
+
         //  Objects waiting to be inserted or removed from the active list
         this._pendingInsertion = [];
         this._pendingRemoval = [];
@@ -160,7 +163,10 @@ var InputManager = new Class({
 
             this.processUpDownEvents(pointer);
 
-            this.processMovementEvents(pointer);
+            if (pointer.justMoved)
+            {
+                this.processMovementEvents(pointer);
+            }
         }
     },
 
@@ -171,6 +177,8 @@ var InputManager = new Class({
         var justOut = [];
         var justOver = [];
         var stillOver = [];
+        var currentlyOver = this._over;
+        var gameObject;
 
         //  Returns an array of objects the pointer is over
 
@@ -186,46 +194,47 @@ var InputManager = new Class({
 
         for (i = 0; i < tested.length; i++)
         {
-            var item = tested[i];
+            gameObject = tested[i];
 
-            if (this._over.indexOf(item) !== -1)
+            if (currentlyOver.indexOf(gameObject) !== -1)
             {
-                stillOver.push(item);
+                stillOver.push(gameObject);
             }
             else
             {
-                justOver.push(item);
+                justOver.push(gameObject);
             }
         }
 
-        this._over.forEach(function (item)
+        for (i = 0; i < currentlyOver.length; i++)
         {
-            if (tested.indexOf(item) === -1)
+            gameObject = currentlyOver[i];
+
+            if (tested.indexOf(gameObject) === -1)
             {
-                justOut.push(item);
+                justOut.push(gameObject);
             }
-
-        });
-
-        var gameObject;
+        }
 
         //  Now we can process what has happened
         for (i = 0; i < justOut.length; i++)
         {
             gameObject = justOut[i];
 
-            this.events.dispatch(new InputEvent.OUT(pointer, gameObject));
-
-            gameObject.input.onOut(gameObject, pointer);
+            if (gameObject.input.enabled)
+            {
+                this.gameObjectOnOut(pointer, gameObject);
+            }
         }
 
         for (i = 0; i < justOver.length; i++)
         {
             gameObject = justOver[i];
 
-            this.events.dispatch(new InputEvent.OVER(pointer, gameObject));
-
-            gameObject.input.onOver(gameObject, pointer, gameObject.input.localX, gameObject.input.localY);
+            if (gameObject.input.enabled)
+            {
+                this.gameObjectOnOver(pointer, gameObject);
+            }
         }
 
         //  Store everything that is currently over
@@ -235,45 +244,139 @@ var InputManager = new Class({
     //  Has it been pressed down or released in this update?
     processUpDownEvents: function (pointer)
     {
-        var i;
         var gameObject;
-        var over = this._over;
 
-        if (pointer.justDown)
+        for (var i = 0; i < this._over.length; i++)
         {
-            for (i = 0; i < over.length; i++)
-            {
-                gameObject = over[i];
-
-                //   Maybe this should contain ALL game objects it hit in one single event?
-                this.events.dispatch(new InputEvent.DOWN(pointer, gameObject));
+            gameObject = this._over[i];
 
-                gameObject.input.onDown(gameObject, pointer, gameObject.input.localX, gameObject.input.localY);
+            if (gameObject.input.enabled)
+            {
+                if (pointer.justDown)
+                {
+                    this.gameObjectOnDown(pointer, gameObject);
+                }
+                else
+                {
+                    this.gameObjectOnUp(pointer, gameObject);
+                }
             }
         }
-        else if (pointer.justUp)
+    },
+
+    //  Has it been moved in this update?
+    processMovementEvents: function (pointer)
+    {
+        //  Check the list of Draggable Items
+        for (var i = 0; i < this._draggable.length; i++)
         {
-            for (i = 0; i < over.length; i++)
-            {
-                gameObject = over[i];
+            var gameObject = this._draggable[i];
+            var input = gameObject.input;
 
-                this.events.dispatch(new InputEvent.UP(pointer, gameObject));
+            if (!input.enabled)
+            {
+                continue;
+            }
 
-                gameObject.input.onUp(gameObject, pointer, gameObject.input.localX, gameObject.input.localY);
+            if (pointer.justUp && input.isDragged)
+            {
+                //  Drag End
+                this.gameObjectOnDragEnd(pointer, gameObject);
+            }
+            else if (input.isDragged)
+            {
+                //  Drag
+                this.gameObjectOnDrag(pointer, gameObject);
             }
         }
     },
 
-    //  Has it been moved in this update?
-    processMovementEvents: function (pointer)
+    gameObjectOnDragStart: function (pointer, gameObject)
+    {
+        var input = gameObject.input;
+
+        input.isDragged = true;
+
+        input.dragX = input.localX - gameObject.displayOriginX;
+        input.dragY = input.localY - gameObject.displayOriginY;
+
+        this.events.dispatch(new InputEvent.DRAG_START(pointer, gameObject));
+
+        gameObject.input.onDragStart(gameObject, pointer);
+    },
+
+    gameObjectOnDrag: function (pointer, gameObject)
     {
-        if (!pointer.justMoved)
+        this.events.dispatch(new InputEvent.DRAG(pointer, gameObject));
+
+        gameObject.input.onDrag(gameObject, pointer);
+    },
+
+    gameObjectOnDragEnd: function (pointer, gameObject)
+    {
+        var input = gameObject.input;
+
+        input.isDragged = false;
+
+        this.events.dispatch(new InputEvent.DRAG_END(pointer, gameObject));
+
+        gameObject.input.onDragEnd(gameObject, pointer);
+    },
+
+    gameObjectOnDown: function (pointer, gameObject)
+    {
+        var input = gameObject.input;
+
+        input.isDown = true;
+
+        this.events.dispatch(new InputEvent.DOWN(pointer, gameObject));
+
+        input.onDown(gameObject, pointer, input.localX, input.localY);
+
+        if (input.draggable && !input.isDragged)
         {
-            return;
+            //  Drag Start
+            this.gameObjectOnDragStart(pointer, gameObject);
         }
+    },
+
+    gameObjectOnUp: function (pointer, gameObject)
+    {
+        gameObject.input.isDown = false;
+
+        this.events.dispatch(new InputEvent.UP(pointer, gameObject));
+
+        gameObject.input.onUp(gameObject, pointer, gameObject.input.localX, gameObject.input.localY);
+    },
 
-        //  Drag?
+    gameObjectOnOut: function (pointer, gameObject)
+    {
+        var input = gameObject.input;
+
+        input.isOver = false;
+
+        //  Don't dispatch if we're dragging the gameObject, as the pointer often gets away from it
+        if (!input.isDragged)
+        {
+            this.events.dispatch(new InputEvent.OUT(pointer, gameObject));
 
+            input.onOut(gameObject, pointer);
+        }
+    },
+
+    gameObjectOnOver: function (pointer, gameObject)
+    {
+        var input = gameObject.input;
+
+        input.isOver = true;
+
+        //  Don't dispatch if we're dragging the gameObject, as the pointer often gets away from it
+        if (!input.isDragged)
+        {
+            this.events.dispatch(new InputEvent.OVER(pointer, gameObject));
+
+            input.onOver(gameObject, pointer, input.localX, input.localY);
+        }
     },
 
     enable: function (gameObject, shape, callback)
@@ -482,8 +585,6 @@ var InputManager = new Class({
     //  Drag Events
     //  https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
 
-    //  DRAG_START, DRAG (mouse move), DRAG_END
-
     setDraggable: function (gameObjects, value)
     {
         if (value === undefined) { value = true; }
@@ -495,7 +596,29 @@ var InputManager = new Class({
 
         for (var i = 0; i < gameObjects.length; i++)
         {
-            gameObjects[i].input.draggable = value;
+            var gameObject = gameObjects[i];
+            var index = this._draggable.indexOf(gameObject);
+
+            if (value)
+            {
+                //  Make draggable
+                gameObject.input.draggable = true;
+
+                if (index === -1)
+                {
+                    this._draggable.push(gameObject);
+                }
+            }
+            else
+            {
+                //  Disable drag
+                gameObject.input.draggable = false;
+
+                if (index === -1)
+                {
+                    this._draggable.splice(index, 1);
+                }
+            }
         }
 
         return true;
@@ -506,6 +629,7 @@ var InputManager = new Class({
     {
         this._list = [];
         this._over = [];
+        this._draggable = [];
         this._pendingRemoval = [];
         this._pendingInsertion = [];
     },