spider

How to capture a touch event on mobile device

Recommended Posts

Could someone please tell me how to capture a touch event in phaser?

game.input.mouse.onMouseMove = function (evt) {  rabbit.x = evt.offsetX - (rabbitWidth / 2);};   

The above code works perfectly on a normal screen, but does bugger-all on my iPhone. I see Pixi has some mouse support.

 

http://www.goodboydigital.com/pixi-js-gets-interactive/

 

I'm looking for the touch position. 

 

Help appreciated.

Share this post


Link to post
Share on other sites

Here's a brief explanation of how the Pointers are set-up:

 

game.input.mousePointer always references the mouse (if present on the device). If you know you only need to query the mouse it's safe to use this.

 

game.input.activePointer is a reference to the most recently active pointer object. By 'active' we mean the one that created the most recent event on the device. On a non-Surface desktop this will be the mouse. On an iPhone for example it will be the most recent finger active on the screen.

 

The game.input.pointer1 through to pointer10 objects are for multi-touch systems. By default Phaser will start 2 of them (allowing for 2-finger games). If you want more you can start up the others too.

 

Pointers are issued sequentially as each new finger is pressed on the screen. So if you press down 3 fingers then pointer1, 2 and 3 will become active. If you then remove the 2nd finger you placed down pointer2 will become inactive, but pointers 1 and 3 will remain active. If you put another finger down it will fill-in the gap and become pointer2 again.

 

game.input.x/y = the most recently active pointer coordinates.

 

You can listen to game.input events too, for example:

game.input.onDown.add(doSomething, this);function doSomething(pointer) { // pointer will contain the pointer that activated this event}

You can listen for "onDown", "onUp", "onTap" and "onHold".

Share this post


Link to post
Share on other sites

You don't really need to - you'd use the button events in this case:

button.events.onInputOver.add(isTouchingButton, this);function isTouchingButton(button, pointer) {  // stuff}

You've got these events you can use (on any Sprite or Button object)

 

onInputOver

onInputOut

onInputDown

onInputUp

onDragStart

onDragStop

Share this post


Link to post
Share on other sites

Is it possible to use this method for moving a character left and right? I have it working with the keyboard using cursors.left.isDown but can this be changed to game.input.activePointer.isDown so the touch functionality will work on mobile?

 

I know I need to split the screen so if they touch the left hand side it moves left and if they touch the right hand side it moves right. But im not quite sure how to split the screen for this, any help would be greatly appreciated!

Share this post


Link to post
Share on other sites

@acott

 

To implement that touch-on-screen behavior is fairly easy, you can do something like:

var RIGHT = 0, LEFT = 1;/* Divide the current tap x coordinate to half the game.width, floor it and there you go */game.input.onTap.add(function(e){    if (Math.floor(e.x/(this.game.width/2)) === LEFT) {        //do left stuff    }    if (Math.floor(e.x/(this.game.width/2)) === RIGHT) {        //do right stuff    }}); 

Hope this helps!

 

Cheers!

Share this post


Link to post
Share on other sites

Hey Xnamex, I gave that a go but for some reason the tap function only makes him move a very small bit. You have to tap like a mad man to try get the sprite to move across the screen! Maybe there is something I'm doing wrong? Also the walk cycle continuously plays regardless if I have tapped or not. Maybe this is due to it being in the update section?

Share this post


Link to post
Share on other sites

@acott

 

I made the following change to make ti work with the example game:

  if (game.input.pointer1.isDown){          if (Math.floor(game.input.x/(game.width/2)) === LEFT) {      //  Move to the left      player.body.velocity.x = 150;      player.animations.play('right');    }    if (Math.floor(game.input.x/(game.width/2)) === RIGHT) {      //  Move to the right      player.body.velocity.x = -150;      player.animations.play('left');    }    }else{      //  Stand still      player.animations.stop();      player.frame = 4;  }

Share this post


Link to post
Share on other sites

great to hear  :D

 

I added swipe up to jump using hammer.js

var element = document.getElementsByTagName('body')[0];var hammertime = Hammer(element).on("swipeup", function(event) {  if (player.body.touching.down)  {    player.body.velocity.y = -350;  }});

The only question I have is how to make all these actions work together smoothly. For example swiping up to jump and moving right at the same time? Now its a bit jittery and you need to stop to swipe and jump.

Share this post


Link to post
Share on other sites

Yeah I noticed that if you tap the screen in a certain manner that the player just stops, which in my game can result in death :) could be quite frustrating for the player :D or maybe thats the fun of it.

 

I gave hammer.js a go, I keep getting an error "cannot call method 'addEventListener' of undefined"

Share this post


Link to post
Share on other sites

@acott

 

I got an example from another post for jumping with a swipe to work without hammer.js:

//This is inside your update functionif ((cursors.up.isDown || onSwipe()) && player.body.touching.down)  {      player.body.velocity.y = -350;  }//This can be placed outsidefunction onSwipe() {  return (Phaser.Point.distance(game.input.activePointer.position, game.input.activePointer.positionDown) > 150 && game.input.activePointer.duration > 100 && game.input.activePointer.duration < 250);}

Share this post


Link to post
Share on other sites

Hi!

 

Thanks for the help so far.

 

Now I'm wondering if there is some way to get a hold-event on a sprite?

Just like game.input.onHold.add - I need a longpress listener for sprites.

Is there something already there, or an easy way to do this?

 

cheers bLind

 

Share this post


Link to post
Share on other sites

Tremendously helpful convo guys!  It helped me to implement multitouch on my game menu, and also as a controller for my mobile game--I am converting a game from desktop to mobile.

 

How do you get the coordinates of the touch?

Share this post


Link to post
Share on other sites

Is there any way to make active the previous pointer?

This is my situation, in my game you move the character by tapping in the screen and holding, but you can also fire by tapping in a button on the screen. When you hold the fire button, the movement is disabled because the last pointer is in the fire button now.

I want to make active the previous pointer when you tap the fire button to prevent disable the movement (so if the user hold fire like 100ms, this will not affect the movement.)

 

I try to save game.input.activePointer in a var and then asign it again but it seems not to work.

Share this post


Link to post
Share on other sites
On 23/10/2013 at 9:42 PM, rich said:

Here's a brief explanation of how the Pointers are set-up:

 

game.input.mousePointer always references the mouse (if present on the device). If you know you only need to query the mouse it's safe to use this.

 

game.input.activePointer is a reference to the most recently active pointer object. By 'active' we mean the one that created the most recent event on the device. On a non-Surface desktop this will be the mouse. On an iPhone for example it will be the most recent finger active on the screen.

 

The game.input.pointer1 through to pointer10 objects are for multi-touch systems. By default Phaser will start 2 of them (allowing for 2-finger games). If you want more you can start up the others too.

 

Pointers are issued sequentially as each new finger is pressed on the screen. So if you press down 3 fingers then pointer1, 2 and 3 will become active. If you then remove the 2nd finger you placed down pointer2 will become inactive, but pointers 1 and 3 will remain active. If you put another finger down it will fill-in the gap and become pointer2 again.

 

game.input.x/y = the most recently active pointer coordinates.

 

You can listen to game.input events too, for example:


game.input.onDown.add(doSomething, this);function doSomething(pointer) { // pointer will contain the pointer that activated this event}

You can listen for "onDown", "onUp", "onTap" and "onHold".

That's a very clear explanation that deserves to be somewhere in the docs.

Share this post


Link to post
Share on other sites
On 2/15/2014 at 11:38 AM, rumdumdum said:

@acott

 

I made the following change to make ti work with the example game:


  if (game.input.pointer1.isDown){          if (Math.floor(game.input.x/(game.width/2)) === LEFT) {      //  Move to the left      player.body.velocity.x = 150;      player.animations.play('right');    }    if (Math.floor(game.input.x/(game.width/2)) === RIGHT) {      //  Move to the right      player.body.velocity.x = -150;      player.animations.play('left');    }    }else{      //  Stand still      player.animations.stop();      player.frame = 4;  }

Sorry to bump, but when I do this, I get LEFT as undefined. What its the proper thing to fix it? Thank you!

Share this post


Link to post
Share on other sites
On 23/01/2016 at 9:04 AM, onmyown said:

Sorry to bump, but when I do this, I get LEFT as undefined. What its the proper thing to fix it? Thank you!

A couple of posts up from that example you can see those variables being declared and set;

var RIGHT = 0, LEFT = 1;

Share this post


Link to post
Share on other sites

Hi, I'm working to emulate multitouch on my laptop trackpad.

On my laptop, I want to skip this condition if another tap occurs on the screen.  I'm confused.

var holding_down = game.input.activePointer.isDown; 

if (holding_down && game.input.pointer2.isUp) { cue.aiming = true; }

 

Share this post


Link to post
Share on other sites
On 10/23/2013 at 6:18 AM, Arlefreak said:

I had this problem to ! and after a day searching on the examples multi touch one give me the answer ( too late to read your answaer Rich :C )


 if (game.input.pointer1.isDown)

That should do it :) 

Thank you , this worked for me, but why is it pointer1 one? Is touch, always pointer1 & and why does activePointer not work?

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.