Unity MARSスターターテンプレートの魅力

＜このページで学べる内容＞

前回の記事では、Unity MARSの概要や基本的な使い方を紹介しました。今回は、Unity MARSに含まれるスターターテンプレートについて、使い方を含めて紹介します。今回の検証は以下の環境で確認しています。・Unity 2019.4.12f1 LTS ・Unity MARS 1.1.1 ・macOSX 10.15.7（Unityを動かす環境）・iOS 13.7（iPhone 8）、iPad OS 13.7（iPhone 6th）・Windows Version 19041.1109 （HoloLens2）

2020/12/04

スターターテンプレートとは

スターターテンプレートとは、シーン、オブジェクト、コンポーネントなどを設定した状態で提供されるテンプレートです。

Unityの画面から呼び出し可能で、2020年11月時点ではこちらのUnity Blogで紹介しているように7つのテンプレートが利用できます。

ただし、Unity MARSのunitypackageをインポートした直後は「Blank」、「Facemack」、「Tabletop」、「Miniature」の4つしか選べません。残り3つを使うためには、こちらで書かれている通りpackage managerから追加テンプレートをダウンロードする必要があります。

「Samples」の「Import into Project」と表示されているボタンをクリックすると、先ほどのように7つのテンプレートが選べる様になります（なお上の画像は追加テンプレートをインポート済みのため「Import again」と表示されています）。

まず7つのテンプレートの概要と、何をしたいときに便利かを説明します。

#	テンプレート名称	内容	こんなときに便利
1	Blank	検出した平面上にCubeを表示。検出した特徴点、平面を可視化	Semantic Tags(平面、顔などARの表示条件を選択式で指定する方法）の使い方を確認したいとき。ここでは平面 (floor) が検出条件に指定されています。
2	FaceMask	顔のパーツ（目、鼻、口など）を認識対象にしてAR表示	顔認識アプリを作りたいとき AR表示したいオブジェクトを認識対象の子オブジェクトにする必要がある
3	TableTop	plane detectionで50cm四方をを検出(=テーブルの幅程度)、あるいは床を検出したときに3DCGオブジェクトをAR表示	２つ以上の条件 (and/orどちらも)で3DCGオブジェクトを表示させるProxy Groupの使い方を確認したいとき例：特定のマーカまたは/かつ床を検出したらAR表示
4	Miniature	TableTopと同様。ただし、WorldScaleの値が変わっているので、表示される3DCGオブジェクトが小さくなる	TableTopと同等だが、表示させるオブジェクトを小さくする方法を確認したいとき補足：World Scaleの値を大きくすることで表示オブジェクトが小さくなる例：街の3DCGモデル全体をテーブルに表示
5	Game - Simple	空間に複数の宝石とロボットがAR表示。カメラ越しに任意の平面をタッチすると、その場所にロボットが移動して宝石を回収する	ARのゲームを作りたいとき
6	Game - Advanced	Game -Simpleと同様。ただし、ロボットの表示位置をコントロールできる	Game -Simpleと同様。また、Replicatorsが使われているので、プロキシを複製して同じAR表示条件を増やしたいとき
7	Training Factory	ガイド付きのコンテンツ。	GUIの表示、GUI操作によるコンテンツの進行、HoloLens2/MagicLeapなどHMDにも対応したレスポンシブ対応を確認したいとき

Unity MARSはProxy、Semantic Tag、World Scaleなど、これまでのUnityになかった独特の機能が多くみられます。7つのテンプレートの各シーン、およびiPhoneなどにデプロイして動作を見ることで、それらの独特の機能をどうやって使えばいいかがわかるようになっています。

Training Factoryテンプレートから学ぶARアプリの作り方

この記事では7つのテンプレートのうち、特に「Training Factory」を元に説明していきます。Training Factoryには色々な機能が入っています。しかし、私の場合、テンプレートを開いて少し見るだけだと、どんなことができるかすぐにはわかりませんでした。そこで、Training Factoryを参考にして、汎用的に使われそうな機能の実装方法を紹介します。

Training Factoryシーンの動作確認方法

Training Factoryには「Start – Scan Area」から始まり、「Finish」まで6つのステップがあります。

最初のステップ「Start Scan Area」の進行条件にMarker Conditionが指定されています。 ScanAreaと表示されていても、平面の認識だけではなく、指定されたARマーカを認識しないと次のステップに進まないので注意が必要です。後述しますが、「Walkthrough Relocalization Target」オブジェクトが対応しており、ここのInspectorを見るとMarker LibraryでUnity MARSの画像が指定されています。ここに指定されている画像を印刷しておきます。

私の場合、MARS SessionのInspectorで別のMarker Libraryを指定して、Unityのロゴを印刷しました。

ここを確認したら、Unityから対応するデバイスにデプロイします。

アプリを実行すると、Scan Areaという表示が出ます。

これが出たらカメラで周囲を見回しつつ、マーカ画像に近づけます。マーカの認識に成功すると次に進みます。

Next Step This Wayは、次のAR表示されている方向を示します。どこを見ても、常に次のAR表示されている場所を指すように動いてくれます。あとは画面の指示に沿って進めます。ARオブジェクトに近づく、ボタンを押すなどでステップが進みます。コンテンツを進めながら、Unity のTraining Factoryシーンを比較することで、どのような処理で進むかをイメージすることができるかと思います。

Simulation Viewで「Factory_180ftx101ft」を選択してからCameraアングルを調整すると、このように実行時の雰囲気を確認できます。

実機で確認するときは、これらの工場の風景は表示されないことに注意してください。

ボタンやテキストを視界に追随させる方法

ARコンテンツの場合、見てほしいところへ矢印を表示させたい、操作ボタンを常に目の前に表示させたいことがあります。Unity MARSでは、Proxy Forceという機能を利用することで、このように視点を移動させてもボタンが常についてくる機能を実現できます。

この機能の作成方法を解説します。

まず、Unityで新規シーンを作り、「Window」→「MARS」→「MARS Panel」から、blankを選択します。

「Sample - 'Put a cube on a real world position'」は使わないので削除します。

次に、MARS Session / Main Cameraで空のGameObjectを作成し、名前を「Camera Proxy Forces」とします。「Camera Proxy Forces」には、Inspectorから、「Proxy Forces」コンポーネントを追加します。

続いて、Hierarchy Viewで右クリックし、「UI」→「Canvas」を選択します。このCanvasを「canvas_for_button」とします。

Hierarchy Viewはこのようになります。

「canvas_for_button」には、「Canavs」、「Canvas scaler」、「Graphic Raycaster」がついていることを確認します。もしついていない場合は追加してください。

また、Canvas追加直後はこのように警告マークがついています。Render ModeをScreen Space -CameraからWorld Spaceに変更し、Event Cameraには、MARS SessionのMain Cameraを追加します。

この「canvas_for_button」に、「Proxy Force」、および「Proxy Alignment Forces」コンポーネントを追加します。「Proxy Aligment Forces」のTarget Proxyには、先ほどMain Cameraに追加した、「Camera Proxy Forces」をアタッチします。

続いて、「canvas_for_button」のRect Transformを以下のように変更して小さくします。

PosX: 0, PosY: -1.83, PoxZ: 0
Width: 100, Height: 100

この後、「canvas_for_button」で右クリックして「UI」→「Button – TextMeshPro」を選択してボタンを追加します。追加したボタンのRect Transformについて以下を設定します。

PosX: 0, PosY: 0, PoxZ: 0
Scale: 0.03, 0.03, 0.03

最終的に、「canvas_for_button」はこのようになります。

あとは実機にデプロイするとボタンがついてくることが確認できます。

今回説明したシーン「ProxyAlignmentForce_example」をunitypackageにまとめましたのでこちらのGitHubでご確認ください。
https://github.com/flushpot1125/UnityMARS_WalkthroughExample

ARコンテンツをステップ別に進行し、ステップごとに処理を実行する方法

「ステップ１：〜を表示。〜をしたらステップ２に遷移」のように、ARコンテンツをステップ別に実行させる方法として、Unity MARSではWalkthroughという仕組みを提供しています。

Walkthroughを使うことで、

Step1: sphereを表示し、ボタンを押したらStep2に遷移。ボタンとsphereは消える
Step2: メッセージテキストを表示する。5秒経ったらStep3に遷移
Step3: 完了メッセージテキストを表示する

といった具合に、ARコンテンツを実行できます。

私が調べた限り、ドキュメントやフォーラムにはWalkthroughの使い方に関する情報がなく、Training Factoryテンプレートでしか動作方法を確認できませんでした。そして、Training Facotryテンプレートでは多数のオブジェクトが階層別に入り組んでいてすぐに把握しづらいため、上記のような処理だけを実現する方法を解説します。

まず、Unityで新規シーンを作り、「Window」→「MARS」→「MARS Panel」から、blankを選択します。

「Sample - 'Put a cube on a real world position'」は使わないので削除します。ここまでの手順は、先ほどの「ボタンやテキストを追随させる方法」と同一です。

続いて、Hirarchy Viewで右クリック、Create Emptyを選択します。生成された空のGameObjectの名称は「Walkthrough」とします。「Walkthrough」を左クリックしてInspectorから「Walkthrough」コンポーネントを追加し、「Walkthrough」コンポーネントのsizeを3にします。

ここに表示されたElementの数がstepの数です。

続いて、「Walkthrough」オブジェクトを右クリックして、Create Emptyを3回実行します。それぞれ、「Step1 show sphere」、「Step2 show text」、「Step3 finish」とします。この3つのオブジェクトには、それぞれ「Walkthrough Step」コンポーネントを追加します。

3つとも「Walkthrough Step」コンポーネントをアタッチしたら、この3つを「Walkthrough」オブジェクトのElement0, 1, 2にアタッチします。

ここまで進めると、このようになります。

ではARとして表示させるオブジェクトを準備していきます。まずはStep1で表示するオブジェクトです。ARObjectsという名前で空のGameObjectを作ります。このオブジェクトの子にSphereを追加し、positionをx, y, z= 1, 1, 0、scaleをx, y, z=0.5, 0.5, 0.5としておきます。

続いて、ARObjectsを右クリックして、「UI」→「Canvas」を選択します。このCanvasを「canvas_for_button」とします。以下は先ほどのボタンが追随するときに作ったときと同じ手順です。

ここまででHierarchy Viewはこのようになります。

今度は、「Walkthrough」→「Step1 show sphere」オブジェクトのInsectorを開きます。「WalkthroughStep」コンポーネントの OnStepComplete()の「+」を選択して、「Sphere」を選びます。Functionの箇所でGameobject/SetActiveを選びます。「+」をもう一度選択して、「canvas_for_button」についても同じように設定します。これで、Step1が完了したとき、「Sphere」と「canvas_for_button」は見えなくなります。

ステップが進む条件として、「Step1 show sphere」で「Button Press Trigger」コンポーネントを追加します。Buttonの箇所には、「canvas_for_button」 / 「Button」をアタッチします。

この時点の「Step1 show sphere」のInspectorはこのようになります。

この時点で動作をみると、ボタンを押すことでsphereとボタンが消えることが確認できます。

次に、Step2で表示するテキストの準備をします。先ほど作った「canvas_for_button」で右クリックし、Duplicateを実行します。複製したオブジェクトを「canvas_for_text」と名称変更して、子についていたButtonオブジェクトを削除します。

「canvas_for_text」で右クリックし、「UI」→「Text -TextMeshPro」を選択してテキストを追加します。

「canvas_for_text」の子に追加された「Text (TMP)」は、このままだと大きすぎるので、以下のように各種の値を調整します。

続けて、「Walkthrough」 / 「Step1 show sphere」オブジェクトのInsectorを開きます。「WalkthroughStep」コンポーネントの OnStepBegin ()の「+」を選択して、「canvas_for_text」を選びます。Functionの箇所でGameobject/SetActiveを選びます。これで、Step1開始時は、「canvas_for_text」は見えなくなります。

「Walkthrough」 / 「Step2 show text」では、OnStepBegin ()の「+」を選択して、「canvas_for_text」を指定します。Functionの箇所でGameobject/SetActiveを選び、チェックマークをつけます。

ステップが進む条件として、「Step2 show text」で「Delay Trigger」コンポーネントを追加します。Delayは5とします。これで5秒経過後Step3に遷移します。

ここまでのStep1、Step2の動きを連続実行するとこのようになります。

なお、「This is Step2」というメッセージを追随させずに空間に配置したいときは、「canvas_for_text」にアタッチしている「Proxy Forces」と「Proxy Alignment Forces」コンポーネントのチェックを外します。

最後に、Step3で表示するメッセージを変える準備をします。メッセージのCanvasを新しく表示しても良いのですが、今回はStep2で作った「canvas_for_text」を使います。

「Walkthrough」/「Step3 finish」オブジェクトのInspectorでOnStepBegin ()の「+」を選択し、「canvas_for_text」/「Text (TMP)」を選択します。No functionと書かれている箇所を選択、「TextMeshProUGUI」→「string text」を選択します。テキスト入力欄が出てくるので、「New Step3. it's finished!」と入力します。

Step1、Step2、Step3の動きを連続実行するとこのようになります。

実機にデプロイした結果、事前シミュレーションと同じ動作をすることが確認できます。

今回はステップ別に表示、非表示を切り替える例で説明しましたが、OnStepBegin()とOnStepComplete()ではコンポーネント別に色々な関数を起動させることができるので、応用の幅が広いと思います。

今回説明したシーン「WalkthroughStep_example」をunitypackageにまとめましたのでこちらのGitHubでご確認ください。
https://github.com/flushpot1125/UnityMARS_WalkthroughExample

ARコンテンツのステップごとに表示オブジェクトを変更する方法

先ほどはWalkthrough StepコンポーネントのOnStepBegin ()とOnStepComplete()を使ってコンテンツが進むたびに表示を変更する方法を説明しました。

実はWalkthrough Stepコンポーネントの場合、Stepごとに表示されるオブジェクトを変えるだけであれば、Visualというプロパティで指定することでも実現できます。

先ほどの「WalkthroughStep_example」のARObjectsの子オブジェクトとしてCylinderとCapsuleオブジェクトを作成します。Scaleはいずれもx, y, zを0.5にしておきます。

続いて、「Step1 show sphere」オブジェクトの「Walkthrough Step」コンポーネントのVisuasのSizeを0から1に変更して、Element0にCylinderオブジェクトをアタッチします。

同様に、「Step2 show text」オブジェクトについてもSizeを0から1に変更して、Capsuleオブジェクトをアタッチします。

実行してみると、Step1ではCylinderだけが表示され、Step2に遷移するとCylinderが消えてCapsuleが表示されることが確認できます。

今回説明したシーン「WalkthroughStep_example2」をunitypackageにまとめましたのでこちらのGitHubでご確認ください。
https://github.com/flushpot1125/UnityMARS_WalkthroughExample

GUIメニューをレスポンシブ対応させる方法

ARコンテンツでは、目の前にオブジェクトが表示されるだけでなく、指示メニューや設定項目などが目の前のARとは関係なく表示される必要があります。また、ARコンテンツのGUIは、スマートフォンやタブレットなどの平面上に表示される場合と、HoloLens2やMagicLeapなどの空間上に表示される場合があります。Unity MARSでは、自分で作ったGUIに、「平面的なUI (Flat)」、「空間的なUI (Spatial)」の設定を行うことで、デプロイされたデバイスに応じたGUIを表示させることができます。

Training Factoryテンプレートには、Hierarchy Viewの「Responsive Device - Contains Menu」で実現されています。しかし、これは階層が深く、個別のオブジェクトにアタッチされているコンポーネントも多いので、一見すると何がどのような役割をしているかの把握が簡単ではありません。

たとえば、以下の画像の左側は「Responsive Device - Contains Menu」の階層構造の一部で、右側は「Responsive Device - Contains Menu」の子オブジェクトの１つである「Training UI」にアタッチされたコンポーネントです。

そこで、この記事では、Training Factoryテンプレートでレスポンシブ表示を実現している「Responsive Device - Contains Menu」を理解するためのTipsを紹介し、iPhone、iPad、HoloLens2で同一のシーンを実行した例を動画でお見せします。

「Responsive Device - Contains Menu」の子オブジェクトである「Training UI」が、レスポンシブ対応の中心となるオブジェクト

「Training UI」にアタッチされている「Walkthrough Menu」コンポーネントにGUI部品（1つにつき1つのCanvas）をアタッチされている

「Training UI」の子オブジェクトは、大きく3つに分けられる

具体的には「Main UI」、「Quick Nav Panel」、「Step Index Canvas」の3つです。それ以外のオブジェクトは、レスポンシブ部品です。

「Training UI」にアタッチされている「Copy Rect Transform Action」コンポーネントは、レスポンシブに影響する「Main UI」、「Quick Nav Panel」、「Step Index Canvas」と、これらの中にあるボタン「Next Button」、「Back Button」、「Step Index」表示が対応する

「Copy Rect Transform Action」コンポーネントでは、平面的UI (Flat)だったら、空間的UI (Spatial)だったら、という条件が指定されます。

ステップが進むたびに表示が変わるテキストは、「Training UI」の「Step Content Scroll」オブジェクトで描画されるように指定されている

具体的には、以下の画像の通りです。「Walkthrough」オブジェクトの子である、「Show Content on UI or World」のReparent Canvas Action”コンポーネントで定義されています。

これらに注意して「Responsive Device - Contains Menu」の中身を読んでいくと、レスポンシブ対応の方法が見えてくると思います。

それでは、iPhone、iPad、HoloLens2でTraining Factoryテンプレートを表示させたときの動作例です。テンプレートのままで特に変更はしていません。

■iPhone、iPad（Unity MARSではFlatとして識別されている）

■HoloLens2 （Unity MARSではSpatialとして識別されている）

このように、デバイスが変わっても、同じようにコンテンツが表示されていることが確認できます。また、FlatとSpatialでUIの表示内容は同じですが、Flatのときは画面に貼り付いているのに対して、Spatialのときは空間に貼りついていることも確認できます。

補足

Training Factoryをデバイスで実行するには、デバイスがImage markersに対応していることが必要です。しかし、こちらに記載のように、現状 Unity MARSではHoloLensのCamera Trackingにしか対応していません。そのため、上記のHoloLens2を使った動作確認ではGUIの表示確認のみとなっています。

＊機材協力：株式会社ホロラボ

おわりに

Unity MARSは独特の書き方が多いですが、いろいろと可能性を感じる仕組みです。また、AR Foundationがベースなので対応するデバイスも多く、今後のARコンテンツ開発に適していると思います。

機会あれば、Unity MARSのテンプレートの活用方法など、もう少し詳しい使い方の紹介をしたいと思います。

筆者紹介：Limes

Unity、XRなどに関連した分野を中心にイベント登壇、ブログ執筆などを行っています。 Ex-Unity Certified Developer (2016-2018) / Microsoft MVP for Development Technologies (2016/10-2018/6) / Windows Development (2018/7-) Ph. D.
・Blog：https://www.crossroad-tech.com/
・Twitter: https://twitter.com/WheetTweet

この記事はいかがでしたか？