はじめに
こんにちは。HoloLensチームの道下です。
今回はNreal Airのアプリでオブジェクトの操作やUIを使ったインタラクションを紹介します。
本記事はUnityを使ったNreal Airのアプリを開発する手順の後半になります.
Nreal Air用の設定やビルドの方法はNreal Airのアプリケーションを開発する 前編で紹介しているため、省いて紹介します。良ければ前回と合わせてご覧ください。
開発環境(前編と同じ)
Windows10
NRSDK 1.8.0
UnUnity 2020.3.25f1
Cubeオブジェクトとのインタラクション
オブジェクトの情報を取得する
まずはCubeオブジェクトをクリックし、情報を取得してみましょう。
今回はスマホ(コントローラー)から伸びるRayを使って、オブジェクトの情報を取得します。
シーンに以下3つを配置します
- NRCameraRig
- NRInput
- Cube
Cubeは実機確認時に立体感が出るように少し傾けておきます
次に「CubeInteraction.cs」を作成し、Cubeオブジェクトにアタッチします
using UnityEngine; using UnityEngine.EventSystems; public class CubeInteraction : MonoBehaviour, IPointerClickHandler { public void OnPointerClick(PointerEventData eventData) { var ClickedObject = eventData.pointerPress; Debug.Log($"name : {ClickedObject.name}\\n" + $"potision : {ClickedObject.transform.position} , " + $"rotation : {ClickedObject.transform.rotation.eulerAngles}"); } }
シーンを実行し、RayをCubeに当てた状態で右下に表示されたNrealのコントローラーの操作エリアをクリックします。
コンソールにCubeのオブジェクト名、位置、回転の情報が表示されます。
これで、ユーザーの入力からCubeオブジェクトの情報を取得することができました。
オブジェクトを回転させる
情報を取得するだけでは面白さに欠けるので、クリックしたオブジェクトを回転させてみましょう
先ほど作成したスクリプトを書き換えていきます。
using UnityEngine; using UnityEngine.EventSystems; public class CubeInteraction : MonoBehaviour, IPointerClickHandler { // 回転角度 [SerializeField] private float angle = 90f; // 回転方向 Vector3.leftは-x軸回転 [SerializeField] private Vector3 axis = Vector3.left; // 回転速度 [SerializeField] private float speed = 3f; private Quaternion targetRotation; private void Start() { targetRotation = this.transform.rotation; } public void OnPointerClick(PointerEventData eventData) { // 角度を設定する targetRotation = Quaternion.AngleAxis(angle, axis) * transform.rotation; } private void Update() { transform.rotation = Quaternion.Lerp(transform.rotation, targetRotation, Time.deltaTime * speed); } }
シーンを実行し、RayをCubeに当てた状態で右下に表示されたNrealのコントローラーの操作エリアをクリックします。
Cubeオブジェクトが-x軸方向に90度ずつ回転します
また、インスペクタからAngleやAxisを変更すると、様々な角度や回転方向に回転させることなどができますので、ぜひ試してみてください。
これで、Cubeオブジェクトを回転させることが出来ました。
Cubeオブジェクトとのインタラクションに関しては以上です。
UIとのインタラクション
UIを操作する
先ほどはCubeオブジェクトに対応した情報の取得、操作を行いました。
ここでは、Unityが用意しているuGUIを操作していきます。シーンは先ほどのCubeを操作したシーンをそのまま使います。
まず、シーン上にボタンを配置します。
ボタンを作成するとCanvasが自動で生成されます。次にこのCanvasをNreal Airで操作できるように設定を変更していきます。
CanvasをWorld Spaceに設定する
CanvasのRender ModeをWorldSpaceに変更します。
その後、CanvasのRectTransformを以下のように変更してUIを目の前に移動させます
CanvasのGraphic Raycasterを削除してCanvas Raycast Target をアタッチする
Graphic RaycasterをRemoveし、AddComponentからCanvas Raycast Targetをアタッチします。
シーンを実行し、Rayをボタンの近くに移動させると、ボタンを押せることが確認できます。
UIからCubeオブジェクトを操作する
最後にボタンを押すことでオブジェクトを回転させてみましょう。
現状だとボタンとCubeオブジェクトが被っているので、下記のように少し移動させておきます。
では、ボタンクリックでCubeオブジェクトが回転するようにスクリプトを書き換えていきます。
using UnityEngine; using UnityEngine.UI; public class CubeInteraction : MonoBehaviour { // 回転角度 [SerializeField] private float angle = 90f; // 回転方向 Vector3.rightは-x軸回転 [SerializeField] private Vector3 axis = Vector3.left; // 回転速度 [SerializeField] private float speed = 3f; // ボタン [SerializeField] private Button button = null; private Quaternion targetRotation; private void Start() { targetRotation = this.transform.rotation; button.onClick.AddListener(() => { // 角度を設定する targetRotation = Quaternion.AngleAxis(angle, axis) * transform.rotation; }); } void Update() { transform.rotation = Quaternion.Lerp(transform.rotation, targetRotation, Time.deltaTime * speed); } }
シーンを実行してボタンを押すと、Cubeが回転することが確認できます。
UIとのインタラクションに関しては以上です。
ビルドして実機で確認する
アプリをビルドしてNreal Airで確認します。ビルドの手順は前編をご覧ください
おわりに
前後編に分けてNreal Airのアプリ開発について紹介してきました。
今回はユーザーの入力からオブジェクトを操作することで、前回よりMRな体験ができました。
今後もNreal Air含め様々なデバイスを調査していこうと考えております。