Integrate Hammer.js

Phaser 2 / CE
1

Has someone integrated successfully hammer.js into Phaser 2 and can show how to do that?
The goal is to enable pinch to zoom for mobile devices as Phaser 2 does not support gestures by default.
I’ve downloaded the hammer.js lib and referenced it in the index.html.

Then, within Main.js, I initialize an instance of hammer within Phaser.Device.whenReady(function(){…}) like this:

var myElement = document.body;
		var hammertime = new Hammer(myElement);
		hammertime.get('pinch').set({
			enable : true,
			domEvents : true
		});
		hammertime.on('pinch', function(ev) {
			console.log(ev);
		});

		hammertime.on("pinchend", function(e) {
			console.log(e);
		});

But the logs are never printed.

2

No one?
Gestures are essential for mobile games. How do you do it? Implement it all yourself?..

3

The last time I used Phaser 2 was about 2 years ago.

I wrote an example using Phaser 3. Hope it helps :slight_smile:

:warning: The coordinates hammer returns are based on the window and not of the canvas. You have to transform the values manually fist before using them in your game.

1 Like
4

Yea Phaser 2 seems to be gone. At the end of 2018 it was stated Phaser 3 should not be used for production yet. As long as I don’t read anything new about this, I will stick to Phaser 2. Besides of that, rewriting a large application from scratch is actually a pain in the ass. So, until now, I don’t see any urge to migrate (although this could dramatically change when I would have time to look into Phaser 3).

Awesome! I gonna try that out. Will be wondering when this one works for me. If so, it’s a huge different if I use hammer on the html body or a defined div.

Is there a way to test these gesture on desktop browser? Deploying the app to the device each time is time consuming.

5

Based on my experiences, you can use it now.

I do not know. I always test it on a real device:

  • For Android I use chrome devTools > remote devices
  • For iOS I simply access the http server where phaser is running over the local network using the correct ip and port.
6

Thanks for that feedback. Then migration can start, whenever I find time off.

Hammer.js was successfully integrated, thanks! So it turned out that if I initialize hammer.js on the body and let Phaser initialize the game on whatever (i do not specifiy a canvas or div element), it does not work. However, when I put a div inside of body with an id and let Phaser initialize the game for that specific element, then hammer.js starts working too.

Thanks again.

1 Like