How to handle UI Events in Unity for VR


So far we worked on getting the system to work with the Gear VR with which we could handle the Gaze and TouchPad Events. It even works with the Touch Controller if you so desire to use that. In this we will create a UI with multiple nested Elements. In this tutorial, we’ll see how to handle UI events in Unity.

If we need to create custom animations or behaviour for our UI Components we use Event Triggers. Event Triggers contain event types like OnPointerEnter, Exit, Click etc. A callback can be passed to these triggers which are triggered when their respective event occurs. More info on them here in Unity’s docs.

UI Events in Unity

Generally in UI Events for Unity, event bubbling occurs. This means that when you click on a UI component which has a Raycast or a Collider based event capturing, it will being traversing up the object hierarchy for a handler of that particular event starting from the innermost. This happens until a Handler handles that event. But if we use Event Triggers they stop event bubbling and will intercept all events.

This creates problems when we have nested elements like in this case. ScrollView has elements inside it which need the OnPointer, OnPointerExit and Click events. The inner elements would intercept all of the events and the scrolling of the ScrollView would not work, which is very important in VR.

Solving issues with UI Events for Unity

The solution to this is rather elegant and simple. We can use the UnityEngine.EventSystems which contains interfaces for all the Handlers for our events. The whole list can be found here. We can then implement these Handlers in our Classes and our Gameobject will only intercept the handled events and propagate the unhandled one’s up the Hierarchy for the parent objects to handle.

We can also capture an event in the child GameObject and pass the event up explicitly using the EventSystems.ExecuteHierarchy() Method.

Let’s create a ScrollView which contains Items which would change to Gray Color on Hover and Green Color on Selecting them.

  1. Create a ScrollView under our world space canvas. on Canvas > Create > UI > Scrollview.
  2. Set the Canvas Position to (0,0) and reduce its scale to very small like 0.002 on all axis so that we can see the Canvas with our OVRCamera. I set my width and height to 1920X1080.                  
  3. Now that the Canvas is visible in our Game View, Anchor the ScrollView to the Centre of the canvas and stretch on all corners.                                                                                                                      
  4. Lets populate the ScrollView with elements. Im creating Image components which will have behaviours attached to them.
  5.  Create a script called OnHover.cs which we will attach to all of our Images in the scroll view.
  6. First we add required namespaces.In this case the EventSystems.
    Then we implement the required Handlers and create the Handler functions which take PointerEventData Type as parameters. These methods will be called when that event occurs. Note that the Handler’s methods need to be present else Unity will throw an error.
    Now we can create our Behaviour or Animations for the elements.Add the Following to use the UI class
    To avoid NullReferences, we can add the following on top of our class. When we add this script to any component it will automatically add an Image component as well.
    We then get the Image in the Start() method.
    Creating Methods to show the Color shift on Hover and Click.
    Finally we can call these methods from our handlers. This is our complete script now.
     
  7. Save the file and let it compile in Unity. Add the script to all the images in the scrollview and set the content size properly.If you wish to use Dynamic scroll view then checkout Enhanced Scroller from the asset store as it works perfectly with VR.
  8. You can now build away and test it on your Gear VR. Don’t forget to add the .osig file to the project folder. This is the final output.

Comments are closed.

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
close-link
Add Me To VIP
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
close-link
We've launched a WebVR Course with 25+ projects with source code! Check it out.
Get The Course
close-image