【Hololens】Mixed Reality Toolkitを使う【AirTap】

# 環境
* Windows 10
* Unity 2017.1.0p4
    2017.2でビルドがうまく行かなかったため、今回は2017.1を使用しております。

# 準備
## ダウンロード
Unity向けMixedRealityToolKitダウンロード先：
https://github.com/Microsoft/MixedRealityToolkit-Unity/releases

## インポート
Assets > Import Package > Custom Package
ダウンロードしたパッケージをインポートする

# Unityの設定
## 自動設定
MixedRealityToolkitをインポートするとUnityのメニューに「Mixed Reality Toolkit」が追加される。

![20171207-165054.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/9e6417f1-542c-bd23-e879-a75e7f7bb6c3.jpeg)

設定したい項目を選ぶと以下のような画面が出るので、必要な箇所にチェックを入れ、Applyをクリック。
今回は初期の状態で実行。

![20171207-165235.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/9e45ae8d-8096-a776-634d-2ef2c01c8537.jpeg)

## ビルド設定
Build Settingsから「Universal Windows Platform」を選択し、「Switch Platform」をクリック。
次にPlayer Settingsを開きOther Sttings(Unity2017.2の場合はXR Settings）の「Virtual Reality Supported」にチェックを入れ、「Windows Holographic」を選択します。

![20171207-165756.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/b07fcd02-b769-161d-3541-ffad6af3d96d.jpeg)

# カーソル関係
## カーソルの追加
参考：[HoloToolKitのAirTapに関するメモ(AirTapイベントの取得)](https://qiita.com/hygradme/items/a0ab5ae8701d2c0c9f54)
Holotooolkit > Input > Prefabs
からInputManagerをHierarchyに追加。
Holotooolkit > Input > Prefabs  > Cursor
から好きなCursorのprefabをHierarchyに追加。

![20171206-201217.jpg](D:\Fukumoto\30.資料まとめ\02.Qiita\MixedRealityToolkit\20171206-201217.jpg)

カーソルをオブジェクトにかぶせると形が変わる。

InputManager内にあるEditorHandsInputは使用しないので非アクティブにしておく（画面に両手のカーソルが表示されていたいので）

## 視線イベント
視線のイベントはHoloToolkit.Unity.InputModuleのIFocusableを継承すると

    OnFocusEnter()
    OnFocusExit()
    
でが呼ばれる。
以下サンプルコード

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using HoloToolkit.Unity.InputModule;

    public class CubeGazefocus : MonoBehaviour, IFocusable {
        public Material focusOn;
        public Material focusOut;

        public void OnFocusEnter()
        {
            GetComponent<Renderer>().material = focusOn;
        }

        public void OnFocusExit()
        {
            GetComponent<Renderer>().material = focusOut;
        }
    }


HierarchyにCubeを追加し、このコードをアタッチ。
BlueとGreenのMaterialを作成し、以下のように設定

![20171207-100607.jpg](D:\Fukumoto\30.資料まとめ\02.Qiita\MixedRealityToolkit\02.カーソル関係\01.Gaze\20171207-100607.jpg)

青色のCubeが視線を合わせると緑色に変わる。

![20171207-95755.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/200460a0-d87c-648e-63a2-a49f113b9507.jpeg)

![20171207-95816.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/eac19ecb-fb61-e994-48f5-39a957d19ce2.jpeg)

## AirTapイベントの追加
AirTapのイベントはHoloToolkit.Unity.InputModuleのIInputClickHandlerを継承すると

    OnInputClicked(InputClickEventData eventData){}
が呼ばれる。
以下サンプルコード

    using UnityEngine;
    using System.Collections;
    using HoloToolkit.Unity.InputModule;

    public class CubeCommand : MonoBehaviour, IInputClickHandler
    {
        public Material first;
        public Material second;

        public void OnInputClicked(InputClickedEventData eventData)
        {
            var material = GetComponent<Renderer>().material;
            GetComponent<Renderer>().material = (material.color == first.color) ? second : first;
        }
    }

このコードを先程のCubeにアタッチし、以下のように設定。

![20171207-101302.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/fce49cfb-78b7-0737-dc76-22373646e72a.jpeg)

タップすると赤と緑で色が変わる。

![20171207-101438.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/5db9fe70-3c4e-0365-5398-877fa680bdf1.jpeg)

![20171207-101512.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/84f3ce8e-0b55-7393-ce09-8bcbf32dd640.jpeg)

## ボタンの追加
UnityのUI Buttonがそのまま使用できる。
Create > UI > Button
よりボタンを追加。
CanvasのRendarModeを「World Space」に変更。
ボタンを見やすい位置へ移動する。
以下のサンプルコードをCubeにアタッチする。
※AirTapイベントで作成したスクリプトは不要です。

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;

    public class ClickButton : MonoBehaviour {
        public Material click1;
        public Material click2;
        private bool isTouchOn = false;

        public void OnClicked()
        {
            if (isTouchOn)
            {
                isTouchOn = false;
                GetComponent<Renderer>().material = click1;
            }
            else
            {
                isTouchOn = true;
                GetComponent<Renderer>().material = click2;
            }
        }
    }

![20171207-143342.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/448bc9db-0b37-853a-ae2d-ffd2e99570d4.jpeg)

ボタンイベントに作成したOnClickedを設定する。

![20171207-143643.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/16734d81-74a7-161b-2f87-d5aab4e8ee17.jpeg)

これでボタンをAirTapする度にCubeの色が変わる

![20171207-144755.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/1e5639c3-a36c-eef6-23f6-56511ae8e486.jpeg)


![20171207-144827.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/8a88b3f0-6bf4-ce37-1568-449313e2cbd2.jpeg)