Pinch Manipulator in Unity UI Toolkit

Unity Engine
, , , , , ,
1

Hello. I have the following task: When a visual element is tapped once, it moves with the finger. When tapped twice, it either zooms in or out depending on whether the fingers are moving apart or together. The documentation (Unity - Manual: Manipulators) provides examples for both dragging and pinching, but all of them are separate and designed for single taps, not multiple. I have made numerous attempts, but none have been particularly successful so far.

Using the Input System while working with Unity UI allowed tracking the positions of multiple fingers simultaneously. However, here the pointerID is always 1 if only one finger is moving, and if two fingers are moving, two different OnPointerMove events are triggered, making it difficult to track the correct distance between the fingers.

Could you please help?

2

You will indeed get a pointer event callback called for each pointer id. If your finger doesnt move it is normal that PointerMoveEvent wont happen. What you are trying to achieve is a so-called gesture recognizer.

You have to track and store pointer ids with their position during PointerDownEvent, and untrack them during PointerUpEvent. You can also clean up any tracking during CaptureOutEvent/PointerCancelEvent.

Then during PointerMoveEvent you can apply your logic based on the currently tracked pointer ids and the new position for the current event pointer id.

I also suggest you to Capture the pointers whenever the gesture become possible (i guess as soon as 2 pointers are tracked). That will ensure that if your pointers move outside of the element during the gesture, it will still process correctly.

There are probably gesture recognizers out there using UITK. The only one that comes to my mind right now is the App UI gesture recognition system, but it is a bit more advanced (it supports raw inputs directly and can work with Apple Magic Trackpad for example).

https://docs.unity3d.com/Packages/com.unity.dt.app-ui@2.0/api/Unity.AppUI.Core.PinchGestureRecognizer.html

You can always take a look at the package code to have an idea.

3

Thanks a lot for the tip! Using the PinchGestureRecognizer from the App UI package was exactly what I needed to handle multiple pointer IDs and get the pinch gesture working in UI Toolkit.