Keisha

Creating swiping mechanism

Recommended Posts

Basically you'll want to compare input events on an interactive object enabled with drag, based on the interaction start (on pointerdown or dragstart) and end/progress (on drag).  Based on the updated pointers coords (and a defined minimum threshold as to what constitutes a swipe), you can determine the swipe direction.

You can also expand on this by calculating the velocity/amplitude of the swipe, and acting on that within the update loop, but that gets much more complicated.

 

Share this post


Link to post
Share on other sites
var downX, upX, downY, upY, threshold = 50;

target.on('pointerdown', function (pointer) {
	downX = pointer.x;
	downY = pointer.y;
};   

target.on('pointerup', function (pointer) {
	upX = pointer.x;
	upY = pointer.y;
	if (upX < downX - threshold){
		console.log("swipeleft");
	} else if (upX > downX + threshold) {
		console.log("swiperight");
	} else if (upY < downY - threshold) {
		console.log("swipeup");
	} else if (upY > downY + threshold) {
		console.log("swipedown");
	}
};      

 

Share this post


Link to post
Share on other sites
7 hours ago, prob said:

var downX, upX, downY, upY, threshold = 50;

target.on('pointerdown', function (pointer) {
	downX = pointer.x;
	downY = pointer.y;
};   

target.on('pointerup', function (pointer) {
	upX = pointer.x;
	upY = pointer.y;
	if (upX < downX - threshold){
		console.log("swipeleft");
	} else if (upX > downX + threshold) {
		console.log("swiperight");
	} else if (upY < downY - threshold) {
		console.log("swipeup");
	} else if (upY > downY + threshold) {
		console.log("swipedown");
	}
};      

 

Yes, this is correct. Thanks you for you aswer.

Share this post


Link to post
Share on other sites
15 hours ago, gammafp said:

Hi. You can see my little plugin: 

https://github.com/gammafp/phaser3-swipe

Getting error when i use this plugin.
Error: 
Uncaught TypeError: Cannot read property 'cargar' of null
    at initialize.gameScene.create (game.js:9)

and my code is like this:

let gameScene = new Phaser.Scene('Game');

gameScene.preload = function () {
    this.load.plugin(" Phaser3Swipe ", Phaser3Swipe, true);
};

gameScene.create = function () {
    let plugin = this.plugins.get('Phaser3Swipe');
    plugin.cargar(this);
    this.events.on("swipe", (e) => {
        if (e.right) {
            console.log('right');
        }
        else if (e.left) {
            gconsole.log('left');
        }
        else if (e.up) {
            console.log('up');
        }
        else if (e.down) {
            console.log('down');
        }
    });
}

 

main.js

var game;
window.onload = function() {
  var gameConfig = {
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
     backgroundColor: 0x3f0d7d,
     scene: gameScene
 };
  game = new Phaser.Game(gameConfig);
}

 

Share this post


Link to post
Share on other sites
var distX, upX, distY, upY, dist, pi, threshold = 25;

target.on('pointerdown', function (pointer) {
	downX = pointer.x;
	downY = pointer.y;
};   

target.on('pointerup', function (pointer) {
	distX = pointer.x - downX;
	distY = pointer.y - downY;
    dist = Math.sqrt(distX*distX + distY*distY);
    if (dist > treshold) {
        angle = Math.atan2(distY, distX);
    pi = Math.PI;
    if (angle > -pi/4 && agle < pi/4) { /*right*/}
    else if (angle > pi/4 && angle < 3*pi/4) { /*down*/}
    else if (angle > -3*pi/4 && angle < -pi/4) { /*up*/ }
    else if (angle > 3*pi/4 || angle < -3*pi/4) { /*left*/}
    else { /*unknown*/}
    }
}

algorithms above is non-corrects. that good algorithm from Emanuele Feronato

Share this post


Link to post
Share on other sites
34 minutes ago, iKest said:

var downX, upX, downY, upY, threshold = 25;

target.on('pointerdown', function (pointer) {
	downX = pointer.x;
	downY = pointer.y;
};   

target.on('pointerup', function (pointer) {
	distX = pointer.x - downX;
	distY = pointer.y - downY;
    dist = Math.sqrt(distX*distX + distY*distY);
    if (dist > treshold) {
        angle = Math.atan2(distY, distX);
    pi = Math.PI
    if (angle > -pi/4 && agle < pi/4) { /*right*/}
    else if (angle > pi/4 && angle < 3*pi/4) { /*down*/}
    else if (angle > -3*pi/4 && angle < -pi/4) { /*up*/ }
    else if (angle > 3*pi/4 || angle < -3*pi/4) { /*left*/}
    else { /*unknown*/}
    }
}

 

Great. Thank you.

Share this post


Link to post
Share on other sites
11 hours ago, Keisha said:

Getting error when i use this plugin.
Error: 
Uncaught TypeError: Cannot read property 'cargar' of null
    at initialize.gameScene.create (game.js:9)

and my code is like this:

If you look at your code you load the plugin as " Phaser3Swipe " (with spaces around it) but you try to load the plugin as "Phaser3Swipe" (no spaces). That means when you try to get the plugin to start it's not able to find it.

To fix this you need to make sure you use the same name in preload and create:

gameScene.preload = function() {
  // load the plugin
  this.load.plugin('Phaser3Swipe', Phaser3Swipe, true);

  // other scene loading code
}

gameScene.create = function() {

  // get the plugin, make sure you use the same name that you gave
  // it when loading it above:
  let plugin = this.plugins.get('Phaser3Swipe');

  // load the plugin into this scene:
  plugin.cargar(this);

  // other scene creation code
}

 

Share this post


Link to post
Share on other sites
6 hours ago, jdotr said:

If you look at your code you load the plugin as " Phaser3Swipe " (with spaces around it) but you try to load the plugin as "Phaser3Swipe" (no spaces). That means when you try to get the plugin to start it's not able to find it.

To fix this you need to make sure you use the same name in preload and create:


gameScene.preload = function() {
  // load the plugin
  this.load.plugin('Phaser3Swipe', Phaser3Swipe, true);

  // other scene loading code
}

gameScene.create = function() {

  // get the plugin, make sure you use the same name that you gave
  // it when loading it above:
  let plugin = this.plugins.get('Phaser3Swipe');

  // load the plugin into this scene:
  plugin.cargar(this);

  // other scene creation code
}

 

Thanks. That was my mistake

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.