HoloLens 注視入力ボタンをつくーる

大晦日ハッカソン2018の進捗です。

AI-EXPO2018で展示したときに作った注視入力ボタンについてまとめました。
下記動画のマニュアルの左右にある「次へ」もしくは「戻る」ボタンに視線を合わせると、ゲージがたまりページをめくる機能です。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> <a href="https://twitter.com/hashtag/%E3%83%8A%E3%83%AC%E3%82%B3%E3%83%A0VR?src=hash&amp;ref_src=twsrc%5Etfw">#ナレコムVR</a> 椅子の組み立てマニュアル <a href="https://twitter.com/hashtag/AIEXPO?src=hash&amp;ref_src=twsrc%5Etfw">#AIEXPO</a> 2018 <a href="https://t.co/n0aOVVqA0C">https://t.co/n0aOVVqA0C</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 藤本賢志(ガチ本) (@sotongshi) <a href="https://twitter.com/sotongshi/status/1079729907758854144?ref_src=twsrc%5Etfw">2018年12月31日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

もちろん、**実機なし**でも確認できます！

## 開発環境
- HoloLens RS5
- Visual Studio 2017 (15.9.2)
- Unity 2017.4.11f1
- HoloToolkit-Unity-2017.4.3.0.unitypackage
- HoloToolkit-Unity-Examples-2017.4.3.0.unitypackage

## Unityプロジェクト作成
HoloToolkitをインポートし、MixedRealityCameraParent、InputManager、DefaultCursorをHierarchyにD&Dします。
MixedRealityCameraParent->MixedRealityCameraの設定をします。

## ボタンの作成
Hierarchy->UI->Buttonを作成します。CanvasのRender Modeを`World Space`にし、Rect Transformおよび、ButtonのRect Transformを調整し、カメラの前に来るようにします。
Button->Image(script)->Source ImageをHoloToolkitのサンプルにある`KeyboardKeyGlyphs_Shift_Symbols`にします。
<img width="278" alt="focusedbutton01.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/95eec9a7-9d21-ba31-a579-1d52ed157659.png">

Buttonの子オブジェクトにImageを作成します。Source Imageは`KeyboardKeyGlyphs_Shift_Symbols`の円のみを残したもの`KeyboardKeyGlyphs_Circle`を作りました。
この円の部分がゲージになります。Image Typeを`Filled`、Fill Orientationを`Top`にすれば、時計回りにゲージがたまります。
<img width="276" alt="focusedbutton02.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/274b4d2c-faf8-1bf7-27df-d747cc3e8b79.png">

## FocusedButtonManager.cs
FocusedButtonManager.csを作成し、Buttonにアタッチします。注視したことを判定するためにBox Collidarをアタッチします。Collidarのサイズを調整してください。
ボタンに視線を合わせてからゲージがたまるまでの時間が`waitTime`になります。
**Do Something Here**のところに、注視入力でやりたいことを記述してください。
今回はCubeのScaleを変えてみました。

~~~csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using HoloToolkit.Unity.InputModule;

public class FocusedButtonManager : MonoBehaviour, IFocusable
{

    public Image image;
    private float waitTime = 2.0f;
    private bool progress;
    public GameObject cube;

    // Use this for initialization
    void Start()
    {
        image.fillAmount = 0.0f;
        progress = false;
    }

    // Update is called once per frame
    void Update()
    {
        if (progress == true)
        {
            image.fillAmount += 1.0f / waitTime * Time.deltaTime;
            if (image.fillAmount >= 1.0f)
            {
                /*--- Do Something Here ---*/
                cube.transform.localScale += new Vector3(0.1f, 0.1f, 0.1f);
                /*--- Do Something End ---*/
                image.fillAmount = 0.0f;
                progress = false;
            }
        }
        else
        {
            image.fillAmount = 0.0f;
        }
    }

    public void OnFocusEnter()
    {
        progress = true;
    }

    public void OnFocusExit()
    {
        progress = false;
    }
}
~~~

## 実行
ボタンに視線を合わせると、ゲージがたまり、Cubeが大きくなります。
ゲージがたまっている途中で視線を外すと、ゲージがリセットされます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> 注視入力ボタンをつくーる: <a href="https://t.co/LXAQ3cFZ8E">https://t.co/LXAQ3cFZ8E</a> via <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a></p>&mdash; 藤本賢志(ガチ本) (@sotongshi) <a href="https://twitter.com/sotongshi/status/1079723195098378241?ref_src=twsrc%5Etfw">2018年12月31日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ソースコードは[こちら](https://github.com/SatoshiRobatoFujimoto/HoloLensFocusedButton.git)。

## 参考文献
- <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Unity5 Radial Progress Bar Tutorial HD <a href="https://t.co/iznQvzYUSi">https://t.co/iznQvzYUSi</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 藤本賢志(ガチ本) (@sotongshi) <a href="https://twitter.com/sotongshi/status/1079729654150250499?ref_src=twsrc%5Etfw">2018年12月31日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- [HoloLensに注視入力を追加してみる～エアータップを使わないUIに挑戦～](https://qiita.com/decchi/items/b8afda3a756edec7f2c7)