Using multitouch for pinch to zoom

Phaser 3
1

So, I’m making an interactive graphic at my work and we’ll need to make it zoomable. I already implemented camera zoom on scroll events using native functions, but I still need to add it with touch input. Are there any good resources on how to do this with Phaser 3’s touch API? Heck, even just a few tips on how you’d do it would be a huge help.
Thanks!

2 Likes
2

Here is a demo of my new pinch plugin.

Concept of this plugin is to catch 2 pointerdown touch pointers, and calculate the distance changing for scaling ratio.

5 Likes
3

Rex, I love your notes on github! They have really, really sped up my process in understanding Phaser 3… That being said, when I use your code, it’s reading in both pointers as the same pointer at the same space, so when the

DistanceBetween(p0.x, p0.y, p1.x, p1.y);

is being called, it’s returning 0. Is that intentional? Are you still working on this plugin? Maybe I’m doing something wrong.

Thanks for all your help thus so far!

Edit: I should also mention that the switch statement involving:

TOUCH0

threw an error unless there was quotes around it:

'TOUCH0'

Maybe that’s why my “DistanceBetween” was failing?

4

Live demo works fine in ipad safari in my current testing.

this.pointers[0] and this.pointers[1] should not be the same pointer in my logic, except this touch pointer triggers pointerdown event twice without any pointerup event. This case might be happen when using mouse in desktop browser. I will try to avoid this problem later.

The TOUCH0, TOUCH1, TOUCH2 are defined here

5

Totally my bad on the “TOUCH” constants. I’m an idiot and forgot them, haha. Even with that though, the same “DistanceBetween” issue is still happening where it’s coming up as 0 the vast majority of the time (Every once in a while the “DistanceBetween” comes up as 1 (strange, I know). I’m on a Samsung Note 8 and using Chrome… Dunno if that makes a difference. I will keep troubleshooting.

Thanks again for the notes and the help!

6

You can add a small text object (like scene.add.text(0,0,'')) on screen, to show the internal status of logic for testing on mobile device easily.

7

I had modified that plugin and live demo to control camera with

  • 1 dragging : Scroll camera
  • 2 dragging(pinch): Zoom camera

Edit: DragScale plugin has been renamed to Pinch plugin.

1 Like
8

Your docs are definitely helpful and I’ll try out your plugins. Thanks @rexrainbow !

9

Hey, didn’t want to leave you hanging here… Just been busy with work. Will definitely give this a shot sometime this week! Thanks!

10

Hi, thank you for the plugin. Hoping to get some solutions. As with many who may want this functionality, the goal is to setup the map that moves in the separate scene. The drag functionality works as expected for the map area is larger and the view port is the smaller. If only using the drag functionality the map moves correctly within the camera bounds.

If slightly zooming in the left camera bounds shifts right thus if dragging the map left, black shows where the camera bounds should prevent, but the top and the bottom of the camera bounds appear correct and neither image clipping nor black scenery shows.

I hope to limit the camera zoom out of that of the camera bounds, and also limit the amount of zoom in. The added feature helps for those with those wishing for increased visibility of the image, however the goal is the limit of seeing the pixels making the image nor any dark areas surrounding the map.

Thanks for the notes and the help!