Vuforia EngineとUnityで楽々AR体験（後編）

:::note warn
この記事は2021年1月21日に弊社ブログにて公開された記事の移植記事となります。
:::

# 前編まとめ
Vuforia Engine登録～Vuforia側でUnity Projectを出力するところまでを[前編ブログ](https://qiita.com/penguin3-dev/items/4258d56b2716306d4a6a)でお伝えしました。

# 完成目標（再掲）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/25ae2421-bb9a-857b-04a5-4114380f82cc.png)
ARマーカーの上に、何かキャラクターがポンっと出てくるようなモバイルアプリを作成してみたい！

# Unityインストール作業
## Unityをインストールする
もうPCにUnity Hub、Unityはインストール済みだしUnity IDもとっくの昔に取得してるぜ、という方は以下の「Unityバージョンの選び方」をチラ見して頂いた後、「プロジェクト作成」までジャンプお願いします。
### Unity IDを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/c3c6f3f9-bb62-ec35-cd39-8cff8aa9e6f0.png)

[Unity ID](https://id.unity.com/ja/login)画面より、自分のメールアドレス・任意のパスワード・任意のユーザーネーム・フルネーム（本名でなくてもよい）を入力してください。ユーザーネーム入力欄以下の、「Unityサービス利用規約・Unityプライバシーポリシー」を読み、チェックを入れましょう。赤線で囲った部分は必須入力です。

　その下の、Unityからのマーケティングやプロモーション情報を受け取るかどうかのチェックは任意なので、Unityの最新情報が欲しい！という方はチェックを入れましょう。「私はロボットではありません」にチェックを入れて「Unity IDを作成」を押下してください。

<br>

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/a955c8fe-0cc5-24eb-915b-52d777ba5580.png)

上画像のようなメールがUnityから登録したメールアドレス宛に届きます。メールなんて届かないんだが？という場合、迷惑メールフォルダの確認、正しいメールアドレスを入力したか、再度確認してみましょう。

　メール本文の[Link to confirm email]をクリックし、確認しましょう。下画像のサインイン画面に飛んだら正しくUnity IDが発行されています！

<br>

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/683452cb-8c65-f76f-4cb8-0b1a13413e92.png)

### Unity Hubのダウンロード

Unity IDが発行出来たら、[Unity Hubをダウンロード](https://unity.com/ja/download)しましょう！

　UnityソフトそのものをPCにダウンロードしたらいいんじゃないの？いえいえ、Unityのバージョン更新頻度が高いのに加え、「アップデートしたら動かなくなった！」という場合、ちょっと困ったことになってしまいます。

　Unity Hubは、複数のバージョンのUnityの管理が可能なのです！バージョンをあえて下げたり、エラーが修正されたバージョンまで上げたり、LTSバージョンに対応させたり等々…

 <br>

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/ec78d565-96b7-b1bb-5488-1126f82a397e.png)

Unity Hubのインストーラーを起動し、ライセンス契約書に「同意」します。

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/9821eff3-abe0-2414-3add-a4068a16cbaa.png)

インストール先を確認して、「インストール」を押下します。この時、インストール先にこだわりがある方は好きなフォルダを選択してください。すると、Unity Hubのインストールが始まるはずです。

### Unity バージョンの選び方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/0534fc3a-24b6-f065-2a7d-84142c0e01be.png)

Unity Hubのインストール画面を開きます。右上青ボタンの「インストール」から、Unityのインストールを行いましょう。

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/0f670375-ef34-3948-e1c5-71b6e1ecb2c4.png)
>2020/12/22現在のスクリーンショット

Long Term Support（LTS）版がおススメです。名前の通り長期サポートが付くバージョンで、公式から2年間は毎月そのLTSバージョンの更新が入ります。他には緑枠線で囲ったように、バージョンのナンバリングが一番高いもの（最新のもの）がおススメです。様々なバグや不可思議な挙動が修正されている（可能性が高い）ことが理由に上げられます。

Unity LTS版の公式ドキュメントは以下引用部分をご覧ください。
>We’re committed to supporting 2019.4 LTS releases with biweekly updates until mid-2021, after which updates will be monthly until May 2022 (two years after the initial release date). These updates will only cover usability fixes aimed at improving the stability of the product to enable users to ship their projects.

>2019.4 LTSリリースを2021年半ばまで隔週更新でサポートし、その後は2022年5月（最初のリリース日から2年後）まで毎月更新することを約束しています。これらのアップデートは、ユーザーがプロジェクトを出荷できるように製品の安定性を向上させることを目的としたユーザビリティの修正のみを対象とします。

## Unityをインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/47cae67c-4f87-e628-6bc7-bc855b4a12e5.png)

最終的にこのプラットフォームで使いたい！というようなお好みのビルド先（Android, iOS, UWPなど）をチェックで選択し、「実行」または「INSTALL」を選択します。※PCの空き容量には余裕をもって行いましょう！

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/c16836fb-2ce1-e835-1006-c81e37358089.png)

Unity バージョン（2018.x.xxx）では「Vuforia Augmented Reality Support」のチェックを忘れないようにしましょう！

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/a5a27730-cb5a-dd6c-ce22-4d610dc2eadc.png)

インストールが終わるのをアフタヌーンティーでもしながらのんびり待ちましょう。

# Unity側の作業（Unity 2019.4.16.f1）
## プロジェクト作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/ed9bc238-50eb-237c-9b43-de6ee3b62d2e.png)

Unity Hubの「新規作成」ボタンから新しいプロジェクトを作成しましょう！Unityのバージョンを選びたい場合は、新規作成の右隣の▼から、該当のバージョンを指定しましょう。※本記事で使うUnityのバージョンは、【2019.4.16.f1】です。

「3D」のテンプレートを選択、お好きなプロジェクト名、プロジェクトの保存先ディレクトリを設定して「作成」を押下してください。

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/5ffcc612-2b2e-4208-2b85-0f70bd808f26.png)

新しいプロジェクトが始まりました！ここに手を加えて思い通りのARアプリを作成しましょう！

### Vuforiaパッケージのインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/3f4ac403-dd64-bf22-0d7b-87b0fc41e0f2.png)

画面上部の「Window」タブ→「Package Manager」を選択します。新しいウィンドウが開きますので、検索窓にVuforiaと打ち込みましょう。検索結果に出てきた「Vuforia Engine AR」を「Install」してください。

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/75564d12-af0e-48bd-3ef8-e0b3270893bc.png)

>In order to use Vuforia, you need to agree to the terms below.
…
if you do not agree to all the terms and conditions of the Vuforia Developer Agreement, then you must not retain or in any manner use any of the software.

>Vuforiaをご利用いただくには、以下の条件に同意していただく必要があります。
　…（詳しい利用規約はView in Browserを確認してねの意）…　
“Vuforia Developer” 契約のすべての条件に同意しない場合は、ソフトウェアを保持したり、いかなる方法でも使用してはなりません。

Vuforiaのアカウント作成時に利用規約は確認していますので、「Accept」を選択します。Unity＋Vuforia、悪用厳禁です！

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/cd0af66b-addb-2dc5-17b9-ea29baf46061.png)

「Unity Projectを出力」で出力したファイルをダブルクリック、またはUnity画面のHierarchyウインドウにファイルをドラッグ＆ドロップします。上画像のような画面が開きますので、全てにチェックが入っているのを確認して「Import」をクリックします。

### AR用カメラの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/697a6eff-ddc0-f80f-ad0d-865ae643349b.png)

画面のHierarchyウインドウの「Main Camera」を「右クリック」で開くタブから「Delete」を選択します。Hierarchyウインドウの中で「右クリック」→「Vuforia」→「AR Camera」を選択して、VuforiaからサポートされているAR用カメラを追加しましょう。

### マーカー画像を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/94fdef9e-c04d-c667-1cf4-378d955a68e6.png)

Hierarchyウインドウの中で「右クリック」→「Vuforia」→「Image」を選択します。Vuforiaで登録した画像が画面に出てきましたね！　

### 表示するオブジェクトの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/3c80f474-c3af-a19d-c9b5-961a29f60416.png)

Hierarchyウインドウの中で「Create」→「3D Object」→「Sphere」を選択して球を生成し、マーカーの上に移動します。（見えやすくするために球を色づけています）

　ここで一つ重要なポイントがあります！マーカー上に表示するオブジェクトはマーカー画像の子要素にする必要があります。

　HierarchyウインドウでSphereをImage Targetにドラッグして子要素に設定しましょう。

 ### ライセンスキーを設定する
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/e7efd4e6-844e-f581-b49c-9cc4e514df69.png)

Hierarchyウインドウで「AR Camera」を選択した状態で、Inspectorウインドウから「Vuforia Behavior」タブの→「Open Vuforia Configration」をクリックします。

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/636d950a-1735-fceb-60de-291ecd008019.png)

「Developer Keyを取得」でコピーしておいたLicense Keyをペーストし、「Add License」を押下します。


## 完成したものがこちら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/b6ba851b-d41e-b96b-89b6-d788dc651986.png)

ARマーカーを印刷、または携帯でこの記事のARマーカー部分を表示したもののご用意をお願いします。さあ、Unity画面上部中央の【▶】ボタンを押してPC内蔵のカメラでアプリの動作を確認してみましょう！

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/b21c3bab-c0b9-3efc-aaab-39cebf848e05.png)

カメラの角度をこう…ARマーカーが映るように調整しつつ…。球が出てきました！ARマーカーを動かしたり回転させるとマーカーの動きに追従して球も動いていることが確認できるかと思います。


## おまけ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/bc9fbdbc-5ffd-291b-87ed-faeaf57bcaed.png)

一番最初に挙げたような完成目標通り、ペンギンをARマーカーの上に浮かせてみます！昔ブログで書いたようにインストールしたblenderで、可愛いペンギンをなんとなくモデリングして…。それをUnityにエクスポートして…。

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/705c5fb7-dc62-3dc8-d84b-c62dd7a65202.png)

かわ…！いい…かは置いておいて、完成目標の通りにARマーカーの上にペンギンが表示されました！ARマーカーをくるくる回してみると、ペンギンもくるくる回るのが確認できます。


# 所感
前後編とボリューム多い記事でしたが、一回VuforiaとUnityの設定を終わらせてしまえば、次回以降サクサクとアプリのビルドまで終わらせることが出来ると思います！その際は、本記事の「Vuforiaアカウント作成」や「Unity, Unity Hubのダウンロード」等を飛ばして再度ご覧頂けたら嬉しいです。

　ARマーカーを好きな画像に変えたり、登場させる3Dオブジェクトを自分で作ったり他のDLサイトなどからダウンロードして自在に変えたり、自分の思う通りのAR体験を作ることが　”Vuforia + Unity”　では可能になっています。ただし、**商用リリース時にはVuforiaの有償ライセンスの購入が必要**なのでご注意ください！（大切なことなので二回）