🕶️
NRSDK(Old)
New DocumentationSDK DownloadAPI Reference
v2.2.1
v2.2.1
  • NRSDK Fundamentals
    • NRSDK Overview
    • XREAL Devices
      • XREAL Glasses
      • Controller
      • Compatibility
    • Getting Started with NRSDK
    • Sample Code
    • Tutorials
    • Release Note
      • NRSDK 2.2.1
      • NRSDK 2.2.0
      • NRSDK 2.1.1
      • NRSDK 2.1.0
      • NRSDK 1.10.2
      • NRSDK 1.9.5
      • NRSDK 1.9.3
      • NRSDK 1.9.1
      • NRSDK 1.8.0
      • NRSDK 1.7.0
      • NRSDK 1.6.0
  • Development
    • Input and Camera
      • NRInput
      • Interact with Unity UI (Tutorial)
      • Customize Controller UI
      • NRCameraRig
    • Hand Tracking
    • Image Tracking
      • XREAL Markers
    • Plane Detection (Tutorial)
      • Overview
      • Import the package
      • Detect planes in the real world
      • Perform a hit test against detected planes
      • Add a car
      • Add gems
      • Wrap up
    • Depth Mesh
      • Meshing Manager Overview
      • Use Meshes in the Editor
      • Tutorial: Mesh Collision
    • Spatial Anchor
      • Mapping Example Scene
      • Tutorial: Halloween Treasure Hunt
        • Handle the Situation of Failed Anchor Saving
      • Tutorial: Sharing Anchors
        • Setting Up Photon
        • Cloud Storage: Firebase (optional)
        • Cloud Storage: Aliyun OSS (optional)
        • Implementing Cloud Save and Load
        • Sharing Anchors with Photon
    • Tools
      • Single Pass Stereo Rendering
      • First Person View
      • Emulator
      • XR Streaming
      • Dual Screen Display
    • Miscellaneous
      • Access RGB Camera
      • NRSDK Coordinate Systems
      • MRTK2 Integration
      • MRTK3 Integration
      • Notification popup
      • Reset Camera
      • Render Metrics
      • Render MonoMode(Obsolete)
  • API Reference
  • Frequently Asked Questions
  • Design Guide
    • Design Guide Overview
    • Displaying
    • Interacting
    • Controlling
    • Navigating
Powered by GitBook
On this page
  • Introduction
  • How to use a phone as controller
  • Developer Guide
  • How to Debug a custom virtual controller in Unity Editor

Was this helpful?

  1. Development
  2. Input and Camera

Customize Controller UI

PreviousInteract with Unity UI (Tutorial)NextNRCameraRig

Was this helpful?

Introduction

When we release the XREAL Light glasses to consumers, this will only include the glasses and not the computing unit that was part of the dev kit. You will be able to plug XREAL Light into your own Android phone and use the phone as a 3DOF controller.

So if you want to create unique experiences that stand out from the rest you can fully customize your MR app's phone controller interface.

Notice: Although this feature is for mobile phones, you could still use the computing unit and preview your customized controller interface.

How to use a phone as controller

Controller Features Description

  • 3DoF Tracking

  • TouchpadRepresents "Trigger" button, and is also used as a touchpad. It can detect touching and swiping.

  • Home ButtonClick to call "Exit App" menu. Press and hold to recenter your controller. We would advise developers to not use this button when developing apps.

  • App Button Can be freely customized for your app, e.g. click to open an in-app menu or perform a special action.

Two ways to use

One of the great things about the XREAL phone controller is that you could easily customize its UI interface. Here are two ways to use XREAL phone controller:

  • The default way Simply drag the "NRInput" prefab into your scene. Then when you run the app on your device, a default virtual controller("NRVirtualDisplayer" prefab) will be automatically loaded. It has 3 common controller buttons(Trigger, Home, App) on it. This virtual controller is very similar to XREAL Light controller.

  • The custom way Drag the "NRInput" prefab into your scene. Then drag the "NRVirtualDisplayer" prefab into your scene and modify it according to your needs. For example, add some new buttons or change the style of the controller UI to match your application.

Developer Guide

  • Find the "NRVirtualDisplayer" prefab, and drag it to your scene.

  • Break this prefab.

  • Set the resolution of Game View in Unity Editor to 1080 x 2340.

  • Double click the "NRVirtualDisplayer" object in Hierarchy to find it in Scene View, then you could design buttons or other UI as you like.

  • Make sure three basic NRButton are set. If you don't need them, you could set these objects as false.

  • If you want a sample scene, check the "Input-VirtualController" scene in SDK demos.

How to Debug a custom virtual controller in Unity Editor

  • Before clicking play in Unity Editor, the game view resolution should be set to normal, like 1920*1080. Then click Play, find the "NRInput" object in the scene, and enable the "EmulateVirtualDisplayInEditor" checkbox.

  • When the checkbox is ticked, a virtual controller will be shown at the right-bottom corner in the Game View. You can interact with this virtual controller with your mouse.

  • Be aware that once the emulator is enabled, all the controller button events will be fired from the virtual controller on the game screen. The original way(mouse button emulate controller button) would not work.

../../../_images/cpc1.jpg
../../../_images/cpc5.png
../../../_images/cpc4.png
../../../_images/cpc6.png
../../../_images/cpc3.png
../../../_images/cpc2.png
../../../_images/cpc7.png
../../../_images/cpc8.png