How to capture a touch event on mobile device

[spider]

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.

[rich]

Well you're asking the mouse specifically for an event, so of course your iPhone won't do anything

 

I would recommend you look at examples/input/multi touch

 

Should give a better understanding of the sorts of properties the Phaser.Pointer objects have.

[Arlefreak]

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  

[rich]

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".

[CrazySam]

Is there a quick way to iterate through all active pointers? For example:

isTouchingButton = function(pointer){    if(button.input.pointerOver(pointer.id))        // Do something}game.input.forEachPointer(isTouchingButton, this);

[rich]

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

[acott]

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!

[xnamex]

@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!

[acott]

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?

[rumdumdum]

@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;  }

[acott]

you cracked it rumdumdum! thanks so much!

[rumdumdum]

great to hear 

 

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.

[acott]

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 or maybe thats the fun of it.

 

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

[rumdumdum]

@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);}

[bLind17]

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

 

[TNelson]

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?

[goyeneche]

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.

[staff0rd]

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.

[onmyown]

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!

[staff0rd]

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;

[Kresent]

Is there a way to implement dragging in box2d? I see only the method

game.physics.box2d.mouseDragStart(game.input.mousePointer);

but what about touch drag?

[tidelake]

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; }

 

[MarzSocks]

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?