Interact with Unity UI (Tutorial)
To help you get started with integrating control into your own app, we have prepared a sample case study.
By reading the tutorial you will be able to:
Select a range of appropriate inputs to use with the controller.
Write code in C# to receive user inputs such as the Home, Bumper, Trigger and Touchpad.
Activate, rotate, and move a GameObject by using the input.
Interact with physical objects and UGUI in the unity environment.
Objective:
When pointing the controller at the cube, its color will change to green.
The color of the cube will randomly change when you press the trigger button.
The cube will rotate with the controller.
Activate or deactivate the cube for rotation by pressing the UGUI button.
Steps:
Drag NRCameraRig and the NRInput prefab to the scene hierarchy.
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller07.jpg&width=768&dpr=4&quality=100&sign=582967b3&sv=1)
2. Create a cube. In the Inspector window, set its position to (0, 0.1, 3), and scale to (0.3, 0.3, 0.3).
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller08.jpg&width=768&dpr=4&quality=100&sign=e23a1a4&sv=1)
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller09.jpg&width=768&dpr=4&quality=100&sign=6b4f1f41&sv=1)
3. Create a script named “CubeInteractiveTest.cs” as follows and add it to the cube.
4. Add a DirectLight to brighten the cube.
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller11.jpg&width=768&dpr=4&quality=100&sign=9d275686&sv=1)
5. Add a Canvas and delete the EventSystem.
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller12.jpg&width=768&dpr=4&quality=100&sign=3d96c1e5&sv=1)
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller13.jpg&width=768&dpr=4&quality=100&sign=7581648&sv=1)
6. Set the Canvas RenderMode to WorldSpace, and then set its position and scale to an appropriate value such as that listed below.
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller14.jpg&width=768&dpr=4&quality=100&sign=b4ef2ca7&sv=1)
7. Remove the “Graphic Raycaster” component from it and add <u>Canvas Raycast Target</u>.
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller15.jpg&width=768&dpr=4&quality=100&sign=323fe39a&sv=1)
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller16.jpg&width=768&dpr=4&quality=100&sign=ead64689&sv=1)
8. Add two buttons to the Canvas as its children. Name one button activeBtn
and the other deactive
. Remember to also change the button text.
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller17.jpg&width=768&dpr=4&quality=100&sign=d938b7cc&sv=1)
9. Set the buttons to an appropriate position and add the SetActive
function as their OnClick events.
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller17.jpg&width=768&dpr=4&quality=100&sign=d938b7cc&sv=1)
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller18.jpg&width=768&dpr=4&quality=100&sign=d7920d4b&sv=1)
10. Finally, compile the app. An interactive mixed reality app utilizing user input with a XREAL Light controller is complete.
![](https://xreal.gitbook.io/~gitbook/image?url=https%3A%2F%2Fnrealsdkdoc.readthedocs.io%2Fen%2Flatest%2F_images%2Fcontroller19.jpg&width=768&dpr=4&quality=100&sign=5665ecee&sv=1)