Keisha 1 Posted August 27, 2018 Report Share Posted August 27, 2018 Hi, I am a beginner developer. Can anyone tell he how to create the left, right, up, down finger swipe inputs in a Phaser3 game? Quote Link to post Share on other sites
prob 26 Posted August 27, 2018 Report Share Posted August 27, 2018 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. Quote Link to post Share on other sites
Keisha 1 Posted August 28, 2018 Author Report Share Posted August 28, 2018 @prob Thanks for the response. Posting here a code reference would be more helpful for me. Thanks in advance. Quote Link to post Share on other sites
prob 26 Posted August 28, 2018 Report Share Posted August 28, 2018 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"); } }; Cannabijoy 1 Quote Link to post Share on other sites
gammafp 3 Posted August 28, 2018 Report Share Posted August 28, 2018 Hi. You can see my little plugin: https://github.com/gammafp/phaser3-swipe jdotr 1 Quote Link to post Share on other sites
gammafp 3 Posted August 28, 2018 Report Share Posted August 28, 2018 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. msanatan and BobBob 2 Quote Link to post Share on other sites
Keisha 1 Posted August 29, 2018 Author Report Share Posted August 29, 2018 @prob Thanks for the answer!. It works well for me. Quote Link to post Share on other sites
Keisha 1 Posted August 29, 2018 Author Report Share Posted August 29, 2018 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); } Quote Link to post Share on other sites
iKest 7 Posted August 29, 2018 Report Share Posted August 29, 2018 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 Quote Link to post Share on other sites
Keisha 1 Posted August 29, 2018 Author Report Share Posted August 29, 2018 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. Quote Link to post Share on other sites
jdotr 12 Posted August 30, 2018 Report Share Posted August 30, 2018 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 } Quote Link to post Share on other sites
Keisha 1 Posted August 30, 2018 Author Report Share Posted August 30, 2018 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 Quote Link to post Share on other sites
rex 14 Posted August 30, 2018 Report Share Posted August 30, 2018 Here is a virtual joystick plugin (demo) if you want more. Quote Link to post Share on other sites
Keisha 1 Posted August 30, 2018 Author Report Share Posted August 30, 2018 Thanks @rex Quote Link to post Share on other sites
gen10do 0 Posted November 6, 2020 Report Share Posted November 6, 2020 On 8/28/2018 at 6:35 AM, 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"); } }; I tried to use a modified version this code within the update function of the phaser 3 game loop and it only seems to log left and right. Should this not be placed within the update function of the game loop? this.input.on('pointerdown', function (pointer) { this.downX = pointer.x; this.downY = pointer.y; },this); this.input.on('pointerup', function (pointer) { this.upX = pointer.x; this.upY = pointer.y; if (this.upX < this.downX - 50){ console.log("swipeleft"); this.player.moveLeft(); } else if (this.upX > this.downX + 50) { console.log("swiperight"); this.player.moveRight(); } else if (this.upY < this.downY - 50) { console.log("swipeup"); this.player.moveUp(); } else if (this.upY > this.downY + 50) { console.log("swipedown"); this.player.moveDown(); } else { this.player.stop(); } }, this); Quote Link to post Share on other sites
Recommended Posts
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.