Unity UI on the HoloLens

Following the steps under "Required configuration" will allow Unity UI to continue to work in the editor, but it'll also work in the HoloLens using tap and navigation gestures.

Required configuration:

  • If you don't have any UI objects yet, create one (GameObject -> UI -> Button/Toggle/Slider/etc.)
  • Select the EventSystem object (this GameObject is automatically created for you when you create an UI objects, but unlike other UI objects, does not have Canvas as a parent/ancestor)
  • Add the "HoloLens Input Module" component to EventSystem (leave StandaloneInputModule attached for the UI to still work in the editor with mouse and keyboard)
  • Select the Canvas object (this containing GameObject is automatically created for you, and is a parent/ancestor to your UI objects)
  • Change "Render Mode" to "World Space"
  • Drag the Main Camera object onto the "Event Camera" field
  • Remember to put your camera's position at the origin

Recommended steps to get started with a more useable UI:

  • In the Canvas Scaler component of the Canvas object, change "Dynamic Pixels Per Unit" to 10 - this will remove a lot of text aliasing without shrinking the text size too much
  • At the bottom of the Rect Transform of the Canvas object, change the Scale in both X and Y to somewhere around 1/16 (0.0625) to 1/32 (0.03125) or so to make the size of UI objects more manageable (use the same value for X and Y to avoid non-uniform scaling, of course).
  • Set the Canvas position to 0 for X and Y, and a distance of 3-5 or so along Z (this will make it so that your UI is immediately visible after the splash screen goes away)
  • For sense of scale, create a button, masked background, or some other visible UI object and set its width and height to 100 by 100. Make sure you can see this in the Game window, and deploy to the HoloLens as usual. This should give you a better idea of how you'll want to size and position your UI.
  • Create a cursor to more easily tell where your gaze is pointed at (you can use the HoloToolkit to do this pretty painlessly). Especially if you choose not to create a cursor, it's highly recommended that you make the colors, animations, etc., for different states of your UI objects (Normal/Highlighted/Pressed/Disabled) very noticeably different - during initial development, at least - to make it more obvious what you're looking at and whether the gesture was done and interpreted correctly.

Run-time use:

  • Tap gestures of a gazed-at object will act as a quick single-click at that position. The "Time To Press On Tap" field of the HoloLens Input Module component controls the number of seconds that such taps will leave the UI object in the tapped state for better user feedback.
  • Use navigation gestures where click and drag would normally be needed, such as when moving a slider or scroll bar. The "Normalized Navigation To Screen Offset Scalar" field of HoloLensInputModule defines the number of pixels of emulated mouse movement when a value of positive or negative 1 is reported by the device for a navigation gesture.