Unity(Vuforia)でAndroid向けの簡単なAR表示アプリを作る方法

#はじめに

UnityでAndroid向けの簡単なAR表示アプリを作ります。
今回はマーカー画像を読み取って3Dモデルを表示できるようにします。
Unityのバージョンによってやり方が異なるようなので、本記事を参考にする際は下記の環境を参照してください。
また、本記事ではUnityが既にインストールされており、プロジェクト作成をできる状態を想定しています。





#環境

+ Windows10
+ Unity 2019.2.18f1
+ Android SDK & NDK Tools
+ Vuforia Endine AR 8.5.9 (ARコンテンツを作成するためのライブラリ)
+ Android 9.0





#必要な物

+ Unity (バージョンは上記の通り)
+ Android端末 (Androidの開発者モード設定などを済ませておく)
+ マーカーにする画像





#準備

Vuforia Engine ARというライブラリからDevelopment Keyを取得しておきます。



###アカウントの作成
[こちら](https://developer.vuforia.com/)からアカウントを作成します。



###Development Keyの取得

DevelopのLicense Managerというタブから`Get Development Key`をクリックします。
![Qiita1-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/bb867af5-e9dd-2cec-da78-73cf7acfb938.jpeg)



License名を入力して、ボックスにチェックを入れた後、`Confirm`してDevelopment Keyを作成します。
![Qiita1-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/9173d2d8-7ec8-cb3a-44dc-589ff60657f5.jpeg)



上手くいくと作成したKeyが表示されるので、クリックします。
![Qiita1-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/9c268175-8386-6031-722d-183b4a35f0bd.jpeg)



(画像では隠していますが)
License Keyが表示されているので、クリックしてコピーしておきましょう。
後ほどUnity上で使用します。(A)
![Qiita1-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/2f1e2ebb-21bf-794c-16bc-26a1823ca7fd.jpeg)



###Databaseの取得

DevelopのTarget Managerというタブから`Add Database`をクリックします。
![Qiita1-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/b903ad8a-4e99-9e06-47d6-810252bcfd3a.jpeg)



ポップアップ画面にDatabase名を入力して、`Create`でDatabaseを作成します。
![Qiita1-6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/73a6c98a-3f63-ff73-dc33-d9cd7ce6b109.jpeg)



作成したDatabaseをクリックします。
![Qiita1-7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/391cc5d9-7a4c-15b7-6add-6596936af60d.jpeg)



`Add Target`をクリックします。
![Qiita1-8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/2ee7b12e-f8cd-3b78-f04c-fbb8441af006.jpeg)



マーカーに使用する画像ファイルを選択して、`Width`(100で大丈夫)と`Name`を入力して`Add`をクリックします。
![Qiita1-9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/57b41d1d-9691-9e79-b2cf-3f57cb605ad1.jpeg)



作成したTargetを選択して、`Download Database`をクリックします。
![Qiita1-10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/b62d8f0a-33fb-32f4-fcf6-d34f23c579d6.jpeg)



ポップアップ画面上で、`Unity Editor`にチェックを入れてダウンロードします。
![Qiita1-11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/c13045d0-2534-956d-d71e-a0a203654d79.jpeg)



ダウンロードしたUnity package fileは後ほど使用します。(B)





#ARアプリの作成
UnityでARを実装していきます。



###UnityにAndroid SDK & NDK Toolsを追加

Unity HubからUnity 2019.2.18f1にモジュールを追加します。
![Qiita1-12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/a101c5a5-cd93-a265-e35e-db44c7610860.jpeg)



`Android Build Support`と`Android SDK & NDK Tools`にチェックを入れて、実行します。
![Qiita1-13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/15c9625b-1f38-2c48-c14a-dbe1ab20fd7a.jpeg)



これでAndroid SDK & NDK Toolsが追加されました。



###Unityでプロジェクトを作成、設定

Unity 2019.2.18f1で3Dを選択し、プロジェクト名を入力してプロジェクトを作成します。
![Qiita1-14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/1594a360-5e0f-2277-a522-d27c0aa9b7fd.jpeg)



まずは、Vuforia Engine ARをインストールします。
`Window > Package Manager`をクリックします。
![Qiita1-15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/be0599e3-eca2-f1b3-8e72-4b518b5f297d.jpeg)



Vuforia Engine ARを開いて、Installします。
![Qiita1-16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/879fc001-5167-df17-3383-fbc8af26b670.jpeg)



HierarchyウィンドウからMain Cameraを削除します。



続いて、下記の2つのGameObjectを追加します。

+ `GameObject > Vuforia > AR Camera`
+ `GameObject > Vuforia > Camera Image > Camera Image Target`

![Qiita1-17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/414561a2-804d-b72d-115a-0ab3ebf5bee0.jpeg)



表示したい3Dオブジェクトを作成します。
ここでは、`GameObject > 3D Object > Sphere`を作成し、ImageTargetに対してドラック&ドロップすることで子オブジェクトにしています。
※この時、SphereのInsrectorウィンドウから`Transform > Scale`のxyzを小さくしておくと良いです。(ここではすべて1にしておきます)
![Qiita1-18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/2dcb124a-ea13-18e8-e885-c6a8f514c3e3.jpeg)



次は、`File > Build Settings`を開きます。



PlatformにAndroidを選択して、右下の`Switch Platform`をクリックします。
UnityのロゴがAndroidの横に表示されるようになったら、左下の`Player Settings`をクリックします。
![Qiita1-19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/ac26e136-e614-3970-f130-268193fb637c.jpeg)



Playerタブにて、`Company Name`と`Product Name`を入力。
![Qiita1-20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/85b0c47c-f11b-7300-c117-765cf8f205f5.jpeg)



`Other Settings > Rendering`からVulkanを選択して削除。
![Qiita1-21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/8d5244f2-c0cb-de0b-858a-aad220fb9d47.jpeg)



`XR Settings > Vuforia Augmented Reality Supported`にチェック。
![Qiita1-22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/a2fdd49b-b2c5-a31c-83fe-62e05b50ce29.jpeg)



###Vuforiaの設定

HierarchyウィンドウからARCameraを選択し、Inspectorウィンドウの`Vuforia Behaviour > Open Vuforia configuration`をクリック。
![Qiita1-23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/28a974aa-b9a4-3e0f-9b22-c320c1c5d3de.jpeg)



`Global > App License Key`の欄に取得したLicense Key(A)を入力します。
![Qiita1-24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/0ad1b986-435c-1c59-0c66-a6e3cc82aa19.jpeg)



次に、先程ダウンロードしたUnity package fileを開きます。
![Qiita1-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/876b555d-77d8-d75c-a431-eb6fc7c1b062.png)



Importします。
![Qiita1-26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/36fa33d3-80ae-40b1-e86b-cff3165ef7b6.jpeg)



Hierarchyウィンドウから`ImageTarget`を選択し、Inspectorウィンドウの`Image Target Behaviour > Type`を`Predefined`に変更。
新たに表示される`Database`と`Image Target`に登録した情報を選択します。
![Qiita1-27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/d16e4e23-7423-f6ab-2a9a-8f2c6a4df3e5.jpeg)



###AndroidアプリのBuild And Run

`File > Build Settings`を開きます。



`Add Open Scenes`をクリックして、作成したSampleSceneが表示されていることを確認します。
確認出来たら、Android端末とPCを接続して右下の`BUild And Run`をクリックしてください。
![Qiita1-28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/7c8f7022-c63d-7b03-2c5b-408d7afd1dff.jpeg)



ポップアップ画面では保存するapkファイル名を入力して、保存します。
![Qiita1-29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/782ce839-775a-1441-0a73-4c592dc0b1fb.jpeg)



しばらく待つとAndroid端末にアプリがインストールされます。!





#アプリの作動確認

###マーカーの用意

使用した画像を印刷するなどして、マーカーを準備しましょう。



作成した名前のアプリをAndroid端末上で起動し、カメラをマーカーに向けてみます。



きちんと表示されれば成功です。
![Qiita1-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589812/d46eaadb-3216-371d-8be7-0aa88d0618f7.png)