読者です 読者をやめる 読者になる 読者になる

athome-developer’s blog

不動産情報サービスのアットホームの開発者が発信するブログ

HololensでAirTapしてみる

こんにちは、情報システム部の高野です。
なんだかんだあって着手できなかったHololensの開発ですが
ようやく少しずつ触れるようになりました。
Unity初心者の私がなんとか動かせるようになるまでの記録を残しておこうかと思います。
私同様にHololensで初めてUnity触る方々の一助になれば幸いです。

今回は、タイトルの通りAirTapでオブジェクトに触れてみようかと思います。

HoloToolkitをパッケージ化しておく

matatabi-ux.hateblo.jp
こちらの記事を見てHoloToolkitをパッケージ化しておくことをお勧めします。
パッケージ化しなくてもAssetをコピーすれば同様のことはできます。
HoloToolKitが更新されておりExportする時に選択を外す項目が上記の記事とは変わっています。
f:id:taktak1974:20170509175706p:plain

Unityでプロジェクトを作成する

Unityを起動してプロジェクトを新規に作成します。
プロジェクト名だけ適当に付けて他はデフォルトのままで
「Create project」ボタンをクリックします。

HoloToolkitをインポートする

「Assets」メニューから「Import Package」→「Custom Package」を選択します。
作成しておいたHoloToolkitのPackageファイルを開きます。
Importダイアログが出るのでそのまま「Import」ボタンをクリックします。
インポートが終わるとProjectウィンドウのAssetsフォルダが下図のようになります。
f:id:taktak1974:20170509180807p:plain

プロジェクトなどの設定をする

「HoloToolkit」メニューから「Configure」→「Apply Hololens Project Settings」を選択します。
全ての項目にチェックがある状態で「Apply」ボタンを押下します。
Unityの再起動が求められるので再起動します。

「HoloToolkit」メニューから「Configure」→「Apply Hololens Scene Settings」を選択します。
全ての項目にチェックがある状態で「Apply」ボタンを押下します。*1


「HoloToolkit」メニューから「Configure」→「Apply Hololens Capability Settings」を選択します。
「Spatial Perception」にチェックを入れて「Apply」ボタンを押下します。
これは常に必要ではありませんが、今回のアプリでは必要になります。

カメラを変更する

HierarchyウィンドウのMain CameraDirectional Lightを右クリックし「Delete」メニューで削除します。
Projectウィンドウで「Assets」→「HoloToolkit」を選択しCameraと入力し検索します。
f:id:taktak1974:20170509182205p:plain
HololensCameraが検索されるのでHierarchyウィンドウのシーンの直下にドラッグ&ドロップします。
※今後特に指定しない場合はシーンの直下を指します。
Ctrl+SでSceneを保存します。ここではScene名を「Main」とします。
f:id:taktak1974:20170509182448p:plain

3Dオブジェクトを配置する

配置するオブジェクトはなんでも良いのですが、ここではSphereを配置することにします。
Hierarchyウィンドウの「Create」から「3D Object」→「Spehre」を選択します。
Inspectorウィンドウで位置と大きさを調整します。
Position Z = 1
Scale X/Y/Z = 0.2

デフォルトのMaterialだと味気ないので変更します。
ProjectウィンドウのAssetsフォルダで右クリックし「Create」→「folder」を選択します。
作成されたフォルダの名称をMaterialsに変更します。
Materialsフォルダを右クリックし「Create」→「Material」を選択します。
作成されたマテリアルの名称をBlueに変更します。
Blueマテリアルを選択した状態でInspectorウィンドウを開き
「Albedo」の白い部分をクリックします。
ColorPickerが表示されるので青っぽく変更します。
HierarchyウィンドウでSphereを選択しProjectウィンドウからBlueマテリアルを
Inspectorウィンドウの空き領域にドラッグ&ドロップします。

この状態で一度ビルドしてみます。
「File」メニューから「Build Settings」を選択します。
ダイアログが表示されるので「Unity C# Projects」にチェックをします。
それ以外はデフォルトのままで大丈夫です。
「Add Open Scenes」ボタンをクリックしMainシーンを登録します。
「Build」ボタンをクリックするとフォルダ選択ダイアログが表示されます。
ここでは新規フォルダAPPを作成し選択します。
ビルドが終わるとプロジェクトフォルダが開きますので先ほど作成したAPPフォルダを開きます。
ソリューションファイルがあるのでVisualStudioで開きます。

VisualStudioでソリューションを開いたら
ビルド設定の「プラットフォーム」をx86に「実行環境」をリモートコンピュータに変更します。
リモート接続ダイアログが表示されるのでHololensのIPアドレスを入力し「選択」ボタンをクリックします。
デバッグを実行するとHoloLensへの配置が開始されます。
初回配置時はかなり時間がかかります。
アプリケーションが起動されると下図のように青い球体が表示されます。
f:id:taktak1974:20170512101648j:plain

オブジェクトをAirTapする

Unityに戻ります。
ProjectウィンドウのHoloToolkitフォルダを選択しCursorと入力し検索します。
今回はDefaultCursorを使用しますのでDefaultCursorプレハブを
Hierarchyウィンドウにドラッグ&ドロップします。
ちなみにプレハブはこんなアイコンです。
f:id:taktak1974:20170512102431p:plain

次にもう一度Projectウィンドウでinputと入力し検索します。
InputManagerプレハブが検索されるのでそれをHierarchyウィンドウにドラッグ&ドロップします。
これでカーソルが目線の位置に表示されます。

AirTapでオブジェクトが反応するようにするにはスクリプトを書く必要があります。
ProjectウィンドウのAssetsフォルダ内にScriptsというフォルダを作成します。
Scriptsフォルダ内で右クリックし「Create」→「C# Script」を選択します。
作成されたScriptファイルの名称をSphereManagerに変更します。
HierarchyウィンドウでSphereを選択しInspectorウィンドウを開きます。
「Add Component」ボタンをクリックしSphere Managerを検索して選択します。*2
今回は、AirTapされたら重力で下に落ちるようにしたいので
さらに「Add Component」ボタンをクリックしRigidbodyを検索して選択します。
Rigidbody内の「Use Gravity」のチェックを外します。
このチェックが付いていると起動した瞬間に下に落ちてしまいます。
InspectorウィンドウでSphere Manager(Script)を右クリックし「Edit Script」を選択します。
VisualStudioが起動します。ターゲットフレームワークの選択ダイアログが出たらそのまま「OK」ボタンをクリックします。
.Editorが付いていない方のプロジェクトで
「Assets」→「Scripts」→「SphereManager.cs」を開きます。
下記の様に修正します。

using HoloToolkit.Unity.InputModule;
using UnityEngine;

public class SphereManager : MonoBehaviour, IInputClickHandler
{
    private void Start()
    {
        InputManager.Instance.PushFallbackInputHandler(gameObject);
    }

    public void OnInputClicked(InputClickedEventData eventData)
    {
        var rigid = GetComponent<Rigidbody>();
        rigid.useGravity = true;
    }
}

AirTap時にOnInputClickedメソッドが呼ばれるので
ここでuseGravityをtrueにし球体に重力を与えます。
※以前のHoloToolkitだとOnSelectでAirTapを拾えたようですが現在は動作しないようです。

ファイルを保存しUnityに戻り上記と同じ手順でビルドします。
現在2つVisualStudioが開いていると思いますが、Appフォルダ内のソリューションを開いている方を選択します。
ソリューションの再読み込みを促されるので実行します。
デバッグを開始して起動するとAirTapができるようになっています。
AirTapして球体が下に落ちれば成功です。

床を認識する

Unityに戻ります。
ProjectウィンドウのHoloToolkitフォルダ内でSpatialMappingを検索します。
SpatialMappingプレハブをHierarchyウィンドウにドラッグ&ドロップします。
再度ビルドしVisualStudioでHololensに配置します。
アプリが起動したらワイヤーフレームが表示されてからAirTapします。*3
床の上で止まれば成功です。
*4



最終的にはこのような動きになります。
f:id:taktak1974:20170512142908g:plain

今回はここまでになります。さて次回は何をやろうかな?


弊社ではエンジニアを募集しています。
興味がある方は下記からエントリお願いします。
athome-inc.jp

*1:後でカメラ削除するのであまり意味ないかも?

*2:InspectorにScriptファイルをドラッグ&ドロップでも可

*3:ワイヤーフレーム表示前にタップすると床が認識されずに突き抜けてしまいます

*4:「Apply Hololens Capability Settings」で「Spatial Perception」にチェックを入れておかないと 空間の認識がされないので注意が必要です。