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:

1. Select a range of appropriate inputs to use with the controller.

2. Write code in C# to receive user inputs such as the Home, Bumper, Trigger and Touchpad.

3. Activate, rotate, and move a GameObject by using the input.

4. Interact with physical objects and UGUI in the unity environment.

Objective:

1. When pointing the controller at the cube, its color will change to green.

2. The color of the cube will randomly change when you press the trigger button.

3. The cube will rotate with the controller.

4. Activate or deactivate the cube for rotation by pressing the UGUI button.

Steps：

1. Drag NRCameraRig and the NRInput prefab to the scene hierarchy.

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).

3. Create a script named “CubeInteractiveTest.cs” as follows and add it to the cube.

public class CubeInteractiveTest : MonoBehaviour, IPointerClickHandler, IPointerEnterHandler, IPointerExitHandler
{
 private MeshRenderer m_MeshRender;

 void Awake () {
     m_MeshRender = transform.GetComponent<MeshRenderer>();
 }

 void Update()
 {
     //get controller rotation, and set the value to the cube transform
     transform.rotation = NRInput.GetRotation();
 }

 //when pointer click, set the cube color to random color
 public void OnPointerClick(PointerEventData eventData)
 {
     m_MeshRender.material.color = new Color(Random.Range(0f, 1f), Random.Range(0f, 1f), Random.Range(0f, 1f));
 }

 //when pointer hover, set the cube color to green
 public void OnPointerEnter(PointerEventData eventData)
 {
     m_MeshRender.material.color = Color.green;
 }

 //when pointer exit hover, set the cube color to white
 public void OnPointerExit(PointerEventData eventData)
 {
     m_MeshRender.material.color = Color.white;
 }
}

4. Add a DirectLight to brighten the cube.

image11

5. Add a Canvas and delete the EventSystem.

6. Set the Canvas RenderMode to WorldSpace, and then set its position and scale to an appropriate value such as that listed below.

7. Remove the “Graphic Raycaster” component from it and add <u>Canvas Raycast Target</u>.

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.

image17

9. Set the buttons to an appropriate position and add the SetActive function as their OnClick events.

image17

image18

10. Finally, compile the app. An interactive mixed reality app utilizing user input with a XREAL Light controller is complete.