phaser-kinetic-scrolling-plugin - npm Package Compare versions

Comparing version 1.0.4 to 1.0.6

dist/phaser-kinetic-scrolling-plugin.js

 /**
  * Phaser Kinetic Scrolling Plugin
  * @author       Juan Nicholls <[e-mail]>
- * @copyright    2015 Juan Nicholls - http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
+ * @copyright    2018 Juan Nicholls - http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
  * @license      {@link http://opensource.org/licenses/MIT}
- * @version 1.0.4
+ * @version 1.0.6
  */
@@ -24,2 +24,3 @@
 
+        this.pointerId = null;
         this.dragging = false;
@@ -50,2 +51,6 @@ this.pressedDown = false;
 
+        // if less than the two values is a Tap
+        this.thresholdOfTapTime = 100;
+        this.thresholdOfTapDistance = 10;
+
         this.settings = {
@@ -58,3 +63,4 @@ kineticMovement: true,
             verticalWheel: false,
-            deltaWheel: 40
+            deltaWheel: 40,
+            onUpdate: null
         };
@@ -110,7 +116,11 @@ };
     */
-    Phaser.Plugin.KineticScrolling.prototype.beginMove = function () {
+    Phaser.Plugin.KineticScrolling.prototype.beginMove = function (pointer) {
 
+        this.pointerId = pointer.id;
         this.startX = this.game.input.x;
         this.startY = this.game.input.y;
 
+        this.screenX = pointer.screenX;
+        this.screenY = pointer.screenY;
+
         this.pressedDown = true;
@@ -120,2 +130,5 @@
 
+        // the time of press down
+        this.beginTime = this.timestamp;
+
         this.velocityY = this.amplitudeY = this.velocityX = this.amplitudeX = 0;
@@ -131,4 +144,11 @@
 
-        if (!this.pressedDown) return;
+        if (!this.pressedDown) {
+            return;
+        }
 
+        // If it is not the current pointer
+        if (this.pointerId !== pointer.id) {
+            return;
+        }
+
         this.now = Date.now();
@@ -138,18 +158,48 @@ var elapsed = this.now - this.timestamp;
 
+        var deltaX = 0;
+        var deltaY = 0;
+
+        // It`s a fast tap not move
+        if (
+            this.now - this.beginTime < this.thresholdOfTapTime
+            && Math.abs(pointer.screenY - this.screenY) < this.thresholdOfTapDistance
+            && Math.abs(pointer.screenX - this.screenX) < this.thresholdOfTapDistance
+        ) {
+            return;
+        }
+
         if (this.settings.horizontalScroll) {
-            var delta = x - this.startX; //Compute move distance
-            if (delta !== 0) this.dragging = true;
+            deltaX = x - this.startX;
+            if (deltaX !== 0) {
+                this.dragging = true;
+            }
             this.startX = x;
-            this.velocityX = 0.8 * (1000 * delta / (1 + elapsed)) + 0.2 * this.velocityX;
-            this.game.camera.x -= delta;
+            this.velocityX = 0.8 * (1000 * deltaX / (1 + elapsed)) + 0.2 * this.velocityX;
+            this.game.camera.x -= deltaX;
         }
 
         if (this.settings.verticalScroll) {
-            var delta = y - this.startY; //Compute move distance
-            if (delta !== 0) this.dragging = true;
+            deltaY = y - this.startY;
+            if (deltaY !== 0) {
+                this.dragging = true;
+            }
             this.startY = y;
-            this.velocityY = 0.8 * (1000 * delta / (1 + elapsed)) + 0.2 * this.velocityY;
-            this.game.camera.y -= delta;
+            this.velocityY = 0.8 * (1000 * deltaY / (1 + elapsed)) + 0.2 * this.velocityY;
+            this.game.camera.y -= deltaY;
         }
 
+        if (typeof this.settings.onUpdate === 'function') {
+            var updateX = 0;
+            if (this.game.camera.x > 0 && this.game.camera.x + this.game.camera.width < this.game.camera.bounds.right) {
+                updateX = deltaX;
+            }
+
+            var updateY = 0;
+            if (this.game.camera.y > 0 && this.game.camera.y + this.game.camera.height < this.game.camera.bounds.height) {
+                updateY = deltaY;
+            }
+
+            this.settings.onUpdate(updateX, updateY);
+        }
+
     };
@@ -161,3 +211,4 @@
     Phaser.Plugin.KineticScrolling.prototype.endMove = function () {
-        
+
+        this.pointerId = null;
         this.pressedDown = false;
@@ -171,3 +222,3 @@ this.autoScrollX = false;
 
-        if(this.game.input.activePointer.withinGame){
+        if (this.game.input.activePointer.withinGame) {
             if (this.velocityX > 10 || this.velocityX < -10) {
@@ -188,6 +239,12 @@ this.amplitudeX = 0.8 * this.velocityX;
             this.velocityWheelYAbs = Math.abs(this.velocityWheelY);
-            if (this.settings.horizontalScroll && (this.velocityWheelXAbs < 0.1 || !this.game.input.activePointer.withinGame)) {
+            if (
+                this.settings.horizontalScroll
+                && (this.velocityWheelXAbs < 0.1 || !this.game.input.activePointer.withinGame)
+            ) {
                 this.autoScrollX = true;
             }
-            if (this.settings.verticalScroll && (this.velocityWheelYAbs < 0.1 || !this.game.input.activePointer.withinGame)) {
+            if (
+                this.settings.verticalScroll
+                && (this.velocityWheelYAbs < 0.1 || !this.game.input.activePointer.withinGame)
+            ) {
                 this.autoScrollY = true;
@@ -208,5 +265,6 @@ }
 
+        var delta = 0;
         if (this.autoScrollX && this.amplitudeX != 0) {
 
-            var delta = -this.amplitudeX * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
+            delta = -this.amplitudeX * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
             if (delta > 0.5 || delta < -0.5) {
@@ -223,3 +281,3 @@ this.game.camera.x = this.targetX - delta;
 
-            var delta = -this.amplitudeY * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
+            delta = -this.amplitudeY * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
             if (delta > 0.5 || delta < -0.5) {
@@ -234,6 +292,6 @@ this.game.camera.y = this.targetY - delta;
 
-        if(!this.autoScrollX && !this.autoScrollY){
+        if (!this.autoScrollX && !this.autoScrollY) {
             this.dragging = false;
         }
-        
+
         if (this.settings.horizontalWheel  && this.velocityWheelXAbs > 0.1) {
@@ -275,2 +333,11 @@ this.dragging = true;
             this.velocityWheelX += delta;
+
+            if (typeof this.settings.onUpdate === 'function') {
+                var deltaX = 0;
+                if (this.game.camera.x > 0 && this.game.camera.x + this.game.camera.width < this.game.camera.bounds.width) {
+                    deltaX = delta;
+                }
+
+                this.settings.onUpdate(deltaX, 0);
+            }
         }
@@ -282,2 +349,11 @@
             this.velocityWheelY += delta;
+
+            if (typeof this.settings.onUpdate === 'function') {
+                var deltaY = 0;
+                if (this.game.camera.y > 0 && this.game.camera.y + this.game.camera.height < this.game.camera.bounds.height) {
+                    deltaY = delta;
+                }
+
+                this.settings.onUpdate(0, deltaY);
+            }
         }
@@ -309,2 +385,2 @@
 
-} (Phaser));
+} (Phaser));

dist/phaser-kinetic-scrolling-plugin.min.js

@@ -1,1 +0,1 @@
-!function(t){"use strict";t.Plugin.KineticScrolling=function(i,e){t.Plugin.call(this,i,e),this.dragging=!1,this.pressedDown=!1,this.timestamp=0,this.callbackID=0,this.targetX=0,this.targetY=0,this.autoScrollX=!1,this.autoScrollY=!1,this.startX=0,this.startY=0,this.velocityX=0,this.velocityY=0,this.amplitudeX=0,this.amplitudeY=0,this.directionWheel=0,this.velocityWheelX=0,this.velocityWheelY=0,this.settings={kineticMovement:!0,timeConstantScroll:325,horizontalScroll:!0,verticalScroll:!1,horizontalWheel:!0,verticalWheel:!1,deltaWheel:40}},t.Plugin.KineticScrolling.prototype=Object.create(t.Plugin.prototype),t.Plugin.KineticScrolling.prototype.constructor=t.Plugin.KineticScrolling,t.Plugin.KineticScrolling.prototype.configure=function(t){if(t)for(var i in t)this.settings.hasOwnProperty(i)&&(this.settings[i]=t[i])},t.Plugin.KineticScrolling.prototype.start=function(){this.game.input.onDown.add(this.beginMove,this),this.callbackID=this.game.input.addMoveCallback(this.moveCamera,this),this.game.input.onUp.add(this.endMove,this),this.game.input.mouse.mouseWheelCallback=this.mouseWheel.bind(this)},t.Plugin.KineticScrolling.prototype.beginMove=function(){this.startX=this.game.input.x,this.startY=this.game.input.y,this.pressedDown=!0,this.timestamp=Date.now(),this.velocityY=this.amplitudeY=this.velocityX=this.amplitudeX=0},t.Plugin.KineticScrolling.prototype.moveCamera=function(t,i,e){if(this.pressedDown){this.now=Date.now();var s=this.now-this.timestamp;if(this.timestamp=this.now,this.settings.horizontalScroll){var h=i-this.startX;0!==h&&(this.dragging=!0),this.startX=i,this.velocityX=.8*(1e3*h/(1+s))+.2*this.velocityX,this.game.camera.x-=h}if(this.settings.verticalScroll){var h=e-this.startY;0!==h&&(this.dragging=!0),this.startY=e,this.velocityY=.8*(1e3*h/(1+s))+.2*this.velocityY,this.game.camera.y-=h}}},t.Plugin.KineticScrolling.prototype.endMove=function(){this.pressedDown=!1,this.autoScrollX=!1,this.autoScrollY=!1,this.settings.kineticMovement&&(this.now=Date.now(),this.game.input.activePointer.withinGame&&((this.velocityX>10||this.velocityX<-10)&&(this.amplitudeX=.8*this.velocityX,this.targetX=Math.round(this.game.camera.x-this.amplitudeX),this.autoScrollX=!0),(this.velocityY>10||this.velocityY<-10)&&(this.amplitudeY=.8*this.velocityY,this.targetY=Math.round(this.game.camera.y-this.amplitudeY),this.autoScrollY=!0)),this.game.input.activePointer.withinGame||(this.velocityWheelXAbs=Math.abs(this.velocityWheelX),this.velocityWheelYAbs=Math.abs(this.velocityWheelY),this.settings.horizontalScroll&&(this.velocityWheelXAbs<.1||!this.game.input.activePointer.withinGame)&&(this.autoScrollX=!0),this.settings.verticalScroll&&(this.velocityWheelYAbs<.1||!this.game.input.activePointer.withinGame)&&(this.autoScrollY=!0)))},t.Plugin.KineticScrolling.prototype.update=function(){if(this.elapsed=Date.now()-this.timestamp,this.velocityWheelXAbs=Math.abs(this.velocityWheelX),this.velocityWheelYAbs=Math.abs(this.velocityWheelY),this.autoScrollX&&0!=this.amplitudeX){var t=-this.amplitudeX*Math.exp(-this.elapsed/this.settings.timeConstantScroll);t>.5||-.5>t?this.game.camera.x=this.targetX-t:(this.autoScrollX=!1,this.game.camera.x=this.targetX)}if(this.autoScrollY&&0!=this.amplitudeY){var t=-this.amplitudeY*Math.exp(-this.elapsed/this.settings.timeConstantScroll);t>.5||-.5>t?this.game.camera.y=this.targetY-t:(this.autoScrollY=!1,this.game.camera.y=this.targetY)}this.autoScrollX||this.autoScrollY||(this.dragging=!1),this.settings.horizontalWheel&&this.velocityWheelXAbs>.1&&(this.dragging=!0,this.amplitudeX=0,this.autoScrollX=!1,this.game.camera.x-=this.velocityWheelX,this.velocityWheelX*=.95),this.settings.verticalWheel&&this.velocityWheelYAbs>.1&&(this.dragging=!0,this.autoScrollY=!1,this.game.camera.y-=this.velocityWheelY,this.velocityWheelY*=.95)},t.Plugin.KineticScrolling.prototype.mouseWheel=function(t){if(this.settings.horizontalWheel||this.settings.verticalWheel){t.preventDefault();var i=120*this.game.input.mouse.wheelDelta/this.settings.deltaWheel;this.directionWheel!=this.game.input.mouse.wheelDelta&&(this.velocityWheelX=0,this.velocityWheelY=0,this.directionWheel=this.game.input.mouse.wheelDelta),this.settings.horizontalWheel&&(this.autoScrollX=!1,this.velocityWheelX+=i),this.settings.verticalWheel&&(this.autoScrollY=!1,this.velocityWheelY+=i)}},t.Plugin.KineticScrolling.prototype.stop=function(){this.game.input.onDown.remove(this.beginMove,this),this.callbackID?this.game.input.deleteMoveCallback(this.callbackID):this.game.input.deleteMoveCallback(this.moveCamera,this),this.game.input.onUp.remove(this.endMove,this),this.game.input.mouse.mouseWheelCallback=null}}(Phaser);
+!function(t){"use strict";t.Plugin.KineticScrolling=function(i,e){t.Plugin.call(this,i,e),this.pointerId=null,this.dragging=!1,this.pressedDown=!1,this.timestamp=0,this.callbackID=0,this.targetX=0,this.targetY=0,this.autoScrollX=!1,this.autoScrollY=!1,this.startX=0,this.startY=0,this.velocityX=0,this.velocityY=0,this.amplitudeX=0,this.amplitudeY=0,this.directionWheel=0,this.velocityWheelX=0,this.velocityWheelY=0,this.thresholdOfTapTime=100,this.thresholdOfTapDistance=10,this.settings={kineticMovement:!0,timeConstantScroll:325,horizontalScroll:!0,verticalScroll:!1,horizontalWheel:!0,verticalWheel:!1,deltaWheel:40,onUpdate:null}},t.Plugin.KineticScrolling.prototype=Object.create(t.Plugin.prototype),t.Plugin.KineticScrolling.prototype.constructor=t.Plugin.KineticScrolling,t.Plugin.KineticScrolling.prototype.configure=function(t){if(t)for(var i in t)this.settings.hasOwnProperty(i)&&(this.settings[i]=t[i])},t.Plugin.KineticScrolling.prototype.start=function(){this.game.input.onDown.add(this.beginMove,this),this.callbackID=this.game.input.addMoveCallback(this.moveCamera,this),this.game.input.onUp.add(this.endMove,this),this.game.input.mouse.mouseWheelCallback=this.mouseWheel.bind(this)},t.Plugin.KineticScrolling.prototype.beginMove=function(t){this.pointerId=t.id,this.startX=this.game.input.x,this.startY=this.game.input.y,this.screenX=t.screenX,this.screenY=t.screenY,this.pressedDown=!0,this.timestamp=Date.now(),this.beginTime=this.timestamp,this.velocityY=this.amplitudeY=this.velocityX=this.amplitudeX=0},t.Plugin.KineticScrolling.prototype.moveCamera=function(t,i,e){if(this.pressedDown&&this.pointerId===t.id){this.now=Date.now();var s=this.now-this.timestamp;this.timestamp=this.now;var h=0,a=0;if(!(this.now-this.beginTime<this.thresholdOfTapTime&&Math.abs(t.screenY-this.screenY)<this.thresholdOfTapDistance&&Math.abs(t.screenX-this.screenX)<this.thresholdOfTapDistance)&&(this.settings.horizontalScroll&&(h=i-this.startX,0!==h&&(this.dragging=!0),this.startX=i,this.velocityX=.8*(1e3*h/(1+s))+.2*this.velocityX,this.game.camera.x-=h),this.settings.verticalScroll&&(a=e-this.startY,0!==a&&(this.dragging=!0),this.startY=e,this.velocityY=.8*(1e3*a/(1+s))+.2*this.velocityY,this.game.camera.y-=a),"function"==typeof this.settings.onUpdate)){var l=0;this.game.camera.x>0&&this.game.camera.x+this.game.camera.width<this.game.camera.bounds.right&&(l=h);var o=0;this.game.camera.y>0&&this.game.camera.y+this.game.camera.height<this.game.camera.bounds.height&&(o=a),this.settings.onUpdate(l,o)}}},t.Plugin.KineticScrolling.prototype.endMove=function(){this.pointerId=null,this.pressedDown=!1,this.autoScrollX=!1,this.autoScrollY=!1,this.settings.kineticMovement&&(this.now=Date.now(),this.game.input.activePointer.withinGame&&((this.velocityX>10||this.velocityX<-10)&&(this.amplitudeX=.8*this.velocityX,this.targetX=Math.round(this.game.camera.x-this.amplitudeX),this.autoScrollX=!0),(this.velocityY>10||this.velocityY<-10)&&(this.amplitudeY=.8*this.velocityY,this.targetY=Math.round(this.game.camera.y-this.amplitudeY),this.autoScrollY=!0)),this.game.input.activePointer.withinGame||(this.velocityWheelXAbs=Math.abs(this.velocityWheelX),this.velocityWheelYAbs=Math.abs(this.velocityWheelY),this.settings.horizontalScroll&&(this.velocityWheelXAbs<.1||!this.game.input.activePointer.withinGame)&&(this.autoScrollX=!0),this.settings.verticalScroll&&(this.velocityWheelYAbs<.1||!this.game.input.activePointer.withinGame)&&(this.autoScrollY=!0)))},t.Plugin.KineticScrolling.prototype.update=function(){this.elapsed=Date.now()-this.timestamp,this.velocityWheelXAbs=Math.abs(this.velocityWheelX),this.velocityWheelYAbs=Math.abs(this.velocityWheelY);var t=0;this.autoScrollX&&0!=this.amplitudeX&&(t=-this.amplitudeX*Math.exp(-this.elapsed/this.settings.timeConstantScroll),t>.5||t<-.5?this.game.camera.x=this.targetX-t:(this.autoScrollX=!1,this.game.camera.x=this.targetX)),this.autoScrollY&&0!=this.amplitudeY&&(t=-this.amplitudeY*Math.exp(-this.elapsed/this.settings.timeConstantScroll),t>.5||t<-.5?this.game.camera.y=this.targetY-t:(this.autoScrollY=!1,this.game.camera.y=this.targetY)),this.autoScrollX||this.autoScrollY||(this.dragging=!1),this.settings.horizontalWheel&&this.velocityWheelXAbs>.1&&(this.dragging=!0,this.amplitudeX=0,this.autoScrollX=!1,this.game.camera.x-=this.velocityWheelX,this.velocityWheelX*=.95),this.settings.verticalWheel&&this.velocityWheelYAbs>.1&&(this.dragging=!0,this.autoScrollY=!1,this.game.camera.y-=this.velocityWheelY,this.velocityWheelY*=.95)},t.Plugin.KineticScrolling.prototype.mouseWheel=function(t){if(this.settings.horizontalWheel||this.settings.verticalWheel){t.preventDefault();var i=120*this.game.input.mouse.wheelDelta/this.settings.deltaWheel;if(this.directionWheel!=this.game.input.mouse.wheelDelta&&(this.velocityWheelX=0,this.velocityWheelY=0,this.directionWheel=this.game.input.mouse.wheelDelta),this.settings.horizontalWheel&&(this.autoScrollX=!1,this.velocityWheelX+=i,"function"==typeof this.settings.onUpdate)){var e=0;this.game.camera.x>0&&this.game.camera.x+this.game.camera.width<this.game.camera.bounds.width&&(e=i),this.settings.onUpdate(e,0)}if(this.settings.verticalWheel&&(this.autoScrollY=!1,this.velocityWheelY+=i,"function"==typeof this.settings.onUpdate)){var s=0;this.game.camera.y>0&&this.game.camera.y+this.game.camera.height<this.game.camera.bounds.height&&(s=i),this.settings.onUpdate(0,s)}}},t.Plugin.KineticScrolling.prototype.stop=function(){this.game.input.onDown.remove(this.beginMove,this),this.callbackID?this.game.input.deleteMoveCallback(this.callbackID):this.game.input.deleteMoveCallback(this.moveCamera,this),this.game.input.onUp.remove(this.endMove,this),this.game.input.mouse.mouseWheelCallback=null}}(Phaser);

examples/js/example_1.js

@@ -0,0 +0,0 @@ var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'phaser-example', {

examples/js/example_2.js

@@ -0,0 +0,0 @@ var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'phaser-example', {

examples/js/example_3.js

@@ -50,4 +50,4 @@ var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'phaser-example', {
                // Checks scroll
-               if (!this.game.kineticScrolling.dragging) game.add.tween(e).to({ alpha: 0.3 }, 300, Phaser.Easing.Linear.None, true);
-            }, 1000, e);
+               if (!this.game.kineticScrolling.dragging) game.add.tween(e).to({ alpha: 0, y: '-100' }, 300, Phaser.Easing.Linear.None, true);
+            }, 200, e);
         }, this);
@@ -57,4 +57,4 @@ sprite.events.onInputUp.add(function(e) {
             e.timerInputUp = window.setTimeout(function(e) {
-               if (!this.game.kineticScrolling.dragging) game.add.tween(e).to({ alpha: 1 }, 300, Phaser.Easing.Linear.None, true);
-            }, 1000, e);
+               if (!this.game.kineticScrolling.dragging) game.add.tween(e).to({ alpha: 1, y: y }, 300, Phaser.Easing.Linear.None, true);
+            }, 200, e);
         }, this);
@@ -61,0 +61,0 @@

examples/js/phaser-kinetic-scrolling-plugin.js

 /**
  * Phaser Kinetic Scrolling Plugin
  * @author       Juan Nicholls <[e-mail]>
- * @copyright    2015 Juan Nicholls - http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
+ * @copyright    2018 Juan Nicholls - http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
  * @license      {@link http://opensource.org/licenses/MIT}
- * @version 1.0.4
+ * @version 1.0.6
  */
@@ -24,2 +24,3 @@
 
+        this.pointerId = null;
         this.dragging = false;
@@ -50,2 +51,6 @@ this.pressedDown = false;
 
+        // if less than the two values is a Tap
+        this.thresholdOfTapTime = 100;
+        this.thresholdOfTapDistance = 10;
+
         this.settings = {
@@ -58,3 +63,4 @@ kineticMovement: true,
             verticalWheel: false,
-            deltaWheel: 40
+            deltaWheel: 40,
+            onUpdate: null
         };
@@ -110,7 +116,11 @@ };
     */
-    Phaser.Plugin.KineticScrolling.prototype.beginMove = function () {
+    Phaser.Plugin.KineticScrolling.prototype.beginMove = function (pointer) {
 
+        this.pointerId = pointer.id;
         this.startX = this.game.input.x;
         this.startY = this.game.input.y;
 
+        this.screenX = pointer.screenX;
+        this.screenY = pointer.screenY;
+
         this.pressedDown = true;
@@ -120,2 +130,5 @@
 
+        // the time of press down
+        this.beginTime = this.timestamp;
+
         this.velocityY = this.amplitudeY = this.velocityX = this.amplitudeX = 0;
@@ -131,4 +144,11 @@
 
-        if (!this.pressedDown) return;
+        if (!this.pressedDown) {
+            return;
+        }
 
+        // If it is not the current pointer
+        if (this.pointerId !== pointer.id) {
+            return;
+        }
+
         this.now = Date.now();
@@ -138,18 +158,48 @@ var elapsed = this.now - this.timestamp;
 
+        var deltaX = 0;
+        var deltaY = 0;
+
+        // It`s a fast tap not move
+        if (
+            this.now - this.beginTime < this.thresholdOfTapTime
+            && Math.abs(pointer.screenY - this.screenY) < this.thresholdOfTapDistance
+            && Math.abs(pointer.screenX - this.screenX) < this.thresholdOfTapDistance
+        ) {
+            return;
+        }
+
         if (this.settings.horizontalScroll) {
-            var delta = x - this.startX; //Compute move distance
-            if (delta !== 0) this.dragging = true;
+            deltaX = x - this.startX;
+            if (deltaX !== 0) {
+                this.dragging = true;
+            }
             this.startX = x;
-            this.velocityX = 0.8 * (1000 * delta / (1 + elapsed)) + 0.2 * this.velocityX;
-            this.game.camera.x -= delta;
+            this.velocityX = 0.8 * (1000 * deltaX / (1 + elapsed)) + 0.2 * this.velocityX;
+            this.game.camera.x -= deltaX;
         }
 
         if (this.settings.verticalScroll) {
-            var delta = y - this.startY; //Compute move distance
-            if (delta !== 0) this.dragging = true;
+            deltaY = y - this.startY;
+            if (deltaY !== 0) {
+                this.dragging = true;
+            }
             this.startY = y;
-            this.velocityY = 0.8 * (1000 * delta / (1 + elapsed)) + 0.2 * this.velocityY;
-            this.game.camera.y -= delta;
+            this.velocityY = 0.8 * (1000 * deltaY / (1 + elapsed)) + 0.2 * this.velocityY;
+            this.game.camera.y -= deltaY;
         }
 
+        if (typeof this.settings.onUpdate === 'function') {
+            var updateX = 0;
+            if (this.game.camera.x > 0 && this.game.camera.x + this.game.camera.width < this.game.camera.bounds.right) {
+                updateX = deltaX;
+            }
+
+            var updateY = 0;
+            if (this.game.camera.y > 0 && this.game.camera.y + this.game.camera.height < this.game.camera.bounds.height) {
+                updateY = deltaY;
+            }
+
+            this.settings.onUpdate(updateX, updateY);
+        }
+
     };
@@ -161,3 +211,4 @@
     Phaser.Plugin.KineticScrolling.prototype.endMove = function () {
-        
+
+        this.pointerId = null;
         this.pressedDown = false;
@@ -171,3 +222,3 @@ this.autoScrollX = false;
 
-        if(this.game.input.activePointer.withinGame){
+        if (this.game.input.activePointer.withinGame) {
             if (this.velocityX > 10 || this.velocityX < -10) {
@@ -188,6 +239,12 @@ this.amplitudeX = 0.8 * this.velocityX;
             this.velocityWheelYAbs = Math.abs(this.velocityWheelY);
-            if (this.settings.horizontalScroll && (this.velocityWheelXAbs < 0.1 || !this.game.input.activePointer.withinGame)) {
+            if (
+                this.settings.horizontalScroll
+                && (this.velocityWheelXAbs < 0.1 || !this.game.input.activePointer.withinGame)
+            ) {
                 this.autoScrollX = true;
             }
-            if (this.settings.verticalScroll && (this.velocityWheelYAbs < 0.1 || !this.game.input.activePointer.withinGame)) {
+            if (
+                this.settings.verticalScroll
+                && (this.velocityWheelYAbs < 0.1 || !this.game.input.activePointer.withinGame)
+            ) {
                 this.autoScrollY = true;
@@ -208,5 +265,6 @@ }
 
+        var delta = 0;
         if (this.autoScrollX && this.amplitudeX != 0) {
 
-            var delta = -this.amplitudeX * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
+            delta = -this.amplitudeX * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
             if (delta > 0.5 || delta < -0.5) {
@@ -223,3 +281,3 @@ this.game.camera.x = this.targetX - delta;
 
-            var delta = -this.amplitudeY * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
+            delta = -this.amplitudeY * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
             if (delta > 0.5 || delta < -0.5) {
@@ -234,6 +292,6 @@ this.game.camera.y = this.targetY - delta;
 
-        if(!this.autoScrollX && !this.autoScrollY){
+        if (!this.autoScrollX && !this.autoScrollY) {
             this.dragging = false;
         }
-        
+
         if (this.settings.horizontalWheel  && this.velocityWheelXAbs > 0.1) {
@@ -275,2 +333,11 @@ this.dragging = true;
             this.velocityWheelX += delta;
+
+            if (typeof this.settings.onUpdate === 'function') {
+                var deltaX = 0;
+                if (this.game.camera.x > 0 && this.game.camera.x + this.game.camera.width < this.game.camera.bounds.width) {
+                    deltaX = delta;
+                }
+
+                this.settings.onUpdate(deltaX, 0);
+            }
         }
@@ -282,2 +349,11 @@
             this.velocityWheelY += delta;
+
+            if (typeof this.settings.onUpdate === 'function') {
+                var deltaY = 0;
+                if (this.game.camera.y > 0 && this.game.camera.y + this.game.camera.height < this.game.camera.bounds.height) {
+                    deltaY = delta;
+                }
+
+                this.settings.onUpdate(0, deltaY);
+            }
         }
@@ -309,2 +385,2 @@
 
-} (Phaser));
+} (Phaser));

gulpfile.js

@@ -5,11 +5,13 @@ var gulp = require('gulp');
 var uglify = require('gulp-uglify');
+var connect = require('gulp-connect');
+var open = require('gulp-open');
 
 var paths = {
-  javascript: ['./src/*.js']
+  source: ['./src/*.js']
 };
 
-gulp.task('default', ['javascript']);
+gulp.task('default', ['dist', 'examples', 'watch']);
 
-gulp.task('javascript', function() {
-    return gulp.src(paths.javascript)
+gulp.task('dist', function() {
+    return gulp.src(paths.source)
         .pipe(concat("phaser-kinetic-scrolling-plugin.js"))
@@ -22,7 +24,20 @@ .pipe(gulp.dest("./dist/"))
         .pipe(uglify())
-        .pipe(gulp.dest("./dist/"));
+        .pipe(gulp.dest("./dist/"))
+        .pipe(connect.reload());
 });
 
+gulp.task('examples', function() {
+  var defaultUrl = 'examples/';
+  var port = 3000;
+  connect.server({
+    root: 'examples',
+    livereload: true,
+    port: port
+  });
+  gulp.src(defaultUrl)
+  .pipe(open({uri: 'http://localhost:' + port + '/index.html' }));
+});
+
 gulp.task('watch', function() {
-  gulp.watch(paths.javascript, ['javascript']);
-});
+  gulp.watch(paths.source, ['dist']);
+});

package.json

 {
   "name": "phaser-kinetic-scrolling-plugin",
-  "version": "1.0.4",
-  "release": "V 1.0.4",
+  "version": "1.0.6",
+  "release": "V 1.0.6",
   "description": "Kinetic Scrolling Plugin for Phaser Framework",
@@ -18,3 +18,3 @@ "author": "Juan David Nicholls Cardona <[e-mail]>",
   ],
-  "homepage": "http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/",  
+  "homepage": "http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/",
   "repository": {
@@ -30,3 +30,3 @@ "type": "git",
   "dependencies": {
-    "phaser": "^2.0.6" 
+    "phaser-ce": "^2.8.8"
   },
@@ -36,5 +36,7 @@ "devDependencies": {
     "gulp-concat": "^2.2.0",
+    "gulp-connect": "^5.0.0",
     "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.2.0"
+    "gulp-uglify": "^1.2.0",
+    "gulp-open": "^2.0.0"
   }
-}
+}

README.md

@@ -5,8 +5,10 @@ # Kinetic Scrolling Plugin for Phaser Framework
 
-I wanted to simulate horizontal and vertical scrolling in my games to display levels or a section of authors using only the canvas element in HTML5, but I couldn't find a good solution... so I decided to create my own plugin to Phaser Framework :D
+The vertical and horizontal scrolling is very useful feature in the games for example to display a section of levels and with this plugin you can simulate the scrolling within a **canvas** element of **HTML5**... so check this awesome plugin to **Phaser Framework**!
 
 > Kinetic scrolling based on http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html
 
-##Download the Plugin
+## Download the Plugin
 
+[![NPM](https://nodei.co/npm/phaser-kinetic-scrolling-plugin.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/phaser-kinetic-scrolling-plugin/)
+
 Install via [bower](http://bower.io)
@@ -20,3 +22,3 @@
 
-##Load the Plugin
+## Load the Plugin
 
@@ -27,3 +29,3 @@ ```javascript
 
-##Change Default Settings of the Plugin - *_It isn't necessary, default is horizontal_*
+## Change Default Settings of the Plugin - *_It isn't necessary, default is horizontal_*
 
@@ -38,7 +40,8 @@ ```javascript
     verticalWheel: false,
-    deltaWheel: 40
+    deltaWheel: 40,
+    onUpdate: null //A function to get the delta values if it's required (deltaX, deltaY)
 });
 ```
 
-##Start the Plugin
+## Start the Plugin
 
@@ -49,3 +52,3 @@ ```javascript
 
-##Stop the Plugin
+## Stop the Plugin
 
@@ -56,3 +59,3 @@ ```javascript
 
-##Full Example
+## Full Example
 
@@ -101,10 +104,28 @@ ```javascript
 ## Examples
-The repository has three examples of the plugin:
+The repository has some examples of the plugin, to run the examples created by the community execute the command `gulp examples` from the terminal:
 - Horizontal scrolling
 - Horizontal scrolling with scrollbar
 - Horizontal scrolling and pressing events
+- Horizontal and Vertical scrolling (Mouse wheel too)
+- onUpdate callback to track delta
 
-# Happy scrolling
+## Collaborators
+[<img alt="VitaZheltyakov" src="https://avatars3.githubusercontent.com/u/5693437?v=3&s=117" width="117">](https://github.com/VitaZheltyakov) |
+[<img alt="iamchristopher" src="https://avatars2.githubusercontent.com/u/5909516?v=3&s=117" width="117">](https://github.com/iamchristopher) |
+[<img alt="daaaabeen" src="https://avatars0.githubusercontent.com/u/3760804?s=117&v=3" width="117">](https://github.com/daaaabeen) |
+[<img alt="jdnichollsc" src="https://avatars3.githubusercontent.com/u/2154886?v=3&s=117" width="117">](https://github.com/jdnichollsc) |
+:---: |:---: |:---: |:---: |
+[Vitaliy](mailto:[e-mail]) | [Chris Wright](https://twitter.com/jorbascrumps) | [Daaaabeen](mailto:[e-mail]) | [Nicholls](mailto:[e-mail]) |
+
+## Other Projects
+- **[IonPhaser](http://market.ionic.io/plugins/ionphaser)**
+- **[Rotate Sprite Extension](https://github.com/jdnichollsc/Phaser-Rotate-Sprite-Extension)**
+
+## Supporting
+I believe in Unicorns 🦄
+Support [me](http://www.paypal.me/jdnichollsc/2), if you do too.
+
+## Happy scrolling
 Made with <3
 
-<img width="150px" src="http://phaser.azurewebsites.net/assets/nicholls.png" align="right">
+<img width="150px" src="http://phaser.azurewebsites.net/assets/nicholls.png" align="right">

src/phaser-kinetic-scrolling-plugin.js

 /**
  * Phaser Kinetic Scrolling Plugin
  * @author       Juan Nicholls <[e-mail]>
- * @copyright    2015 Juan Nicholls - http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
+ * @copyright    2018 Juan Nicholls - http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
  * @license      {@link http://opensource.org/licenses/MIT}
- * @version 1.0.4
+ * @version 1.0.6
  */
@@ -24,2 +24,3 @@
 
+        this.pointerId = null;
         this.dragging = false;
@@ -50,2 +51,6 @@ this.pressedDown = false;
 
+        // if less than the two values is a Tap
+        this.thresholdOfTapTime = 100;
+        this.thresholdOfTapDistance = 10;
+
         this.settings = {
@@ -58,3 +63,4 @@ kineticMovement: true,
             verticalWheel: false,
-            deltaWheel: 40
+            deltaWheel: 40,
+            onUpdate: null
         };
@@ -110,7 +116,11 @@ };
     */
-    Phaser.Plugin.KineticScrolling.prototype.beginMove = function () {
+    Phaser.Plugin.KineticScrolling.prototype.beginMove = function (pointer) {
 
+        this.pointerId = pointer.id;
         this.startX = this.game.input.x;
         this.startY = this.game.input.y;
 
+        this.screenX = pointer.screenX;
+        this.screenY = pointer.screenY;
+
         this.pressedDown = true;
@@ -120,2 +130,5 @@
 
+        // the time of press down
+        this.beginTime = this.timestamp;
+
         this.velocityY = this.amplitudeY = this.velocityX = this.amplitudeX = 0;
@@ -131,4 +144,11 @@
 
-        if (!this.pressedDown) return;
+        if (!this.pressedDown) {
+            return;
+        }
 
+        // If it is not the current pointer
+        if (this.pointerId !== pointer.id) {
+            return;
+        }
+
         this.now = Date.now();
@@ -138,18 +158,48 @@ var elapsed = this.now - this.timestamp;
 
+        var deltaX = 0;
+        var deltaY = 0;
+
+        // It`s a fast tap not move
+        if (
+            this.now - this.beginTime < this.thresholdOfTapTime
+            && Math.abs(pointer.screenY - this.screenY) < this.thresholdOfTapDistance
+            && Math.abs(pointer.screenX - this.screenX) < this.thresholdOfTapDistance
+        ) {
+            return;
+        }
+
         if (this.settings.horizontalScroll) {
-            var delta = x - this.startX; //Compute move distance
-            if (delta !== 0) this.dragging = true;
+            deltaX = x - this.startX;
+            if (deltaX !== 0) {
+                this.dragging = true;
+            }
             this.startX = x;
-            this.velocityX = 0.8 * (1000 * delta / (1 + elapsed)) + 0.2 * this.velocityX;
-            this.game.camera.x -= delta;
+            this.velocityX = 0.8 * (1000 * deltaX / (1 + elapsed)) + 0.2 * this.velocityX;
+            this.game.camera.x -= deltaX;
         }
 
         if (this.settings.verticalScroll) {
-            var delta = y - this.startY; //Compute move distance
-            if (delta !== 0) this.dragging = true;
+            deltaY = y - this.startY;
+            if (deltaY !== 0) {
+                this.dragging = true;
+            }
             this.startY = y;
-            this.velocityY = 0.8 * (1000 * delta / (1 + elapsed)) + 0.2 * this.velocityY;
-            this.game.camera.y -= delta;
+            this.velocityY = 0.8 * (1000 * deltaY / (1 + elapsed)) + 0.2 * this.velocityY;
+            this.game.camera.y -= deltaY;
         }
 
+        if (typeof this.settings.onUpdate === 'function') {
+            var updateX = 0;
+            if (this.game.camera.x > 0 && this.game.camera.x + this.game.camera.width < this.game.camera.bounds.right) {
+                updateX = deltaX;
+            }
+
+            var updateY = 0;
+            if (this.game.camera.y > 0 && this.game.camera.y + this.game.camera.height < this.game.camera.bounds.height) {
+                updateY = deltaY;
+            }
+
+            this.settings.onUpdate(updateX, updateY);
+        }
+
     };
@@ -161,3 +211,4 @@
     Phaser.Plugin.KineticScrolling.prototype.endMove = function () {
-        
+
+        this.pointerId = null;
         this.pressedDown = false;
@@ -171,3 +222,3 @@ this.autoScrollX = false;
 
-        if(this.game.input.activePointer.withinGame){
+        if (this.game.input.activePointer.withinGame) {
             if (this.velocityX > 10 || this.velocityX < -10) {
@@ -188,6 +239,12 @@ this.amplitudeX = 0.8 * this.velocityX;
             this.velocityWheelYAbs = Math.abs(this.velocityWheelY);
-            if (this.settings.horizontalScroll && (this.velocityWheelXAbs < 0.1 || !this.game.input.activePointer.withinGame)) {
+            if (
+                this.settings.horizontalScroll
+                && (this.velocityWheelXAbs < 0.1 || !this.game.input.activePointer.withinGame)
+            ) {
                 this.autoScrollX = true;
             }
-            if (this.settings.verticalScroll && (this.velocityWheelYAbs < 0.1 || !this.game.input.activePointer.withinGame)) {
+            if (
+                this.settings.verticalScroll
+                && (this.velocityWheelYAbs < 0.1 || !this.game.input.activePointer.withinGame)
+            ) {
                 this.autoScrollY = true;
@@ -208,5 +265,6 @@ }
 
+        var delta = 0;
         if (this.autoScrollX && this.amplitudeX != 0) {
 
-            var delta = -this.amplitudeX * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
+            delta = -this.amplitudeX * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
             if (delta > 0.5 || delta < -0.5) {
@@ -223,3 +281,3 @@ this.game.camera.x = this.targetX - delta;
 
-            var delta = -this.amplitudeY * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
+            delta = -this.amplitudeY * Math.exp(-this.elapsed / this.settings.timeConstantScroll);
             if (delta > 0.5 || delta < -0.5) {
@@ -234,6 +292,6 @@ this.game.camera.y = this.targetY - delta;
 
-        if(!this.autoScrollX && !this.autoScrollY){
+        if (!this.autoScrollX && !this.autoScrollY) {
             this.dragging = false;
         }
-        
+
         if (this.settings.horizontalWheel  && this.velocityWheelXAbs > 0.1) {
@@ -275,2 +333,11 @@ this.dragging = true;
             this.velocityWheelX += delta;
+
+            if (typeof this.settings.onUpdate === 'function') {
+                var deltaX = 0;
+                if (this.game.camera.x > 0 && this.game.camera.x + this.game.camera.width < this.game.camera.bounds.width) {
+                    deltaX = delta;
+                }
+
+                this.settings.onUpdate(deltaX, 0);
+            }
         }
@@ -282,2 +349,11 @@
             this.velocityWheelY += delta;
+
+            if (typeof this.settings.onUpdate === 'function') {
+                var deltaY = 0;
+                if (this.game.camera.y > 0 && this.game.camera.y + this.game.camera.height < this.game.camera.bounds.height) {
+                    deltaY = delta;
+                }
+
+                this.settings.onUpdate(0, deltaY);
+            }
         }
@@ -309,2 +385,2 @@
 
-} (Phaser));
+} (Phaser));

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2745023

increased by110.64%

Number of package files

43

increased by138.89%

Lines of code

12522

increased by116.16%

Number of lines in readme file

125

increased by21.36%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

6

increased by50%

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• + Addedphaser-ce@^2.8.8

• + Addedphaser-ce@2.20.0(transitive)

• - Removedphaser@^2.0.6

• - Removedphaser@2.6.2(transitive)