CODEWITHSUNDEEP
androidiosuser-interfaceunity-game-engine
Rufus
Rufus

Reputation: 5566

How to handle full screen touch interaction with UI elements

Suppose I have a game where the whole screen is interactable aside from a few UI buttons / elements (i.e. the screen-wide touch handler should be called when touches occur anywhere outside the UI buttons, but not be called when the touch occurs on the UI buttons, since touches occuring on the UI bottons should call the button handler, not the screen-wide touch handler)

What is the best way to block the touch events when the touch occurs on the UI elements?

I've seen multiple approaches...

  1. Attach the touch script to an arbitrary gameobject. In the Update() function, check EventSystem.current.IsPointerOverGameObject(touch.fingerId) and ignore if it is not false

This seems to be most straight forward and flexible since the Update() function can use the Input object directly

  1. Attach the touch script to a stretched image pane with 0 alpha on back of the canvas and use OnPointerEnter, OnPointerClick, etc. to handle the touch events

This seems to be the recommended approach under the new GUI system but appears to be less flexible since the raw Input values is shielded by the PointerEventData, in particular, handling multitouch seems to be tricky with this approach (Also the use of a stretched invisible image at the background of the canvas seems hacky...)

  1. Some hybrid of 1 and 2 or other methods?

Since this seems to be an incredibly common thing to do, I'd like to know the industry common practice of such a problem.

Thanks

Related links:

http://answers.unity3d.com/questions/784617/how-do-i-block-touch-events-from-propagating-throu.html https://www.youtube.com/watch?v=EVZiv7DLU6E

Upvotes: 0

Views: 1264

Answers (2)

Nenad
Nenad

Reputation: 61

I am not competent to help in gaming development but would like to offer an idea for consideration:

  1. Make v-touch component empty sibling element to its content.
  2. Position it absolutely full screen and add CSS pointer-events: none
  3. Add to it tap event listener and toggle hide only on tap
  4. On underlying content add CSS pointer-events: all and toggle show v-touch on tap.

Upvotes: 0

Umair M
Umair M

Reputation: 10750

I have never seen such use case of screen-wide touch which goes beyond the methods described in your question. According to natural mapping of interaction, If you have multi-touch interaction model, you should have enough space on screen that user can easily interact without getting close to UI items. Otherwise its not a good interface implementation. So you can use update() (method 1 in the OP) to detect tap, swipe, drag and pinch etc. And if you just need single touch (tap) interaction then method 2 is recommended, add a background transparent panel and register onclick() listner. So it all depend on your interaction model's requirements.

Upvotes: 1

Related Questions