HoloLensのUIサンプル「MR Design Lab Unity」の概要と、gitを使わない環境構築手順

HoloLensのアプリ開発にはHoloTool Kitを使うことが一般的ですが、2017年6月、Microsoftより新しい開発方法が発表されました。

これはMR Design Labと呼ばれるもので、HoloLens(あるいはImmersive Deviceも含む)のUIやデザインのガイドライン的なものです。

しかし、アプリ開発の実装方法に大幅な変更が入っており、純粋に開発用のSDKとしても色々と勉強になります。

日本でも、すでにこれらの方が使い方や中身の解説をされています。

qiita.com

blog.d-yama7.com


ここでは、MR Design LabのSDKを使って実際にHoloLensのアプリを作りたいときを想定して、どこにどんなコードがあるのかを簡単に紹介したいと思います。

また、7/27時点ではgitで一部コードを取得する必要がありますが、今回の私のようにgitを使えなかったときようの初期設定も解説します。

なお、今回は以下の環境で検証しています。

・Unity 5.6.2f1
Windows 10 Pro Creators Update

=======

目次

1. MR Design Lab Unityの概要

2. gitを使わずにMR Design Lab Unityのソースコードを使ってHoloLensアプリを作る準備の手順

=======


1. MR Design Lab Unityの概要


7/27時点では4つのUnityプロジェクトが公開されています。

1-1. MR Design Lab Unity

MR Design Labの仕組みを使って自分でHoloLensアプリを作るための一式です。下記の「MR Design Lab Unity」を選択します。

github.com


後述のように、HUXフォルダやHoloLensフォントの追加が必要です。

1-2. MR Design Lab Unity Example

置き場所は上記と同じです。ボタンやメニューバーなどのアイコン、画面切り替え中のダイアログなどの画面部品が入っています。

1-3. MRDesignLabs_Unity_PeriodicTable

元素周期表を確認するサンプルアプリです。デプロイして操作すると、目の前に周期表が展開されます。それぞれの元素を選択すると、目の前で説明文が展開されます。

文字の大きさや、アニメーションなどが参考になります。

github.com

1-4. MRDesignLabs_Unity_LunarModule

1979年に発売されたゲーム「Luner Lander」を模したゲームのサンプルアプリです。

github.com

プレイする前に部屋をスキャンし、始まると自分の部屋が惑星のようにマッピングされます。

また、両手のAirTapやXBox Controllerを使うため、それらの実装方法を学ぶこともできます。

両手の操作についてはこのように起動時のチュートリアルで両手を認識させるシーンがあります。

f:id:Takyu:20170725075212j:plain


しかし、チュートリアルがなぜかうまくいかず(AirTapのドラッグが効かない)、両手での操作は試せませんでした。

機会あればまた試してみようと思います。

なお、こちらには後述のHUXフォルダやHoloLens fontは同梱済みです。

2. gitを使わずにMR Design Lab Unityのソースコードを使ってHoloLensアプリを作る準備の手順


まず、gitを使う場合は、gitコマンドでリポジトリをクローン後、

本来はgitコマンドでMR Desing Lab_Unityを取得後に、

cd MRDesignLabs_Unity
git submodule init
git submodule update

を実行すれば使うことができます。ここでは、gitを使わない場合の手順を解説します。



まず、以下の①②の手順で、ソースコードをダウンロードします。

github.com

f:id:Takyu:20170728085625j:plain

この方法だと、その時点の最新版しかダウンロードできません。古いバージョンのソースコードをダウンロードしたいときはRelease というタブでページを切り替え、希望のバージョンのタグを選択します。詳細手順は下記を参考ください。

magicbullet.hatenablog.jp


ダウンロードしたファイルを解凍し、MR Desgin Lab Unityというフォルダだけ任意の場所に移動します。

f:id:Takyu:20170728085935p:plain


その後、Unityで開きます。

f:id:Takyu:20170728090157p:plain

f:id:Takyu:20170728090246p:plain

このような画面が出るときは、(念のためバックアップを確認後)Continueをクリックします。


開くと、このようにエラーがでます。

f:id:Takyu:20170728091117p:plain

これはHUXというフォルダが入っていないためです。


HUXはここから取得できます。

github.com

このページに記載されていますが、HUXはMR Design Lab UnityのSubmoduleという位置付けです。

このHUXフォルダを、UnityプロジェクトのMRDesignLabというフォルダにドラッグします。

f:id:Takyu:20170728091258p:plain

すると、エラーが消えてFontの追加指示画面が出ます。

f:id:Takyu:20170728091543p:plain

Warningが多いですが、スクリプトに含まれているメソッドがobsoleteです、とか、用意されているモデルのメッシュの数に関するものなどです。ビルドには影響ありません。

Fontの追加については、Download Fontをクリックしてダウンロードし、指定の場所にfontのttfファイルをドラッグするだけです。

Assets/MRDesignLab/HUX/Profile /DefaultButtonIconProfileFont というファイルがあります。Project Viewで「DefaultButtonIconProfileFont」を検索してもよいと思います。

f:id:Takyu:20170729080559p:plain


これでMR Design Lab Unityのプロジェクトをベースにして、任意のHoloLensアプリを作る準備ができました。

また変更するとやり方が変わる可能性がありますが、しばらくはこの手順でいけると思います。