New Unity Module for User Interface Input

Unity Widgets are back – with a new name and massively streamlined functionality! Just released for our Unity Core Assets, the UI Input Module provides a simplified interface for physically interacting with World Space Canvases within Unity’s UI System. This makes it simple for developers to create one-to-one tactile user interfaces in VR.

The module also provides “CompressibleUI” scripts that enable UI elements to pop-up and flatten in response to touch. You can try the new inputs in our latest Developer Gallery demo, or download the Module from our Unity page.

What’s Inside?

One of the goals of our module releases is to provide you with the tools for interpreting and using hand tracking data to make building hand-enabled experiences faster and easier. The UI Input Module aims to do just that. By using the new LeapEventSystem prefab, developers can easily use their old worldspace user-interfaces and menus with hand tracking. Setting it up is as simple as ensuring that there’s a LeapEventSystem in the scene and that menus are close enough to touch.

Additionally, our pre-constructed UI Widgets demonstrate how to put together a diegetic UI Element that works well with compression and touch. Their built-in sound effects add haptic cues that give the sense of each button and slider having an internal mechanism for more satisfying interactions. We’ve include examples for Buttons, Sliders, and Scroll Panels in the module.

The CompressibleUI helper utility makes it easy to have animated, 3D UIs that respond to touch and interaction. This utility also animates the opacity of drop shadows, giving your UI elements that extra sense of depth necessary for fulfilling interactions. This utility is used in each of our example Widgets.

Quick Setup Guide

1. Set up a Leap Camera Rig normally by dragging in an LMHeadMountedRig prefab from the Unity Core Assets
2. Go to the LeapMotionModules/UIInput/Prefabs folder and drag a “LeapEventSystem” prefab onto your scene
3. Create a Canvas object and add UI Elements to it
   • Standard GUI elements can be added by right-clicking on the parent Canvas and selecting UI->Button/Slider/etc.
     • The Leap UI Input Module works out-of-the-box with Unity’s uGUI system
   • Or special Leap UI Elements, which can be found in the Prefabs folder
     • These prefabs are also compatible with mouse Interaction
4. Test out your new menu in VR!

Note: The UI Module does not recognize Canvases that are instantiated at runtime. For custom UI Elements, make sure the GameObject with the “Selectable” component is the only one in its hierarchy that has “RaycastTarget” enabled.

Designing with the UI Input Module

As a new type of interface, it’s very important that developers use the UI Input Module in ways that feel natural and intuitive to first-time users. Here are a few tips for developing with the module:

Big buttons. They’re easier to read in VR and easier to select.

Drop shadows. Use drop shadows on your UI elements to signify when they’re depressed or elevated. Shadows and shading are powerful depth cues for conveying button states.

Sound effects. These are a powerful way to signify the success or failure of an action. It’s very important to use a sound effect upon both the initiation of an interaction and its termination. Missing sound effects on the termination of an action can leave the user feeling confused or unfulfilled.

CompressibleUI. This is a small helper utility within the Module that allows UI elements to expand and compress in relation to the surface of the canvas – in response to both touch and general interaction. It can also control the opacity of drop shadows. It’s a powerful tool toward increasing the dynamism of your UI elements.

Start with examples. Use the prefabs included in the UI Input Module as examples for setting up your own UI and components. You’ll also find tooltips on the Event System parameters that will help you learn how everything works.

That’s all for now! Next week we’ll be featuring an experimental approach to UI input that we’ve been playing with. In the meantime, we’d love to hear what you think about the UI Input Module – leave your feedback in the comments!

The post New Unity Module for User Interface Input appeared first on Leap Motion Blog.